/*
  tokens.css — traducción de los tokens DTCG (../../tokens/*.tokens.json) a custom properties CSS,
  para que los HTML de verificación por render los consuman por nombre (nunca un HEX suelto).
  Es el paso de "build" que en un pipeline real haría Style Dictionary u otra herramienta DTCG->CSS;
  aquí se escribe a mano porque no hay build tool conectado, y se declara así explícitamente
  (ver tokens.md, método). Los NOMBRES coinciden 1:1 con los tokens JSON.
*/

:root {
  color-scheme: light;

  /* primitivos de marca (heredados Paso 11) */
  --p-petroleo: #1C5C57;
  --p-petroleo-claro: #46B9AF;
  --p-tinta: #241F1B;
  --p-ambar: #C49831;
  --p-musgo: #317763;
  --p-musgo-claro: #67C1A7;
  --p-ocre: #8C5217;
  --p-ocre-claro: #E19547;
  --p-guinda: #B23A2E;
  --p-guinda-claro: #DA7B71;
  --p-hueso: #FAF7F2;
  --p-carbon: #17201F;
  --p-gris-calido: #6E665E;
  --p-gris-calido-oscuro: #B6AFA5;

  /* primitivos derivados que faltaban en esta traducción a mano (agregados 2026-08-24,
     tras detectarse la deriva con tests/casos/test_tokens.py). Existían en
     primitivos.tokens.json desde el Paso 06 pero nunca se copiaron aquí, y la
     traducción se declara 1:1. Ninguno los consume hoy; están para que el día que
     se conecte Style Dictionary el CSS no cambie de golpe. */
  --p-neutral-400: #D0B99C;                    /* decorativo: NO cumple 3:1 como borde funcional */
  --p-neutral-dark-400: #4B624A;               /* decorativo, tema oscuro: misma advertencia */
  --p-petroleo-pressed-strong-claro: #1B524E;  /* state layer: overlay Carbón 16% sobre Petróleo */
  --p-petroleo-claro-pressed-strong-oscuro: #63C3BA;  /* overlay Hueso 16% sobre PetróleoClaro */

  /* primitivos: espaciado (grilla 8pt / subunidad 4pt) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;

  /* primitivos: forma */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;

  /* primitivos: tipografia (base 16px, ratio 1.25, con 13/15 fijados literal de tipografia.md) */
  --font-family-producto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-marca: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-050: 13px; --font-size-100: 15px; --font-size-200: 16px; --font-size-300: 20px;
  --font-size-400: 24px; --font-size-500: 32px; --font-size-600: 40px;
  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600;
  --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.65;
  --letter-spacing-wide: 0.02em;

  /* primitivos: elevacion (shadow color = Carbon a 8/12/18%) */
  --elevation-1: 0 1px 2px rgba(23,32,31,0.08);
  --elevation-2: 0 4px 8px rgba(23,32,31,0.12);
  --elevation-3: 0 12px 24px rgba(23,32,31,0.18);

  /* primitivos: motion */
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.2,0,0,1);

  /* ===== SEMANTICOS -- TEMA CLARO (default) ===== */
  --color-surface-page: var(--p-hueso);
  --color-surface-raised: #F4EEE4;
  --color-surface-sunken: #EFE5D7;
  --color-surface-overlay: #F4EEE4;
  --color-surface-scrim: rgba(23,32,31,0.45);

  --color-border-default: var(--p-gris-calido);
  --color-border-subtle: #E2D3BD;
  --color-border-focus: var(--p-petroleo);
  --color-border-disabled: #E2D3BD;

  --color-text-primary: var(--p-tinta);
  --color-text-secondary: var(--p-gris-calido);
  --color-text-disabled: #AD8D69;
  --color-text-inverse: var(--p-hueso);

  --color-action-primary-bg: var(--p-petroleo);
  --color-action-primary-bg-hover: #1C5753;
  --color-action-primary-bg-active: #1B5550;
  --color-action-primary-bg-disabled: #E2D3BD;
  --color-action-primary-text: var(--p-hueso);
  --color-action-primary-text-disabled: #AD8D69;
  --color-action-secondary-border: var(--p-petroleo);
  --color-action-secondary-text: var(--p-petroleo);
  --color-action-secondary-bg-hover: #E8EBE6;

  --color-accent-bg: var(--p-ambar);
  --color-accent-text: var(--p-tinta);

  --color-feedback-success-chip-bg: var(--p-musgo);
  --color-feedback-success-chip-text: var(--p-hueso);
  --color-feedback-success-banner-bg: #EDEBD1;
  --color-feedback-success-banner-icon: var(--p-musgo);
  --color-feedback-warning-chip-bg: var(--p-ocre);
  --color-feedback-warning-chip-text: var(--p-hueso);
  --color-feedback-warning-banner-bg: #EEE2D0;
  --color-feedback-warning-banner-icon: var(--p-ocre);
  --color-feedback-error-chip-bg: var(--p-guinda);
  --color-feedback-error-chip-text: var(--p-hueso);
  --color-feedback-error-banner-bg: #F0E5D6;
  --color-feedback-error-banner-icon: var(--p-guinda);
  --color-feedback-info-banner-bg: #ECEACC;
  --color-feedback-info-banner-icon: var(--p-petroleo);

  --color-status-activo-bg: var(--p-musgo);
  --color-status-activo-text: var(--p-hueso);
  --color-status-pausado-bg: var(--p-ocre);
  --color-status-pausado-text: var(--p-hueso);
  --color-status-atendido-bg: var(--p-ambar);
  --color-status-atendido-text: var(--p-tinta);
  /* agregados por la feature de estados de negocio (2026-08-26): el pipeline
     configurable necesita un tono mas que los tres estados de handoff. */
  --color-status-progreso-bg: var(--p-petroleo);
  --color-status-progreso-text: var(--p-hueso);
  --color-status-peligro-bg: var(--p-guinda);
  --color-status-peligro-text: var(--p-hueso);

  /* componentes (capa 3) */
  --button-radius: var(--radius-md);
  --button-min-height: 44px;
  --input-radius: var(--radius-sm);
  --input-min-height: 44px;
  --chip-radius: var(--radius-full);
  --card-radius: var(--radius-lg);
  --card-elevation: var(--elevation-1);
  --modal-radius: var(--radius-lg);
  --modal-elevation: var(--elevation-3);
  --nav-item-min-height: 48px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-surface-page: var(--p-carbon);
  --color-surface-raised: #23312C;
  --color-surface-sunken: #2B3B33;
  --color-surface-overlay: #2B3B33;
  --color-surface-scrim: rgba(0,0,0,0.6);

  --color-border-default: var(--p-gris-calido-oscuro);
  --color-border-subtle: #384B3D;
  --color-border-focus: var(--p-petroleo-claro);
  --color-border-disabled: #384B3D;

  --color-text-primary: var(--p-hueso);
  --color-text-secondary: var(--p-gris-calido-oscuro);
  --color-text-disabled: #738264;
  --color-text-inverse: var(--p-carbon);

  --color-action-primary-bg: var(--p-petroleo-claro);
  --color-action-primary-bg-hover: #54BEB4;
  --color-action-primary-bg-active: #5CC0B7;
  --color-action-primary-bg-disabled: #384B3D;
  --color-action-primary-text: var(--p-carbon);
  --color-action-primary-text-disabled: #738264;
  --color-action-secondary-border: var(--p-petroleo-claro);
  --color-action-secondary-text: var(--p-petroleo-claro);
  --color-action-secondary-bg-hover: #1C2F2D;

  --color-accent-bg: var(--p-ambar);
  --color-accent-text: var(--p-tinta);

  --color-feedback-success-chip-bg: var(--p-musgo);
  --color-feedback-success-chip-text: var(--p-hueso);
  --color-feedback-success-banner-bg: #1D3C34;
  --color-feedback-success-banner-icon: var(--p-musgo-claro);
  --color-feedback-warning-chip-bg: var(--p-ocre);
  --color-feedback-warning-chip-text: var(--p-hueso);
  --color-feedback-warning-banner-bg: #3A301C;
  --color-feedback-warning-banner-icon: var(--p-ocre-claro);
  --color-feedback-error-chip-bg: var(--p-guinda);
  --color-feedback-error-chip-text: var(--p-hueso);
  --color-feedback-error-banner-bg: #472823;
  --color-feedback-error-banner-icon: var(--p-guinda-claro);
  --color-feedback-info-banner-bg: #14322C;
  --color-feedback-info-banner-icon: var(--p-petroleo-claro);

  --color-status-activo-bg: var(--p-musgo);
  --color-status-activo-text: var(--p-hueso);
  --color-status-pausado-bg: var(--p-ocre);
  --color-status-pausado-text: var(--p-hueso);
  --color-status-atendido-bg: var(--p-ambar);
  --color-status-atendido-text: var(--p-tinta);
  /* En oscuro el petroleo pleno se pierde contra el fondo: se usa la variante
     clara con texto carbon, que es el par que ya resuelve el resto del tema. */
  --color-status-progreso-bg: var(--p-petroleo-claro);
  --color-status-progreso-text: var(--p-carbon);
  --color-status-peligro-bg: var(--p-guinda-claro);
  --color-status-peligro-text: var(--p-carbon);
}

