/* DM Sans servida por la app (Faustino, 22/10: sin depender de Google). Archivos de @fontsource/dm-sans 5.3.0, licencia OFL. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/dm-sans-latin-600-normal.woff2") format("woff2"); }

/* tokens.css — Líneas Brasil (InteliaSolve) · sistema «Lo sano no hace ruido».
   Fuente de la verdad visual del panel. La maqueta (docs/diseno/maqueta.html) y la app enlazan ESTE archivo.
   Oscuro por defecto (como inteliasolve.com). Claro es un PAR DISEÑADO: se activa solo
   con el conmutador (data-tema="claro"); sin elegir, oscuro siempre.
   Lo mide: contraste_tokens.py app/public/tokens.css --pares docs/diseno/contraste.json
   Regla: un componente nunca escribe un color, un px de espaciado ni un radio fuera de estas variables. */

/* ── Forma, escala y movimiento (iguales en los dos temas) ─────────────────── */
:root {
  --fuente: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tipografía: el panel usa 4 pasos (13 · 16 · 22 · 40). 28 solo en el login. */
  --fs-meta: 13px;     /* metadatos, ejes, leyendas, chips */
  --fs-cuerpo: 16px;   /* texto, inputs (nunca menos de 16 en un input) */
  --fs-titulo: 22px;   /* títulos de sección y la cifra del mes */
  --fs-login: 28px;    /* solo el título del login */
  --fs-heroe: 40px;    /* los minutos que quedan hoy: el único número grande */
  --lh-apretado: 1.1;
  --lh-titulo: 1.25;
  --lh-cuerpo: 1.5;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --tracking-heroe: -0.03em;
  --tracking-titulo: -0.01em;

  /* Espaciado: grupos apretados, separaciones generosas */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* Radios: uno por familia */
  --r-xs: 2px;         /* punta de las barras del gráfico */
  --r-s: 8px;          /* chip de tipo, input, botón, tooltip */
  --r-m: 14px;         /* superficie (tarjeta de línea, bloque del mes, lista) */
  --r-pill: 999px;     /* chip de estado, medidor */

  /* Medidas */
  --toque: 44px;       /* blanco táctil mínimo */
  --icono: 18px;
  --icono-s: 16px;
  --medidor-alto: 10px;
  --linea-fina: 1px;
  --foco-ancho: 2px;
  --hueco-datos: 2px;  /* separación de superficie entre segmentos del gráfico y el medidor */
  --ancho-max: 992px;  /* contenido de 960 px: tope de ancho de lectura */
  --ancho-login: 380px;
  --ancho-lectura: 68ch;
  --corte-escritorio: 960px; /* documentado; las media queries no aceptan var(), se repite el valor */

  /* Movimiento: techo 240 ms, solo transform/opacity, nada rebota, nada en loop */
  --dur-rapida: 140ms;
  --dur-base: 180ms;
  --dur-lenta: 240ms;
  --ease-salida: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Oscuro: el tema principal ─────────────────────────────────────────────── */
:root, :root[data-tema="oscuro"] {
  --logo-alto: 18px;          /* alto del logo de InteliaSolve en la barra y el login */
  color-scheme: dark;

  /* Superficie: casi negro violáceo de la marca */
  --bg: #08060F;
  --surface: #13101F;
  --surface-2: #1C182C;
  --border: #2A2540;          /* separador decorativo únicamente */
  --border-strong: #6F6990;   /* borde de todo control: 3:1 */

  /* Texto */
  --fg: #F3F1FA;
  --fg-2: #BDB8D0;
  --fg-3: #9893AE;

  /* Interacción: un primario por vista, el foco, los enlaces. Jamás estado ni datos. */
  --acento: #6C4CFF;          /* relleno del botón primario */
  --acento-hover: #5B3BF0;
  --sobre-acento: #FFFFFF;
  --acento-texto: #A78BFA;    /* enlaces y anillo de foco sobre el fondo */

  /* Datos: gris violáceo por defecto; el color aparece solo donde algo anda mal */
  --dato: #7F7A9C;            /* minutos dentro del límite (barra y medidor) */
  --pista: #2A2540;           /* pista vacía del medidor, días que todavía no pasaron */
  --guia: #6F6990;            /* línea del límite en el gráfico */

  /* Estado: el color nunca va solo (ícono SVG + palabra) */
  --st-peligro: #FF8A7D;      /* pasó el límite / excedente (texto e ícono) */
  --st-peligro-dato: #F0614F; /* el segmento de excedente en barras y medidor */
  --st-peligro-velo: rgb(231 76 60 / 0.16);   /* se apoya SOLO sobre --surface */
  --st-alerta: #F5A524;       /* cerca del límite / salientes rechazadas */
  --st-alerta-velo: rgb(245 158 11 / 0.13);   /* se apoya SOLO sobre --surface o --bg */
  --st-info-velo: rgb(108 76 255 / 0.16);     /* datos de ejemplo; se apoya sobre --bg */

  /* Marca: el degradé vive SOLO en el wordmark (excepción registrada en DESIGN.md §3) */
  --marca-degradado: linear-gradient(120deg, #F3F1FA 25%, #A78BFA 65%, #FF6FD8 100%);

  /* Elevación: en oscuro, superficie + hairline; la única sombra es la del tooltip */
  --sombra-flotante: 0 8px 24px -8px rgb(0 0 0 / 0.6);
  --tooltip-bg: #F3F1FA;
  --tooltip-fg: #14111F;
}

/* ── Claro: par diseñado (no inversión). Solo si se elige con el botón: arranca oscuro siempre (Faustino, 22/10). */

:root[data-tema="claro"] {
  color-scheme: light;
  --bg: #F5F4FA;
  --surface: #FFFFFF;
  --surface-2: #EFEDF6;
  --border: #E2DFEC;
  --border-strong: #7C7696;
  --fg: #14111F;
  --fg-2: #48435C;
  --fg-3: #5F5A74;
  --acento: #6C4CFF;
  --acento-hover: #5B3BF0;
  --sobre-acento: #FFFFFF;
  --acento-texto: #5536E8;
  --dato: #807B9A;
  --pista: #E8E5F2;
  --guia: #7C7696;
  --st-peligro: #B8301F;
  --st-peligro-dato: #D9432F;
  --st-peligro-velo: rgb(217 67 47 / 0.09);
  --st-alerta: #8A5300;
  --st-alerta-velo: rgb(245 158 11 / 0.14);
  --st-info-velo: rgb(108 76 255 / 0.09);
  --marca-degradado: linear-gradient(120deg, #14111F 25%, #6C4CFF 65%, #D83FB4 100%);
  --sombra-flotante: 0 8px 24px -10px rgb(20 15 40 / 0.35);
  --tooltip-bg: #14111F;
  --tooltip-fg: #F3F1FA;
}