/* ============================================================
   ERP Prologistic - Capa de tokens
   Unica fuente de verdad del color, la tipografia y las sombras.
   La cargan las dos plantillas base (base_site.html y base_erp.html)
   antes que cualquier otro CSS.

   Este archivo es el UNICO del ERP donde se permite escribir un color
   hex literal. El resto usa var(--erp-*). Lo verifica
   reportes.test_ui_shell.SinColorFueraDeTokensTests.
   ============================================================ */

:root {
  --erp-canvas: #EEF1F4;
  --erp-surface: #FFFFFF;
  --erp-ink: #17212B;
  --erp-navy: #123B5D;
  --erp-teal: #117777;
  --erp-copper: #AB5123;
  --erp-warning: #B54708;
  --erp-danger: #B42318;
  --erp-success: #087443;
  --erp-info: #1E5E99;
  --erp-surface-muted: #F7F9FB;
  --erp-surface-hover: #F1F5F9;
  --erp-surface-selected: #EEF2FF;
  --erp-navy-hover: #0D2E49;
  --erp-copper-hover: #824F10;
  --erp-danger-muted: #FEE2E2;
  --erp-danger-muted-hover: #FECACA;
  --erp-info-muted: #E4EEF8;
  --erp-success-muted: #ECFDF3;
  --erp-attention-muted: #FFF7E8;
  --erp-text: var(--erp-ink);
  --erp-text-muted: #52616B;
  --erp-text-secondary: #475569;
  --erp-text-subtle: #58667A;
  --erp-text-faint: #5A6D88;
  --erp-text-heading: #334155;
  --erp-text-strong: #1E293B;
  --erp-border: #D7DEE5;
  --erp-border-subtle: #E2E8F0;
  --erp-border-strong: #CBD5E1;
  --erp-border-control: #B8C5D1;
  --erp-field-bg: #FFFFFF;
  --erp-field-bg-hover: #FDFEFF;
  --erp-card-shadow: 0 14px 34px rgba(18, 59, 93, .08);
  --erp-control-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
  --erp-space-1: 4px;
  --erp-space-2: 8px;
  --erp-space-3: 12px;
  --erp-space-4: 16px;
  --erp-space-5: 20px;
  --erp-space-6: 24px;
  --erp-space-7: 32px;
  --erp-space-8: 40px;
  --erp-radius-sm: 6px;
  --erp-radius: 8px;
  --erp-radius-md: 10px;
  --erp-radius-lg: 12px;
  --erp-radius-xl: 18px;
  --erp-elevation-card: 0 14px 34px rgba(18, 59, 93, .08);
  --erp-elevation-float: 0 18px 48px rgba(15, 23, 42, .16);
  --erp-elevation-action: 0 3px 8px rgba(18, 59, 93, .32);
  --erp-shadow-sm: 0 2px 10px rgba(18, 59, 93, .07);
  --erp-shadow-md: 0 6px 20px rgba(18, 59, 93, .10);
  --erp-shadow-header: 0 1px 3px rgba(15, 23, 42, .12);
  --erp-shadow-logo: 0 1px 4px rgba(15, 23, 42, .15);
  --erp-shadow-toggle: 0 2px 8px rgba(15, 23, 42, .12);
  --erp-shadow-button: 0 2px 6px rgba(18, 59, 93, .3);
  --erp-shadow-button-hover: 0 3px 8px rgba(18, 59, 93, .32);
  --erp-shadow-copper: 0 2px 6px rgba(183, 121, 31, .3);
  --erp-shadow-login: 0 20px 50px rgba(15, 23, 42, .15);
  --erp-shadow-dropdown: 0 16px 40px rgba(15, 23, 42, .18);
  --erp-font: 'Inter', system-ui, sans-serif;
  --erp-data-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --erp-control-height: 44px;
  --erp-focus-ring: 0 0 0 3px rgba(183, 121, 31, .24);

  /* Colores de marca de terceros: no son del tema y no cambian con el modo
     oscuro; viven aca porque tokens.css es el unico archivo donde se permite
     un hex literal. */
  --marca-whatsapp: #25D366;
  --marca-whatsapp-hover: #1fb457;

  /* Compatibility aliases for configuration values and legacy selectors. */
  --color-primario: var(--erp-navy);
  /* Tinta de la barra secundaria, que va rellena con el color de marca.
     Configuracion la recalcula segun el color elegido; estos son los valores
     por defecto, para el navy del tema. */
  --color-sobre-primario: var(--erp-surface);
  --color-secundario: var(--erp-copper);
  --color-fondo: var(--erp-canvas);
  --color-sidebar: var(--erp-surface);
  --color-texto: var(--erp-text);
  --fuente: var(--erp-font);
  --tamano-fuente: 14px;
  --radio-bordes: var(--erp-radius);
  --sombra-suave: var(--erp-shadow-sm);
  --sombra-media: var(--erp-shadow-md);
}

