/* ==========================================================================
   tokens.css - Capa 1: fuente unica de verdad (design tokens)
   Fase 1 del refactor de front: tokens EXISTENTES movidos tal cual, sin
   cambiar valores. Las escalas (space/radius/shadow/text) llegan en Fase 2.
   Baseline: docs/baseline-front/  |  Rollback: tag pre-refactor-front-20260829
   ========================================================================== */
:root {
  /* --- Base (colores, superficie, texto, sombra) --- */
  --bg: #f4f7fb;
  --card: #ffffff;
  --surface: #ffffff;
  --text: #162033;     /* texto principal: valores, párrafos */
  --text-2: #475569;   /* texto secundario: etiquetas, ayudas largas */
  --muted: #667085;    /* texto apagado: notas, fechas, contadores */
  --navy: #000078;     /* azul marino de marca: encabezados de tabla, títulos de sección */
  /* Superficies y líneas de componentes (el modo oscuro solo cambia estos valores). */
  --surface-2: #f8fafc;   /* fondo sutil: casillas, pie de ventana, totales */
  --surface-3: #f1f5f9;   /* fondo más marcado: filas de totales, chips neutros */
  --line-2: #d0d5dd;      /* bordes de campos, contenedores de tabla */
  --table-head: #e3e9f8;  /* encabezado de tabla */
  --row-alt: #fafbfc;     /* fila alterna */
  --row-hover: #eef4ff;   /* fila bajo el puntero */
  --row-line: #eef1f6;    /* separador de filas */
  --card-grad-1: #f9fbff; --card-grad-2: #f4f8fd; --card-line: #e2eaf4;  /* tarjetas (portal.css) */
  --on-primary: #ffffff;  /* texto sobre botón/fondo principal */
  --success-bg: #ecfdf3; --success-line: #abefc6;
  --warning-bg: #fff7e6;
  --danger-bg: #fff1f0;
  /* Chips de estado (sem-chip): fondo + texto. */
  --sem-verde-bg: #dcfce7;    --sem-amarillo-bg: #fef9c3; --sem-naranja-bg: #ffedd5; --sem-naranja: #c2410c;
  --sem-rojo-bg: #fee2e2;     --sem-fuera-bg: #e5e7eb;    --sem-azul-bg: #e0edff;    --sem-azul: #1e40af;
  --sem-gris-bg: #eef2f7;
  --line: #e6ebf2;
  --primary: #123f8c;
  --primary-2: #1f5dbb;
  --soft-blue: #eef5ff;
  --success: #0f7b45;
  --warning: #9a6100;
  --danger: #b42318;
  --shadow: var(--shadow-md); /* compat: apunta a la escala de elevacion */
  font-family: Arial, Helvetica, sans-serif;

  /* --- Branding TOTAL QC / acentos de usuario --- */
  --tqc-header: #071B3A;
  --tqc-header-2: #0B2D5C;
  --tqc-yellow: #FFC000;
  --dorado: #FFC000;      /* dorado de marca fijo (los temas no lo cambian): brillos y acentos especiales */
  /* "TITAN CORE" en dorado metálico (igual que en la app): hondo en las puntas, vivo al centro, y su destello. */
  --dorado-hondo: #D99A00;
  --dorado-vivo: #FFD84D;
  --destello-dorado: #FFF3C4;
  /* Metal tornasolado del botón del login (como la app): grafito, plata, cian, acero, violeta, plata, ámbar, acero. */
  --metal-1: #AEB9CC; --metal-2: #EFF3F9; --metal-3: #6FD3EA; --metal-4: #8796B0;
  --metal-5: #B3A2FF; --metal-6: #DDE3EE; --metal-7: #E8B985; --metal-8: #7C8AA5;
  --user-accent: #23B5D3;
  --user-accent-2: #FFC000;
  --user-accent-text: #071B3A;

  /* --- Escala de RADIOS (Fase 2). Antes habia 15 valores sueltos; se
     consolidan en pasos. Cada radio suelto se mapea al paso mas cercano. --- */
  --radius-xs: 6px;    /* <= 4,6,7px  (detalles minimos) */
  --radius-sm: 8px;    /* <= 8,9,10px (chips, inputs, botones pequenos) */
  --radius-md: 12px;   /* <= 11,12,13,14px (botones, controles) */
  --radius-lg: 16px;   /* <= 16,18px (tarjetas) */
  --radius-xl: 20px;   /* <= 20,22px (tarjetas grandes) */
  --radius-2xl: 24px;  /* <= 24px (heroes / cabeceras) */
  --radius-pill: 999px;/* pastilla / totalmente redondeado */
  --control-h: 36px;   /* alto único de botones y campos: en una barra todo queda parejo */

  /* --- Escala de ELEVACION (Fase 2). Sombras de caida unificadas con tinte
     azul de marca. Solo para elevacion generica (tarjetas, paneles, popovers);
     los glows de color e insets decorativos NO usan esta escala. --- */
  --shadow-sm: 0 1px 2px rgba(7, 27, 58, .06), 0 1px 3px rgba(7, 27, 58, .05);
  --shadow-md: 0 10px 24px rgba(7, 27, 58, .09);   /* tarjetas (reemplaza --shadow) */
  --shadow-lg: 0 18px 42px rgba(7, 27, 58, .12);   /* elevado / hover */
  --shadow-xl: 0 26px 60px rgba(7, 27, 58, .16);   /* modales / dropdowns */

  /* --- Escala de ESPACIADO (Fase 2). Base 4px. Estandar para paddings/margins
     /gaps nuevos y para la Fase 5. Retrofit del CSS existente = gradual. --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* --- Escala TIPOGRAFICA. Ningun font-size suelto en CSS de pantalla: solo estos pasos
     (lo vigila core.tests.TipografiaUnicaTests). Pesos permitidos: 400 texto y valores,
     600 enfasis (totales, columna que identifica la fila), 700 titulos y botones,
     800 solo encabezados de tabla y rotulos pequenos en mayuscula. --- */
  --text-2xs: 11px;  /* rotulos en mayuscula, encabezados de tabla densa */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;   /* base */
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
}

