/*
 * Variables de tema de keydan2.
 *
 * Extraidas del app.css de keydan1 para conservar la identidad visual exacta
 * (Indigo Glass en claro, Neon Cyberpunk en oscuro). Aqui viven SOLO las
 * variables; los estilos de cada componente van en su propio archivo. Asi el
 * tema es un unico punto de verdad para todo el sistema.
 */

:root {
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --header-height: 70px;

    /* --- Escala de espaciado (ritmo vertical unico del sistema) ---
       Usar estos tokens en vez de valores sueltos (.65rem, .82rem, ...). */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* --- Escala tipografica --- */
    --fs-caption: 0.72rem;
    --fs-sm: 0.82rem;
    --fs-md: 0.9rem;
    --fs-lg: 1.05rem;
    --fs-xl: 1.5rem;
    --fs-kpi: 1.6rem;

    --lh-tight: 1.25;
    --lh-base: 1.6;

    /* --- Radios --- */
    --radius-sm: 0.6rem;
    --radius: 1rem;
    --radius-lg: 1.25rem;

    /* Textos y estados del sidebar (del tema de keydan1) */
    --sidebar-text: #f0eeff;
    --sidebar-text-secondary: #d8d0f8;
    --sidebar-text-muted: #b0a0e0;
    --sidebar-active-bg: rgba(255, 255, 255, 0.25);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.15);
    --sidebar-submenu-bg: rgba(255, 255, 255, 0.10);
    --sidebar-border: rgba(200, 180, 255, 0.22);
    --sidebar-glow: rgba(109, 79, 194, 0.55);

    /* Indigo Glass - modo dia */
    --bg-primary: linear-gradient(135deg, #eef0ff 0%, #f5f0ff 100%);
    --bg-card: rgba(255, 255, 255, 0.78);
    --text-primary: #1a1240;
    --text-secondary: #5b3fd4;
    --text-muted: #7a6aaa;
    --sidebar-bg: linear-gradient(160deg, #2d1b69 0%, #4c3099 50%, #6d4fc2 100%);

    --accent-1: #5b3fd4;
    --accent-2: #7c6be8;
    --accent-3: #9d8df0;
    --accent-4: #4c3099;

    --shadow: rgba(91, 63, 212, 0.18);
    --shadow-lg: rgba(91, 63, 212, 0.28);
    --border-color: rgba(91, 63, 212, 0.20);

    /* Halo de las tarjetas (en claro es una sombra de color, en oscuro un glow neon). */
    --card-glow: rgba(109, 79, 194, 0.20);
    /* Fila de tabla al pasar el mouse: tinte del tema, no gris generico. */
    --table-hover: rgba(91, 63, 212, 0.08);

    --header-gradient-start: #4c3099;
    --header-gradient-end: #6d4fc2;

    --color-success: #4db88a;
    --color-warning: #e8a838;
    --color-danger: #d86878;
    --color-info: #5aacbe;

    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    accent-color: var(--accent-2);
}

.dark-mode {
    /* Neon Cyberpunk - modo noche */
    --bg-primary: #050510;
    --bg-card: rgba(10, 8, 30, 0.65);
    --text-primary: #e8e6f0;
    --text-secondary: #00fff5;
    /* Subido de #8a7faa: el dato secundario (RUC, telefono, fecha) quedaba
       demasiado apagado sobre el fondo casi negro del modo noche. */
    --text-muted: #a99cc9;
    --sidebar-bg: linear-gradient(160deg, #0a0520 0%, #150a35 50%, #1a0845 100%);

    --accent-1: #ff00ff;
    --accent-2: #00fff5;
    --accent-3: #b400ff;
    --accent-4: #ff3399;

    --shadow: rgba(0, 0, 0, 0.6);
    --shadow-lg: rgba(0, 0, 0, 0.8);
    --border-color: rgba(0, 255, 245, 0.18);

    --card-glow: rgba(0, 255, 245, 0.15);
    --table-hover: rgba(0, 255, 245, 0.06);

    --header-gradient-start: #0a0520;
    --header-gradient-end: #150a35;

    --color-success: #00ff88;
    --color-warning: #ffaa00;
    --color-danger: #ff0055;
    --color-info: #00ccff;
}