@font-face {
    font-family: 'BentonSansBBVA book';
    src: url("../fonts/BentonSans-Book_sOT.otf");
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: 'BentonSansBBVA Bold';
    src: url("../fonts/BBVABentonSans-Bold.otf");
    font-style: normal;
    font-weight: 700
}
@font-face {
    font-family: 'BentonSansBBVABook';
    src: url("../fonts/BentonSansBBVA-Book.otf");
    font-style: normal;
    font-weight: 500
}
@font-face {
    font-family: 'BentonSansBBVABook Italic';
    src: url("../fonts/BentonSansBBVA-BookItalic.otf");
    font-style: normal;
    font-weight: 400
}
@font-face {
    font-family: 'BentonSansBBVA Light';
    src: url("../fonts/BentonSansBBVA-Light.otf");
    font-style: normal;
    font-weight: 200
}
@font-face {
    font-family: 'BentonSansBBVA Medium';
    src: url("../fonts/BentonSansBBVA-Medium.otf");
    font-style: normal;
    font-weight: 400
}
@font-face {
    font-family: 'BentonSansBBVA Medium Italic';
    src: url("../fonts/BentonSansBBVA-MediumItalic.otf");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: 'TiemposHeadline Bold';
    src: url("../fonts/tiempos-headline/TiemposHeadline-Bold.otf");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: 'Tiempos Headline Bold Italic';
    src: url("../fonts/tiempos-headline/tiempos-headline-bold-italic.woff2");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: 'Tiempos Headline Bold';
    src: url("../fonts/tiempos-headline/tiempos-headline-bold.woff2");
    font-style: normal;
    font-weight: 400
}

/* .step-container{
    padding-top: 2rem !important;
} */

/*INICIO MODULO REGISTRO*/

/* .prueba {
    position: absolute;
    top: 116px;
    left: 40px;

} */
.control-label3 {
    position: absolute;
}

.txt_header_close{
    Size: 12px;
    height: 16px;
    color: #070E46;
    font-family: 'BentonSansBBVABook';
    white-space: nowrap;
    /* Opcional: Asegura que el contenedor de la imagen y el texto se muestre en línea */
    display: inline-block;
    letter-spacing: 0;
    margin-left: auto;
}

.headerCloseIcon {
    max-width: 30px;
    max-height: 30px;    
}
    
.headerRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


.headerReclamosReg {
    background-color: #fff;
    display: flex;
    flex-direction: row !important;
    /* position: fixed !important; */
    width: 100% !important;
    justify-content: space-between;
    align-items: center;
    max-width: 1182px;
    margin: 0 auto;
    z-index: 10 !important;
    height: 72px;;
    
}

#headerLogo {
    max-width: 300px !important;
    height: 100px !important;
    padding-left: auto;
    top: 3px;
    cursor: pointer;
    max-height: 20px;
    justify-content: flex-start;
}


.headerLeft{
    max-width: 100% !important;
    width: 218.19px !important;
    height: 24px !important;
    top: 6.09px !important;
}
.headerRight {
    font-size: 16px;
    font-weight: 500;
    font-family: 'BentonSansBBVA Medium';
    margin-left: auto;
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
    padding-left: 6rem;
    gap: 32px;
}

.txt_IconLock {
    Size: 12px;
    height: 16px;
    color: #070E46;
    font-family: 'BentonSansBBVABook';
    white-space: nowrap;
    /* Opcional: Asegura que el contenedor de la imagen y el texto se muestre en línea */
    display: inline-block;
    padding-bottom: 4rem;
    padding-left: 2rem;
    letter-spacing: 0;
}
.headerIconLock{
    max-width: 15 px;
    max-height: 11px;
    white-space: nowrap;
    /* Opcional: Asegura que el contenedor de la imagen y el texto se muestre en línea */
    display: inline-block;
    padding-right: 5px;
    margin-bottom: 3px;
    /* left: 0%;
    top: 3px; */
}

.visibilityIcon{
    max-width: 15 px;
    max-height: 11px;
    white-space: nowrap;
    /* Opcional: Asegura que el contenedor de la imagen y el texto se muestre en línea */
    display: inline-block;
    padding-right: 5px;
    margin-bottom: 3px;
    /* left: 0%;
    top: 3px; */
}



.txt_header_provinet {
    Size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
    font-family: 'BentonSansBBVA';
    color: #070E46;
}

.txt_grl_15 {
    Size: 15.01px !important;
    line-height: 24px !important;
    letter-spacing: 0% !important;
    font-family: 'BentonSansBBVABook' !important;
    color: #070E46 !important;
    font-weight: 350 !important;
}

