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

/* ==========================================================================
   P0 · BASE VISUAL NUEVA (06/10/2026) — documentacion/PLAN-PRESENTACION.md
   Identidad propia y sobria: base grafito fija + UN acento por empresa.
   Todo lleva el prefijo --ui- para no chocar con las variables de arriba,
   que siguen pintando las pantallas viejas hasta que cada una se rediseñe.
   El modo noche es grafito profundo, sin neon.
   ========================================================================== */
:root {
    /* Acento de la empresa (predeterminado: esmeralda) */
    --ui-acc: #0E7C66;
    --ui-acc-strong: #0A5E4E;
    --ui-acc-soft: #E3F3EE;
    --ui-acc-on: #FFFFFF;

    /* Superficies */
    --ui-bg: #F3F5F4;
    --ui-surface-1: #FFFFFF;
    --ui-surface-2: #F8FAF9;
    --ui-surface-sunken: #EDF1EF;
    --ui-line: #E0E6E3;
    --ui-line-strong: #C9D3CE;
    --ui-overlay: rgba(12, 22, 19, 0.45);

    /* Texto */
    --ui-text-strong: #0F1A16;
    --ui-text-body: #2C3A35;
    --ui-text-subtle: #66756F;
    --ui-text-faint: #8F9C97;

    /* Estados: fuerte + suave. El estado siempre va con color Y palabra. */
    --ui-ok: #147A4F;      --ui-ok-soft: #E2F4EA;
    --ui-warn: #A8620A;    --ui-warn-soft: #FDF1DC;
    --ui-bad: #B42318;     --ui-bad-soft: #FDE8E6;
    --ui-info: #1F5FA8;    --ui-info-soft: #E3EEFA;
    --ui-neutral-soft: #EEF1F0;

    /* Dinero: el mismo color en todo el sistema */
    --ui-money-in: #147A4F;   /* cobrado */
    --ui-money-out: #1F5FA8;  /* desembolsado */
    --ui-money-due: #A8620A;  /* por cobrar */

    /* Atraso: 1-30 / 31-60 / 61-90 / 91-180 / +180 dias */
    --ui-aging-1: #E9B949;
    --ui-aging-2: #E08A3C;
    --ui-aging-3: #D2603A;
    --ui-aging-4: #B83A34;
    --ui-aging-5: #7E1F2A;

    /* Graficos (Chart.js lee estos valores, nunca colores sueltos) */
    --ui-chart-1: var(--ui-acc);
    --ui-chart-2: #1F5FA8;
    --ui-chart-3: #E08A3C;
    --ui-chart-4: #8C6BC8;
    --ui-chart-grid: #E6ECE9;

    /* Elevacion: tres sombras, no una por pantalla */
    --ui-elev-1: 0 1px 2px rgba(15, 26, 22, 0.06), 0 1px 1px rgba(15, 26, 22, 0.04);
    --ui-elev-2: 0 4px 14px rgba(15, 26, 22, 0.08), 0 1px 3px rgba(15, 26, 22, 0.05);
    --ui-elev-3: 0 18px 40px rgba(15, 26, 22, 0.16);

    /* Letra (la misma Plus Jakarta Sans autoalojada) */
    --ui-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ui-fs-cap: 0.72rem;
    --ui-fs-sm: 0.82rem;
    --ui-fs-md: 0.92rem;
    --ui-fs-lg: 1.08rem;
    --ui-fs-xl: 1.4rem;
    --ui-fs-kpi: 1.75rem;
    --ui-fs-display: 2.2rem;
    --ui-fw-med: 500;
    --ui-fw-semi: 600;
    --ui-fw-bold: 700;
    --ui-fw-x: 800;

    /* Espacio, radio y movimiento */
    --ui-s1: 0.25rem; --ui-s2: 0.5rem; --ui-s3: 0.75rem; --ui-s4: 1rem;
    --ui-s5: 1.5rem;  --ui-s6: 2rem;   --ui-s7: 3rem;
    --ui-r-sm: 0.5rem;
    --ui-r: 0.85rem;
    --ui-r-lg: 1.15rem;
    --ui-r-pill: 999px;
    --ui-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ui-dur-fast: 0.12s;
    --ui-dur: 0.2s;

    /* Marco (lo usara P1) */
    --ui-side-bg: #0F1A16;
    --ui-side-text: #C9D6D0;
    --ui-side-text-strong: #FFFFFF;
    --ui-side-hover: rgba(255, 255, 255, 0.06);
    --ui-side-active: rgba(255, 255, 255, 0.10);
}

