/* ================================
   ESTILOS COMUNES PARA LOGIN Y REGISTRO
   ================================ */

.titulo {
    font-size: 300%;
    text-align: center;
    margin-top: 2%;
    margin-bottom: 5%;
}

.logoBAE {
    height: 100%;
    width: 100%;
}

.logoCE {
    height: 98%;
    width: 95%;
}

#frmLogin, #frmRegistro {
    margin-top: 0 !important;
}

h4 {
    color: #004679;
    font-size: 1.4rem;
    padding: .5rem 0 1rem;
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: "roboto", sans-serif;;
}

.form-group label {
    font-size: 1.2rem !important;
}

.form-control {
    font-size: 0.85rem !important;
    font-weight: bold !important;
}

/* enable absolute positioning */
.inner-addon {
    position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
}

/* align glyph */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

.warning-icon {
    /* Ajustar el tamaño y posición del icono dentro del div */
    font-size: 48px;
    margin-bottom: 10px; /* Espacio entre el icono y el texto */
    color: #f9a825; /* Color del icono de advertencia (amarillo) */
}
#email::placeholder {
    text-transform: none;
}
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.logo-container img {
    max-width: 100%;
    height: auto;
}
legend {
    position: relative;
    top: 0;
    color: #3C3C3C;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    z-index: 1;
    opacity: .8;
    background-color:#E4E3D0; /* Fondo blanco */
    padding: 5px; /* Espaciado interno para el contenido del título */
    border: 2px solid #dee2e6; /* Borde medio grueso */
}
.wrap { max-width: 980px; margin: 10px auto 0; }
#steps { margin: 80px 0 0 0 }
.commands { overflow: hidden; margin-top: 30px; }
.prev {float:left}
.next, .submit {float:right}
.error { color: #b33; }
#progress { position: relative; height: 5px; background-color: #eee; margin-bottom: 20px; }
#progress-complete { border: 0; position: absolute; height: 5px; min-width: 10px; background-color: #337ab7; transition: width .2s ease-in-out; }
.fieldset-legend {
    color: #3C3C3C;
    font-size: 18px;
    font-weight: bold;
}
.logo-butia {
    background-image: url('../../../../public/assets/images/butia_logo_bajada.jpg') !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 373px; /* Ajusta el tamaño del logo */
    height: 81px;  /* Ajusta el tamaño del logo */
    margin-top: -40px;
    margin-left: -35px;
}
.logo-butia-sitio-no-disponible {
    background-image: url('../../../../public/assets/images/butia_logo_bajada.jpg') !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 373px; /* Ajusta el tamaño del logo */
    height: 81px;  /* Ajusta el tamaño del logo */
    margin-top: -40px;
    margin-left: -20px;
}
/* =============================================
   3) AJUSTES ADICIONALES PARA BOOTSTRAP-SELECT
   ============================================= */
/* El botón interno que genera .dropdown-toggle */
.bootstrap-select .dropdown-toggle.btn {
    border: none !important;         /* sin doble borde */
    box-shadow: none !important;
    background-color: #fff !important;
}

/* Flecha de despliegue (caret) */
.bootstrap-select .dropdown-toggle .caret {
    border-top: .4em solid #555 !important;
    border-right: .3em solid transparent !important;
    border-left: .3em solid transparent !important;
}

/* La etiqueta interna (.filter-option) */
.bootstrap-select .dropdown-toggle .filter-option {
    border: none !important;
    padding: .375rem .75rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
/* Estilo para el título de Solicitar Becas */
.solicitar-becas-title {
    color: #FFA500; /* Mismo color que el botón para armonía */
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}
/* Clase específica para ajustar el padding del texto en el select */
.padding-left-20 {
    padding-left: 20px !important;
}

.auto-form-wrapper > h4 {
    text-align: center;       /* Centra el texto */
    color: #3C3C3C;           /* Cambia el color al mismo que el botón */
    font-size: 1.5rem;        /* Ajusta el tamaño del texto según desees */
    font-weight: bold;
    margin-bottom: 20px;      /* Espaciado inferior para separación */
    margin-top: -20px;
}
/* Cambiar el color del botón submit */
.btn-custom {
    background-color: #ec7f2a; /* Color personalizado */
    border-color: #d48800; /* Bordes del mismo color */
}

/* Opcional: Cambiar color al pasar el ratón sobre el botón */
.btn-custom:hover {
    background-color: #f9a825; /* Un tono más oscuro al hacer hover */
    border-color: #f9a825;
}
@media (max-width: 576px) {
    .logoBAE,
    .logoCE,
    .logo-container,
    .logo-butia {
        display: none !important; /* Ocultar el logo en pantallas menores a 576px (dispositivos móviles) */
    }
}
/* Unifica color de fondo de los iconos del input-group */
.input-group-text {
    background-color: #fff !important;
    border-color: #ccc !important;
}
.error-summary {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 14px;
    position: relative;
}
.error-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}
.close-summary {
    background: none;
    border: none;
    color: #721c24;
    font-size: 16px;
    cursor: pointer;
}
.error-summary-content {
    margin-top: 10px;
}

/* 1- Ajustar el ancho de la columna para pantallas < 1400 px */
@media (max-width: 1399.98px) {          /* xl y abajo */
    .auth .col-lg-4 {
        flex: 0 0 50%;                      /* ocupa el 80 % del row */
        max-width: 50%;
    }
}
@media (max-width: 991.98px) {           /* lg pasa a md */
    .auth .col-lg-4 {
        flex: 0 0 95%;
        max-width: 95%;
    }
}


/* 3- Alternativa: reducir el padding de los iconos en pantallas pequeñas */
@media (max-width: 575.98px) {
    .input-group .mdi { left: 6px; }
    .form-control,
    .bootstrap-select .dropdown-toggle {
        padding-left: 32px;                 /* de 40 px a 32 px */
    }
}

@media (max-width: 1199px) {
    .auth .col-lg-4 {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .logo-butia-sitio-no-disponible {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }
    .navbar-brand.brand-logo {
        display: block;
        margin: 0 auto;
        padding: 0;
        width: 373px;
    }
}

/* Mejorar responsive para tablets */
@media (max-width: 991px) {
    .auth .col-lg-4 {
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .container-fluid.page-body-wrapper {
        padding: 15px !important;
    }
}

/* Mejorar responsive para móviles grandes */
@media (max-width: 768px) {
    .auto-form-wrapper {
        margin: 15px !important;
        padding: 30px 20px !important;
    }

    .row.w-100 {
        margin: 0 !important;
        padding: 0 10px !important;
    }
}

/* Mejorar responsive para móviles medianos */
@media (max-width: 576px) {
    .auto-form-wrapper {
        margin: 10px !important;
        padding: 25px 15px !important;
    }

    .form-group {
        margin-bottom: 20px !important;
    }

    .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .col-6:last-child {
        margin-bottom: 0 !important;
    }

    .text-center.navbar-brand-wrapper {
        margin-bottom: 15px !important;
    }

    .row.mt-4 {
        margin-top: 20px !important;
    }
}

/* Mejorar responsive para móviles pequeños */
@media (max-width: 480px) {
    .auto-form-wrapper {
        margin: 5px !important;
        padding: 20px 10px !important;
    }

    .form-group {
        margin-bottom: 15px !important;
    }

    .input-group .form-control {
        padding-left: 35px !important;
        padding: 10px 12px 10px 35px !important;
    }

    .bootstrap-select .dropdown-toggle {
        padding-left: 35px !important;
    }

    .input-group i {
        left: 8px !important;
        font-size: 20px !important;
    }
}

/* Mejorar responsive para landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .auth.auth-bg-1 {
        min-height: auto !important;
        padding: 10px !important;
    }

    .auto-form-wrapper {
        margin: 10px auto !important;
    }
}

/* Mejorar responsive para muy pequeñas pantallas */
@media (max-width: 360px) {
    .auto-form-wrapper {
        padding: 15px 8px !important;
    }

    .solicitar-becas-title {
        font-size: 1.5rem !important;
    }

    .btn-custom.submit-btn {
        padding: 10px !important;
        font-size: 0.9rem !important;
    }
}

/* Asegurar que el formulario no se corte en pantallas pequeñas */
@media (max-height: 600px) {
    .auth.auth-bg-1 {
        min-height: auto !important;
        padding: 20px 10px !important;
    }

    .auto-form-wrapper {
        margin: 10px auto !important;
    }
}

/* Mejorar scroll en selects largos */
@media (max-width: 576px) {
    .bootstrap-select .dropdown-menu {
        max-height: 200px !important;
    }
}

/* Asegurar que todo el contenido sea visible */
.container-fluid.page-body-wrapper {
    overflow-x: hidden !important;
}

/* Mejorar alineación en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .form-control,
    .bootstrap-select .dropdown-toggle {
        min-height: 44px !important; /* Tamaño mínimo para touch */
    }

    .btn-custom.submit-btn {
        min-height: 44px !important;
        font-size: 1rem !important;
    }
}

/* Divisor sutil */
.login-divider{
    display:flex; align-items:center; gap:10px; margin:10px 0 8px;
    color:#7a7a7a; font-size:.93rem;
}
.login-divider::before,.login-divider::after{
    content:""; flex:1; border-top:1px solid #e6e6e6;
}

/* Bloque Ceibal minimal */
.ceibal-inline{
    display:flex; align-items:center; justify-content:center;
    gap:0;               /* ya no hay caption, no necesitamos gap */
    margin-top:6px;
    text-align:center;   /* extra por si algún navegador ignora flex */
}
.ceibal-mark{ width:80px; height:auto; }  /* probá 80 / 72 / 64 según te guste */

/* (Opcional) si querés que al pasar el mouse tenga un feedback leve */
.link-ceibal:hover .ceibal-mark{ transform:translateY(-1px); transition:transform .12s ease; }

/* menos espacio debajo del botón principal */
.auto-form-wrapper .row.mb-3 {
    margin-bottom: 8px !important;   /* antes ~16px */
}
.auto-form-wrapper .row.mb-3 .form-group {
    margin-bottom: 0;                 /* por si .form-group agrega margen */
}

/* divisor y bloque ceibal más compactos */
.auto-form-wrapper .login-divider {
    margin: 6px 0 4px;                /* antes 10px 0 8px */
}
.auto-form-wrapper .ceibal-inline {
    margin-top: 2px;                  /* antes 6px */
}

/* (opcional) botón un poquito más fino en alto */
.auto-form-wrapper .submit-btn {
    padding-top: .6rem;
    padding-bottom: .6rem;
}




@media (max-width: 479px) {
    .logo-butia-sitio-no-disponible {
        width: 100%;
        aspect-ratio: 373 / 81;
        height: auto;
    }

    .navbar-brand.brand-logo {
        width: 95%;
        margin: 0 auto;
        padding: 0;
    }
}

/* ================================
   ESTILOS ESPECÍFICOS PARA REGISTRO
   ================================ */

.funkyradio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.funkyradio-grid div {
    display: flex;
    align-items: center;
}

.funkyradio-grid label {
    margin-left: 8px;
    font-size: 1rem;
    line-height: 1.2;
}


#opcionesTrans {
    margin-top: 10px;
}

