/* ==========================================================================================================
   Vigía — «la guardia»: el cuaderno de un vigía nocturno y un radar.
   Oscuro = noche con verde fósforo, ámbar y rojo. Claro = papel de cuaderno con tinta.
   La base (estructura, botones, campos, tarjetas…) está en /kit/kit.css: aquí van letras, colores y piezas propias.
   ========================================================================================================== */

/* ── Letras ─────────────────────────────────────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fuentes/newsreader-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('/fuentes/newsreader-latin-wght-italic.woff2') format('woff2-variations'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fuentes/instrument-sans-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/fuentes/instrument-sans-latin-wght-italic.woff2') format('woff2-variations'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }

/* ── Variables: papel (claro) ───────────────────────────────────────────────────────────────────────────── */
:root {
  --f-titulos: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-texto: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-datos: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --peso-titulos: 540;
  --tracking-titulos: -0.012em;

  --fondo: #f2ede1;
  --superficie: #fbf8f0;
  --superficie-2: #ece6d6;
  --hundido: #e5dece;
  --linea: #ddd4c1;
  --linea-fuerte: #c4b9a1;
  --texto: #17202c;
  --texto-2: #434c5b;
  --texto-3: #646972;
  --acento: #1d6b47;
  --acento-hover: #165638;
  --acento-suave: #dae8dc;
  --acento-texto: #17603f;
  --sobre-acento: #ffffff;
  --ok: #1b7a4b;      --ok-suave: #dbeee0;
  --atencion: #985600; --atencion-suave: #f6e7cb;
  --error: #b32a1f;   --error-suave: #f7dfda;
  --info: #2a5d8f;    --info-suave: #dfe9f3;

  --sombra-1: 0 1px 2px rgb(40 32 16 / 0.07), 0 0 0 1px rgb(40 32 16 / 0.03);
  --sombra-2: 0 8px 22px -10px rgb(40 32 16 / 0.22), 0 1px 3px rgb(40 32 16 / 0.07);

  /* Piezas propias */
  --fosforo: #1b7a4b;
  --radar-fondo: #f8f4ea;
  --radar-borde: #cfc4ac;
  --radar-linea: rgb(23 32 44 / 0.2);
  --radar-linea-fuerte: rgb(23 32 44 / 0.42);
  --radar-texto: #5f6570;
  --barrido: rgb(27 122 75 / 0.30);
  --renglon: 2rem;
  --renglon-color: rgb(42 93 143 / 0.17);
  --margen-color: rgb(196 64 52 / 0.5);
  --papel: #fcf9f1;
  --noche: #0b1210;
  --sin-dato: #d6cfbf;
  --mant: #3c74b3;
}

