/* Optimizo · tokens del rediseño de escritorio V02 (única fuente de verdad de colores, tipografía, espacio y forma).
   Marca: variante Mandarina + navy del guion visual (optimizo-cl.github.io/guion, tokens/optimizo.css).
   Al final van los nombres de la V01 como alias de estos tokens: los usan formularios que no cambiaron de estructura. */
:root {
  color-scheme: light;
  /* marca */
  --opt-brand-navy: #26405B;
  --opt-brand-deep-navy: #16263A;
  --opt-brand-ink: #14212F;
  --opt-brand-graphite: #424E4E;
  --opt-brand-bone: #EDEEE8;
  --opt-brand-paper: #F6F6F1;
  --opt-brand-white: #FFFFFF;
  --opt-brand-orange: #FF6A13;
  --opt-brand-peach: #FFB98A;
  --opt-brand-ember: #B8420A;

  /* superficies y texto */
  --opt-background: var(--opt-brand-bone);
  --opt-surface: var(--opt-brand-paper);
  --opt-surface-raised: var(--opt-brand-white);
  --opt-surface-inset: #E4E6DE;
  --opt-text: var(--opt-brand-ink);
  --opt-heading: var(--opt-brand-navy);
  --opt-text-secondary: var(--opt-brand-graphite);
  --opt-text-muted: #586262;
  --opt-accent: var(--opt-brand-orange);
  --opt-accent-hover: #F25E08;
  --opt-accent-text: #A83C09;
  --opt-accent-soft: #FCE7DA;
  --opt-accent-border: #F6C3A1;
  --opt-accent-foreground: var(--opt-brand-ink);
  --opt-border: rgba(38, 64, 91, 0.12);
  --opt-border-strong: rgba(38, 64, 91, 0.24);
  --opt-focus: var(--opt-brand-ember);
  --opt-overlay: rgba(20, 33, 47, 0.48);
  --opt-video: #1B232C;

  /* navegación (siempre oscura) */
  --opt-nav-background: var(--opt-brand-deep-navy);
  --opt-nav-text: var(--opt-brand-bone);
  --opt-nav-text-secondary: #C3CBCC;
  --opt-nav-hover: rgba(237, 238, 232, 0.07);
  --opt-nav-selection: rgba(255, 106, 19, 0.18);
  --opt-nav-selection-text: var(--opt-brand-peach);
  --opt-nav-border: rgba(237, 238, 232, 0.10);

  /* estados: siempre con texto o icono */
  --opt-success: #256B42;
  --opt-success-soft: #E1EFE5;
  --opt-warning: #8A5A00;
  --opt-warning-soft: #F5EBD3;
  --opt-error: #B3261E;
  --opt-error-soft: #F6E1DE;
  --opt-info: var(--opt-brand-navy);
  --opt-info-soft: #E1E7EE;
  --opt-neutral: #586262;
  --opt-neutral-soft: #E4E6DE;
  --opt-chart-1: #E5620F;
  --opt-chart-2: #26405B;
  --opt-chart-3: #F0A06A;
  --opt-chart-4: #6F7A7A;

  /* tipografía */
  --opt-font: "Inter", "Segoe UI", system-ui, -apple-system, "SF Pro Text", "Noto Sans", Ubuntu, Roboto, sans-serif;
  --opt-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, monospace;
  --opt-text-xs: 0.8125rem;   /* 13 */
  --opt-text-sm: 0.875rem;    /* 14 */
  --opt-text-md: 0.9375rem;   /* 15 */
  --opt-text-body: 1rem;      /* 16 */
  --opt-text-lead: 1.125rem;  /* 18 */
  --opt-text-section: 1.25rem;/* 20 */
  --opt-text-title: 1.875rem; /* 30 */
  --opt-text-metric: 2.125rem;/* 34 */
  --opt-line-body: 1.5;
  --opt-line-heading: 1.2;

  /* espacio y forma (base 4/8) */
  --opt-space-1: 4px;
  --opt-space-2: 8px;
  --opt-space-3: 12px;
  --opt-space-4: 16px;
  --opt-space-5: 24px;
  --opt-space-6: 32px;
  --opt-space-7: 48px;
  --opt-space-8: 64px;
  --opt-radius-control: 8px;
  --opt-radius-card: 12px;
  --opt-radius-panel: 16px;
  --opt-radius-large: 24px;
  --opt-radius-pill: 999px;
  --opt-control-height: 40px;
  --opt-nav-width: 240px;
  --opt-nav-collapsed-width: 72px;
  --opt-content-padding: 28px;
  --opt-shadow-sm: 0 1px 2px rgba(22, 38, 58, 0.06), 0 2px 8px -2px rgba(22, 38, 58, 0.08);
  --opt-shadow-md: 0 2px 4px rgba(22, 38, 58, 0.05), 0 14px 32px -12px rgba(22, 38, 58, 0.18);
  --opt-duration-fast: 120ms;
  --opt-duration-normal: 180ms;
  --opt-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Tema oscuro completo (Configuración → Apariencia: «Oscuro», o «Sistema» con el sistema en oscuro). */
:root[data-theme=oscuro] {
  color-scheme: dark;
  --opt-background: #16263A;
  --opt-surface: #1C2F45;
  --opt-surface-raised: #22374F;
  --opt-surface-inset: #122030;
  --opt-text: #EDEEE8;
  --opt-heading: #EDEEE8;
  --opt-text-secondary: #C3CBCC;
  --opt-text-muted: #9AA6A8;
  --opt-accent-hover: #FF7A2E;
  --opt-accent-text: #FFB98A;
  --opt-accent-soft: rgba(255, 106, 19, 0.14);
  --opt-accent-border: rgba(255, 185, 138, 0.35);
  --opt-border: rgba(237, 238, 232, 0.10);
  --opt-border-strong: rgba(237, 238, 232, 0.22);
  --opt-focus: #FFB98A;
  --opt-overlay: rgba(5, 10, 18, 0.62);
  --opt-nav-background: #101C2B;
  --opt-success: #7CCB97;
  --opt-success-soft: rgba(124, 203, 151, 0.12);
  --opt-warning: #E8C06A;
  --opt-warning-soft: rgba(232, 192, 106, 0.12);
  --opt-error: #F6A8A1;
  --opt-error-soft: rgba(246, 168, 161, 0.12);
  --opt-info: #A9C0DA;
  --opt-info-soft: rgba(169, 192, 218, 0.12);
  --opt-neutral: #AEB8BA;
  --opt-neutral-soft: rgba(237, 238, 232, 0.08);
  --opt-chart-1: #FF7A2E;
  --opt-chart-2: #A9BCD2;
  --opt-chart-3: #F0A06A;
  --opt-chart-4: #8C9696;
  --opt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --opt-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.2), 0 14px 32px -12px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --opt-duration-fast: 0ms; --opt-duration-normal: 0ms; }
}

