/* Small Desktop (1024px a 1440px) */
@media (min-width: 1024px) and (max-width: 1440px) {


    .wizard .button-bar {
        margin-left: 60px !important;
    }

    #wizardRegButton{
        margin-top: -20px;
        padding-top: 0px;
    }

    .form-horizontal .getCedula {
        width: 740px;
        margin-right: 0px;
        background-color: #f5f7fa;
        border-radius: 16px;
  }
    .login-sidebar {
        width: 392px;
        display: flex;
        /* flex-direction: column; */
        gap: 2rem;
    }

        .step-container
    {
        width: 100vw!important;
    }
    /* .imgrecup
    {
        width: 90vw!important;
    } */

        .step-container {
        /* Forzamos a que el ancho deje de ser 1207px */
        width: 100% !important; 
        max-width: 1207px !important; /* Mantenemos el máximo original para Large Desktop */
        
        /* Forzamos a que el alto sea flexible y no fijo en 390px */
        height: auto !important; 
        min-height: 390px !important; 
        
        margin: 0 auto !important;
        display: block !important; /* O 'flex' si necesitas alinear hijos */
        box-sizing: border-box !important;
    }


    /* ==========================================================================
   FIX MODAL LEGACY - SIN TOCAR HTML
   ========================================================================== */

    /* 1. Forzamos al contenedor principal a dejar de ser rígido */
    #miModal .modal-content {
        width: 95% !important;        /* Adiós a los 1177px fijos */
        max-width: 1100px !important;  /* Límite para pantallas grandes */
        height: auto !important;       /* Permite que el contenido lo estire */
        min-height: auto !important;
        margin: 5% auto !important;    /* Lo centra y soluciona el error del lado izquierdo */
        left: 0 !important;
        right: 0 !important;
        border-radius: 1.5rem !important;
    }

    /* 2. Convertimos el header/body en un contenedor flexible sin cambiar etiquetas */
    #miModal .modal-header.modal-body {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;     /* Si no caben, se apilan */
        justify-content: center !important;
        align-items: center !important;
        padding: 2rem !important;
    }

    /* 3. Liberamos la columna de texto (parte1) */
    #miModal .parte1 {
        width: 55% !important;         /* Adiós a los 760px fijos */
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 1rem !important;
    }

    /* 4. Ajustamos la columna de la imagen (parte2) */
    #miModal .parte2 {
        width: 40% !important;
        text-align: center !important;
    }

    #miModal .img-modal {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* .wizard .button-bar {
        display: flex !important;
        justify-content: space-between; 
        align-items: center;           
        padding: 15px;                 
        float: none !important;        
        margin-left: 0px !important; 
    } */

    /* #wizardNext {
        margin-left: -750px;
    } */
    /* ==========================================================================
    Para modal del step1
    ========================================================================== */

    #miModal .modal-content {
        width: 85% !important;
        max-width: 1100px !important;
        margin: 50px auto !important;
        left: 0 !important; /* Fix desbordamiento izquierdo */
    }
    #miModal .modal-header.modal-body {
        display: flex !important;
        justify-content: space-around !important;
    }
    #miModal .parte1 { width: 55% !important; }
    #miModal .parte2 { width: 40% !important; }


    

    /* ==========================================================================
    Inicio step2
    ========================================================================== */


    p.tx-dat.mensajesAEM {
        margin-top: 0%!important; /**fix para un error de posicionamiento**/
    }

    .wizard .button-bar {
        margin-top: -150px;
    }



    /* ==========================================================================
    Inicio clave digital
    ========================================================================== */

    .messagesAEM p {
        margin-top: 12px !important;
    }   


    #Registro-step2 .sub-step {
        height: 655px;
    }

    .claveDigbtn {
        margin-top: -20px;
    }

    .timer-container {
        width: 135px;
        height: 135px;
        position: relative;
        margin: 0px auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }



    /* ==========================================================================
    Inicio Clave de acceso
    ========================================================================== */


    .mega-content{
        max-width: 650px !important;
        margin: 0px !important;
    }

    /* .modal-dialog2 {
        width: 100% !important;
        margin: 0 auto !important;
    } */

    .notification {
        max-width: 450px;
    }

    .step3-rsp{
        width: 90vw!important;
    }

    .wrapped-CmbClave{
		display: flex;
		column-gap: 3rem;
		margin-top: 46px;
	}

    
    /* ==========================================================================
    Msg error: no podemos continuar  
    ========================================================================== */

    .errorWizard {

        display: flex;
        flex-direction: column;
    }

    .ocultar {
        margin: auto;
    }

    .erbtn10{
        margin-left: 44%!important;
        margin-top: -50px;
    }

        /* ==========================================================================
    Sesion cerrada
    ========================================================================== */


    .modal-title {
        padding-top: 80px;
    }

    /* * {
        outline: 2px solid red;
    } */
}