/* Tablero de Operaciones — puesto de control del taller Kxklod.
   Paleta petróleo/ámbar/cian/bermellón (no cream-serif, no black-acid, no broadsheet).
   Anton = voz de tablero · DM Mono = telemetría · DM Sans = cuerpo. */

@font-face{font-family:Anton;src:url(/fonts/anton-normal-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';src:url(/fonts/dm-mono-normal-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';src:url(/fonts/dm-mono-normal-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/fonts/dm-sans-normal-400-700.woff2) format('woff2');font-weight:400 700;font-display:swap}

/* ---------- LENTES (temas) ----------
   Los nombres son SEMÁNTICOS, no literales: --ink es "la superficie" y --paper
   "la tinta", así que en un tema claro se dan vuelta y todo el CSS sigue valiendo.
   Por eso las reglas nunca escriben un color: piden un rol.

   Lo que NO se negocia al cambiar de lente (esto es un tablero de operaciones,
   no una skin): los tres aspectos de señal —go / amber / signal— siguen siendo
   verde/ámbar/bermellón distinguibles entre sí en todas las lentes, y siempre
   van con la palabra escrita al lado. Fósforo cambia el CROMADO a un fósforo
   ámbar de CRT, pero las lentes de la señal siguen siendo de color real: un
   monocromo lindo que te esconda un servicio caído no sirve para nada.

   Las 6 paletas están validadas a WCAG en los 14 pares que el CSS usa de verdad
   (texto 4.5:1, barras y lentes 3:1). Si tocás un valor, revalidá: ~/panel-contraste.py */
:root{
  --pad:clamp(18px,4vw,46px);
  --hot: var(--amber);
  color-scheme:dark;   /* que las barras de scroll y el foco nativo acompañen */
  --glow:9px;      /* halo de la lente encendida; 0 la apaga */
  --glow-sm:8px;   /* ídem para los LED chicos de servicios */
  --grain-op:.05;  /* grano de sala de máquinas */
}

/* PETRÓLEO — la de siempre: sala de máquinas de noche, ámbar y cian sobre petróleo. */
:root, [data-tema="petroleo"]{
  --ink:#0E1A1F; --ink-2:#16272E; --ink-3:#20363E; --line:#294048;
  --paper:#ECE3D0; --paper-dim:#A7B0AC;
  --amber:#F4A93C; --cyan:#63CFC4; --signal:#E8604C;
  /* mono terciario (branch, foot, hist-when). Era #6B7E85 y NO llegaba: 3.6:1
     sobre ink-2 con 4.5 exigido; mismo tono, apenas más claro. */
  --dim:#7B8E95;
  /* paso profundo del mismo ámbar, validado contra la superficie ink-2:
     entra en la banda de luminosidad y pasa contraste 3:1 (ver skill dataviz) */
  --amber-deep:#C08128;
  /* aspectos de señal ferroviaria. El verde es color de estado, no de marca:
     6.8:1 sobre --ink-2. Nunca van solos: siempre con la palabra del aspecto. */
  --go:#4FC08D;
  --well:#0A1216;               /* carcasa de la señal: metal, más oscura que el fondo */
  --lamp-off:var(--ink-3);      /* lente apagada */
  --shadow:rgba(0,0,0,.5);
  --shadow-in:rgba(0,0,0,.6);
}

/* GRAFITO — el mismo tablero sin tinte: gris neutro, para cuando el petróleo cansa. */
[data-tema="grafito"]{
  --ink:#141416; --ink-2:#1E1E21; --ink-3:#2B2B2F; --line:#3C3C42;
  --paper:#EDEAE4; --paper-dim:#ADADB4; --dim:#85858D;
  --amber:#EFA93C; --amber-deep:#BC7F26; --cyan:#6ECBD6; --signal:#EB6250; --go:#57C08B;
  --well:#0B0B0C; --lamp-off:var(--ink-3);
  --shadow:rgba(0,0,0,.6); --shadow-in:rgba(0,0,0,.7);
}

/* CIANOTIPO — plano de obra: azul de blueprint, el cian manda y el ámbar es la tiza. */
[data-tema="cianotipo"]{
  --ink:#0A1730; --ink-2:#102143; --ink-3:#1B2F59; --line:#27406F;
  --paper:#E6EDF8; --paper-dim:#A9B9D5; --dim:#7C90B4;
  --amber:#F2B750; --amber-deep:#C08832; --cyan:#6FD3E8; --signal:#FF6F60; --go:#52CE96;
  --well:#061022; --lamp-off:var(--ink-3);
  --shadow:rgba(2,8,24,.6); --shadow-in:rgba(0,0,0,.6);
}

/* FÓSFORO — terminal de fósforo ámbar. El cromado es monocromo (el "cian" pasa a ser
   el realce brillante, como el texto resaltado de un CRT), pero las tres lentes de la
   señal siguen siendo verde/ámbar/rojo: el estado no se disfraza. */
[data-tema="fosforo"]{
  --ink:#100A03; --ink-2:#1A1108; --ink-3:#26190C; --line:#3B2914;
  --paper:#E8C48A; --paper-dim:#BE9A64; --dim:#97784A;
  --amber:#FFB61E; --amber-deep:#C98A17; --cyan:#FFE7B8; --signal:#FF6A4D; --go:#5FD09A;
  --well:#080502; --lamp-off:#2E1E0D;
  --shadow:rgba(0,0,0,.7); --shadow-in:rgba(0,0,0,.7);
  --glow:11px; --grain-op:.07;  /* el CRT tira más halo y más grano */
}

/* PAPEL — de día, con sol en la pantalla. Se dan vuelta superficie y tinta; los acentos
   NO son los mismos claritos de la noche (sobre papel no se leen): son sus pasos profundos.
   La carcasa de la señal sigue siendo oscura, porque de día también es de metal. */
[data-tema="papel"]{
  --ink:#F2EDE2; --ink-2:#E8E1D2; --ink-3:#D8CFBC; --line:#C2B7A0;
  --paper:#16262D; --paper-dim:#4A5C65; --dim:#57676F;
  --amber:#8A5A0F; --amber-deep:#6E4708; --cyan:#0D6472; --signal:#B3261E; --go:#19724B;
  --well:#16222B; --lamp-off:#33434C;
  --shadow:rgba(22,38,45,.18); --shadow-in:rgba(0,0,0,.45);
  --grain-op:.06;
  color-scheme:light;
}

/* ALTO CONTRASTE — negro puro, blanco puro, sin grano ni halos. Todo ≥8:1. */
[data-tema="contraste"]{
  --ink:#000; --ink-2:#0C0C0C; --ink-3:#1C1C1C; --line:#5C5C5C;
  --paper:#FFF; --paper-dim:#E2E2E2; --dim:#B6B6B6;
  --amber:#FFC247; --amber-deep:#FFC247; --cyan:#7FE7DD; --signal:#FF8F7D; --go:#66E0A3;
  --well:#000; --lamp-off:#333;
  --shadow:rgba(0,0,0,.9); --shadow-in:rgba(0,0,0,.9);
  --glow:0; --glow-sm:0; --grain-op:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--paper);
  font-family:'DM Sans',system-ui,sans-serif; line-height:1.5;
  padding:var(--pad); max-width:1800px; margin:0 auto;
  min-height:100vh; position:relative; overflow-x:hidden;
}
/* grano/atmósfera de sala de máquinas de noche */
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--grain-op);
  background-image:radial-gradient(var(--paper) .5px,transparent .5px);background-size:3px 3px}
