/* =====================================================================
   LM Express · tokens compartidos (admin, seguimientos y encuesta)
   Se carga ANTES de admin.css / seguimientos.css / styles.css.
   Cada hoja de superficie puede redefinir en su :root los tokens de
   superficie (--bg, --ink, --border...) y gana por orden de carga.
   ===================================================================== */
:root {
  /* ---- Marca ---- */
  --brand: #F5971F;
  --brand-600: #E8860F;
  --brand-50: #FFF3E0;          /* tinte de hover / chips activos claros */
  --brand-25: #FFF8EF;          /* tinte de hover de botones fantasma */
  --brand-ink: #A35A00;         /* naranja como TEXTO sobre claro: 5.2:1 */
  --brand-ink-text: #A35A00;    /* alias estable (la encuesta usa --brand-ink como tinta) */
  --on-brand: #1C1D22;          /* texto sobre relleno naranja: 7.5:1 */
  --brand-black: #0F0F10;

  /* ---- Tipografía (Inter; 8 pasos, nada por debajo de 12px en texto nuevo) ---- */
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 16px;              /* cuerpo público y campos (sin zoom en iOS) */
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 32px;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* ---- Espaciado ---- */
  --sp-0-5: 2px; --sp-1: 4px; --sp-1-5: 6px; --sp-2: 8px; --sp-2-5: 10px;
  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- Radios ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-ctl: 10px;                /* controles del admin (botones, selects, inputs) */
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-1: 0 4px 14px rgba(15,15,16,0.05);
  --shadow-2: 0 18px 40px -14px rgba(15,15,16,0.2);
  --shadow-overlay: 0 30px 80px rgba(0,0,0,0.4);
  --shadow-brand: 0 6px 12px -6px rgba(245,151,31,0.6);

  /* ---- Movimiento (Emil Kowalski): solo transform/opacity, ≤300ms ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 120ms;
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-modal: 240ms;
  --dur-data: 280ms;

  /* ---- Superficie clara (admin por defecto; la encuesta ajusta --bg/--border) ---- */
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface-2: #FBF7EE;         /* cabeceras de tabla, tarjetas hundidas */
  --surface-warm: #FFFBF3;      /* fondo de campos y filas en hover */
  --track: #F3EEE2;             /* fondo de barras de progreso */
  --ink: #1C1D22;
  --ink-2: #3A3C45;
  --ink-3: #6B6E7B;
  --border: #EBE4D4;
  --border-2: #F1ECDE;
  --surface-dark: #1B1C20;      /* menús y tooltips oscuros */
  --border-dark: #2C2D33;
  --on-dark: #FFFFFF;
  --on-dark-2: #CFD0D5;         /* enlaces del nav sobre negro */

  /* ---- Estados (un solo set, el validado para gráficos) ---- */
  --status-good: #0ca30c;      --status-good-text: #1C6B1C;     --status-good-bg: #E3F4E3;
  --status-warn: #fab219;      --status-warn-text: #7A5600;     --status-warn-bg: #FDF1D3;
  --status-serious: #ec835a;   --status-serious-text: #A2451C;  --status-serious-bg: #FDE9DF;
  --status-critical: #d03b3b;  --status-critical-text: #A32626; --status-critical-bg: #FBE4E4;
  --status-info: #2a78d6;
  --status-neutral-bg: #F1EFE8;
  --delta-good: #006300;
  --danger: #B91C1C;            /* relleno de botón destructivo (blanco 6.5:1) */
  --danger-600: #991B1B;

  /* Legado: valores originales de las superficies. Preferir --status-*. */
  --ok: #16A34A;
  --warn: #F59E0B;
  --bad: #E11D48;

  /* ---- Foco ---- */
  --focus: #1C1D22;             /* oscuro sobre claro; naranja en superficies oscuras */

  /* ---- Alias de nombres anteriores (no borrar: los usan vistas e inline styles) ---- */
  --brand-orange: var(--brand);
  --brand-orange-600: var(--brand-600);
  --brand-orange-50: var(--brand-50);
  --card: var(--surface);
  --muted: var(--ink-3);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
}

/* Tema oscuro navy (webapp de seguimientos). seguimientos.css aplica estos
   mismos valores en su :root; la clase sirve para scopes futuros. */
.theme-navy {
  --bg: #0B1020;
  --surface: #151a30;
  --surface-2: #1e2545;
  --ink: #E8ECF5;
  --ink-2: #A8AFC6;
  --ink-3: #8E91A7;             /* 6:1 sobre navy (antes #6B7392, 4:1) */
  --border: #252A4A;
  --status-good-text: #86EFAC;
  --status-warn-text: #FCD34D;
  --status-critical-text: #FCA5A5;
  --status-info: #38BDF8;
  --focus: var(--brand);        /* naranja sobre navy: 8.4:1 */
}

/* ---- Reglas globales ---- */
/* Anillo de foco solo con teclado (o en campos de texto). Especificidad 0: cualquier regla de componente lo ajusta. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Toques: sin destello gris ni demora de doble toque. */
a, button, summary, input, select, textarea, label, .btn { -webkit-tap-highlight-color: transparent; }
button, summary, .btn { touch-action: manipulation; }

/* Movimiento reducido: sin animaciones ni desplazamiento suave. Las transiciones
   de color se conservan; cada superficie anula sus propios transform. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}