/* ============================================
   KLYNEA Dashboard - Estilos Base
   ============================================ */

/* --- VARIABLES CSS ---
   Piensa en las variables como "apodos" para los colores.
   En vez de escribir #1a1a2e cada vez, escribes var(--primary).
   Si mañana quieres cambiar el color principal, solo lo cambias ACÁ
   y se actualiza en TODA la app automáticamente.
   
   Se definen dentro de :root que significa "todo el documento".
*/
:root {
    --primary: #1a1a2e;        /* Azul oscuro - color principal, transmite seriedad */
    --primary-light: #16213e;  /* Azul oscuro más claro - para hover y fondos */
    --accent: #0f3460;         /* Azul medio - para botones y elementos activos */
    --accent-hover: #533483;   /* Morado - cuando pasas el mouse por encima */
    --success: #4ecca3;        /* Verde menta - para éxito y acentos */
    --text-dark: #1a1a2e;      /* Texto oscuro */
    --text-light: #a8a8b3;     /* Texto gris claro - para textos secundarios */
    --bg-page: #f0f2f5;        /* Fondo gris claro de la página */
    --bg-card: #ffffff;        /* Fondo blanco de las tarjetas */
    --border: #e1e4e8;         /* Color de bordes sutiles */
    --shadow: rgba(0, 0, 0, 0.08); /* Sombra suave para profundidad */
    --radius: 12px;            /* Bordes redondeados - consistente en toda la app */
}

/* --- RESET BÁSICO ---
   Los navegadores aplican estilos por defecto (márgenes, paddings, etc.)
   que son diferentes entre Chrome, Firefox, etc.
   Este reset elimina esas diferencias para que TODO empiece desde cero.
   
   * = selecciona TODOS los elementos
   box-sizing: border-box = el padding y border se incluyen DENTRO
   del tamaño total, no se suman por fuera (esto evita muchos dolores de cabeza)
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- TIPOGRAFÍA ---
   Importamos una fuente de Google Fonts para que se vea profesional.
   font-family lista fuentes en orden de prioridad:
   1. Intenta 'Inter' (la que importamos)
   2. Si no carga, usa cualquier fuente sans-serif del sistema
   
   line-height: 1.6 = espacio entre líneas, 1.6 es cómodo para leer
   min-height: 100vh = el body ocupa MÍNIMO el 100% del alto de la pantalla
   vh = viewport height (alto de la ventana)
*/
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
}

/* ============================================
   PÁGINA DE LOGIN
   ============================================ */

/* --- CONTENEDOR DEL LOGIN ---
   display: flex = activa Flexbox, un sistema de layout moderno
   justify-content: center = centra horizontalmente
   align-items: center = centra verticalmente
   
   Con estas 3 propiedades + min-height: 100vh, el login queda
   PERFECTAMENTE centrado en la pantalla. Es el truco más usado en CSS.
*/
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px; /* espacio en los bordes para móviles */
}

/* --- TARJETA DEL LOGIN ---
   Esta es la "caja blanca" donde va el formulario.
   
   max-width: 420px = nunca será más ancha que 420px
   width: 100% = pero en pantallas chicas usa todo el ancho disponible
   Esa combinación hace que sea RESPONSIVE automáticamente.
   
   box-shadow: crea una sombra sutil que da sensación de "profundidad"
   Formato: horizontal vertical difuminado expansión color
   0 4px 6px = sin desplazamiento horizontal, 4px abajo, 6px de difuminado
*/
.login-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 4px 6px var(--shadow), 0 1px 3px var(--shadow);
    padding: 48px 40px;
    max-width: 420px;
    width: 100%;
}

/* --- LOGO / ENCABEZADO ---
   text-align: center = centra todo el contenido
   margin-bottom: 32px = espacio debajo antes del formulario
*/
.login-header {
    text-align: center;
    margin-bottom: 32px;
}

/* --- ÍCONO DECORATIVO ---
   Un círculo con el gradiente de la marca que contiene un ícono/emoji.
   
   width y height iguales + border-radius: 50% = CÍRCULO perfecto
   
   display: flex + justify/align center = centra el contenido (el emoji)
   dentro del círculo
   
   margin: 0 auto = centra el círculo horizontalmente dentro de su padre
   
   background: linear-gradient = gradiente (degradado) de un color a otro
   135deg = la dirección del gradiente (diagonal)
*/
.login-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    font-size: 32px;
}

