/* ============================================================
   PIXEL CONTROL — hoja unica.
   Tokens de premium-ui-system adaptados: hue de instrumentacion
   (cian-acero), radios SHARP (panel tecnico, no SaaS) y escala de
   tipografia comprimida porque esto es un tablero denso, no una landing.
   Dark-mode-first: se mira de noche, en un celular, con prisa.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* ---------- TIER 1: PRIMITIVOS ---------- */
  --brand-hue: 196;        /* cian-acero: instrumento, no SaaS */
  --brand-chroma: 0.11;

  --brand-200: oklch(0.86 calc(var(--brand-chroma) * 0.65) var(--brand-hue));
  --brand-300: oklch(0.75 calc(var(--brand-chroma) * 0.85) var(--brand-hue));
  --brand-400: oklch(0.65 var(--brand-chroma) var(--brand-hue));
  --brand-600: oklch(0.45 var(--brand-chroma) var(--brand-hue));
  --brand-950: oklch(0.13 calc(var(--brand-chroma) * 0.35) var(--brand-hue));

  --neutral-100: oklch(0.93 0.006 var(--brand-hue));
  --neutral-400: oklch(0.65 0.012 var(--brand-hue));
  --neutral-600: oklch(0.45 0.014 var(--brand-hue));
  --neutral-800: oklch(0.27 0.014 var(--brand-hue));
  --neutral-900: oklch(0.19 0.012 var(--brand-hue));
  --neutral-950: oklch(0.12 0.010 var(--brand-hue));

  /* Espaciado — base 4px, ritmo 8px */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Tipografia comprimida para tablero denso (ratio 1.125 -> 1.2) */
  --text--2: clamp(0.6875rem, 0.676rem + 0.051vw, 0.75rem);
  --text--1: clamp(0.8125rem, 0.7955rem + 0.0758vw, 0.875rem);
  --text-0:  clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --text-1:  clamp(1.0547rem, 1.0149rem + 0.1768vw, 1.2rem);
  --text-2:  clamp(1.1865rem, 1.1267rem + 0.2659vw, 1.44rem);
  --text-3:  clamp(1.3348rem, 1.2478rem + 0.3867vw, 1.728rem);
  --text-4:  clamp(1.5017rem, 1.3775rem + 0.552vw, 2.0736rem);

  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  /* El mono es el tercer rol y aqui carga mucho peso: puertos, PIDs, horas,
     tamanos. Todo lo que es dato va en mono para que se escanee en columna. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;

  /* Radios SHARP — un solo sistema, declarado y respetado */
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 6px;
  --radius-full: 999px;

  --shadow-tint: oklch(0.08 0.03 var(--brand-hue));
  --elevation-1: 0.5px 1px 1px color-mix(in oklch, var(--shadow-tint) 40%, transparent);
  --elevation-2:
    0.5px 1px 1px color-mix(in oklch, var(--shadow-tint) 28%, transparent),
    1px 2px 4px color-mix(in oklch, var(--shadow-tint) 26%, transparent),
    2px 8px 16px color-mix(in oklch, var(--shadow-tint) 24%, transparent);

  /* Motion — valores de premium-ui-system §7, sin inventar ninguno */
  --dur-instant: 120ms;
  --dur-toggle: 240ms;
  --dur-modal: 400ms;
  --dur-page: 500ms;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* ---------- TIER 2: SEMANTICOS ---------- */
  --surface: var(--neutral-950);
  --surface-raised: var(--neutral-900);
  --surface-sunken: oklch(0.09 0.008 var(--brand-hue));
  --text: var(--neutral-100);
  --text-muted: var(--neutral-400);
  --text-faint: var(--neutral-600);
  --border: var(--neutral-800);
  --border-fuerte: oklch(0.34 0.014 var(--brand-hue));
  --accent: var(--brand-400);
  --on-accent: var(--brand-950);
  --focus-ring: var(--brand-300);

  /* ---------- Colores de ESTADO ----------
     El mapa completo vive aqui y en ningun otro sitio. Cada estado dice una
     cosa distinta y por eso tiene color propio: pintar PAUSADO de rojo haria
     que en dos dias nadie distinguiera una pausa de una caida, y el tablero
     dejaria de servir. SIN RED senala al router, no al booth. */
  --c-arriba: oklch(0.72 0.17 152);
  --c-arrancando: oklch(0.70 0.13 236);
  --c-sintunel: oklch(0.78 0.16 78);
  --c-abajo: oklch(0.65 0.21 25);
  --c-sinred: oklch(0.68 0.16 300);
  --c-pausado: oklch(0.58 0.03 236);
  --c-desconocido: oklch(0.52 0.012 var(--brand-hue));
  --c-archivado: oklch(0.46 0.012 var(--brand-hue));
}