/* .content{
    padding-top: 0.5rem;    
} */

    /* 🎨 Estilos para coincidir con la imagen de destino */
    .step1-register-container {
        /* 1. ANULAR EL ANCHO */
        max-width: 100% !important;
    }

    /* Estilo del contenedor para el select e input de datos */
    .form-container {
/* DISEÑO VISUAL */
    background-color: #F7F8F8; /* Usé el primero (más claro), cámbialo a #f4f4f4 si prefieres el otro */
    border-radius: 16px;       /* 16px se ve más moderno y suave que 8px */
    padding: 2rem;             /* Equivale a 32px aprox. Buen espacio para móvil y desktop */
    width: 100%;               /* Ocupa todo el ancho disponible */
    height: auto !important;   /* CRÍTICO: Obliga a la caja a crecer si metes más inputs */
    min-height: 100%;
    }

    .centerContainer {
        padding-top: 1rem;
        padding: 24px;
    }

    /* Estilo para el H1 "Ingresa tus datos" */
    .titulo1 {
        color: #002a5c;
        font-weight: 600;
        font-size: 36px;
    }

    /* Estilo para el texto "1 de 3" */
    .step-counter {
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    /* Separador horizontal */
    .header-hr {
        border-top: 1px solid #dee2e6;
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
    }

    /* Caja de información */
    .info-box {
        background-color: #FFF5E5 !important;
        border-radius: 16px !important;
        padding: 1rem !important;
        color: #070E46 !important;
        font-family: 'BentonSansBBVA Light' !important;
        font-size: 15.01px !important;
    }

    .info-box a {
        color: #004a9b;
        text-decoration: none;
    }

    .info-box a:hover {
        text-decoration: underline;
    }

    .formInputSlect {
        width: 90% !important;
        height: 56px !important;
        max-width: 600px !important;
        /* border-radius: 6px !important; */
        /* padding: 8px 16px !important; */
        border:2px solid #46536D !important;
    }
    .formInputSlect:focus {
        box-shadow: none !important;
    }

    .form-label {
        color: #495057;
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .align-with-form {
        margin-right: auto;
        margin-top: 1rem;
    }


    .counterBadge {
        width: 55px;
        height: 24px;
        background-color: #ffffff;
        border-radius: 16px;
        font-family: 'BentonSansBBVABook Italic' !important;
    }

    .formHeadline {
        size: 32px !important;
        font-family: 'TiemposHeadline Bold' !important;
        color: #070E46 !important;
        text-align: left !important;
        font-weight: 700 !important;
    }


    @media (max-width: 767px) {
        .info-box {
            min-width: 100% !important;
            min-height: 56px;
        }
    }

    @media (max-width: 570px) {
        .headerReclamos {
            height: auto !important;
            padding-bottom: 15px;
            align-items: flex-start;
        }

        /* .headerRow {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            width: 100% !important;
        } */

        .headerRight {
            margin-left: 0 !important;
            margin-top: 12px !important;
            width: 100%;
            justify-content: flex-start;
            padding-right: 0;
        }

        /* .headerCloseIcon {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        } */


    }

/*************************************INICIO CONTROL DEL BOTON wizardNext y wizardBack *****************************************************/
.wizard .button-bar {
    margin-top: -11.8%;
}
    #wizardBack{
        display: none;
    }

    #wizardNext {
        font-size: 0 !important; 
        
    }

    #wizardNext::after {
        content: "Continuar";
        font-size: 15.01px; 
    }

    .wizardNext.disabled, .wizardNext[disabled], 
    fieldset[disabled], .wizardNext, .btnNormal,.step3-btn.disabled, .step3-btn[disabled] {
        max-width: 136px;
        height: 56px;
        border: none !important;
        color: white !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        cursor: pointer;
        outline: none !important;
        align-items: center !important;
        gap: 10px !important;
        overflow: hidden !important;
        background: #001391 !important;
        background-size: 210% 100% !important;
        background-position: 100% 0 !important;
        transition: background-position 0.4s ease-out !important;
        margin-bottom: 15px;
    }


/*************************************FIN CONTROL DEL BOTON wizardNext *****************************************************/





/***********************************************texto para el step 2 de los iconos tipo pass*******************************************************/

.text-password{
    font-family: 'BentonSansBBVA Medium' !important;
    font-size: 24px !important;
    color: #070E46 !important;
    line-height: 32px !important;
}