/* ==========================================================================
   MODO OSCURO: solo cambia los valores de los tokens. Se activa con
   <html data-scheme="oscuro"> (preferencia del usuario en su perfil). Toda pantalla que
   use tokens queda bien sola; las que aún tengan colores escritos a mano se pasan a
   tokens módulo por módulo (ver memoria ruta-ux). Las páginas de impresión no lo usan.
   ========================================================================== */
/* También en body: los temas de usuario (body[data-user-theme]) redefinen colores ahí y,
   con más peso, el oscuro les gana. Los acentos por tema en oscuro llegan en la fase de temas. */
:root[data-scheme="oscuro"],
:root[data-scheme="oscuro"] body {
  color-scheme: dark;
  --bg: #0e1626;
  --card: #172138;
  --surface: #172138;
  --surface-2: #1b2740;
  --surface-3: #21304d;
  --text: #e8eef8;
  --text-2: #c3cfe2;
  --muted: #94a6c2;
  --navy: #a9c4ff;
  --line: #29344e;
  --line-2: #3a4866;
  --soft-blue: #1d2c4a;
  --primary: #5b9bea;
  --primary-2: #7db4f2;
  --on-primary: #0b1424;
  --table-head: #1f2c47;
  --row-alt: #1a2540;
  --row-hover: #22345a;
  --row-line: #24304a;
  --card-grad-1: #1a2640; --card-grad-2: #162036; --card-line: #2a3651;
  --success: #35c07a; --success-bg: #12301f; --success-line: #1f5a3a;
  --warning: #e2ab45; --warning-bg: #33280f;
  --danger: #ef6a5f;  --danger-bg: #3a1a1a;
  --sem-verde-bg: #143423;    --sem-amarillo-bg: #3a3212; --sem-naranja-bg: #3d2614; --sem-naranja: #f0a060;
  --sem-rojo-bg: #3d1a1c;     --sem-fuera-bg: #2a3346;    --sem-azul-bg: #1a2c52;    --sem-azul: #8fb4ff;
  --sem-gris-bg: #263149;
  --tqc-header: #0a1220;
  --tqc-header-2: #101d36;
  --user-bg-color: #0e1626;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 42px rgba(0, 0, 0, .55);
  --shadow-xl: 0 26px 60px rgba(0, 0, 0, .60);
}

/* El fondo personal del usuario y las plantillas de fondo claras no tapan el oscuro. */
:root[data-scheme="oscuro"] body,
:root[data-scheme="oscuro"] body[data-theme-template] {
  background: var(--bg);
  color: var(--text);
}

