.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: 4%;
}

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.jpg') !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 144px; /* Ajusta el tamaño del logo */
    height: 56px;  /* Ajusta el tamaño del logo */
    margin-top: -20px;
}

/* Estilo para el título de Gestión Becas */
.gestion-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;
}
.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;
}

/* =============================================
   1) ESTILO POR DEFECTO PARA SELECTS AISLADOS
   ============================================= */
/* Aplica cuando el <select> no está en un input-group */
.selectpicker.form-control,
.dropdown-toggle.form-control {
    border: 1px solid #ccc !important;        /* borde estándar */
    border-radius: 0.25rem !important;        /* esquinas redondeadas */
    background-color: #fff !important;
    box-shadow: none !important;
}

/* =============================================
   2) CUANDO HAY input-group,
      FUSIONAR BORDES CON LOS ÍCONOS
   ============================================= */
.input-group .selectpicker.form-control,
.input-group .dropdown-toggle.form-control {
    /* Quita el borde lateral en los costados contiguos a los íconos */
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;    /* sin esquinas (las esquinas las tienen los íconos) */
}

/* Ícono a la izquierda:
   Quitamos su borde derecho y le damos radio en la esquina izquierda */
.input-group .input-group-prepend .input-group-text {
    border-right: none !important;
    border-radius: 0.25rem 0 0 0.25rem !important;
}

/* Ícono a la derecha:
   Quitamos su borde izquierdo y le damos radio en la esquina derecha */
.input-group .input-group-append .input-group-text {
    border-left: none !important;
    border-radius: 0 0.25rem 0.25rem 0 !important;
}

/* =============================================
   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;
}

/* 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;
}
/* En lugar de solo .col-lg-4 */
@media (max-width: 1399.98px) {
    .auth .col-lg-5 {
        flex: 0 0 60%;       /* ajusta al % que necesites */
        max-width: 60%;
    }
}
@media (max-width: 991.98px) {
    .auth .col-lg-5 {
        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 */
    }
}