#opcionesTrans .funkyradio {
    display: flex;
    gap: 10px;
    align-items: center;
}

#opcionesTrans label {
    margin-left: 8px;
}

/* ================================
   AJUSTES PARA CORREGIR EL POSICIONAMIENTO DEL SELECTPICKER EN PANTALLAS PEQUEÑAS
   ================================ */

@media (max-width: 576px) {
    /* Ajustar el padding del botón dropdown-toggle para que no se desplace */
    .bootstrap-select .dropdown-toggle {
        padding-left: 10px !important;
        padding-right: 10px !important;
        /* Opcional: si el problema persiste, forzar la posición */
        position: static !important;
        /* Opcional: si el problema persiste, ajustar el margen */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Asegurar que el texto dentro del selectpicker no tenga padding excesivo */
    .bootstrap-select .dropdown-toggle .filter-option {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


fieldset {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border: 0 !important;
}


.form-group:has(#acuerdo),
.form-group:has(#terminos) {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}


#acuerdo,
#terminos {
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    vertical-align: middle;
}


label[for="acuerdo"],
label[for="terminos"] {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    margin-left: 0.5rem;
}
/*@media (max-width: 480px) {
    .auto-form-wrapper {
        visibility: hidden;
    }
}*/

@media (max-width: 767.98px) {
    .auto-form-wrapper {
        padding: 28px 24px 26px 24px !important; /* más espacio a los costados */
        border-radius: 16px !important;
    }

    /* Un poquito de aire horizontal para el contenido interno */
    .auto-form-wrapper > * {
        margin-left: 4px;
        margin-right: 4px;
    }

    /* Que el título y la alerta respiren un poco mejor */
    .auto-form-wrapper h1.solicitar-becas-title,
    .auto-form-wrapper h1.consultar-becas-title {
        margin-bottom: 12px;
    }

    .auto-form-wrapper .alert {
        margin-top: 14px;
        margin-bottom: 14px;
    }
}

/* ============================================================
   CORRECCIÓN FECHA DE NACIMIENTO (STACKING EN MÓVIL/TABLET)
   ============================================================ */
@media (max-width: 991.98px) {
    .form-group.col-sm-4:has(#dia),
    .form-group.col-sm-4:has(#mes),
    .form-group.col-sm-4:has(#anio) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Ajuste opcional: si el último elemento (Año) deja mucho espacio abajo */
    .form-group.col-sm-4:has(#anio) {
        margin-bottom: 5px !important;
    }
}
/* ==========================================
   CORRECCIÓN VISUAL PARA EMAIL LARGO
   ========================================== */
#email {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding-right: 30px !important;
    text-overflow: ellipsis;
}

/* Opcional: Si el usuario hace clic, mostramos el texto crudo sin puntos suspensivos */
#email:focus, #email:active {
    text-overflow: clip !important;
}

/* ==========================================================================
   SOLUCIÓN DEFINITIVA DE ESPACIO (Apilar campos en Laptops/Tablets/Móviles)
   Aplica a pantallas de hasta 1400px (cubre laptops estándar de 1366px)
   ========================================================================== */
@media (max-width: 1399.98px) {
    .form-group.col-sm-4:has(#dia),
    .form-group.col-sm-4:has(#mes),
    .form-group.col-sm-4:has(#anio) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }
    .form-group.col-sm-4:has(#anio) {
        margin-bottom: 5px !important;
    }
    .form-group:has(#sexo),
    .form-group:has(#email) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
/* ==========================================================================
   REDISTRIBUCIÓN INTELIGENTE DE COLUMNAS (35% Género / 65% Email)
   Aplica solo cuando están en la misma fila (pantallas > 576px)
   ========================================================================== */

@media (min-width: 576px) {

    /* 1. Columna de GÉNERO: La achicamos al 35% */
    /* "Masculino/Femenino" entra de sobra en este espacio */
    .col-sm-6:has(#sexo),
    .form-group.col-sm-6:has(#sexo) {
        flex: 0 0 35% !important;
        max-width: 35% !important;
    }

    /* 2. Columna de EMAIL: La agrandamos al 65% */
    /* Le damos todo el espacio que le quitamos a género */
    .col-sm-6:has(#email),
    .form-group.col-sm-6:has(#email) {
        flex: 0 0 65% !important;
        max-width: 65% !important;
    }

    /* 3. Ajuste de seguridad extra para el Input de Email */
    /* Reducimos un poco el padding derecho y la letra para asegurar que entre */
    #email {
        font-size: 13px !important;     /* Letra un poco más chica */
        padding-right: 20px !important; /* El tick verde ocupa menos espacio */
        letter-spacing: -0.2px;         /* Juntamos las letras imperceptiblemente */
    }
}


@media (max-width: 768px) {

    .form-group {
        margin-bottom: 25px !important;
    }

    .input-group.es-select {
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
        background-color: #fff !important;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        padding: 0 !important;
        position: relative;
        overflow: visible !important;
    }

    .input-group.es-select .bootstrap-select .dropdown-toggle.btn {
        font-family: "roboto", sans-serif !important;
        font-weight: bold !important;
        font-size: 0.85rem !important;
        color: #495057 !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;

        width: 100% !important;
        height: auto !important;
        min-height: 45px !important;

        display: flex;
        align-items: center;
        margin: 0 !important;
        padding-left: 8px !important;
    }
    .input-group.es-select .bootstrap-select .dropdown-toggle .filter-option {
        flex: 1 1 auto;
        min-width: 0;
    }
    .input-group.es-select .bootstrap-select .dropdown-toggle .filter-option-inner,
    .input-group.es-select .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .input-group.es-select .bootstrap-select .dropdown-toggle.btn:focus,
    .input-group.es-select .bootstrap-select .dropdown-toggle.btn:active {
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .input-group.es-select .input-group-prepend .input-group-text,
    .input-group.es-select .input-group-append .input-group-text,
    .input-group.es-select .input-group-text {
        border: 0 !important;
        background-color: transparent !important;
        display: flex;
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .input-group.es-select .bootstrap-select .dropdown-menu {
        width: 100% !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
        margin-top: 2px !important;
    }

    .input-group.es-select .bootstrap-select {
        margin-top: -1px;
    }

    .input-group.es-select {
        margin-bottom: 0 !important;
    }

    .input-group.es-select + .input-group.es-select {
        margin-top: -1px;
    }
}

#ceibalContactInfo .col-12 {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Esto fuerza todo a la izquierda por defecto */
}

/* El texto introductorio ocupa todo el ancho para intentar quedar en una linea */
#ceibalContactInfo > .col-12 > p {
    max-width: 100%;
}

#ceibalContactInfo .contact-item {
    display: flex;
    align-items: center;
    margin: 8px 0;
    width: 100%;
    /* Mantenemos esto para que los iconos no viajen muy lejos en pantallas gigantes,
       pero el texto de arriba sí puede ser ancho */
    max-width: 500px;
}

#ceibalContactInfo .contact-icon {
    width: 28px;
    text-align: center; /* El icono sí va centrado en su cajita */
    flex-shrink: 0;
    font-size: 1.2rem;
}

#ceibalContactInfo .contact-text {
    flex: 1;
    line-height: 1.4;
    text-align: left !important;
    padding-left: 10px;
}

@media (min-width: 768px) {
    #ceibalContactInfo .contact-text {
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    #ceibalContactInfo .contact-text {
        white-space: normal;
        font-size: 0.95rem;
    }
}