/* ============================================================
   MODO TEGEL (opt-in) — tipografía Scania Sans + estética Tegel
   ------------------------------------------------------------
   Se activa con el botón "T" del topnav (añade `body.tegel-mode`)
   y se persiste en localStorage. TODO está scopeado bajo
   `body.tegel-mode` salvo el @font-face y el propio botón.

   No-conflicto por diseño:
   - NO toca los tokens de color (--tds-blue-*, etc.) que leen las
     sparklines SVG y Chart.js -> las gráficas no cambian.
   - Chart.js pinta en <canvas> con su propia config de fuente, así
     que el cambio de fuente CSS no afecta al texto de las gráficas.
   - Solo cambia: familia tipográfica, radios (esquinas) y tracking
     de encabezados.

   Fuente: Scania Sans (subset latino) bundleada en /fonts/ desde
   el paquete oficial @scania/tegel (su CDN público responde 403).
   Same-origin -> sin CORS. Solo se descarga al activar el modo.
   ============================================================ */

/* Nombre propio ("Scania Sans Web") para NO activarse en modo off:
   la app referencia 'Scania Sans' (que cae a Inter al no estar cargada). */
@font-face {
  font-family: 'Scania Sans Web';
  font-weight: 400; font-style: normal; font-display: swap;
  src: url('/fonts/ScaniaSans-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Web';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('/fonts/ScaniaSans-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Web';
  font-weight: 400; font-style: italic; font-display: swap;
  src: url('/fonts/ScaniaSans-Italic.woff') format('woff');
}

/* --- Botón "T" del topnav (visible y consistente en ambos modos) --- */
.topnav-tegel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 8px; flex-shrink: 0;
  border-radius: var(--tds-radius-sm);
  background: var(--tds-white);
  border: 1px solid var(--tds-border-subtle);
  color: var(--tds-text-secondary);
  font-weight: 800; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background var(--tx-fast), border-color var(--tx-fast), color var(--tx-fast);
}
.topnav-tegel:hover { background: var(--tds-blue-50); border-color: var(--tds-blue-300); color: var(--tds-blue-500); }
.topnav-tegel:focus-visible { outline: 2px solid var(--tds-blue-300); outline-offset: 2px; }
.topnav-tegel[aria-pressed="true"] { background: var(--tds-blue-300); border-color: var(--tds-blue-300); color: #fff; }

/* ============================================================
   ACTIVADO · body.tegel-mode
   ============================================================ */
body.tegel-mode {
  /* Tipografía oficial Scania (cae a Inter si el CDN no responde). */
  --font-sans: 'Scania Sans Web', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Estética Tegel: esquinas rectas. Solo afecta a cajas con radio por token;
     no afecta a <canvas>/<svg> de las gráficas. */
  --tds-radius-xs: 0;
  --tds-radius-sm: 0;
  --tds-radius-md: 0;
  --tds-radius-lg: 0;
  --radius-lg: 0;
  /* Cards Tegel: planas con borde de 1px en vez de sombra de elevación.
     Redefinir los tokens de sombra como un anillo de 1px cubre TODAS las
     superficies de card (kpi, paneles, charts, banners) sin enumerarlas,
     y es reversible. Las gráficas (canvas/svg) no usan estos tokens. */
  --shadow-xs: 0 0 0 1px var(--tds-border-subtle);
  --shadow-sm: 0 0 0 1px var(--tds-border-subtle);
  --shadow:    0 0 0 1px var(--tds-border-strong);
  --shadow-lg: 0 0 0 1px var(--tds-border-strong);
}

/* Encabezados: refinado tipográfico Tegel (Scania Sans + tracking). */
body.tegel-mode h1, body.tegel-mode h2, body.tegel-mode h3,
body.tegel-mode h4, body.tegel-mode h5, body.tegel-mode h6 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

/* Salvaguarda explícita: el contenido de las gráficas nunca hereda cambios
   tipográficos (Chart.js ya usa canvas; esto cubre cualquier <text> SVG). */
body.tegel-mode canvas { font-family: initial; }