/* frontend-planta/assets/planta-tokens.css */
/* ═══════════════════════════════════════════════════════════════════════════
   PLANTA TOKENS — capa de tokens SEMÁNTICOS para PlantaIA (planta.modulab.uy).

   ORIGEN: copia de `frontend/shared/tv-tokens.css` (la flota de TVs de
   CarpinterIA / app.modulab.uy). PlantaIA es un FRONTEND SEPARADO con el mismo
   backend Supabase compartido; arranca reutilizando el lenguaje visual y la
   filosofía de honestidad de datos ya probados en las TVs, sin acoplarse al
   deploy de `frontend/`. A partir de acá evoluciona por su cuenta: editar ESTE
   archivo NO afecta a las TVs, y viceversa.

   REGLA DE ORO: el color es ESTADO, nunca decoración.
     · verde   (--state-good)   = bien / en ritmo / meta cumplida
     · ámbar   (--state-warn)   = atención
     · rojo    (--state-bad)    = ALARMA y solo alarma (parado / SIN SEÑAL)
     · naranja (--state-record) = LOGRO (récord batido) — color de marca #f0883e

   CLASE DE DISTANCIA: heredada de las TVs (canvas fijo pensado para pantallas de
   planta). ?dist=A|B|C (default B) ajusta SOLO la escala tipográfica para la
   distancia de lectura — no cambia el layout.
     · A = lectura cercana / pantalla chica   → 0.85×
     · B = estándar (default)                 → 1.00×
     · C = lectura lejana / pantalla grande    → 1.18×
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superficie ── */
  --bg:          #000000;
  --surface:     #0d1117;
  --surface-2:   #111b27;
  --border:      #2a3b52;     /* usar con grosor ≥ var(--border-width) */
  --border-width: 2px;

  /* ── Texto ── */
  --text:        #ffffff;
  --text-dim:    #c4d2e0;
  --text-muted:  #8294a8;

  /* ── Estado semántico (foreground + fill de card) ── */
  --state-good:     #19d36b;   --state-good-bg:   #0b6b3a;
  --state-warn:     #f5b301;   --state-warn-bg:   #8a6400;
  --state-bad:      #ff3b30;   --state-bad-bg:    #a31717;   /* SOLO alarma */
  --state-record:   #f0883e;   --state-record-bg: #6e3410;   /* logro / récord */
  --brand-accent:   #f0883e;
  --on-state:       #ffffff;   /* texto sobre cualquier fill de estado */

  /* ── Escala tipográfica (multiplicada por la clase de distancia) ── */
  --dist-scale: 1;
  --fs-hero: calc(220px * var(--dist-scale));   /* el número gigante del héroe */
  --fs-xl:   calc(72px  * var(--dist-scale));
  --fs-lg:   calc(44px  * var(--dist-scale));
  --fs-md:   calc(30px  * var(--dist-scale));
  --fs-sm:   calc(21px  * var(--dist-scale));
  --fs-xs:   calc(15px  * var(--dist-scale));
}

/* Clase de distancia (seteada por PLANTA.initDistClass desde ?dist=) */
html[data-dist="A"] { --dist-scale: 0.85; }
html[data-dist="B"] { --dist-scale: 1; }
html[data-dist="C"] { --dist-scale: 1.18; }

/* ── Fills de estado para cards ── */
.tv-state {
  transition: background-color .25s ease, border-color .25s ease;
}
.tv-state.good   { background: var(--state-good-bg);   border-color: var(--state-good); }
.tv-state.warn   { background: var(--state-warn-bg);   border-color: var(--state-warn); }
.tv-state.bad    { background: var(--state-bad-bg);    border-color: var(--state-bad);  animation: tvPulseBad 2s infinite; }
.tv-state.record { background: var(--state-record-bg); border-color: var(--state-record); }
.tv-state.good *, .tv-state.warn *, .tv-state.bad *, .tv-state.record * { color: var(--on-state) !important; }

@keyframes tvPulseBad {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,48,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}

/* Glow de logro (récord batido) */
.tv-record-glow { box-shadow: 0 0 28px rgba(240,136,62,.45); }

/* ── Sello de frescura (lo pinta PLANTA.DataHealth.render) ── */
.tv-freshness {
  font-weight: 700; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: .45em;
}
.tv-freshness::before {
  content: ""; width: .7em; height: .7em; border-radius: 50%;
  background: var(--text-muted); flex-shrink: 0;
}
.tv-freshness[data-state="FRESCO"]      { color: var(--state-good); }
.tv-freshness[data-state="FRESCO"]::before      { background: var(--state-good); }
.tv-freshness[data-state="RECONECTANDO"] { color: var(--state-warn); }
.tv-freshness[data-state="RECONECTANDO"]::before { background: var(--state-warn); animation: tvBlink 1s infinite; }
.tv-freshness[data-state="SIN_SENAL"]    { color: var(--state-bad); }
.tv-freshness[data-state="SIN_SENAL"]::before    { background: var(--state-bad); animation: tvBlink .6s infinite; }
@keyframes tvBlink { 50% { opacity: .25; } }

/* ── Datos viejos atenuados cuando hay SIN SEÑAL ── */
.is-stale { opacity: .30; filter: grayscale(.4); transition: opacity .4s ease; }

/* ── Banner SIN SEÑAL a todo el ancho (lo crea/togglea PLANTA.DataHealth) ── */
.tv-signal-banner {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: var(--state-bad-bg); color: var(--on-state);
  font-size: var(--fs-md); font-weight: 900; letter-spacing: .06em;
  text-align: center; padding: 14px 22px;
  border-bottom: 4px solid var(--state-bad);
  animation: tvPulseBad 2s infinite;
}
.tv-signal-banner.show { display: block; }