body>*{position:relative;z-index:1}

/* ---------- header: barra de control de una línea ----------
   Full-bleed (anula el padding del body) y pegajosa: al scrollear los repos
   seguís viendo la hora y si el tablero está fresco. */
.top{position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--ink);border-bottom:1px solid var(--line);
  margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 22px;
  padding:11px var(--pad) 10px}
.top__id{display:flex;align-items:baseline;gap:14px;min-width:0}
.back{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;white-space:nowrap;
  border-right:1px solid var(--line);padding-right:14px;transition:color .2s}
.back:hover,.back:focus-visible{color:var(--amber)}
.title{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.1;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top__live{display:flex;align-items:baseline;gap:14px;font-family:'DM Mono',monospace;margin-left:auto}
.clock{font-size:1rem;color:var(--paper);font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.freshness{font-size:.7rem;color:var(--dim);letter-spacing:.05em;text-align:right}
/* puerta al manual: qué mide cada señal y cada ítem de la auditoría */
.manual{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none;
  border:1px solid var(--line);border-radius:2px;padding:3px 8px;transition:color .2s,border-color .2s}
.manual:hover,.manual:focus-visible{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}

/* ---------- selector de lente ----------
   Vive al lado del manual, en la misma barra de control y con el mismo lenguaje de chip.
   La MUESTRA (.sw) no tiene colores propios: lleva su data-tema puesto, así que se pinta
   con la paleta de verdad de esa lente. Cambiar una paleta cambia su muestra, sin tocar esto. */
.lens{position:relative;flex:none}
.lens__btn{display:flex;align-items:center;gap:8px;font:inherit;cursor:pointer;
  font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:2px;padding:3px 8px;
  transition:color .2s,border-color .2s}
.lens__btn:hover,.lens__btn:focus-visible{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.lens__btn[aria-expanded="true"]{color:var(--amber);border-color:var(--amber)}
.lens__now{white-space:nowrap}

/* la muestra: carcasa con tres lentes, igual que la señal de vía pero en chico */
.sw{display:inline-flex;gap:4px;align-items:center;padding:4px 6px;border-radius:7px;
  background:var(--ink);border:1px solid var(--line);flex:none}
.sw i{width:7px;height:7px;border-radius:50%;display:block}
.sw i:nth-child(1){background:var(--amber)}
.sw i:nth-child(2){background:var(--cyan)}
.sw i:nth-child(3){background:var(--go)}

.lens__menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:296px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:7px;
  box-shadow:0 10px 32px var(--shadow);animation:tbpop .12s ease-out}
.lens__menu[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.lens__menu{animation:none}}
.lens__title{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);padding:5px 8px 8px}
.lens__opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font:inherit;color:inherit;background:transparent;border:0;border-radius:4px;
  padding:7px 8px;cursor:pointer;transition:background .15s}
