/*
  Inspector Piecitos — Design System (Fase 11.0)

  Tokens CSS puros (Custom Properties) — ningún componente se
  redisenó todavía (eso es 11.1-11.4). Este archivo se carga ANTES de
  main.css: los tokens quedan disponibles para consumo futuro sin
  alterar ningún estilo actual (main.css sigue usando sus propios
  tokens TEMPORAL_FASE_0 hasta que cada módulo se migre en su subfase).

  Fuente de la paleta de marca: docs/phase_01/08_IDENTIDAD_VISUAL.md
  (colores extraídos DIRECTAMENTE del Excel original — nunca
  inventados) + LOGO SCHOLLS/Recurso 10.png (logo real Dr. Scholl's
  Podólogos: óvalo azul marino, texto blanco, acento dorado).
  Referencia de dirección visual (profundidad/cards/radios/sombras,
  NUNCA color/marca/contenido): "REFERENCIA DE ESTILO.png" — ver
  docs/phase_11_0/01_STYLE_REFERENCE.md.

  Arquitectura de tema: sólo :root (light) definido con valores reales.
  [data-theme="dark"] queda preparado con la MISMA lista de variables
  sin implementar todavía (Fase 11.4) — nunca definir un token sólo en
  un bloque de tema (regla ya usada en el resto del proyecto para
  Artifacts/tema, aplicada aquí también).
*/