/* ── Variables: noche (oscuro) ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --fondo: #090e0d;
    --superficie: #0f1614;
    --superficie-2: #16201d;
    --hundido: #060a09;
    --linea: #1f2b27;
    --linea-fuerte: #33443e;
    --texto: #e3ece7;
    --texto-2: #a6b5ae;
    --texto-3: #7e8d86;
    --acento: #52e09a;
    --acento-hover: #7aebb3;
    --acento-suave: #0f281c;
    --acento-texto: #6ee9a9;
    --sobre-acento: #03130b;
    --ok: #52e09a;      --ok-suave: #0f281c;
    --atencion: #ffb547; --atencion-suave: #2d210c;
    --error: #ff6b5e;   --error-suave: #351512;
    --info: #74b4f0;    --info-suave: #10233a;
    --fosforo: #52e09a;
    --radar-fondo: #06100c;
    --radar-borde: #1d3229;
    --radar-linea: rgb(82 224 154 / 0.17);
    --radar-linea-fuerte: rgb(82 224 154 / 0.38);
    --radar-texto: #5f8a76;
    --barrido: rgb(82 224 154 / 0.36);
    --renglon-color: rgb(166 181 174 / 0.075);
    --margen-color: rgb(255 107 94 / 0.3);
    --papel: #0e1513;
    --sin-dato: #26322e;
    --mant: #74b4f0;
  }
}
:root[data-tema='oscuro'] {
  --fondo: #090e0d;
  --superficie: #0f1614;
  --superficie-2: #16201d;
  --hundido: #060a09;
  --linea: #1f2b27;
  --linea-fuerte: #33443e;
  --texto: #e3ece7;
  --texto-2: #a6b5ae;
  --texto-3: #7e8d86;
  --acento: #52e09a;
  --acento-hover: #7aebb3;
  --acento-suave: #0f281c;
  --acento-texto: #6ee9a9;
  --sobre-acento: #03130b;
  --ok: #52e09a;      --ok-suave: #0f281c;
  --atencion: #ffb547; --atencion-suave: #2d210c;
  --error: #ff6b5e;   --error-suave: #351512;
  --info: #74b4f0;    --info-suave: #10233a;
  --fosforo: #52e09a;
  --radar-fondo: #06100c;
  --radar-borde: #1d3229;
  --radar-linea: rgb(82 224 154 / 0.17);
  --radar-linea-fuerte: rgb(82 224 154 / 0.38);
  --radar-texto: #5f8a76;
  --barrido: rgb(82 224 154 / 0.36);
  --renglon-color: rgb(166 181 174 / 0.075);
  --margen-color: rgb(255 107 94 / 0.3);
  --papel: #0e1513;
  --sin-dato: #26322e;
  --mant: #74b4f0;
}

/* ── Base ───────────────────────────────────────────────────────────────────────────────────────────────── */
body { font-feature-settings: 'ss01' 1; }
h1, h2, h3 { font-optical-sizing: auto; }
h1 em, h2 em { font-style: italic; font-weight: 450; color: var(--acento-texto); }
.datos, .num, code { font-feature-settings: 'zero' 1; }
.boton { font-family: var(--f-texto); letter-spacing: 0.005em; }
.boton.primario { font-weight: 650; }
.antetitulo { letter-spacing: 0.12em; }
::selection { background: color-mix(in oklab, var(--fosforo) 30%, transparent); }

/* Barra: la marca lleva un radar diminuto */
.marca { font-family: var(--f-titulos); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.marca img { border-radius: 8px; }
.barra .acciones .boton.pequeno { min-height: 36px; }
.ir-panel { display: inline-flex; }
@media (max-width: 480px) { .ir-panel span { display: none; } }

/* Modos de la cáscara (los pone /js/modo.js antes de pintar y app.js al navegar) */
.armazon { flex: 1; display: block; min-width: 0; }
.armazon.panel { display: grid; }
:root[data-modo='estado'] .barra, :root[data-modo='estado'] #pie,
:root[data-modo='incrustar'] .barra, :root[data-modo='incrustar'] #pie,
:root[data-modo='panel'] #pie { display: none; }
:root[data-modo='incrustar'] body { background: transparent; min-height: 0; }
:root[data-modo='incrustar'] .principal { padding: 0; }
.principal { padding-top: 0; }
:root[data-modo='panel'] .principal { padding-top: clamp(20px, 3vw, 36px); }
:root[data-modo='panel'] .principal > .vista { max-width: 1240px; }
:root[data-modo='panel'] .barra .navegacion { display: none; }
:root[data-modo='web'] .principal { padding-bottom: 0; }

/* Lateral del panel: un sello de la guardia arriba */
.lateral .sello { display: flex; align-items: center; gap: 10px; padding: 4px 10px 14px; margin-bottom: 6px; border-bottom: 1px dashed var(--linea-fuerte); }
.lateral .sello .punto { width: 8px; height: 8px; }
.lateral .sello span { font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-2); letter-spacing: 0.02em; }
.lateral a .contador { margin-left: auto; }

