* { box-sizing: border-box; }
body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: url('../assets/img/mujerft.jpg') no-repeat center center fixed;
    background-size: cover;
}
.login__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    gap: 1.5rem;
}
.login__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 750px; 
    border-radius: 10px;
    text-align: center;
    animation: fadeIn 0.5s ease-in-out;
    position: relative;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.login__logo { max-width: 120px; margin-bottom: 20px; }
h2 { font-weight: 700; color: #333; margin-bottom: 15px; }
p { font-weight: 400; color: #666; margin-bottom: 25px; }
.form__group { margin-bottom: 20px; text-align: left; }
.form__input label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; font-size: 14px; }
.input {
    display: flex; align-items: center; border: 1px solid #ddd;
    border-radius: 8px; padding: 10px; background: #fff;
    width: 100%; transition: border-color 0.3s ease;
}
.input:focus-within { border-color: #007bff; }
.input__icon { margin-right: 10px; width: 20px; color: #666; }
.input-short {
    flex: 1; border: none; outline: none; padding: 10px 0;
    font-size: 14px; width: 100%; background: transparent;
}
.input select.input-short {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
}
.form__button { margin-top: 20px; }
.form__button .button-primary {
    background: #007bff; color: #fff; border: none; padding: 12px 20px;
    border-radius: 8px; cursor: pointer; transition: background 0.3s ease;
    width: 100%; font-size: 16px; font-weight: bold;
}
.form__button .button-primary:hover { background: #0056b3; }
.login__return {
    position: absolute; top: 20px; left: 20px; font-size: 20px;
    color: #007bff; text-decoration: none; transition: color 0.3s ease;
}
.login__return:hover { color: #0056b3; }
.toggle-password { background: transparent; border: none; cursor: pointer; padding: 0 5px; color: #666; }
.social__networks {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 1rem 0 0; width: 100%; max-width: 450px; border-radius: 10px; margin-bottom:-32px;
}
.social__networks a { color: rgb(0, 0, 0); font-size: 1.5rem; transition: color 0.3s; }
.social__networks ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
.social__networks-icons a:hover {color:#4f81b6}
.footer__text { color: rgb(0, 0, 0); font-size: 0.9rem; text-align: center; margin-top: 1rem; }
.login__link { display: block; text-align: center; font-size: 0.9rem; color: #007bff; text-decoration: none; margin-top: 1rem; }
.login__link:hover{ color: #0056b3; text-decoration: underline; }
.form__row {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;
    margin-bottom: 20px;
}

.form__row .form__group {
    flex: 1 1 calc(50% - 10px);
    min-width: 150px; 
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .login__wrapper { padding: 1.5rem 1rem; gap: 1rem; }
    .login__container { padding: 20px; width: 100%; max-width: 100%; }
    .login__logo { max-width: 80px; }
    .form__button .button-primary { font-size: 14px; }
    .social__networks { width: 100%; padding: 1rem 0 0; max-width: 100%; }
    .input { padding: 8px; }
    .input__icon { width: 16px; }
    .input-short { font-size: 13px; padding: 8px 0; }
    .form__input label { font-size: 13px; }
    .form__row {
        flex-direction: column;
        gap: 0; 
    }
    .form__row .form__group {
        flex: 1 1 100%;
        min-width: unset;
        margin-bottom: 20px;
    }
    .select2-container--default .select2-selection--single {
    height: 49px; /* Ajusta la altura si es diferente a tu .input */
}
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
/* --- Estilos para los elementos Select (corregido) --- */

/* 1. Estilo para el select en sí */
.input select.input-short {
    /* Ocultar la flecha por defecto */
    appearance: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    cursor: pointer;
    
    width: 100%;
    border: none;
    background: transparent;
    
    /* Aumentar padding a la derecha para dar espacio a la flecha custom */
    padding: 10px 30px 10px 0; 
    font-size: 14px;
}

/* 2. Contenedor específico para el select, necesario para posicionar la flecha custom */
.form__input .input {
    position: relative; /* Base para el posicionamiento absoluto */
}

/* 3. Estilo para la flecha personalizada (SOLO en contenedores que contienen un SELECT) */
.form__input .input:has(select.input-short)::after {
    content: "\f078"; /* Código de Font Awesome para un chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900; 
    position: absolute;
    right: 15px; /* Ajustar posición a la derecha */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Asegura que el click pase al select */
    color: #666;
    font-size: 12px;
}

/* Nota: El selector ':has()' asegura que el pseudo-elemento ::after solo se aplique
al contenedor '.input' que realmente tiene un '<select>' dentro.
(Este selector es ampliamente soportado en navegadores modernos). */

/* 4. Estilos Adicionales para el Select */

/* Color para el placeholder (Selecciona, Tu nivel, etc.) */
select.input-short:required:invalid {
    color: #666; 
}

/* Color para las opciones reales */
select.input-short option:not([value=""]) {
    color: #333; 
}

/* 5. Ajuste en media query para el tamaño de la flecha en móvil */
@media (max-width: 768px) {
    .form__input .input:has(select.input-short)::after {
        right: 10px;
        font-size: 10px;
    }
}
/* 1. Estiliza el contenedor principal de Select2 para que se parezca a tu .input */
/* El contenedor generado es .select2-container--default .select2-selection--single */
.select2-container--default .select2-selection--single {
    /* Imitar el estilo de tu clase .input */
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 58px; /* Ajusta la altura si es diferente a tu .input */
    padding: 7px 10px; /* Ajusta el padding para centrar el texto */
    transition: border-color 0.3s ease;
}

/* 2. Estilo al hacer foco (focus) */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #007bff; /* Color de foco */
    outline: 0;
}

/* 3. Estilizar la lista desplegada (las opciones) */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #007bff; /* Color de fondo al hacer hover */
    color: white;
}

/* 4. Estilizar el icono de la flecha */
.select2-container .select2-selection__arrow b {
    border-color: #666 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px; /* Estilo de flecha */
}

/* 5. Asegurar que el select esté dentro del .form__input correctamente (manejo de iconos) */
.form__input {
    /* Necesitas hacer que el select2 se comporte como el input-short, pero hay que adaptarlo */
    display: flex; /* Para alinear el icono de la izquierda y el select2 */
    align-items: center;
    gap: 10px; /* Espacio entre el ícono y el select2 */
}

/* Aísla el label y el select2 dentro del .form__input si moviste el ícono */
/* Si mantuviste la estructura con el ícono y el select2 al mismo nivel: */

/* Es mejor mantener tu icono original y solo estilizar el contenedor Select2: */
.form__input .select2-container {
    flex-grow: 1; /* Permite que Select2 ocupe el espacio restante */
    margin-bottom: 0;
}
/* Ocultar el ícono de flecha que Select2 genera si quieres usar solo el Font Awesome de la izquierda */
/* Esto es avanzado, pero si quieres usar solo el icono .input__icon: */
/* .select2-container--default .select2-selection__arrow { display: none; } */
@media (max-width: 768px) {
    .select2-container--default .select2-selection--single {
    height: 49px; /* Ajusta la altura si es diferente a tu .input */
    }
}