/* Alias de la V01 (los usan formularios y asistentes que conservan su estructura). Todos apuntan a los tokens. */
:root {
  --naranja: var(--opt-accent); --naranja-osc: var(--opt-accent-hover); --naranja-2: var(--opt-accent);
  --durazno: var(--opt-accent-border); --durazno-claro: var(--opt-accent-soft); --durazno-borde: var(--opt-accent-border);
  --navy: var(--opt-heading); --texto: var(--opt-text); --suave: var(--opt-text-secondary); --tenue: var(--opt-text-muted);
  --linea: var(--opt-border); --linea-2: var(--opt-border-strong);
  --fondo: var(--opt-background); --blanco: var(--opt-surface-raised); --campo: var(--opt-surface-raised); --modal: var(--opt-surface); --tarjeta: var(--opt-surface);
  --ok: var(--opt-success); --ok-bg: var(--opt-success-soft); --ok-tx: var(--opt-success);
  --media: var(--opt-warning); --media-bg: var(--opt-warning-soft); --media-tx: var(--opt-warning);
  --alta: var(--opt-error); --alta-bg: var(--opt-error-soft); --alta-bg2: var(--opt-error-soft); --alta-borde: var(--opt-error-soft);
  --sombra: var(--opt-shadow-sm); --r: var(--opt-radius-card); --r-s: var(--opt-radius-control);
}