.lens__opt:hover{background:var(--ink-3)}
.lens__opt:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.lens__opt[aria-checked="true"]{background:var(--ink-3)}
.lens__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.lens__txt b{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:.86rem;line-height:1.2}
.lens__txt i{font-family:'DM Mono',monospace;font-style:normal;font-size:.64rem;color:var(--dim);
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* tilde de la lente puesta: la única marca, para no repetir color como señal */
.lens__opt::after{content:'';margin-left:auto;width:7px;height:7px;border-radius:50%;flex:none;
  background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.lens__opt[aria-checked="true"]::after{background:var(--amber);box-shadow:0 0 var(--glow-sm) var(--amber)}

/* SIGNATURE — pulso de frescura: late mientras el colector siga vivo.
   No es adorno: el color y el latido son el estado real del dato. */
.pulse{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;background:transparent}
.pulse::after{content:'';position:absolute;top:0;bottom:0;width:22%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:sweep 3.2s linear infinite}
.top[data-state="warn"]{border-bottom-color:var(--amber)}
.top[data-state="warn"] .pulse::after{background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation-duration:6s}
.top[data-state="stale"]{border-bottom-color:var(--signal)}
.top[data-state="stale"] .pulse::after{background:var(--signal);width:100%;animation:none;opacity:.5}
.top[data-state="loading"] .pulse::after{background:linear-gradient(90deg,transparent,var(--dim),transparent)}
.top[data-state="stale"] .freshness{color:var(--signal)}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(560%)}}

/* ---------- SIGNATURE: tres señales de vía ----------
   Cabeza de señal con tres lentes; se enciende la del aspecto vigente.
   El color nunca va solo: al lado se lee la palabra (vía libre / precaución / alto). */
.vitals{margin:0 0 34px}
.signals{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line)}
.signal{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  background:var(--ink-2);border:0;padding:13px 16px;cursor:pointer;text-align:left;
  font:inherit;color:inherit;transition:background .18s}
.signal:hover{background:var(--ink-3)}
.signal:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

/* la cabeza: carcasa oscura con tres lentes apagadas */
.head{display:flex;gap:6px;align-items:center;padding:5px 7px;border-radius:11px;
  background:var(--well);border:1px solid var(--line);flex:none}
.lamp{width:11px;height:11px;border-radius:50%;background:var(--lamp-off);
  box-shadow:inset 0 1px 1px var(--shadow-in);transition:background .25s,box-shadow .25s}
.signal[data-level="go"] .lamp--go{background:var(--go);box-shadow:0 0 var(--glow) var(--go)}
.signal[data-level="caution"] .lamp--caution{background:var(--amber);box-shadow:0 0 var(--glow) var(--amber)}
.signal[data-level="stop"] .lamp--stop{background:var(--signal);box-shadow:0 0 var(--glow) var(--signal)}