/* ==========================================================================
   TEMAS DE USUARIO (Mis configuraciones > Tema): cada tema cambia los colores de acento, la
   barra superior y el amarillo de marca, en claro y en oscuro. body[data-user-theme] lo pinta
   base.html según el perfil. Plantillas de fondo: modules/configuraciones.css.
   ========================================================================== */
body[data-user-theme="halloween"] {
  --primary: #7c2d12;
  --primary-2: #ea580c;
  --soft-blue: #fff3e6;
  --tqc-header: #241018;
  --tqc-header-2: #5a1f0f;
  --tqc-yellow: #ff8a00;
  --text: #24140f;
}
body[data-user-theme="navidad"] {
  --primary: #0f6b45;
  --primary-2: #b91c1c;
  --soft-blue: #edf8f1;
  --tqc-header: #0b3b2e;
  --tqc-header-2: #7f1d1d;
  --tqc-yellow: #f8d66d;
  --text: #11251d;
}
body[data-user-theme="verde"] {
  --primary: #087047;
  --primary-2: #0f8f5f;
  --soft-blue: #e7f8ef;
  --tqc-header: #083b2b;
  --tqc-header-2: #0f5a3d;
  --text: #10251d;
}
body[data-user-theme="cancer_mama"] {
  --primary: #be185d;
  --primary-2: #ec4899;
  --soft-blue: #fff0f6;
  --tqc-header: #831843;
  --tqc-header-2: #be185d;
  --tqc-yellow: #ffd6e7;
  --text: #351121;
}
body[data-user-theme="medio_ambiente"] {
  --primary: #166534;
  --primary-2: #0284c7;
  --soft-blue: #ecfdf5;
  --tqc-header: #064e3b;
  --tqc-header-2: #075985;
  --tqc-yellow: #a7f3d0;
  --text: #10251d;
}
body[data-user-theme="tqc_alternativo"] {
  --primary: #0f766e;
  --primary-2: #2563eb;
  --soft-blue: #eefaf8;
  --tqc-header: #102a43;
  --tqc-header-2: #0f766e;
  --tqc-yellow: #38bdf8;
  --text: #122033;
}

/* ===== Temas en MODO OSCURO =====
   Cada tema conserva su identidad en oscuro: acentos más claros (para leerse sobre fondo oscuro),
   barra superior en tonos profundos del tema y un fondo apenas teñido. El texto y las superficies
   son los del modo oscuro (tokens.css). Más peso que el bloque oscuro general para ganarle. */
:root[data-scheme="oscuro"] body[data-user-theme] {
  --soft-blue: color-mix(in srgb, var(--primary) 16%, var(--card));
  --navy: color-mix(in srgb, var(--primary) 55%, #ffffff);
  --bg: color-mix(in srgb, var(--tqc-header-2) 10%, #0b1220);
}
:root[data-scheme="oscuro"] body[data-user-theme="clasico"] {
  --soft-blue: #1d2c4a; --navy: #a9c4ff; --bg: #0e1626;
}
:root[data-scheme="oscuro"] body[data-user-theme="halloween"] {
  --primary: #fb923c; --primary-2: #f97316;
  --tqc-header: #1a0b10; --tqc-header-2: #4a1a0c; --tqc-yellow: #ff9a1f;
}
:root[data-scheme="oscuro"] body[data-user-theme="navidad"] {
  --primary: #4ade80; --primary-2: #f87171;
  --tqc-header: #06281f; --tqc-header-2: #5a1414; --tqc-yellow: #f8d66d;
}
:root[data-scheme="oscuro"] body[data-user-theme="verde"] {
  --primary: #34d399; --primary-2: #10b981;
  --tqc-header: #052a1e; --tqc-header-2: #0b4430;
}
:root[data-scheme="oscuro"] body[data-user-theme="cancer_mama"] {
  --primary: #f472b6; --primary-2: #ec4899;
  --tqc-header: #3f0b24; --tqc-header-2: #7a1243; --tqc-yellow: #ffc2dc;
}
:root[data-scheme="oscuro"] body[data-user-theme="medio_ambiente"] {
  --primary: #4ade80; --primary-2: #38bdf8;
  --tqc-header: #04302a; --tqc-header-2: #063f5e; --tqc-yellow: #a7f3d0;
}
:root[data-scheme="oscuro"] body[data-user-theme="tqc_alternativo"] {
  --primary: #2dd4bf; --primary-2: #60a5fa;
  --tqc-header: #0a1b2d; --tqc-header-2: #0b4a45; --tqc-yellow: #38bdf8;
}