.dark-mode {
    --ui-acc: #3CC79F;
    --ui-acc-strong: #6ADAB8;
    --ui-acc-soft: rgba(60, 199, 159, 0.14);
    --ui-acc-on: #06221B;

    --ui-bg: #0B1110;
    --ui-surface-1: #121A18;
    --ui-surface-2: #16201D;
    --ui-surface-sunken: #0E1513;
    --ui-line: #22302B;
    --ui-line-strong: #2F403A;
    --ui-overlay: rgba(0, 0, 0, 0.6);

    --ui-text-strong: #EEF4F1;
    --ui-text-body: #C9D6D0;
    --ui-text-subtle: #8EA09A;
    --ui-text-faint: #6B7C76;

    --ui-ok: #4FD39A;      --ui-ok-soft: rgba(79, 211, 154, 0.13);
    --ui-warn: #F2B44B;    --ui-warn-soft: rgba(242, 180, 75, 0.13);
    --ui-bad: #F47A6E;     --ui-bad-soft: rgba(244, 122, 110, 0.13);
    --ui-info: #6FA8EE;    --ui-info-soft: rgba(111, 168, 238, 0.13);
    --ui-neutral-soft: rgba(255, 255, 255, 0.06);

    --ui-money-in: #4FD39A;
    --ui-money-out: #6FA8EE;
    --ui-money-due: #F2B44B;

    --ui-chart-2: #6FA8EE;
    --ui-chart-3: #F2A05B;
    --ui-chart-4: #B39BEB;
    --ui-chart-grid: #1F2B27;

    --ui-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ui-elev-2: 0 6px 18px rgba(0, 0, 0, 0.35);
    --ui-elev-3: 0 20px 44px rgba(0, 0, 0, 0.55);

    --ui-side-bg: #080D0C;
    --ui-side-text: #9FB1AA;
}

/* Acentos alternativos. Hoy solo los usa /muestra para comparar; cuando la
   empresa pueda elegir su color (P8), el layout pondra data-ui-acento en <html>. */
[data-ui-acento="azul"]  { --ui-acc: #1F55C9; --ui-acc-strong: #163F97; --ui-acc-soft: #E4ECFB; }
[data-ui-acento="vino"]  { --ui-acc: #9B2C4B; --ui-acc-strong: #781F39; --ui-acc-soft: #F7E6EB; }
[data-ui-acento="ambar"] { --ui-acc: #B5530E; --ui-acc-strong: #8C400A; --ui-acc-soft: #FBEBDD; }
.dark-mode[data-ui-acento="azul"]  { --ui-acc: #6F9BF2; --ui-acc-strong: #9AB9F6; --ui-acc-soft: rgba(111, 155, 242, 0.15); --ui-acc-on: #0A1A3A; }
.dark-mode[data-ui-acento="vino"]  { --ui-acc: #E07A97; --ui-acc-strong: #EBA0B5; --ui-acc-soft: rgba(224, 122, 151, 0.15); --ui-acc-on: #2A0B15; }
.dark-mode[data-ui-acento="ambar"] { --ui-acc: #F0A15C; --ui-acc-strong: #F5BE8B; --ui-acc-soft: rgba(240, 161, 92, 0.15); --ui-acc-on: #2A1404; }

/* ==========================================================================
   P1 · LAS VARIABLES VIEJAS APUNTAN A LA PALETA NUEVA (06/10/2026)
   Las pantallas que aun no se rediseñan siguen usando --bg-card, --accent-1,
   --color-warning... Desde aqui esos nombres dan los colores sobrios de --ui-*:
   se va el morado de dia y el neon de noche sin tocar ninguna pantalla.
   Va al final para ganarle a los bloques :root y .dark-mode de arriba.
   ========================================================================== */
:root,
.dark-mode {
    --bg-primary: var(--ui-bg);
    --bg-card: var(--ui-surface-1);
    --text-primary: var(--ui-text-strong);
    --text-secondary: var(--ui-acc);
    --text-muted: var(--ui-text-subtle);
    --accent-1: var(--ui-acc);
    --accent-2: var(--ui-acc);
    --accent-3: var(--ui-acc-strong);
    --accent-4: var(--ui-acc-strong);
    --border-color: var(--ui-line);
    --table-hover: var(--ui-surface-2);
    /* Lo usan el boton principal viejo, los iconos del Ctrl+K y la cabecera del login */
    --header-gradient-start: var(--ui-acc);
    --header-gradient-end: var(--ui-acc-strong);
    --color-success: var(--ui-ok);
    --color-warning: var(--ui-warn);
    --color-danger: var(--ui-bad);
    --color-info: var(--ui-info);
    --shadow: rgba(15, 26, 22, 0.08);
    --shadow-lg: rgba(15, 26, 22, 0.14);
    --card-glow: rgba(15, 26, 22, 0.04);
    --sidebar-bg: var(--ui-side-bg);
    --sidebar-text: var(--ui-side-text-strong);
    --sidebar-text-secondary: var(--ui-side-text);
    --sidebar-text-muted: var(--ui-side-text);
    --sidebar-glow: rgba(0, 0, 0, 0);
    accent-color: var(--ui-acc);
}
.dark-mode {
    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --card-glow: rgba(0, 0, 0, 0);
}