/* ===== Estilos base compartidos por los lotes de verificacion ===== */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-producto);
  font-size: var(--font-size-200);
  line-height: var(--line-height-normal);
}
.tema-panel,
[data-theme="dark"],
.tema-oscuro,
.tema-claro {
  /* Reafirma color/background en cada contenedor de tema: la propiedad `color` hereda el
     VALOR COMPUTADO de un ancestro, no vuelve a resolver la custom property en cada hijo.
     Sin esta regla, los descendientes que no fijan `color` explicito (h1/h2/h3, parrafos)
     heredan el valor ya resuelto del <body> (tema claro) aunque esten dentro de
     [data-theme="dark"] -- bug real encontrado por render, no hipotetico. */
  background: var(--color-surface-page);
  color: var(--color-text-primary);
}
.tema-panel {
  padding: var(--space-8);
}
h1, h2, h3 { font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-4) 0; }
h1 { font-size: var(--font-size-500); }
h2 { font-size: var(--font-size-400); }
h3 { font-size: var(--font-size-300); }
.etiqueta-tema {
  font-size: var(--font-size-050);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  display: block;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); }
.grid-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-6); }
.bloque {
  background: var(--color-surface-raised);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}
.bloque-titulo { font-size: var(--font-size-100); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); color: var(--color-text-secondary); }
.fila { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--space-3); }