/* Standard Mobile (375px a 500px) */
@media (min-width: 375px) and (max-width: 500px) {
		.titulo-modal, 
		.text-modal, 
		.text-modal2,modal-body button {
			text-align: center;
		}

        .close {

            margin-right: 10px;
            margin-top: 10px;
        }
        #wizardRegButton{
            margin-top: -40px;
        }
        .step-container
        {
            width: 95vw!important;
        }
        .imgrecup
        {
            width: 90vw!important;
            display: flex !important;
            flex-direction: column !important; /* Esto fuerza el orden vertical */
            align-items: center;               /* Opcional: centra los hijos horizontalmente */
        }

    .form-horizontal .getCedula {
        position: relative !important;
        padding-top: 50px !important;
        overflow: visible !important;
        background-color: #f5f7fa;
        border-radius: 16px;
        height: 320px;
        width: 100%;
    }

    .peque-cuadro {
        position: relative !important;
        display: flex !important;
        display: flex;
        width: 95vw;
        margin-top: -10px !important;
        padding-bottom: 20px !important;
        padding-left: 25px !important;


    }


    .parrafo-peque {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        padding-left: 5px !important;
    }

    .step-indicator {
        order: 2 !important;
        margin: 0 0 10px 0 !important;
        width: fit-content !important;
    }

    .formHeadline {
        order: 3 !important;
        margin: 0 0 20px 0 !important;
        text-align: left !important;
    }

    .bbva-select-wrapper, 
    .input-wrapper-step1 {
        order: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }

    .login-sidebar {
        width: 100% !important;
        order: 5 !important;
        margin: 0 !important;
    }

    .notification {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        position: static !important;
        margin: 0 !important;
        display: block !important;
    }

    .wizard .button-bar {
        order: 6 !important;
        width: 100% !important;
        margin: 25px 0 0 0 !important; 
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    #wizardNext {
        width: auto !important;
        min-width: 90vw !important;
        float: none !important;
    }

    .wizard-progress-bar {
        display: none !important;
    }

    .rstep1btn {
        margin-top: -180px; /*control del boton continuar*/
    }


    .headerReclamosReg {
        height: auto !important;
        padding: 15px 0 !important;
        background-color: #fff !important;
        margin-bottom: -80px; /*acorta el banner hacia abajo para que se vea bien en mobile*/
        margin-top: -30px; /*acorta el banner hacia arriba para que se vea bien en mobile*/
    }

    .headerRow {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        position: relative !important; 
        width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
    }

    .headerLeft {
        max-width: 180px !important;
        margin-bottom: 10px !important;
        float: none !important; 
    }

    .headerRight {
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        display: block !important; 
        font-size: 14px;
    }

    .txt_header_close {
        display: block !important;
        font-family: "BentonSansBBVABook", Arial, sans-serif !important;
        font-size: 14px !important;
        color: #070E46 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .headerCloseIcon {
        position: absolute !important;
        top: 0 !important;
        right: 16px !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
    }
    
    #headerLogo {
        max-height: 24px !important;
        width: auto !important;
    }

    .form-group {
        padding: 1rem;
    }

    
        /* ==========================================================================
    Para modal del step1
    ========================================================================== */
    
    #miModal .modal-content {
        width: 90% !important;
        margin: 30px auto !important;
    }
    #miModal .modal-header.modal-body {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
    }
    #miModal .parte1 { width: 100% !important; }
    #miModal .parte2 { display: none; }

    .boton-modal {
        
        margin-left: 30% !important;
        width: 120px !important;
        height: 50px !important;
    }

    

    .titulo-modal {

        font-size: 40px;
        margin-bottom: 30px;
    }

    p {
        font-size: 13px!important;
    }

    .close {
        float: right;
        font-size: 42px;
        line-height: 1;
        color: #001391;
        font-family: 'BentonSansBBVA Light';
    }

    .modal-content .modal-body {
        padding-left: 40px;
        padding-right: 0px;
    }

    #titulo1 {
        font-size: 26px !important;

    }

    
        /* ==========================================================================
        step 2 
    ========================================================================== */

    .formHeadline {
        order: 1 !important;
        margin: 0 !important; 
        text-align: left !important;
        font-size: 22px !important;
        padding-left: 5px !important;
    }

    .boton-cerrar {
        order: 2 !important;
        cursor: pointer !important;
        width: 20px !important; 
        height: 20px !important;
    }
    
    .img21 {
        width: 158px;
        height: 158px;
    }
    .img12 {
        width: 158px;
        height: 158px;
    }


    td {
        height: 57%!important;
        width: 27%!important;
        padding-top: 1%!important;
    }

    #Registro-step2 .sub-step {
        margin: 10px 25px auto !important;
    }

    .verdatos {
        height: 550px;
    }

    .text-password {
        font-size: 20px !important;
    }


    p.tx-dat.mensajesAEM {
        font-size: 12px!important;
    }

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

    .messagesAEM p {
        /* margin-top: 5px !important; */
        font-size: 16px !important;

    }   
    .img-text {
         margin-top: 1% !important;
    }

    #Registro-step2 .sub-step {
        height: 600px;
        margin: 3vw !important;
    }

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

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

    .imagenesssss {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }

    .img-text {
        font-size: 28px;
    }

    .messagesAEM {
        margin-top: 1em;
    }

    .info-message {
        font-size: 12px !important;
    }

    .peque-clave {
        margin-left: 0px;
    }

    .clave-error-peque {
        margin-top: 0px!important;
        margin-left: 20px!important;
        margin-bottom: 0px !important;
        font-size: 11px !important;
    }

    .info-message {
        font-size: 11px !important;
        margin-top: 5px!important;
        margin-left: 0px!important;
    }

    .peque-cuadro2 {
        margin-top: 25px;
    }
    
    /* ==========================================================================
    Inicio Clave de acceso
    ========================================================================== */


    .mega-content{
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }


    .notification {
        max-width: 350px;
    }

    .form-control {
        width: 100%;
    }

    label.esp {
        margin-left: 10px;
    }

    .wrapped-CmbClave {
        display: block;
    }

    .form-horizontal .esp {
        font-size: 10px;
        margin-top: -36px;
    }


    .wizardNext.disabled, .wizardNext[disabled], fieldset[disabled], .wizardNext, .btnNormal, .step3-btn.disabled, .step3-btn[disabled] {
        width: 100% !important;
    }

    /* ==========================================================================
    Mensaje de cierre de sesion
    ========================================================================== */

    .modal-content {
        width: 80vw;
        min-height: 720px;
        height: 100%;

    }

    .modal .modal-content .modal-box {
        margin-top: 20px;
    }

    .modal-title {
        font-size: 36px !important;
    }

    .exp-btn {
        margin-top: 0%;
    }

    [class*=block-] {
        padding: 0px 0px;
    }

    /* ==========================================================================
    Mensaje de advertencia antes de cerrar sesión
    ========================================================================== */


    .modal-title1 {

        font-size: 36px;
    }

    .exp-txt {
        font-size: 12px!important;
     
    }

    .inner-info {
        margin: 0px;
    }
    #msjConfirmarTiempo {

        margin-right: 10%;
    }

    .texp-btn {
        margin-left: 10% !important;
    }

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

    .errorWizard {

        display: flex;
        flex-direction: column;
    }

    .ocultar {
        margin: auto;
    }

    .erbtn10{
        margin-left: 44%!important;
        margin-top: -50px;
    }
        /* ==========================================================================
    Msg error: no podemos continuar  
    ========================================================================== */

    .errorWizard {

        display: flex;
        flex-direction: column;
    }

    .ocultar {
        margin: auto;
    }

    .erbtn10{
        margin-left: -0%!important;
        margin-top: -280px;
        width: 100%;
    }

    .parraF2 {
        margin-top: -30px;
    }

    /* ==========================================================================
    Msg error: Datos incompletos
    ========================================================================== */
    .erbtn12 {
        width: 100%;
    }


    /* ==========================================================================
    Msg error: Datos ingrsados son incorrectos
    ========================================================================== */

    .erbtnMod1 {
        width: 100%;
    }

    .title100 {
        font-size: 40px;
    }

    /* ==========================================================================
    Step4 Bienvenida
    ========================================================================== */
    #idBotonVolver{
        width: 100%;
    }
}