/* ── Puntos de estado y etiquetas ───────────────────────────────────────────────────────────────────────── */
.punto.mant { background: var(--mant); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mant) 22%, transparent); }
.punto.pausa { background: var(--texto-3); box-shadow: none; opacity: 0.6; }
.estado-ok { color: var(--ok); }
.estado-atencion { color: var(--atencion); }
.estado-error { color: var(--error); }
.etiqueta.mant { background: var(--info-suave); color: var(--info); border-color: transparent; }
.tipo-chip { font-family: var(--f-datos); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); border: 1px solid var(--linea); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

/* ==========================================================================================================
   EL RADAR
   ========================================================================================================== */
.radar {
  --periodo: 8s;
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--fosforo) 9%, var(--radar-fondo)) 0%, var(--radar-fondo) 62%),
    var(--radar-fondo);
  box-shadow: inset 0 0 0 1px var(--radar-borde), inset 0 0 60px color-mix(in oklab, var(--fosforo) 6%, transparent), 0 30px 60px -40px rgb(0 0 0 / 0.45);
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
}
.radar::after {
  /* bisel de la pantalla */
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 6px color-mix(in oklab, var(--radar-fondo) 70%, var(--radar-borde)), inset 0 0 0 7px var(--radar-borde);
}
.radar-fondo, .radar-fondo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.radar-fondo .anillo { fill: none; stroke: var(--radar-linea); stroke-width: 1; }
.radar-fondo .anillo.fuerte { stroke: var(--radar-linea-fuerte); }
.radar-fondo .cruz { stroke: var(--radar-linea); stroke-width: 1; stroke-dasharray: 2 5; }
.radar-fondo .marca-g { stroke: var(--radar-linea-fuerte); stroke-width: 1; }
.radar-fondo .marca-g.chica { stroke: var(--radar-linea); }
.radar-fondo text { fill: var(--radar-texto); font-family: var(--f-datos); font-size: 9px; letter-spacing: 0.08em; }
.radar-barrido {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from 0deg, transparent 0deg 292deg, color-mix(in oklab, var(--barrido) 8%, transparent) 300deg, var(--barrido) 358deg, color-mix(in oklab, var(--fosforo) 85%, transparent) 359.4deg, transparent 360deg);
  animation: barrer var(--periodo) linear infinite;
  will-change: transform;
}
@keyframes barrer { to { transform: rotate(1turn); } }
.radar-centro { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--fosforo); z-index: 3; box-shadow: 0 0 10px var(--fosforo); }
.radar-puntos { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 2; }
.blip {
  position: absolute; left: var(--x); top: var(--y); width: 0; height: 0;
  --c: var(--ok);
}
.blip.atencion { --c: var(--atencion); }
.blip.error { --c: var(--error); }
.blip.mant { --c: var(--mant); }
.blip.apagado { --c: var(--texto-3); }
.blip-punto, .blip a { position: absolute; left: 0; top: 0; }
.blip-punto {
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 25%, transparent), 0 0 12px color-mix(in oklab, var(--c) 70%, transparent);
  animation: destello var(--periodo) linear infinite; animation-delay: var(--retraso, 0s);
  opacity: 0.62;
}
.blip-punto::after {
  /* el latido: un anillo que se abre */
  content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--c);
  animation: latido-blip 2.6s ease-out infinite; animation-delay: var(--retraso-latido, 0s); opacity: 0;
}
.blip.error .blip-punto { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; opacity: 1; animation: none; }
.blip.error .blip-punto::after { animation-duration: 1.2s; }
.blip.apagado .blip-punto { box-shadow: none; animation: none; opacity: 0.5; }
.blip.apagado .blip-punto::after { display: none; }
@keyframes destello {
  0% { opacity: 1; transform: scale(1.45); }
  14% { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(1); }
}
@keyframes latido-blip {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(3.4); opacity: 0; }
}
.blip-nombre {
  position: absolute; top: 0; left: 10px; transform: translateY(-50%);
  font-family: var(--f-datos); font-size: clamp(9px, 2.6cqi, 11.5px); line-height: 1.2; white-space: nowrap; color: var(--radar-texto);
  padding: 1px 5px; border-radius: 3px; background: color-mix(in oklab, var(--radar-fondo) 78%, transparent);
  pointer-events: none;
}
.blip.izquierda .blip-nombre { left: auto; right: 10px; }
.blip.error .blip-nombre { color: var(--error); font-weight: 600; }
.blip.atencion .blip-nombre { color: var(--atencion); }
.radar.sin-nombres .blip:not(.error):not(.atencion) .blip-nombre { display: none; }
.blip a { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; z-index: 2; }
.blip a:focus-visible { outline: 2px solid var(--c); outline-offset: 0; }
.blip a:hover ~ .blip-nombre, .blip a:focus-visible ~ .blip-nombre { display: block !important; color: var(--texto); }
.radar-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 12px; font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-3); }
.radar-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.radar-leyenda .punto { width: 7px; height: 7px; box-shadow: none; }
.radar-vacio { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; text-align: center; padding: 22%; font-family: var(--f-datos); font-size: var(--t-xs); color: var(--radar-texto); }