/* ============================================================
   TEMA OSCURO - Definición de tokens (valores hex)
   ============================================================ */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {
    --erp-canvas: #0F1419;
    --erp-surface: #1A222B;
    --erp-surface-muted: #212B35;
    --erp-surface-hover: #26323E;
    --erp-surface-selected: #1D3147;
    --erp-ink: #E6EDF3;
    --erp-navy: #6BA1D1;
    --erp-navy-hover: #85B3DD;
    --erp-teal: #3FB6B6;
    --erp-copper: #E08A56;
    --erp-copper-hover: #E9A172;
    --erp-warning: #F5A623;
    --erp-danger: #F87171;
    --erp-success: #34D399;
    --erp-info: #60A5FA;
    --erp-danger-muted: #3B1A1A;
    --erp-danger-muted-hover: #4A2222;
    --erp-info-muted: #16304D;
    --erp-success-muted: #12322A;
    --erp-attention-muted: #332A14;
    --erp-text: var(--erp-ink);
    --erp-text-muted: #9FB0BF;
    --erp-text-secondary: #A9B8C6;
    --erp-text-subtle: #9AA9B7;
    --erp-text-faint: #8C9DAC;
    --erp-text-heading: #C9D6E1;
    --erp-text-strong: #DCE5ED;
    --erp-border: #2E3A47;
    --erp-border-subtle: #26313C;
    --erp-border-strong: #3A4857;
    --erp-border-control: #516173;
    --erp-field-bg: #18212A;
    --erp-field-bg-hover: #202B36;
    --erp-card-shadow: 0 14px 34px rgba(0, 0, 0, .38);
    --erp-control-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    --erp-elevation-card: 0 14px 34px rgba(0, 0, 0, .38);
    --erp-elevation-float: 0 18px 48px rgba(0, 0, 0, .58);
    --erp-elevation-action: 0 3px 8px rgba(0, 0, 0, .5);
    --erp-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --erp-shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
    --erp-shadow-header: 0 1px 3px rgba(0, 0, 0, .4);
    --erp-shadow-logo: 0 1px 4px rgba(0, 0, 0, .4);
    --erp-shadow-toggle: 0 2px 8px rgba(0, 0, 0, .4);
    --erp-shadow-button: 0 2px 6px rgba(0, 0, 0, .4);
    --erp-shadow-button-hover: 0 3px 8px rgba(0, 0, 0, .5);
    --erp-shadow-copper: 0 2px 6px rgba(0, 0, 0, .4);
    --erp-shadow-login: 0 20px 50px rgba(0, 0, 0, .5);
    --erp-shadow-dropdown: 0 16px 40px rgba(0, 0, 0, .6);
    --erp-focus-ring: 0 0 0 3px rgba(224, 138, 86, .3);
    --color-primario: var(--erp-navy);
    --color-sobre-primario: var(--erp-canvas);
    --color-secundario: var(--erp-copper);
    --color-fondo: var(--erp-canvas);
    --color-sidebar: var(--erp-surface);
    --color-texto: var(--erp-text);
  }
}

html[data-theme="dark"] {
  --erp-canvas: #0F1419;
  --erp-surface: #1A222B;
  --erp-surface-muted: #212B35;
  --erp-surface-hover: #26323E;
  --erp-surface-selected: #1D3147;
  --erp-ink: #E6EDF3;
  --erp-navy: #6BA1D1;
  --erp-navy-hover: #85B3DD;
  --erp-teal: #3FB6B6;
  --erp-copper: #E08A56;
  --erp-copper-hover: #E9A172;
  --erp-warning: #F5A623;
  --erp-danger: #F87171;
  --erp-success: #34D399;
  --erp-info: #60A5FA;
  --erp-danger-muted: #3B1A1A;
  --erp-danger-muted-hover: #4A2222;
  --erp-info-muted: #16304D;
  --erp-success-muted: #12322A;
  --erp-attention-muted: #332A14;
  --erp-text: var(--erp-ink);
  --erp-text-muted: #9FB0BF;
  --erp-text-secondary: #A9B8C6;
  --erp-text-subtle: #9AA9B7;
  --erp-text-faint: #8C9DAC;
  --erp-text-heading: #C9D6E1;
  --erp-text-strong: #DCE5ED;
  --erp-border: #2E3A47;
  --erp-border-subtle: #26313C;
  --erp-border-strong: #3A4857;
  --erp-border-control: #516173;
  --erp-field-bg: #18212A;
  --erp-field-bg-hover: #202B36;
  --erp-card-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  --erp-control-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  --erp-elevation-card: 0 14px 34px rgba(0, 0, 0, .38);
  --erp-elevation-float: 0 18px 48px rgba(0, 0, 0, .58);
  --erp-elevation-action: 0 3px 8px rgba(0, 0, 0, .5);
  --erp-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --erp-shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
  --erp-shadow-header: 0 1px 3px rgba(0, 0, 0, .4);
  --erp-shadow-logo: 0 1px 4px rgba(0, 0, 0, .4);
  --erp-shadow-toggle: 0 2px 8px rgba(0, 0, 0, .4);
  --erp-shadow-button: 0 2px 6px rgba(0, 0, 0, .4);
  --erp-shadow-button-hover: 0 3px 8px rgba(0, 0, 0, .5);
  --erp-shadow-copper: 0 2px 6px rgba(0, 0, 0, .4);
  --erp-shadow-login: 0 20px 50px rgba(0, 0, 0, .5);
  --erp-shadow-dropdown: 0 16px 40px rgba(0, 0, 0, .6);
  --erp-focus-ring: 0 0 0 3px rgba(224, 138, 86, .3);
  --color-primario: var(--erp-navy);
  --color-sobre-primario: var(--erp-canvas);
  --color-secundario: var(--erp-copper);
  --color-fondo: var(--erp-canvas);
  --color-sidebar: var(--erp-surface);
  --color-texto: var(--erp-text);
}