/**
 * @file index_styles.css
 * @description Estilos específicos de la pantalla de Inicio de Sesión
 *              (Index.html). El maquetado original no contenía ningún
 *              bloque <style> embebido; este archivo se crea para cumplir
 *              con la Separación de Responsabilidades (SoC) del proyecto y
 *              alojar cualquier regla CSS específica de esta pantalla.
 *
 * Referenciado desde:
 *   Index.html  →  <link rel="stylesheet" href="css/index_styles.css">
 */

/* =========================================================================
   TIPOGRAFÍA BASE
   ========================================================================= */

body {
    font-family: 'Manrope', sans-serif;
}

/* =========================================================================
   MATERIAL SYMBOLS (variación de fuente)
   ========================================================================= */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

/* =========================================================================
   TRANSICIÓN ENTRE ESTADOS (Selector de Perfil ↔ Formulario de Login)
   ========================================================================= */

@keyframes index-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes index-slide-in-right {
    from { opacity: 0; transform: translateX(1rem); }
    to   { opacity: 1; transform: translateX(0); }
}

#role-selection.animate-in {
    animation: index-fade-in 0.3s ease-out;
}

#login-section.animate-in {
    animation: index-slide-in-right 0.3s ease-out;
}