/********************************************* ESTILOS DE LOS INPUT CON LOGICA *****************************************************/




    /* Contenedor de iconos */
    .input-icons {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 12px;
        z-index: 3;
        align-items: center;
    }

    .icon-btn-img {
        width: 18.73px;
        height: 18.73px;
        cursor: pointer;
        user-select: none;
    }

    /* Ocultar inicialmente la X */
    #btnBorrarCajero {
        display: none;
    }


    /*** clase padre para centrar****/

    .centerContent{
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center;     /* Centra verticalmente */
    }

    .centerContent-vertical{
        display: flex;
        flex-direction: column; /* Apila los elementos verticalmente */
        justify-content: center; /* Centra el grupo verticalmente */
        align-items: center;     /* Centra cada elemento horizontalmente */
        gap: 15px;               /* Crea espacio entre los botones/elementos */
    }

    .centerContent-children {
        padding: 10px 20px;
        width: fit-content;      /* El botón solo ocupa lo que necesita su texto */
    }


    /****************************************ESTILOS ERRORES****************************************************/


    .errorHeadline {
        font-size: 48px !important;
        font-family: 'TiemposHeadline Bold' !important;
        color: #070E46 !important;
        text-align: center !important;
        font-weight: 700 !important;
        line-height: 56px !important;
    }


    .errorInfo {
        font-family: 'BentonSansBBVABook' !important;
        font-size: 15.01px !important;
        line-height: 24px !important;
        color: #070E46 !important;
        font-weight: 350 !important;
    }


    /***********************************************estilos para step clave digital*******************************************************/

.input-container-main {
        width: 100%; 
        max-width: 600px; 
        margin: 40px auto; 
        
        /* 4. Opcional: un pequeño padding lateral para que no toque los 
              bordes del celular en pantallas muy pequeñas */
        padding: 0 15px; 
        box-sizing: border-box; /* Asegura que el padding no sume al ancho total */
    }

    /* El resto del código (.input-wrapper, etc.) se mantiene igual */
    .input-wrapper {
        width: 600px;
        position: relative;
        border-radius: 12px;
        background-color: #FFFFFF;
        height: 56px;
        transition: all 0.2s ease;
        display: flex;
        align-items: flex-end;
        padding: 0 12px;
		border: 2px solid #47536d;
    }

    /* Estilo del Input */
    #claveDigital {
        width: 100%;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        font-size: 12px;
        color: #070E46;
        z-index: 2;
		letter-spacing: 6px;
		padding-top: 20px;
    }

    /* Estilo de la Etiqueta (Label) */
    .input-label {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: #46536D;
        transition: all 0.2s ease;
        pointer-events: none;
        z-index: 1;
        padding-bottom: 38px;
    }

    /* Efecto de subida de la etiqueta */
    #claveDigital:focus + .input-label,
    #claveDigital:not(:placeholder-shown) + .input-label {
        top: 8px;
        transform: translateY(-50%);
        font-size: 11px;
        color: #46536D;
        font-weight: 600;
    }

    /* .input-wrapper:focus-within {
        border-color: #004481;
        box-shadow: 0 0 0 1px #004481;
    } */

    /* Contenedor de iconos */
    .input-icons {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 12px;
        z-index: 3;
        align-items: center;
    }

    .input-icons-2 {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 25px;
        z-index: 3;
        align-items: center;
        padding-right: 30px;
    }

    .icon-btn-img {
        width: 18.73px;
        height: 18.73px;
        cursor: pointer;
        user-select: none;
    }

    /* Ocultar inicialmente la X */
    #btnBorrarCajero {
        display: none;
    }

	/******css para texto del codigo es un solo uso*****/
	/* Contenedor del texto de ayuda */
    .helper-text {
        font-size: 13px;
        color: #1d265a; /* Azul marino BBVA Provincial */
        text-align: left;
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    /* Estilo para el icono de información (la "i" en el círculo) */
    .info-circle {
        border: 1.5px solid #1d265a;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-style: normal;
        font-size: 11px;
        font-weight: bold;
        margin-right: 8px;
        flex-shrink: 0; /* Evita que el círculo se deforme */
    }


.claveDigbtn:hover:not(:disabled) {
    background-color: #070E46 !important;
}

.claveDigbtn:hover{
    background-color: #070E46 !important;
}

#msjConfirmarTiempo{
    font-family: "BentonSansBBVA book" !important;
    text-align: -webkit-center;
    font-size: 15px;
    color: #070E46;
    text-align: center;
    margin: auto;
    line-height: 24px;
    font-weight: 350 !important;
}

#msjTiempoExpirado{
    font-family: "BentonSansBBVA book" !important;
    text-align: -webkit-center;
    font-size: 15px;
    color: #070E46;
    text-align: center;
    margin: auto;
    line-height: 24px;
    font-weight: 350 !important;
}