/* ==========================================================================================================
   EL CUADERNO DE GUARDIA
   ========================================================================================================== */
.cuaderno {
  --sangria: 4.6rem;
  position: relative; margin: 0; padding: calc(var(--renglon) * 0.5) 1.1rem var(--renglon) var(--sangria);
  list-style: none; border-radius: 4px var(--radio-l) var(--radio-l) 4px;
  background-color: var(--papel);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--renglon) - 1px), var(--renglon-color) calc(var(--renglon) - 1px), var(--renglon-color) var(--renglon));
  background-position: 0 calc(var(--renglon) * 0.5);
  box-shadow: var(--sombra-1), inset 3px 0 0 color-mix(in oklab, var(--linea-fuerte) 60%, transparent);
  line-height: var(--renglon);
  min-height: calc(var(--renglon) * 6);
}
.cuaderno::before {
  /* el margen rojo */
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--sangria) - 0.7rem); width: 0; border-left: 1.5px solid var(--margen-color);
}
.cuaderno li { position: relative; font-family: var(--f-titulos); font-size: 1.04rem; color: var(--texto); }
.cuaderno li time {
  position: absolute; right: calc(100% + 1.15rem); top: 0; font-family: var(--f-datos); font-size: 0.8rem; color: var(--texto-3);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.cuaderno li::before {
  content: ''; position: absolute; left: -1.05rem; top: calc(var(--renglon) / 2 - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--linea-fuerte);
}
.cuaderno li.caida::before { background: var(--error); }
.cuaderno li.vuelta::before, .cuaderno li.primera::before, .cuaderno li.normal::before, .cuaderno li.renovado::before { background: var(--ok); }
.cuaderno li.lento::before, .cuaderno li.certificado::before, .cuaderno li.dominio::before { background: var(--atencion); }
.cuaderno li.mantenimiento::before { background: var(--mant); }
.cuaderno li.caida { color: var(--error); }
.cuaderno li.dia {
  font-family: var(--f-datos); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3);
}
.cuaderno li.dia::before { display: none; }
.cuaderno li.nuevo-renglon { animation: renglon-entra 420ms var(--curva); }
@keyframes renglon-entra { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.cuaderno .vacio-cuaderno { font-style: italic; color: var(--texto-3); }
.cuaderno-pie { display: flex; justify-content: center; margin-top: 10px; }
@media (max-width: 600px) {
  .cuaderno { --sangria: 3.9rem; padding-right: 0.8rem; }
  .cuaderno li { font-size: 0.98rem; }
  .cuaderno li time { right: calc(100% + 0.95rem); font-size: 0.74rem; }
}

/* ==========================================================================================================
   PORTADA
   ========================================================================================================== */
.portada-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 88px);
  border-bottom: 1px solid var(--linea);
  background:
    radial-gradient(1200px 600px at 85% 35%, color-mix(in oklab, var(--fosforo) 8%, transparent), transparent 60%),
    var(--fondo);
}
.hero-rejilla { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-texto h1 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 0.4em; font-weight: 500; }
.hero-texto .entradilla { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); }
.hero-radar { position: relative; max-width: 560px; justify-self: center; width: 100%; }
.hero-radar .radar-pie { margin: 12px 0 0; text-align: center; font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-3); }
@media (max-width: 900px) {
  .hero-rejilla { grid-template-columns: minmax(0, 1fr); }
  .hero-radar { max-width: 420px; order: -1; }
}

