/* ============================================================
   PULSO — tokens
   Única fuente de verdad visual. Ningún literal de color, tamaño
   o radio fuera de este fichero.
   Dirección: lenguaje WHOOP. Negro, anillo dominante, versales
   con letterspacing ancho.
   ============================================================ */

/* ============================================================
   FUENTES — auto-alojadas. Una PWA offline no depende de un CDN.
   Coloca en assets/fonts/:
     archivo-var-latin.woff2      (variable 400–800, subconjunto latin)
     ibm-plex-mono-400-latin.woff2
   Y precárgalas en index.html:
     <link rel="preload" as="font" type="font/woff2" crossorigin
           href="assets/fonts/archivo-var-latin.woff2">
   ============================================================ */

@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{

/* ---- SUPERFICIES ------------------------------------------ */
  --bg:#000;
  --card:#101215;
  --card-2:#181B1F;      /* pista de barras, chips, fondos internos */
  --line:#25292F;
  --line-soft:#1A1D21;   /* separador dentro de una tarjeta */
  --line-strong:#39414A; /* borde de elemento seleccionado */

/* ---- TINTA ------------------------------------------------- */
  --ink:#FFF;
  --dim:#9AA1A9;         /* etiquetas, texto de apoyo */
  --faint:#666D75;       /* procedencia, unidades, marcas de tiempo */

/* ---- FAMILIAS DE MÉTRICA ---------------------------------- */
  --rec:#00E88A;
  --rec-mid:#FFD400;
  --rec-low:#FF3B4E;
  --strain:#0093E7;
  --sleep:#6E7BF2;
  --zone-4:#FF8A3D;      /* única rampa extra: zonas de pulso */

/* ---- ESTADO ------------------------------------------------ */
  --stale:#6B7680;       /* el dato viejo se apaga a este gris */
  --warn:#E0A33C;        /* SOLO la marca de tiempo del dato viejo */
  --off:#4E555C;         /* fuente no conectada, métrica no disponible */

/* ---- TIPOGRAFÍA -------------------------------------------- */
  --f:'Archivo','Archivo Fallback',system-ui,-apple-system,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  /* Escala cerrada. Doce peldaños, ni uno más.
     Si algo necesita un tamaño que no está aquí, es que el diseño
     está mal, no la escala. */
  --fs-mono:9.5px;       /* procedencia, unidades en versal */
  --fs-cap:10px;         /* etiqueta de sección o métrica */
  --fs-meta:11px;        /* marca, chips */
  --fs-body:12.5px;      /* texto corrido de apoyo */
  --fs-label:13.5px;     /* nombre de una fila */
  --fs-value:16px;       /* cifra en fila */
  --fs-value-lg:19px;    /* cifra destacada en fila */
  --fs-stat:22px;        /* cifra de tarjeta pequeña */
  --fs-title:30px;       /* título de sesión */
  --fs-display:40px;     /* cifra grande secundaria */
  --fs-hero:56px;        /* cifra grande principal */
  --fs-ring:74px;        /* número dentro del anillo */

  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;

  --ls-cap:.16em;        /* versales de etiqueta */
  --ls-mark:.30em;       /* la marca PULSO */
  --ls-mono:.04em;
  --ls-tight:-.02em;     /* cifras medianas */
  --ls-tighter:-.045em;  /* cifras grandes */

/* ---- RADIOS ------------------------------------------------ */
  --r-xs:6px;            /* chip de serie */
  --r-sm:8px;
  --r-md:11px;
  --r-card:14px;
  --r-lg:20px;           /* bloque grande */
  --r-screen:24px;
  --r-pill:999px;
  --r-full:50%;

/* ---- ESPACIADO --------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:11px; --sp-4:15px;
  --sp-5:20px; --sp-6:26px; --sp-7:34px; --sp-8:44px;

/* ---- BARRAS ------------------------------------------------ */
  --h-track:5px;         /* contribuyente */
  --h-band:7px;          /* monitor de salud */
  --h-bar:4px;           /* progreso */
  --h-pin:11px;          /* marca de línea base */

/* ---- ANILLO ------------------------------------------------
   r=76 → dasharray = 2·π·76 = 477.5
   dashoffset = 477.5 · (1 − valor/100)
   El SVG va rotado -90deg para arrancar arriba.             */
  --ring-r:76;
  --ring-c:477.5;
  --ring-w:13px;
  --ring-track:#1B1F24;


/* ---- SUPERFICIES DE ACCIÓN --------------------------------
   No existía token de botón relleno ni de velo. Aquí están, para
   que Ajustes, segmentados y modales no tengan que inventarlos.  */
  --fill-primary:var(--rec);
  --on-primary:#04100A;          /* texto sobre el verde, nunca negro puro */
  --fill-ghost:var(--card-2);
  --scrim:rgba(0,0,0,.45);       /* velo de modal */

/* ---- TEMA --------------------------------------------------
   PULSO es oscuro y solo oscuro. No hay conmutador.
   Si algún día hace falta claro, va como bloque
   [data-theme="claro"] sobreescribiendo ESTAS variables —
   no como un segundo sistema.                                   */

/* ---- MOVIMIENTO -------------------------------------------- */
  --dur:.22s; --ease:cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   ROLES DE TIPO — tres, no cuatro
   ============================================================ */

.cap{ font-size:var(--fs-cap); font-weight:var(--fw-bold);
      letter-spacing:var(--ls-cap); text-transform:uppercase; color:var(--dim); }

.mono{ font-family:var(--m); font-size:var(--fs-mono);
       letter-spacing:var(--ls-mono); color:var(--faint); text-transform:uppercase; }

.num{ font-weight:var(--fw-bold); letter-spacing:var(--ls-tight);
      font-variant-numeric:tabular-nums; }

/* ============================================================
   ESTADO — lo gobierna data-estado en el propio componente.
   Las vistas no ponen este atributo nunca.

     ok            valor fresco
     obsoleto      hay valor pero pasó su TTL
     sin_datos     debería haber llegado y no llegó (fuente caída)
     no_disponible la fuente no da esta señal. No tiene arreglo.
     aprendiendo   hay valor, pero aún no hay línea base
   ============================================================ */

[data-estado="obsoleto"] .num,
[data-estado="obsoleto"] .track u,
[data-estado="obsoleto"] svg{ opacity:.35; }
[data-estado="obsoleto"] .mono{ color:var(--warn); }

[data-estado="sin_datos"] .num,
[data-estado="no_disponible"] .num{
  font-size:var(--fs-label); font-weight:var(--fw-reg); color:var(--faint);
  letter-spacing:0;
}
[data-estado="no_disponible"] .mono{ color:var(--off); }
[data-estado="no_disponible"] .track,
[data-estado="no_disponible"] .band{ opacity:.3; }

[data-estado="aprendiendo"] .track i,
[data-estado="aprendiendo"] .band .pin{ display:none; }

/* ============================================================
   NIVEL — lo calcula el backend con MIS percentiles.
   El componente recibe el bucket, nunca lo deduce.
   nivel ausente o null → neutro.
   ============================================================ */

/* defecto heredable en :root; NO :not([data-nivel]), que pisaría --nivel
   en cada hijo sin atributo (p.ej. el <circle> del anillo) y rompería la
   herencia del color del componente. */
:root,[data-nivel="neutro"]{ --nivel:var(--dim); }
[data-nivel="alto"]{ --nivel:var(--rec); }
[data-nivel="medio"]{ --nivel:var(--rec-mid); }
[data-nivel="bajo"]{ --nivel:var(--rec-low); }

/* ============================================================
   PRIMITIVOS
   ============================================================ */

.card{ background:var(--card); border:1px solid var(--line);
       border-radius:var(--r-card); padding:var(--sp-4); }

.track{ position:relative; height:var(--h-track);
        background:var(--card-2); border-radius:3px; }
.track u{ position:absolute; top:0; height:var(--h-track);
          border-radius:3px; display:block; background:var(--nivel); }
.track i{ position:absolute; top:-3px; width:1.5px; height:var(--h-pin);
          background:var(--dim); display:block; }   /* línea base */

.band{ position:relative; height:var(--h-band);
       background:var(--card-2); border-radius:4px; }
.band .norm{ position:absolute; top:0; height:var(--h-band);
             background:rgba(0,232,138,.22); border-radius:4px; }
.band .pin{ position:absolute; top:-3px; width:2px; height:13px;
            background:var(--ink); border-radius:1px; }

.dot{ width:5px; height:5px; border-radius:var(--r-full); display:inline-block; }
.dot--ok{ background:var(--rec); }
.dot--warn{ background:var(--warn); }
.dot--off{ background:var(--stale); }

/* ============================================================
   ACCESIBILIDAD
   El color nunca es el único portador de significado: cada estado
   lleva además texto. El anillo necesita aria-label con el valor,
   porque el SVG no lo anuncia solo.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}