/* ============================================================ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text);
  font: 400 var(--text-0) / 1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* Sin scroll lateral nunca: en un celular de 390px un desborde de 4px se
     reporta siempre como "se ve descentrado". */
  overflow-x: hidden;
}

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; text-wrap: balance; }

a { color: var(--accent); }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-s); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.ico { flex: none; display: block; }

/* ============================================================ layout */

.envoltura {
  width: min(100%, 1180px);
  margin-inline: auto;
  /* 16px de guttter lateral, el minimo que pide la casa en movil */
  padding-inline: var(--space-4);
}

/* ============================================================ barra superior
   Lo primero que se lee no es un booth: es si se puede confiar en la pantalla. */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.barra__fila {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding-block: var(--space-2);
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.marca__punto {
  width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--c-arriba);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-arriba) 22%, transparent);
}
.marca__punto[data-mudo="si"] { background: var(--c-desconocido); box-shadow: none; }
.marca__nombre { font-size: var(--text-0); }
.marca__nombre span { color: var(--text-faint); font-weight: 400; }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  font-size: var(--text--1);
  color: var(--text-muted);
  white-space: nowrap;
}
.pastilla b { color: var(--text); font-weight: 600; }
.pastilla--alerta { border-color: color-mix(in oklch, var(--c-sintunel) 50%, var(--border)); color: var(--c-sintunel); }
.pastilla--grave { border-color: color-mix(in oklch, var(--c-abajo) 55%, var(--border)); color: var(--c-abajo); }

/* Franja de aviso cuando la PC esta muda: ocupa ancho completo y explica que el
   tablero ya NO esta afirmando nada. Es la pieza que hace creible al resto. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  margin-block: var(--space-4) 0;
  font-size: var(--text--1);
  line-height: 1.45;
  border: 1px solid;
}
.aviso--grave {
  border-color: color-mix(in oklch, var(--c-abajo) 55%, transparent);
  background: color-mix(in oklch, var(--c-abajo) 12%, var(--surface-raised));
  color: color-mix(in oklch, var(--c-abajo) 70%, var(--text));
}
.aviso--ojo {
  border-color: color-mix(in oklch, var(--c-sintunel) 50%, transparent);
  background: color-mix(in oklch, var(--c-sintunel) 10%, var(--surface-raised));
  color: color-mix(in oklch, var(--c-sintunel) 72%, var(--text));
}
.aviso b { display: block; color: var(--text); }

/* ============================================================ rejilla de booths */

.rejilla {
  display: grid;
  /* auto-fill y no auto-fit: con un solo booth, auto-fit lo estiraria a todo el
     ancho y la tarjeta quedaria ridicula. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-4);
  margin-block: var(--space-4) var(--space-8);
  align-items: start;
}

.seccion__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-block: var(--space-6) 0;
  font-size: var(--text--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 600;
}
.seccion__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================ tarjeta */

.tarjeta {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  /* El color de estado entra por aqui; cada tarjeta lo redefine. */
  --estado: var(--c-desconocido);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--elevation-1);
  transition: border-color var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-instant) var(--ease-out);
}
.tarjeta:hover { border-color: var(--border-fuerte); box-shadow: var(--elevation-2); }

/* Franja de acento con el hue del propio booth (sale de su config.json), para
   reconocerlo por color sin leer el nombre. No es el color de estado: ese va en
   la chapa. Dos lenguajes distintos que no se pisan. */
.tarjeta::before {
  content: "";
  position: absolute;
  inset-inline: -1px;
  top: -1px;
  height: 3px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: oklch(0.62 0.14 var(--booth-hue, var(--brand-hue)));
}

/* Dato viejo: la tarjeta entera se apaga. No se tacha ni se pinta de rojo,
   porque no sabemos que este mal: solo que no sabemos. */
.tarjeta[data-vigente="no"] { opacity: 0.62; }
.tarjeta[data-vigente="no"]::before { filter: saturate(0.25); }