.mirar { margin-top: var(--e-5); max-width: 560px; }
.mirar label { display: block; font-family: var(--f-datos); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 8px; }
.mirar .fila-mirar { display: flex; gap: 8px; }
.mirar input {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px; border-radius: var(--radio-l); border: 1.5px solid var(--linea-fuerte);
  background: var(--superficie); font-family: var(--f-datos); font-size: max(16px, 1rem); color: var(--texto);
}
.mirar input:focus { outline: none; border-color: var(--acento); box-shadow: var(--foco); }
.mirar .boton { height: 52px; border-radius: var(--radio-l); padding-inline: 20px; }
.mirar-resultado { margin-top: 14px; min-height: 1px; }
.linea-guardia {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline;
  padding: 12px 16px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra-1);
  animation: vista-entra var(--medio) var(--curva);
}
.linea-guardia time { font-family: var(--f-datos); font-size: var(--t-s); color: var(--texto-3); }
.linea-guardia p { margin: 0; font-family: var(--f-titulos); font-size: 1.08rem; }
.linea-guardia .datos-linea { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-2); }
.linea-guardia.mal { border-color: color-mix(in oklab, var(--error) 35%, var(--linea)); }
.linea-guardia.mal p { color: var(--error); }
.linea-guardia .seguir { grid-column: 2; margin-top: 6px; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--e-5); }

.portada-seccion { padding-block: clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--linea); }
.portada-seccion:last-of-type { border-bottom: 0; }
.portada-seccion h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); font-weight: 500; letter-spacing: -0.02em; }
.portada-seccion .entradilla { margin-bottom: var(--e-6); }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); } }

/* Hoja de rondas: lo que mira, como una hoja de servicio */
.rondas { margin: 0; border-top: 2px solid var(--texto); }
.rondas > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 6px 18px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.rondas dt { font-family: var(--f-datos); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); padding-top: 4px; display: flex; gap: 8px; align-items: flex-start; }
.rondas dt svg { width: 16px; height: 16px; color: var(--acento-texto); flex-shrink: 0; }
.rondas dd { margin: 0; }
.rondas dd strong { display: block; font-family: var(--f-titulos); font-size: 1.15rem; font-weight: 560; margin-bottom: 2px; }
.rondas dd span { display: block; color: var(--texto-2); font-size: var(--t-s); }
.rondas dd code { display: inline-block; margin-top: 6px; font-size: var(--t-xs); color: var(--texto-2); background: var(--superficie-2); padding: 2px 7px; border-radius: 4px; }
@media (max-width: 600px) { .rondas > div { grid-template-columns: minmax(0, 1fr); } }

.canales { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.canales li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pildora); font-family: var(--f-datos); font-size: var(--t-s); background: var(--superficie); }
.canales li svg { width: 16px; height: 16px; color: var(--acento-texto); }

.muestra-estado { border: 1px solid var(--linea); border-radius: var(--radio-xl); background: var(--superficie); box-shadow: var(--sombra-2); padding: clamp(18px, 3vw, 28px); }
.cierre { text-align: center; }
.cierre h2 { max-width: 20ch; margin-inline: auto; }
.cierre p { max-width: 52ch; margin-inline: auto; color: var(--texto-2); }

/* ==========================================================================================================
   PANEL
   ========================================================================================================== */