/* --- TÍTULO ---
   font-weight: 700 = negrita (400 es normal, 700 es bold)
   letter-spacing: -0.5px = acerca un poquito las letras, se ve más moderno
*/
.login-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* --- SUBTÍTULO ---
   Un texto secundario debajo del título para dar contexto.
*/
.login-header p {
    color: var(--text-light);
    font-size: 14px;
}

/* --- GRUPO DE INPUT ---
   Cada campo (usuario, contraseña) va dentro de un "grupo"
   que incluye su label y su input.
   margin-bottom: 20px = espacio entre cada grupo
*/
.form-group {
    margin-bottom: 20px;
}

/* --- LABELS ---
   display: block = hace que el label ocupe toda la línea
   (por defecto es inline, o sea que se pone al lado del input)
   
   font-weight: 600 = semi-negrita
   font-size: 13px = un poco más chico que el texto normal
   text-transform: uppercase = CONVIERTE A MAYÚSCULAS
   letter-spacing: 0.5px = separa las letras un poco (se ve bien en mayúsculas)
*/
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- INPUTS ---
   width: 100% = ocupa todo el ancho disponible
   
   border: 2px solid var(--border) = borde sutil
   
   transition: all 0.3s ease = ANIMACIÓN SUAVE cuando cambia alguna propiedad
   0.3s = dura 0.3 segundos
   ease = empieza lento, acelera, y termina lento (se siente natural)
   
   outline: none = quita el borde azul que pone el navegador al hacer click
   (nosotros lo reemplazamos con nuestro propio estilo en :focus)
*/
.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background: var(--bg-card);
    transition: all 0.3s ease;
    outline: none;
}

/* --- INPUT EN FOCO ---
   :focus = cuando el usuario hace click en el input (lo selecciona)
   Cambiamos el borde a azul y agregamos una sombra sutil
   para que el usuario sepa "estás escribiendo aquí"
   
   box-shadow con 0 0 0 3px = crea un "anillo" de color alrededor del input
   Es la técnica moderna en vez del outline del navegador
*/
.form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.1);
}

/* --- BOTÓN DE LOGIN ---
   cursor: pointer = cambia el cursor a manita cuando pasas por encima
   
   text-transform: uppercase = letras en mayúsculas
   
   transition = animación suave al hacer hover
   transform: translateY(-1px) = lo mueve 1px arriba (efecto de "flotar")
*/
.btn-login {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 8px;
}

/* --- BOTÓN HOVER ---
   :hover = cuando el mouse está encima del botón
   
   transform: translateY(-1px) = sube 1px, da sensación de que "flota"
   box-shadow = sombra más grande, da profundidad
   
   El efecto combinado: el botón parece que se levanta hacia ti
*/
.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 52, 131, 0.4);
}

/* --- BOTÓN ACTIVO ---
   :active = el instante en que haces click (presionando)
   
   transform: translateY(0) = vuelve a su posición original
   Da la sensación de que el botón "se presiona" como un botón real
*/
.btn-login:active {
    transform: translateY(0);
}

/* --- MENSAJES DE ERROR ---
   Para cuando el usuario pone mal la contraseña.
   
   border-left: 4px solid = una barra gruesa a la izquierda
   como indicador visual de "atención"
*/
.error-messages {
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #e53e3e;
}

.error-messages ul {
    list-style: none; /* quita las viñetas de la lista */
}

/* --- PIE DE LA TARJETA ---
   Texto al final tipo "¿Olvidaste tu contraseña?" o versión del sistema
*/
.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border); /* línea separadora sutil */
}

.login-footer p {
    font-size: 12px;
    color: var(--text-light);
}

/* ============================================
   RESPONSIVE - Ajustes para pantallas pequeñas
   ============================================ */

/* --- MEDIA QUERY ---
   @media = "si la pantalla cumple esta condición, aplica estos estilos"
   max-width: 480px = pantallas de 480px o menos (móviles)
   
   Reducimos paddings para que quepa todo en pantallas chicas
*/
@media (max-width: 480px) {
    .login-card {
        padding: 32px 24px;
    }

    .login-header h1 {
        font-size: 20px;
    }
}