.tarjeta__cabeza {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.tarjeta__nombre {
  font-size: var(--text-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
  overflow-wrap: anywhere;
}
.tarjeta__cliente {
  display: block;
  font-size: var(--text--2);
  font-weight: 500;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Chapa de estado: color + TEXTO siempre juntos. A pleno sol en un evento el
   matiz se pierde, y hay gente que no distingue verde de ambar. */
.chapa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-radius: var(--radius-m);
  background: color-mix(in oklch, var(--estado) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--estado) 45%, transparent);
  color: var(--estado);
  font: 700 var(--text--2) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.chapa__punto {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
}
/* Solo late lo que esta vivo de verdad. Un punto latiendo con dato viejo seria
   justo la mentira que este tablero evita. */
.tarjeta[data-vigente="si"] .chapa__punto[data-late="si"] { animation: late 2s var(--ease-in-out) infinite; }
@keyframes late {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.78); }
}

/* ---- las cuatro capas ---- */

.capas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}
.capa {
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-s);
  background: var(--surface-sunken);
  font: 600 var(--text--2) / 1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.capa__barra {
  width: 100%;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--border);
}
.capa[data-ok="si"] { color: var(--text-muted); }
.capa[data-ok="si"] .capa__barra { background: var(--c-arriba); }
.capa[data-ok="no"] .capa__barra { background: var(--c-abajo); }
.capa[data-ok="?"] .capa__barra { background: var(--c-desconocido); }
.tarjeta[data-vigente="no"] .capa__barra { background: var(--c-desconocido) !important; }

/* ---- link y metadatos ---- */

.enlace {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface-sunken);
  text-decoration: none;
  color: var(--text);
  font: 500 var(--text--1) / 1.2 var(--font-mono);
  min-height: 40px;
  transition: border-color var(--dur-instant) var(--ease-out);
}
.enlace:hover { border-color: var(--accent); }
.enlace__texto {
  /* Ocupa el alto completo de la fila: como enlace de una linea medía 17 px y se queda
     por debajo del minimo de 24 px de WCAG 2.2. El area tocable tiene que ser la fila
     entera, no el renglon de texto. */
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
}
.enlace__copiar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin: -4px -6px -4px 0;
  border: none;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out);
}
.enlace__copiar:hover { color: var(--text); background: var(--surface-raised); }

.datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font: 500 var(--text--2) / 1.4 var(--font-mono);
  color: var(--text-faint);
}
.datos b { color: var(--text-muted); font-weight: 600; }

/* Distintivos: no son estados, son avisos sobre la tarjeta. */
.marcas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.marcaje {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-s);
  font: 600 var(--text--2) / 1.3 var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px dashed color-mix(in oklch, var(--c-sintunel) 55%, transparent);
  color: var(--c-sintunel);
}
.marcaje--info { border-style: solid; border-color: var(--border-fuerte); color: var(--text-faint); }

/* ---- acciones ---- */

.acciones { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-muted);
  --btn-bd: var(--border-fuerte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* 40px de alto: por encima de los 24px de WCAG 2.2 y comodo con el pulgar */
  min-height: 40px;
  padding: 0 var(--space-3);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-m);
  font: 600 var(--text--1) / 1 var(--font-body);
  cursor: pointer;
  transition: background var(--dur-instant) var(--ease-out),
              color var(--dur-instant) var(--ease-out),
              border-color var(--dur-instant) var(--ease-out);
}
.btn:hover:not(:disabled) { --btn-fg: var(--text); --btn-bd: var(--accent); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--crece { flex: 1; }
.btn--fuerte { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); }
.btn--fuerte:hover:not(:disabled) { --btn-bg: color-mix(in oklch, var(--accent), white 12%); --btn-fg: var(--on-accent); }
.btn--peligro { --btn-fg: var(--c-abajo); --btn-bd: color-mix(in oklch, var(--c-abajo) 50%, var(--border)); }
.btn--peligro:hover:not(:disabled) { --btn-bg: color-mix(in oklch, var(--c-abajo) 16%, transparent); --btn-fg: var(--c-abajo); --btn-bd: var(--c-abajo); }

/* ---- orden en curso ---- */

.orden {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, var(--border));
  border-radius: var(--radius-m);
  background: color-mix(in oklch, var(--accent) 7%, var(--surface-sunken));
  font-size: var(--text--1);
}
.orden__cabeza { display: flex; align-items: center; gap: var(--space-2); }
.orden__paso { margin-right: auto; font-weight: 600; }
.orden__pct { font: 700 var(--text--1) / 1 var(--font-mono); color: var(--accent); }
.progreso {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--surface);
  overflow: hidden;
}
.progreso__relleno {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  /* La barra solo avanza. Un progreso que retrocede destruye la confianza mas
     rapido que no tener barra. */
  transition: width var(--dur-toggle) var(--ease-out);
}
.orden__salida {
  margin: 0;
  font: 400 var(--text--2) / 1.45 var(--font-mono);
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 9em;
  overflow-y: auto;
}