.guardia-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-4); align-items: end; margin-bottom: var(--e-5); }
.guardia-cabeza .acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.frase-estado { font-family: var(--f-titulos); font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.02; margin: 0; }
.frase-estado.ok { color: var(--texto); }
.frase-estado.ok em { color: var(--ok); }
.frase-estado.error { color: var(--error); }
.frase-estado.atencion { color: var(--atencion); }
.sub-estado { margin: 8px 0 0; font-family: var(--f-datos); font-size: var(--t-s); color: var(--texto-2); }
@media (max-width: 700px) { .guardia-cabeza { grid-template-columns: minmax(0, 1fr); } .guardia-cabeza .acciones { justify-content: flex-start; } }

.guardia-rejilla { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 1080px) { .guardia-rejilla { grid-template-columns: minmax(0, 1fr); } .guardia-rejilla .radar-caja { max-width: 380px; margin-inline: auto; width: 100%; } }
.cifras-guardia { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; margin-bottom: var(--e-5); }
.cifras-guardia .cifra { background: var(--superficie); padding: 14px 16px; }
.cifras-guardia .cifra .valor { font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); }
.cifras-guardia .cifra .pie-cifra { font-size: var(--t-xs); color: var(--texto-3); }

.abiertas { display: grid; gap: 8px; margin-bottom: var(--e-5); }
.abiertas a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radio); background: var(--error-suave); color: var(--texto); text-decoration: none; border: 1px solid color-mix(in oklab, var(--error) 28%, transparent); }
.abiertas a strong { color: var(--error); }
.abiertas a .crece span { display: block; font-size: var(--t-s); color: var(--texto-2); }

/* Lista de vigías */
.lista-vigias > li, .lista-vigias > .elemento { gap: 14px; }
.lista-vigias .chispa-caja { width: 110px; flex-shrink: 0; }
.lista-vigias .chispa { height: 30px; }
.lista-vigias .metricas { display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-width: 76px; }
.lista-vigias .metricas .dato:first-child { color: var(--texto); font-weight: 500; }
.lista-vigias .destino { font-family: var(--f-datos); font-size: var(--t-xs) !important; color: var(--texto-3) !important; }
.chispa.error path { stroke: var(--error); }
.chispa.error .area-g { fill: color-mix(in oklab, var(--error) 12%, transparent); }
.chispa.atencion path { stroke: var(--atencion); }
.chispa.atencion .area-g { fill: color-mix(in oklab, var(--atencion) 12%, transparent); }
@media (max-width: 700px) { .lista-vigias .chispa-caja { display: none; } }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: var(--e-4); }

/* Ficha */
.ficha-cabeza { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: var(--e-5); }
.ficha-cabeza h1 { font-size: var(--t-2xl); margin: 0 0 4px; overflow-wrap: anywhere; }
.ficha-cabeza .destino { font-family: var(--f-datos); font-size: var(--t-s); color: var(--texto-2); overflow-wrap: anywhere; }
.ficha-cabeza .acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.estado-grande { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--f-datos); font-size: var(--t-s); }
.disp-cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; }
.disp-cuatro .cifra { background: var(--superficie); padding: 14px 16px; }
@media (max-width: 600px) { .disp-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grafico-caja { padding: 16px 16px 8px; }
.grafico-tiempos { width: 100%; height: auto; overflow: visible; }
.grafico-tiempos .rejilla-g { stroke: var(--linea); stroke-dasharray: 2 4; }
.grafico-tiempos .texto-eje { fill: var(--texto-3); font-family: var(--f-datos); font-size: 10.5px; }
.grafico-tiempos .p95 { fill: color-mix(in oklab, var(--fosforo) 13%, transparent); stroke: none; }
.grafico-tiempos .medio { fill: none; stroke: var(--fosforo); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.grafico-tiempos .fallo { fill: var(--error); }
.grafico-tiempos .hueco { fill: var(--sin-dato); opacity: 0.5; }
.leyenda-grafico { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-3); margin-top: 6px; }
.leyenda-grafico i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--fosforo); }
.leyenda-grafico i.banda { height: 9px; background: color-mix(in oklab, var(--fosforo) 18%, transparent); }
.leyenda-grafico i.rojo { background: var(--error); height: 9px; width: 4px; }
.tabla-rondas td { font-family: var(--f-datos); font-size: var(--t-xs); }
.tabla-rondas td.texto-error { font-family: var(--f-texto); font-size: var(--t-s); color: var(--error); }
.secciones-ficha { display: grid; gap: var(--e-5); }