.signal__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.signal__name{font-family:Anton,sans-serif;text-transform:uppercase;letter-spacing:.05em;
  font-size:.94rem;line-height:1.1}
.signal__aspect{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.signal[data-level="go"] .signal__aspect{color:var(--go)}
.signal[data-level="caution"] .signal__aspect{color:var(--amber)}
.signal[data-level="stop"] .signal__aspect{color:var(--signal)}
.signal__sum{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--paper-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.signal__chev{color:var(--dim);font-size:.7rem;transition:transform .22s,color .22s;flex:none}
.signal[aria-expanded="true"] .signal__chev{transform:rotate(180deg);color:var(--amber)}
.signal[aria-expanded="true"]{background:var(--ink-3)}

/* panel de detalle: se despliega bajo la tira (una señal a la vez) */
.detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;
  border:1px solid var(--line);border-top:0;background:var(--ink-2)}
.detail.is-open{grid-template-rows:1fr}
.detail[hidden]{display:none}
.detail__inner{overflow:hidden;min-height:0}
.detail__inner>*{padding-inline:18px}
.detail__inner>.vgroup__title{padding-top:16px}
.vgroup__title{font-family:'DM Mono',monospace;font-weight:500;font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cyan)}
.vgroup__body{display:flex;flex-direction:column;gap:16px;padding-top:14px}
/* con el panel a todo el ancho, las métricas van en fila y no apiladas */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 28px}
.vgroup__foot{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--dim);letter-spacing:.03em;
  border-top:1px solid var(--ink-3);margin-top:14px;padding-top:10px;padding-bottom:13px}

/* segmentado hora/día/semana/mes — como los botones de andén.
   Va a la derecha: la señal "Actividad" es la de más a la derecha, así el
   recorrido del mouse entre abrir el panel y cambiar la ventana es corto. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;align-self:flex-end}
.seg__btn{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--dim);border:0;border-right:1px solid var(--line);
  padding:6px 14px;cursor:pointer;transition:background .15s,color .15s}
.seg__btn:last-child{border-right:0}
.seg__btn:hover{color:var(--paper)}
/* ventana sin commits: se apaga, pero se puede elegir igual */
.seg__btn[data-empty]:not(.is-on){opacity:.42}
.seg__btn.is-on{background:var(--amber);color:var(--ink);font-weight:500}
.seg__btn:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

/* una métrica compacta: rótulo a la izquierda, número a la derecha, barra debajo */
.metric{display:flex;flex-direction:column;gap:6px}
.metric__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.metric__label{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--paper-dim)}
.metric__val{font-family:Anton,sans-serif;font-size:1.5rem;line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.metric__val small{font-family:'DM Mono',monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.02em;color:var(--paper-dim);margin-left:3px}
.vital__track{height:4px;background:var(--ink-3);overflow:hidden}
.vital__fill{height:100%;width:0;background:var(--cyan);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.vital__fill--amber{background:var(--amber)}
.vital__fill--signal{background:var(--signal)}
.vital__fill--go{background:var(--go)}
/* semáforo de servicios, dentro del detalle de Máquina */
.svc{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center}
.svc span{font-family:'DM Mono',monospace;font-size:.78rem;letter-spacing:.04em;display:flex;gap:7px;align-items:center;
  color:var(--paper-dim)}
.led{width:8px;height:8px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 0 transparent;flex:none}
.led--up{background:var(--go);box-shadow:0 0 var(--glow-sm) var(--go)}
.led--down{background:var(--signal);box-shadow:0 0 var(--glow-sm) var(--signal)}
/* chip de servicio caído: vive en el header y solo aparece si hay algo roto */
.health{display:flex;align-items:center;gap:7px;font-family:'DM Mono',monospace;font-size:.7rem;
  letter-spacing:.05em;color:var(--signal);border:1px solid var(--signal);padding:3px 9px;border-radius:2px}
.health[hidden]{display:none}

/* ---------- barras de actividad (commits por sitio, 30 días) ----------
   Una serie, un tono. El largo codifica el dato y el número va escrito
   al final, así nunca se lee solo por color. */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:106px 1fr 26px;align-items:center;gap:10px}
.bar__name{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--paper-dim);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__track{height:7px;background:var(--ink-3);overflow:hidden}
.bar__fill{height:100%;background:var(--amber-deep);border-radius:0 3px 3px 0;
  transition:width .9s cubic-bezier(.2,.8,.2,1)}
.bar__val{font-family:'DM Mono',monospace;font-size:.76rem;color:var(--paper);text-align:right;
  font-variant-numeric:tabular-nums}
.empty{font-family:'DM Mono',monospace;font-size:.74rem;color:var(--dim)}
/* atajo del estado vacío: "ver día" cuando la ventana elegida no tiene commits */
.linkbtn{font:inherit;background:none;border:0;padding:0;margin-left:6px;cursor:pointer;
  color:var(--amber);border-bottom:1px dashed currentColor}
.linkbtn:hover,.linkbtn:focus-visible{color:var(--paper)}

/* ---------- tablero de despacho ---------- */
.board__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:4px}
.board__title{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.5rem;letter-spacing:.03em}
.board__legend{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--dim);
  letter-spacing:.05em;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}