:root {
  /* ---- Marca (Dr. Scholl's / Inspector Piecitos) ---- */
  --brand-primary: #20294b;      /* azul marino del óvalo del logo — color primario */
  --brand-primary-hover: #161c37;
  --brand-primary-light: #304071; /* Fase 11.2.3 — extremo superior del degradado del sidebar, más separado del centro para que se note */
  --brand-primary-deep: #10152e;  /* extremo inferior */
  --brand-secondary: #2f3d66;    /* variante más clara del marino, superficies oscuras (sidebar) */
  --brand-accent: #fcc509;       /* dorado del acento bajo "Dr" en el logo */
  --brand-accent-ink: #7a5b00;   /* texto legible sobre --brand-accent-soft */
  --brand-accent-soft: #fff6db;

  /* ---- Superficies (jerarquía light — NIVEL 0-3, Fase 11.2.2) ----
     NIVEL 0 --bg-app: canvas, neutral premium muy claro.
     NIVEL 1 --bg-surface-secondary: gris neutral suave — SIEMPRE para
       elementos "recesados" dentro de una card (headers de categoría,
       thead de tabla) — nunca reutilizar --bg-app ahí: dos superficies
       consecutivas con el mismo tono exacto se "funden" sin importar
       la sombra (bug real corregido esta fase, ver docs/phase_11_2_2).
     NIVEL 2 --bg-elevated: card/panel, blanco real.
     NIVEL 3: mismo blanco que NIVEL 2 + --shadow-elevated/--shadow-modal
       (modal, menú, dropdown) — la elevación es la sombra, no el color. */
  --bg-app: #f8f9fb;             /* Fase 11.2.3: aún más limpio/claro que el f6f7f9 de 11.2.2 */
  --bg-app-deep: #f0f2f5;        /* segundo stop del gradiente casi imperceptible del canvas */
  --bg-surface-secondary: #edf0f4; /* NIVEL 1 — nunca igual a --bg-app ni a --bg-elevated */
  /* Fase 11.2.5 — lenguaje de header con matiz amarillo Scholl's
     (instrucción 3-6): NUNCA #fcc509 sólido como fondo — es un matiz
     suave derivado. `--bg-table-header`/`--text-table-header` (Fase
     11.2.3) quedan como alias de estos para que CADA consumidor
     existente (`.data-table thead th`, headers de categoría de
     Evaluaciones) se actualice con un solo cambio de valor. */
  /* Ajuste visual controlado (post 11.2.5) — el matiz amarillo de
     headers se retira; headers de tabla/categoría pasan a un
     degradado navy de la MISMA familia que el sidebar (nunca un color
     nuevo: mismos 3 tonos de `--brand-primary-*`). */
  /* Horizontal (90deg), izquierda más clara → centro navy → derecha
     más profunda — una sola capa continua, nunca repetida por celda. */
  --header-gradient: linear-gradient(90deg, var(--brand-primary-light, #304071) 0%, var(--brand-primary) 50%, var(--brand-primary-deep, #10152e) 100%);
  --bg-header-accent: var(--header-gradient);
  --border-header-accent: var(--brand-primary-deep, #10152e);
  --text-header-accent: #ffffff;
  --bg-table-header: var(--bg-header-accent);
  --text-table-header: var(--text-header-accent);
  --bg-sidebar: var(--brand-primary);
  --bg-header: #ffffff;
  --bg-surface: #ffffff;         /* superficie estándar (panel, tabla) */
  --bg-elevated: #ffffff;        /* card elevada — se distingue por sombra, no por color (instrucción 7) */
  --bg-popover: #ffffff;

  /* ---- Texto ----
     Fase 11.2.1: --text-secondary/--text-muted oscurecidos un paso
     (legibilidad de subtítulos/labels/metadata, sin volverlos texto
     pesado — --text-primary intacto). */
  --text-primary: #1a1d29;
  --text-secondary: #4b5468;
  --text-muted: #6b7690;
  --text-inverse: #ffffff;
  --text-on-brand: #ffffff;

  /* ---- Bordes ---- */
  --border-subtle: #e4e7ed;
  --border-strong: #c7cddb;
  /* Fase 11.4B — borde de marca reutilizado por toolbars/tarjetas con
     borde navy (antes literal `#20294b` repetido en 3 selectores de
     main.css) — un solo token para poder reasignarlo en dark sin
     tocar cada selector. */
  --border-brand: #20294b;

  /* ---- Estados de fila reutilizados por main.css (hover/seleccionado
     de tablas — Fase 11.4B, antes literales `#eef1f5`/`rgba(32,41,75,
     .05)` repetidos en varios bloques de hover). Sin cambio de valor
     en light — sólo se nombran para poder reasignarlos en dark. ---- */
  --row-hover-bg: #eef1f5;
  --row-hover-tint: rgba(32, 41, 75, 0.05);
  --row-selected-bg: rgba(252, 197, 9, 0.12);

  /* ---- Semánticos (fuera de la escala de nivel) ---- */
  --success: #16a34a;
  --success-soft: #e8f5ee;
  --warning: #ca8a04;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --info: #2563eb;
  --info-soft: #e8eef8;

  /* ---- Escala de 5 niveles de desempeño (Fase 1 — convención operativa
     ya entendida por el equipo, NUNCA reinventar) ---- */
  --nivel-excelente: #059669;
  --nivel-muy-bueno: #16a34a;
  --nivel-bueno: #ca8a04;
  --nivel-en-mejora: #ea580c;
  --nivel-requiere-mejora: #dc2626;

  /* ---- Colores de gráficos (charts) — paleta distinguible, coherente con marca ---- */
  --chart-1: var(--brand-primary);
  --chart-2: var(--brand-accent);
  --chart-3: #2563eb;
  --chart-4: #16a34a;
  --chart-5: #dc2626;
  --chart-6: #7c3aed;

  /* ---- Radios ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-card: 22px;
  --radius-pill: 999px;

  /* ---- Sombras (amplias, suaves, difusas — nunca la misma para todo,
     instrucción 7/11; Fase 11.2.2: intensidad subida un paso más —
     debía "verse en el screenshot", no sólo existir en el CSS). ---- */
  /* Fase 11.2.5 — profundidad reforzada de nuevo (seguía leyéndose
     plano); tope en --shadow-modal, nunca negro puro. */
  --shadow-subtle: 0 5px 16px rgba(24, 33, 62, 0.08);
  --shadow-card: 0 10px 28px rgba(24, 33, 62, 0.12);
  --shadow-elevated: 0 14px 36px rgba(24, 33, 62, 0.15);
  --shadow-modal: 0 22px 52px rgba(24, 33, 62, 0.18);

  /* ---- Espaciado (escala coherente) ---- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ---- Tipografía — sin fuente externa (rendimiento, instrucción 10/24) ---- */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-page-title-size: 28px;
  --text-page-title-weight: 700;
  --text-page-title-lh: 1.2;

  --text-section-title-size: 20px;
  --text-section-title-weight: 700;
  --text-section-title-lh: 1.3;

  --text-card-title-size: 15px;
  --text-card-title-weight: 700;
  --text-card-title-lh: 1.4;

  --text-kpi-size: 32px;
  --text-kpi-weight: 700;
  --text-kpi-lh: 1.1;

  --text-body-size: 14px;
  --text-body-weight: 400;
  --text-body-lh: 1.5;

  --text-label-size: 12px;
  --text-label-weight: 600;
  --text-label-lh: 1.4;
  --text-label-tracking: 0.02em;

  --text-caption-size: 12px;
  --text-caption-weight: 400;
  --text-caption-lh: 1.4;

  --text-table-size: 13px;
  --text-table-weight: 400;
  --text-table-lh: 1.45;

  --text-button-size: 14px;
  --text-button-weight: 600;
  --text-button-lh: 1;

  /* ---- Motion (instrucción 15: 180-280ms, respeta reduced-motion abajo) ---- */
  --motion-fast: 180ms;
  --motion-normal: 220ms;
  --motion-slow: 280ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Iconografía del shell (Fase 11.2) ---- */
  --icon-stroke: 1.75;

  /* ---- Breakpoints de referencia (uso en media queries, documental) ----
     mobile: <640px · tablet: 640-1024px · laptop: 1024-1440px · desktop: >1440px */
}

/*
  Fase 11.4B — Dark Mode implementado con el mismo criterio anunciado
  arriba: cada variable de superficie/texto/borde/semántica se
  redefine bajo [data-theme="dark"] (preferencia explícita del
  usuario, core/theme.js) Y bajo @media(prefers-color-scheme:dark)
  cuando NO hay preferencia explícita de light (el sistema operativo
  manda). Ningún token se define SÓLO en un bloque de tema — todos ya
  existían arriba con su valor light; aquí sólo se reasignan.

  Light Mode (arriba) es la referencia aprobada — INTOCADO. Dark Mode
  es únicamente una reasignación cromática/de contraste de los mismos
  tokens que ya consume toda la app: ningún selector de main.css
  necesita cambiar para heredar el tema (salvo los pocos casos
  documentados en main.css que usaban un color literal en vez de un
  token — corregidos ahí, no aquí).

  Navy corporativo (#20294b/--brand-primary), navy claro
  (#304071/--brand-primary-light), navy profundo
  (#10152e/--brand-primary-deep) y el degradado de headers/sidebar que
  se construye con ellos NO cambian entre temas — misma familia visual
  en Light y Dark (sidebar y headers de tabla siguen navy siempre).
  Dorado Scholl's (#fcc509/--brand-accent) tampoco cambia — es el
  acento de marca, nunca debe leerse como "otro color" según el tema.
*/
:root[data-theme="dark"] {
  /* ---- Superficies (NIVEL 0-3) ---- */
  --bg-app: #0f1424; /* Canvas principal */
  --bg-app-deep: #0b0f1c;
  --bg-surface-secondary: #121a2c; /* NIVEL 1 — recesado (inputs, thead) */
  --bg-header: #161d31;
  --bg-surface: #161d31; /* NIVEL 2 — "superficie/card" */
  --bg-elevated: #1c2640; /* NIVEL 2 elevado — se distingue por tono, no sólo por sombra */
  --bg-popover: #1c2640;

  /* ---- Texto ---- */
  --text-primary: #f5f7fb;
  --text-secondary: #aeb8cc;
  /* Ajuste 12A — CONTRASTE DARK: #7f8aa3 medía 4.33:1 sobre --bg-elevated
     (#1c2640), bajo el 4.5:1 recomendado para texto normal. Aclarado al
     mínimo necesario (+6/+6/+5 por canal) — sigue claramente por debajo
     de --text-secondary (#aeb8cc), la jerarquía no cambia. */
  --text-muted: #8590a8;
  /* --text-inverse/--text-on-brand quedan en #ffffff a propósito: son
     el texto que ya vive SOBRE superficies navy/de color (botones,
     sidebar, badges) — esas superficies no cambian con el tema. */

  /* ---- Bordes ---- */
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* ---- Estados de fila reutilizados por main.css (hover/seleccionado) ---- */
  --row-hover-bg: rgba(255, 255, 255, 0.12);
  --row-hover-tint: rgba(255, 255, 255, 0.12);
  --row-selected-bg: rgba(252, 197, 9, 0.08);

  /* ---- Borde de marca reutilizado por toolbars/tarjetas con borde navy ---- */
  --border-brand: var(--brand-primary-light); /* #304071 — visible contra las superficies oscuras de arriba; #20294b se fundía */

  /* ---- Semánticos ---- */
  --success: #4fb38b;
  --success-soft: rgba(79, 179, 139, 0.16);
  --warning: #e58a2b;
  --warning-soft: rgba(229, 138, 43, 0.16);
  --danger: #d85663;
  --danger-soft: rgba(216, 86, 99, 0.16);
  --info: #6c9bf5;
  --info-soft: rgba(108, 155, 245, 0.14);

  /* ---- Acento suave (fondos tenues sobre superficie navy — botones
     .btn--secondary, focus ring, hover de controles) — en light es un
     tinte navy sobre blanco; en dark, el mismo tinte navy se pierde
     contra superficies ya oscuras, así que pasa a un tinte NEUTRO
     claro con la misma función (leve realce, nunca protagonista). ---- */
  --accent-soft: rgba(255, 255, 255, 0.08);

  /* ---- Sombras: una sombra navy translúcida (light) se funde con un
     canvas ya oscuro — en dark la profundidad depende de negro real +
     la diferencia de tono entre superficies (--border-subtle ayuda
     cuando la sombra sola no alcanza, instrucción 3). ---- */
  --shadow-subtle: 0 5px 16px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 14px 36px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 22px 52px rgba(0, 0, 0, 0.65);

  /* ---- Selectores nativos (date/select/scrollbar) con la paleta del propio SO acorde al tema ---- */
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app: #0f1424;
    --bg-app-deep: #0b0f1c;
    --bg-surface-secondary: #121a2c;
    --bg-header: #161d31;
    --bg-surface: #161d31;
    --bg-elevated: #1c2640;
    --bg-popover: #1c2640;

    --text-primary: #f5f7fb;
    --text-secondary: #aeb8cc;
    /* Ajuste 12A — CONTRASTE DARK: #7f8aa3 medía 4.33:1 sobre --bg-elevated
     (#1c2640), bajo el 4.5:1 recomendado para texto normal. Aclarado al
     mínimo necesario (+6/+6/+5 por canal) — sigue claramente por debajo
     de --text-secondary (#aeb8cc), la jerarquía no cambia. */
  --text-muted: #8590a8;

    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.18);

    --row-hover-bg: rgba(255, 255, 255, 0.06);
    --row-hover-tint: rgba(255, 255, 255, 0.06);
    --row-selected-bg: rgba(252, 197, 9, 0.08);

    --border-brand: var(--brand-primary-light);

    --success: #4fb38b;
    --success-soft: rgba(79, 179, 139, 0.16);
    --warning: #e58a2b;
    --warning-soft: rgba(229, 138, 43, 0.16);
    --danger: #d85663;
    --danger-soft: rgba(216, 86, 99, 0.16);
    --info: #6c9bf5;
    --info-soft: rgba(108, 155, 245, 0.14);

    --accent-soft: rgba(255, 255, 255, 0.08);

    --shadow-subtle: 0 5px 16px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-elevated: 0 14px 36px rgba(0, 0, 0, 0.55);
    --shadow-modal: 0 22px 52px rgba(0, 0, 0, 0.65);

    color-scheme: dark;
  }
}

/* Light Mode explícito (usuario eligió "claro" aunque el sistema esté
   en oscuro) — mismo valor que :root, sólo para que `color-scheme`
   quede coherente con el tema realmente aplicado (inputs/scrollbars
   nativos). Ningún otro token necesita repetirse: sin esta regla ni
   la de arriba, la cascada ya deja el valor de :root vigente. */
:root[data-theme="light"] {
  color-scheme: light;
}

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