/* Barras de 90 días */
.barras90 { display: flex; gap: 2px; height: 32px; align-items: stretch; }
.barras90 .b { flex: 1; min-width: 0; border-radius: 2px; background: var(--ok); transition: transform var(--rapido), opacity var(--rapido); transform-origin: bottom; }
.barras90 .b:hover { transform: scaleY(1.12); }
.barras90 .b.corte { background: var(--atencion); }
.barras90 .b.caida { background: var(--error); }
.barras90 .b.sin { background: var(--sin-dato); }
.barras90 .b.mant { background: var(--mant); }
.barras90-pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-3); }
.barras90-pie .corto { display: none; }
@media (max-width: 640px) {
  .barras90 .b:nth-child(-n+60) { display: none; }
  .barras90-pie .largo { display: none; }
  .barras90-pie .corto { display: inline; }
}

/* Asistente: tipos de vigía */
.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.tipo {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border-radius: var(--radio-l);
  border: 1.5px solid var(--linea); background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit;
  transition: border-color var(--rapido), transform var(--medio) var(--curva), box-shadow var(--medio);
}
.tipo:hover { border-color: var(--linea-fuerte); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.tipo[aria-pressed='true'] { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 18%, transparent); }
.tipo svg { width: 22px; height: 22px; color: var(--acento-texto); }
.tipo strong { font-family: var(--f-titulos); font-size: 1.2rem; font-weight: 580; }
.tipo span { font-size: var(--t-s); color: var(--texto-2); }
.tipo code { font-size: var(--t-xs); color: var(--texto-3); }
.asistente { max-width: 760px; }
.asistente .pie-form { position: sticky; bottom: 0; background: linear-gradient(to top, var(--fondo) 70%, transparent); padding-block: 14px; margin-top: var(--e-4); display: flex; justify-content: space-between; gap: 10px; }
.con-pestanas .asistente .pie-form { bottom: calc(var(--pestanas-alto) + env(safe-area-inset-bottom)); }
@media (min-width: 901px) { .con-pestanas .asistente .pie-form { bottom: 0; } }
.intervalos { display: flex; flex-wrap: wrap; gap: 6px; }
.intervalos button { min-height: 40px; padding: 6px 14px; border-radius: var(--radio); border: 1px solid var(--linea-fuerte); background: var(--superficie); font-family: var(--f-datos); font-size: var(--t-s); color: var(--texto-2); cursor: pointer; }
.intervalos button[aria-pressed='true'] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.intervalos button:disabled { opacity: 0.4; }
.opciones-mas { margin-top: 4px; }

/* Latido: la dirección y los ejemplos */
.latido-caja pre.codigo { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Páginas de estado (editor) */
.grupo-editor { border: 1px solid var(--linea); border-radius: var(--radio-l); padding: 14px; background: var(--superficie); }
.grupo-editor + .grupo-editor { margin-top: 12px; }
.grupo-editor .fila-comp { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--linea); }
.grupo-editor .fila-comp:first-of-type { border-top: 0; }
.grupo-editor .fila-comp .entrada { min-height: 38px; padding: 6px 10px; }
@media (max-width: 640px) { .grupo-editor .fila-comp { grid-template-columns: auto minmax(0, 1fr) auto; } .grupo-editor .fila-comp .nombre-real { display: none; } }
.insignia-muestra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; background: var(--superficie-2); border-radius: var(--radio); }
.insignia-muestra img { height: 20px; width: auto; }

/* ==========================================================================================================
   PÁGINA DE ESTADO PÚBLICA
   ========================================================================================================== */
