.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;
    }
}
@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;
    }
}