.dot--hot{background:var(--amber)}.dot--cold{background:var(--dim)}.dot--dirty{background:var(--signal)}

.rows{display:flex;flex-direction:column}
.row{border-bottom:1px solid var(--ink-3)}
.row:hover{background:var(--ink-2)}
.row__summary{display:grid;grid-template-columns:6px 220px 88px 1fr 140px;align-items:center;gap:18px;
  padding:15px 6px;position:relative}
details.row>.row__summary{cursor:pointer;list-style:none}
details.row>.row__summary::-webkit-details-marker{display:none}
.row__heat{width:6px;align-self:stretch;background:var(--dim);border-radius:1px}
.row__name{font-family:Anton,sans-serif;font-size:1.18rem;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.row__meta{display:flex;align-items:center;gap:10px;margin-top:5px;flex-wrap:wrap}
.row__branch{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--dim);letter-spacing:.03em}
/* link al sitio en producción (solo si sabemos la URL) */
.row__prod{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cyan);text-decoration:none;border:1px solid var(--line);padding:2px 7px;border-radius:2px;
  transition:color .15s,border-color .15s}
.row__prod:hover,.row__prod:focus-visible{color:var(--amber);border-color:var(--amber)}
/* origen del contenido: Pages (CF) / VM (nginx propio) / Externo */
.row__host{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;border:1px solid transparent;white-space:nowrap}
.row__host--pages{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.row__host--vm{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,transparent);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.row__host--externo{color:var(--paper-dim);border-color:var(--line);background:color-mix(in srgb,var(--paper-dim) 8%,transparent)}
/* badges de la última corrida de tests (§13 + Lighthouse) */
.row__tests{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.tb{font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.05em;padding:2px 6px;border-radius:2px;
  border:1px solid transparent;white-space:nowrap;cursor:pointer}
.tb:hover{filter:brightness(1.25)}
/* globito de ayuda de un badge de test (posicionado por JS, vive en <body>) */
.tb-pop{position:absolute;z-index:60;max-width:260px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  padding:9px 11px;font-size:.72rem;line-height:1.45;color:var(--paper);
  box-shadow:0 8px 28px var(--shadow);animation:tbpop .12s ease-out}
@keyframes tbpop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tb-pop{animation:none}}
.tb-pop__doc{display:block;margin-top:7px;padding-top:6px;border-top:1px solid var(--line);
  font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.06em;
  color:var(--amber);text-decoration:none}
.tb-pop__doc:hover,.tb-pop__doc:focus-visible{color:var(--paper)}
.tb--ok{color:var(--go);border-color:color-mix(in srgb,var(--go) 40%,transparent);background:color-mix(in srgb,var(--go) 10%,transparent)}
.tb--warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.tb--bad{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 45%,transparent);background:color-mix(in srgb,var(--signal) 12%,transparent)}
.tb--na{color:var(--dim);border-color:var(--line)}
.row__commits{font-family:'DM Mono',monospace;text-align:right}
.row__commits b{font-size:1.35rem;font-weight:500;color:var(--paper);display:block;line-height:1;font-variant-numeric:tabular-nums}
.row__commits span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.row__last{min-width:0}
.row__when{font-family:'DM Mono',monospace;font-size:.82rem;color:var(--amber);letter-spacing:.02em}
.row__subject{font-size:.83rem;color:var(--paper-dim);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__flags{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
.tag{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.03em;padding:4px 9px;border-radius:2px;
  background:var(--signal);color:var(--ink);font-weight:500}
.tag--clean{background:transparent;color:var(--dim);border:1px solid var(--line);font-weight:400}
.row__caret{color:var(--dim);font-size:.7rem;transition:transform .2s,color .2s;display:inline-block}
details.row[open] .row__caret{transform:rotate(90deg);color:var(--amber)}

/* ---------- historial de commits (desplegable) ---------- */
/* Detalle de la última auditoría: las líneas ✗/⚠ de validar.sh, cada una con su link al manual.
   Va arriba del historial: si algo está mal, es lo primero que querés leer al desplegar. */
.tdet{padding:4px 6px 14px calc(6px + 220px + 18px);display:flex;flex-direction:column;gap:6px}
.tdet__title{font-family:'DM Mono',monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);font-weight:500;margin-bottom:2px}
.tdet__item{display:grid;grid-template-columns:14px 1fr auto;gap:9px;align-items:baseline;
  font-family:'DM Mono',monospace;font-size:.74rem;line-height:1.4}
.tdet__sev--bad{color:var(--signal)}
.tdet__sev--warn{color:var(--amber)}
.tdet__txt{color:var(--paper-dim);overflow:hidden;text-overflow:ellipsis}
.tdet__doc{color:var(--dim);text-decoration:none;font-size:.66rem;letter-spacing:.06em;white-space:nowrap;
  border-bottom:1px dashed transparent;transition:color .15s,border-color .15s}
.tdet__doc:hover,.tdet__doc:focus-visible{color:var(--amber);border-bottom-color:var(--amber)}
.tdet__more{font-family:'DM Mono',monospace;font-size:.66rem;color:var(--dim);margin-top:2px}

.row__history{padding:2px 6px 18px calc(6px + 220px + 18px);display:flex;flex-direction:column;gap:9px}
.hist-item{display:grid;grid-template-columns:70px 90px 1fr auto;gap:14px;align-items:baseline;
  font-family:'DM Mono',monospace;font-size:.76rem}
/* el hash es el link a "ver el sitio como estaba en ese commit" (snapshot) */
.hist-hash{color:var(--cyan);letter-spacing:.02em;text-decoration:none;
  border-bottom:1px dashed transparent;transition:border-color .15s,color .15s}
.hist-hash:hover,.hist-hash:focus-visible{color:var(--amber);border-bottom-color:var(--amber)}
.hist-when{color:var(--dim)}
.hist-subject{color:var(--paper-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'DM Sans',sans-serif}
.hist-author{color:var(--dim);text-align:right;font-size:.7rem;letter-spacing:.03em}

/* ---------- footer ---------- */
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:34px;padding-top:16px;border-top:2px solid var(--line);
  font-family:'DM Mono',monospace;font-size:.72rem;color:var(--dim);letter-spacing:.04em}

.loading{font-family:'DM Mono',monospace;color:var(--dim);padding:24px 0}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .signals{grid-template-columns:1fr}
}
/* en el celular el reloj lo pone el teléfono: el header se queda en una línea */
@media(max-width:560px){
  .top{flex-wrap:nowrap}
  .clock{display:none}
  /* la lente se queda: pierde el nombre, no el botón */
  .lens__now{display:none}
  .lens__menu{width:min(270px,calc(100vw - 2 * var(--pad)))}
  .signal{padding:11px 14px;gap:12px}
}
@media(max-width:720px){
  .row__summary{grid-template-columns:6px 1fr auto;gap:12px 14px}
  .row__commits{display:none}
  .row__last{grid-column:2 / -1}
  .row__subject{white-space:normal}
  .row__history,.tdet{padding-left:20px}
  .tdet__item{grid-template-columns:14px 1fr;gap:4px 9px}
  .tdet__txt{white-space:normal}
  .tdet__doc{grid-column:2}
  .hist-item{grid-template-columns:60px 1fr;gap:6px 12px}
  .hist-subject{grid-column:1 / -1;white-space:normal}
  .hist-author{display:none}
}
@media(prefers-reduced-motion:reduce){
  .vital__fill,.bar__fill,.detail,.signal__chev,.lamp{transition:none}
  .led--up{animation:none}
  /* el pulso deja de barrer: pasa a una línea fija del color del estado */
  .pulse::after{animation:none;width:100%;background:var(--cyan)}
  .top[data-state="warn"] .pulse::after{background:var(--amber)}
  .top[data-state="loading"] .pulse::after{background:var(--dim)}
}