.estado-pagina { max-width: 880px; margin-inline: auto; padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 32px) 48px; }
.estado-cabeza { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: var(--e-5); }
.estado-cabeza h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 520; margin: 0; letter-spacing: -0.02em; }
.estado-cabeza p { margin: 6px 0 0; color: var(--texto-2); max-width: 60ch; }
.estado-cabeza .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.estandarte {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--radio-l); margin-bottom: var(--e-6);
  background: var(--ok-suave); border: 1px solid color-mix(in oklab, var(--ok) 30%, transparent); overflow: hidden;
}
.estandarte p { margin: 0; font-family: var(--f-titulos); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); font-weight: 520; line-height: 1.25; }
.estandarte small { display: block; font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-2); margin-top: 4px; }
.estandarte.parcial, .estandarte.lento { background: var(--atencion-suave); border-color: color-mix(in oklab, var(--atencion) 30%, transparent); }
.estandarte.caida { background: var(--error-suave); border-color: color-mix(in oklab, var(--error) 30%, transparent); }
.estandarte.mant { background: var(--info-suave); border-color: color-mix(in oklab, var(--info) 30%, transparent); }
.estandarte.nada { background: var(--superficie-2); border-color: var(--linea); }
.mini-radar { position: relative; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid currentColor; color: var(--ok); opacity: 0.9; }
.mini-radar::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.5; }
.mini-radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 280deg, currentColor 360deg); opacity: 0.45; animation: barrer 4s linear infinite; }
.estandarte.parcial .mini-radar, .estandarte.lento .mini-radar { color: var(--atencion); }
.estandarte.caida .mini-radar { color: var(--error); }
.estandarte.mant .mini-radar { color: var(--info); }
.grupo-estado { margin-bottom: var(--e-6); }
.grupo-estado > h2 { font-family: var(--f-datos); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 10px; }
.componentes { border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); overflow: hidden; }
.componente { padding: 16px 18px; border-top: 1px solid var(--linea); }
.componente:first-child { border-top: 0; }
.componente .cabeza-comp { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.componente .cabeza-comp strong { font-weight: 620; }
.componente .estado-comp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-datos); font-size: var(--t-xs); white-space: nowrap; }
.componente .disp-comp { font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-2); }
.mantenimiento-aviso { margin-bottom: var(--e-5); }
.incidencias-publicas { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.incidencias-publicas > li { padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); }
.incidencias-publicas h3 { font-size: var(--t-l); margin: 0 0 4px; }
.incidencias-publicas .cuando { font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-3); }
.incidencias-publicas .cronologia { margin-top: 12px; }
.pie-estado { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: var(--e-7); padding-top: var(--e-4); border-top: 1px solid var(--linea); font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-3); }
.pie-estado a { color: var(--texto-2); }
.aviso-ejemplo { margin-bottom: var(--e-5); }

/* Incrustada */
.incrustada { padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); font-size: var(--t-s); }
.incrustada .titulo-inc { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.incrustada .titulo-inc strong { font-family: var(--f-titulos); font-size: 1.1rem; font-weight: 560; }
.incrustada ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.incrustada li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.incrustada li span:last-child { font-family: var(--f-datos); font-size: var(--t-xs); color: var(--texto-3); }

/* Entrar: la tarjeta de la garita */
.garita { max-width: 520px; margin: clamp(24px, 8vh, 80px) auto; text-align: center; }
.garita .radar { max-width: 220px; margin: 0 auto var(--e-5); }
.garita h1 { font-size: var(--t-2xl); }

/* Privacidad */
.prosa-vigia { padding-block: clamp(28px, 5vw, 64px); }
.prosa-vigia h1 { font-weight: 500; }

/* ── Impresión: la ficha y la página de estado se imprimen limpias ──────────────────────────────────────── */
@media print {
  .radar-barrido, .blip-punto::after { display: none; }
  .cuaderno { background-image: none; box-shadow: none; border: 1px solid #bbb; }
  .barras90 .b { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .estandarte { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}