/* Tokens del sistema visual: "Fluent" (Microsoft 365) con variante oscura.
   Cada color usa light-dark(claro, oscuro). El esquema lo fija color-scheme
   (por defecto sigue al sistema) y el atributo data-theme de <html>
   (lo pone js/nucleo.js: "claro" | "oscuro"; sin atributo = automático).
   Paleta (hex):
     Marca (acento)  claro #0F6CBD  · oscuro #479EF5
     Fondo           claro #FAF9F8  · oscuro #1B1B1B
     Superficie      claro #FFFFFF  · oscuro #292929
     Texto           claro #242424  · oscuro #FFFFFF
     Atenuado        claro #616161  · oscuro #C8C6C4
     Ok / Aviso / Error: ver bloque "Estados" (texto, relleno, fondo suave). */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer reset, base, components, utilities, views;

:root {
  color-scheme: light dark;

  /* Superficies */
  --bg: light-dark(#FAF9F8, #1B1B1B);
  --surface: light-dark(#FFFFFF, #292929);
  --surface-2: light-dark(#F5F5F5, #323232);
  --surface-3: light-dark(#EBEBEB, #3B3B3B);
  --bar-bg: var(--surface-3);
  --line: light-dark(#E1DFDD, #444444);
  --control: light-dark(#8A8886, #8A8886);
  --shadow-1: light-dark(0 1px 2px rgb(0 0 0 / 0.14), 0 0 2px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.28), 0 0 2px rgb(0 0 0 / 0.24));
  --shadow-2: light-dark(0 4px 8px rgb(0 0 0 / 0.14), 0 0 2px rgb(0 0 0 / 0.12), 0 4px 8px rgb(0 0 0 / 0.4), 0 0 2px rgb(0 0 0 / 0.3));

  /* Texto */
  --ink: light-dark(#242424, #FFFFFF);
  --ink-strong: light-dark(#000000, #FFFFFF);
  --muted: light-dark(#616161, #C8C6C4);

  /* Marca */
  --brand: light-dark(#0F6CBD, #479EF5);
  --accent: var(--brand);
  --on-brand: light-dark(#FFFFFF, #000000);
  --brand-soft: light-dark(#EBF3FC, #0F2A44);
  --brand-ink: light-dark(#0F548C, #9CC9FF);
  --focus: light-dark(#0F6CBD, #479EF5);

  /* Estados: ok / warn / bad. -fill = marcas y gráficos; -soft = fondo de badge; -ink = texto sobre -soft */
  --ok: light-dark(#0E700E, #92C353);
  --ok-fill: light-dark(#107C10, #92C353);
  --ok-soft: light-dark(#DFF6DD, #173A17);
  --ok-ink: light-dark(#0B5A0B, #B5E08C);
  --warn: light-dark(#835B00, #F7C948);
  --warn-fill: light-dark(#C19C00, #F7C948);
  --warn-soft: light-dark(#FFF4CE, #3D2F06);
  --warn-ink: light-dark(#6B4A00, #FDE79B);
  --bad: light-dark(#C50F1F, #FF99A4);
  --bad-fill: light-dark(#C50F1F, #FF99A4);
  --bad-soft: light-dark(#FDE7E9, #47151B);
  --bad-ink: light-dark(#A4262C, #FFB3BB);
  --neutral-soft: light-dark(#F0F0F0, #3B3B3B);
  --neutral-ink: light-dark(#424242, #D6D6D6);

  /* Tipografía: Inter embebida, pila del sistema como respaldo */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-2xs: 0.75rem;   /* 12: caption */
  --fs-xs: 0.8125rem;  /* 13 */
  --fs-sm: 0.875rem;   /* 14: cuerpo Fluent */
  --fs-md: 0.875rem;   /* 14: cuerpo */
  --fs-base: 1rem;     /* 16: campos (evita zoom en iOS) */
  --fs-lg: 1.125rem;   /* 18: subtítulo */
  --fs-xl: 1.25rem;    /* 20: título */
  --fs-2xl: 1.5rem;    /* 24: h1 móvil */
  --fs-3xl: 1.75rem;   /* 28: h1 escritorio */
  --lh-tight: 1.25;
  --lh-body: 1.43;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Espaciado en rejilla de 4px */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Radios, alturas y ancho (Fluent: controles 4px, superficies 8px) */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --hit: 44px;
  --content: 1120px;
  --rail: 240px;

  /* Movimiento */
  --dur: 150ms;
  --ease: cubic-bezier(0.33, 0, 0.67, 1);

  /* Mapa: filtro de las teselas OSM. light-dark() solo admite colores, así que el filtro se define por tema.
     Solo el tema oscuro atenúa las teselas; la atribución no pasa por aquí. */
  --map-tile-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) { --map-tile-filter: invert(0.88) hue-rotate(180deg) saturate(0.55) brightness(0.9); }
}
:root[data-theme="oscuro"] { --map-tile-filter: invert(0.88) hue-rotate(180deg) saturate(0.55) brightness(0.9); }

html[data-theme="claro"] { color-scheme: light; }
html[data-theme="oscuro"] { color-scheme: dark; }