/* ============================================================ bitacora */

.bitacora { display: grid; gap: 0; margin-bottom: var(--space-8); }
.linea {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border);
  font-size: var(--text--1);
}
.linea__hora { font: 500 var(--text--2) / 1.4 var(--font-mono); color: var(--text-faint); white-space: nowrap; }
.linea__quien { font: 700 var(--text--2) / 1.4 var(--font-mono); letter-spacing: 0.04em; }
.linea__que { color: var(--text-muted); overflow-wrap: anywhere; }
.linea[data-tipo="cayo"] .linea__quien,
.linea[data-tipo="alerta"] .linea__quien { color: var(--c-abajo); }
.linea[data-tipo="revivio"] .linea__quien { color: var(--c-arriba); }
.linea[data-tipo="publicado"] .linea__quien { color: var(--accent); }
.linea[data-tipo="pausado"] .linea__quien { color: var(--c-pausado); }

/* ============================================================ entrada (clave) */

.portada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-4);
}
.portada__caja {
  width: min(100%, 360px);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--elevation-2);
}
.portada__titulo { font-size: var(--text-3); letter-spacing: -0.02em; }
.portada__texto { margin: 0; color: var(--text-muted); font-size: var(--text--1); }

.campo {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--space-3);
  background: var(--surface-sunken);
  color: var(--text);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--radius-m);
  font: 500 var(--text-0) / 1 var(--font-mono);
}
.campo::placeholder { color: var(--text-faint); font-family: var(--font-body); }

.error {
  margin: 0;
  color: var(--c-abajo);
  font-size: var(--text--1);
  min-height: 1.4em;
}

/* ============================================================ detalle */

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-4) 0;
  padding: var(--space-2) 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text--1);
  font-weight: 600;
  cursor: pointer;
}
.volver:hover { color: var(--text); }

.detalle__cabeza {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block: var(--space-2) var(--space-5);
}
.detalle__titulo { font-size: var(--text-4); letter-spacing: -0.02em; margin-right: auto; }

.panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  margin-bottom: var(--space-4);
}
.panel__titulo {
  font-size: var(--text--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 700;
}

.ficha { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text--1); }
.ficha dt { color: var(--text-faint); }
.ficha dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }

.peligro {
  border-color: color-mix(in oklch, var(--c-abajo) 35%, var(--border));
}
.peligro .panel__titulo { color: color-mix(in oklch, var(--c-abajo) 70%, var(--text)); }
.peligro__nota { margin: 0; font-size: var(--text--1); color: var(--text-muted); }

/* ============================================================ vacio y carga */

.vacio {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--text--1);
}

.esqueleto {
  height: 168px;
  border-radius: var(--radius-l);
  background: linear-gradient(90deg, var(--surface-raised) 0%, var(--surface-sunken) 50%, var(--surface-raised) 100%);
  background-size: 300% 100%;
  animation: barrido 1.4s var(--ease-in-out) infinite;
}
@keyframes barrido {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Confirmacion: <dialog> nativo, que trae focus trap y backdrop gratis. */
dialog {
  width: min(100% - 32px, 420px);
  padding: var(--space-5);
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--radius-l);
  box-shadow: var(--elevation-2);
}
dialog::backdrop { background: oklch(0.08 0.01 var(--brand-hue) / 0.7); backdrop-filter: blur(3px); }
dialog h2 { font-size: var(--text-2); margin-bottom: var(--space-3); }
dialog p { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--text--1); }
.dialogo__botones { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ============================================================ movil */

@media (max-width: 460px) {
  /* En el celular la barra se queda en UNA fila. Lo que se sacrifica es el nombre de la
     maquina, que no cambia nunca; el latido y el disco libre si son datos y se quedan.
     Con wrap, el candado caia a una segunda fila y se comia 50 px de pantalla util. */
  .barra__fila { min-height: 52px; flex-wrap: nowrap; }
  .marca { min-width: 0; }
  .marca__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .marca__nombre span { display: none; }
  .pastilla { padding-inline: var(--space-2); }
  .capa { font-size: 10px; letter-spacing: 0; }
}

/* Reducir, no matar: el crossfade sigue comunicando el cambio. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}