/* ============================================================
   amun-tokens.css — Única fuente de las variables de diseño de Amun
   (Portal, Taller, IVA y Personal). Se carga ANTES que el CSS de cada página:
     · shared-app.css lo importa (admin.html, iva.html, personal.html lo reciben solo)
     · portal.html lo enlaza directo
   Tema oscuro por defecto. El claro se activa con la clase "light-mode" en <html>
   (Portal) o en <body> (Taller/IVA/Personal): las dos formas funcionan igual.
   Clave de localStorage: "amun_tema" ("claro" | "oscuro").

   Tiene dos capas:
     1) BASE — los nombres históricos que usan admin.css / iva.css / personal.css
        (--red, --surface, --border, --white, --fg-rgb, --bg-*). Mismos valores de siempre.
     2) SEMÁNTICA — nombres por función (--bg, --ink, --line, --brand, --ok, --warn…),
        pensados para el código nuevo. Los neutros salen de la capa base, así que
        cambiar un color base cambia todo el sistema a la vez.
   Regla para código nuevo: usar siempre la capa semántica; no escribir colores sueltos.
   ============================================================ */

/* ── 1) BASE ── */
:root {
  --red: #c0181e;
  --red-dark: #8b0f13;
  --red-light: #e63b3f;
  --surface: #1e1e1e;
  --surface2: #252525;
  --border: #2e2e2e;
  --white: #fff;                 /* "tinta" principal: blanco en oscuro, casi negro en claro */
  --green: #10b981;
  --amber: #f59e0b;
  --blue: #3b82f6;
  --gray: #6b7280;
  --purple: #8b5cf6;

  /* --fg-rgb: color base sin alfa para todos los rgba(var(--fg-rgb), X) de textos y bordes tenues. */
  --fg-rgb: 255,255,255;
  --bg-page: #111;
  --bg-panel: #161616;           /* barras de pestañas, toolbars, encabezados de columna */
  --bg-modal: #1a1a1a;
  --bg-toast: #222;
  --native-color-scheme: dark;   /* selects / date-pickers nativos */
}
:root.light-mode, body.light-mode {
  --fg-rgb: 20,20,22;
  --white: #16171a;
  --surface: #ffffff;
  --surface2: #f2f2f4;
  --border: #e1e1e4;
  --bg-page: #f2f2f3;
  --bg-panel: #e9e9eb;
  --bg-modal: #ffffff;
  --bg-toast: #ffffff;
  --native-color-scheme: light;
}

/* ── 2) SEMÁNTICA ── */
:root {
  /* formas (Fase 4/5): una sola para tarjetas y otra para etiquetas chicas */
  --radius-card: 12px;           /* tarjetas / paneles (.pnl-card, .panel) */
  --radius-tag: 3px;             /* badges y chips (rectángulo chico, no píldora) */

  /* superficies y texto (derivados de la base) */
  --bg: var(--bg-page);
  --surface-2: var(--surface2);
  --line: var(--border);
  --line-strong: rgba(var(--fg-rgb), .22);
  --ink: var(--white);
  --ink-2: rgba(var(--fg-rgb), .76);
  --ink-3: rgba(var(--fg-rgb), .52);

  /* marca */
  --brand: var(--red);
  --brand-ink: #ff7075;
  --brand-wash: rgba(255,112,117,.1);

  /* encabezado de página: casi negro a propósito en los dos temas (color de marca) */
  --bar: rgba(20,2,2,.98);
  --bar-ink: #f4f4f5;
  --bar-soft: rgba(255,255,255,.62);
  --bar-line: rgba(255,255,255,.14);

  /* estados (con variante clara que mantiene el contraste sobre fondo blanco) */
  --ok: #55c98b;   --ok-wash: rgba(85,201,139,.13);
  --warn: #f0b24a; --warn-wash: rgba(240,178,74,.13);
  --crit: #ff8a82; --crit-wash: rgba(255,138,130,.13);
  --info: #86a4d6; --info-wash: rgba(134,164,214,.13);

  /* gráficos */
  --chart: #86a4d6; --chart-wash: rgba(134,164,214,.16);
  --st1: #2a3a57; --st2: #38517c; --st3: #4f6fa3; --st4: #7f9fd1; --st5: #b4c9ea;

  --shadow: none;
  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body: 'Source Sans 3', system-ui, sans-serif;
  color-scheme: dark;
}
:root.light-mode, body.light-mode {
  --brand-ink: #b3141a;
  --brand-wash: rgba(192,24,30,.07);
  --ok: #1d7a49;   --ok-wash: rgba(29,122,73,.11);
  --warn: #8f5a00; --warn-wash: rgba(190,120,0,.13);
  --crit: #a8231b; --crit-wash: rgba(168,35,27,.1);
  --info: #3d5f94; --info-wash: rgba(61,95,148,.11);
  --chart: #3d5f94; --chart-wash: rgba(61,95,148,.14);
  --st1: #d3dcec; --st2: #aebfdc; --st3: #7f98c2; --st4: #4f6fa3; --st5: #2d4a7c;
  --shadow: 0 1px 0 rgba(16,17,19,.04), 0 1px 2px rgba(16,17,19,.05);
  color-scheme: light;
}

/* ── 3) MENÚ LATERAL (Fase 2): una sola paleta para el menú de Taller, IVA, Personal y Portal ── */
:root {
  --menu-bg: #141416; --menu-line: #26272b; --menu-chip: #1f2023; --menu-chip-line: #2c2d31;
  --menu-hover: #1f2023; --menu-hover-line: #3a3b40;
  --menu-ink: #b9bbc1; --menu-ink-sub: #9a9ca3; --menu-ink-2: #6d7077; --menu-strong: #fff;
}
:root.light-mode, body.light-mode {
  --menu-bg: #ffffff; --menu-line: #e0e2e6; --menu-chip: #f3f4f6; --menu-chip-line: #dcdfe4;
  --menu-hover: #eef0f3; --menu-hover-line: #c9cdd4;
  --menu-ink: #474b54; --menu-ink-sub: #5d626c; --menu-ink-2: #8a8f9a; --menu-strong: #14161a;
}