/* Monitor · rack de estudio de los 80 con maquetacion de hoy.
   Paleta validada con validate_palette.js sobre el fondo #100f0c (modo oscuro):
   series s1-s3 todas las parejas, s4 solo en la barra apilada de memoria. */

:root {
  color-scheme: dark;

  /* superficies */
  --fondo: #100f0c;
  --chapa-1: #1e1c17;
  --chapa-2: #15130f;
  --chapa-borde: #2c2921;
  --chapa-luz: rgba(255, 238, 205, .07);
  --pantalla: #0a0907;
  --rejilla: #29251c;

  /* tinta de texto: los valores y etiquetas van siempre en estos tonos */
  --tinta: #efe6d0;
  --tinta-2: #b3a585;
  --tenue: #7d7159;
  --serigrafia: #d99a3c;      /* rotulos de chapa, como la serigrafia de un rack */
  --display: #ffb13b;         /* tinta de las lecturas de siete segmentos */

  /* series (identidad), validadas */
  --s1: #2fa6b8;
  --s2: #9085e9;
  --s3: #d55181;
  --s4: #c98500;

  /* estado: solo cuando el color significa bien / aviso / critico, y siempre con cifra */
  --ok: #0ca30c;
  --aviso: #fab219;
  --crit: #d03b3b;

  /* indicadores de un solo valor (arco moderno, anillo futurista) */
  --acento: #2fa6b8;
  --pista: #262219;

  /* cara iluminada de los vumetros */
  --cara-luz: #ead6a0;
  --cara-borde: #a3834a;
  --cara-tinta: #2b2012;
  --cara-rojo: #b3261e;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --radio: 10px;
  --hueco: 14px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, #1c1913 0%, rgba(16, 15, 12, 0) 60%),
    var(--fondo);
  color: var(--tinta);
  font: 14px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--display); outline-offset: 2px; }

/* ------------------------------------------------------------------ barra */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #1b1914, #121110);
  border-bottom: 1px solid var(--chapa-borde);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

.marca { display: flex; align-items: baseline; gap: 10px; }

.marca-led {
  width: 9px; height: 9px; border-radius: 50%;
  align-self: center;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.marca-texto {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--serigrafia);
}

.marca-sub {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
}

.presets { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }

.preset {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 150px;
  padding: 6px 12px 7px 10px;
  border: 1px solid #34302a;
  border-radius: 7px;
  background: linear-gradient(180deg, #26231d, #1a1814);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .08), 0 2px 0 #0a0908;
  cursor: pointer;
  text-align: left;
}

.preset:hover { border-color: #4a4336; }

.preset[aria-pressed="true"] {
  background: linear-gradient(180deg, #15130f, #1d1a15);
  border-color: var(--serigrafia);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}

.preset-led {
  grid-row: 1 / 3;
  width: 8px; height: 8px; border-radius: 50%;
  background: #3b1512;
}

.preset-led.on { background: var(--ok); box-shadow: 0 0 7px var(--ok); }
.preset-led.off { background: var(--crit); box-shadow: 0 0 7px var(--crit); }

.preset-nombre { font-weight: 600; letter-spacing: .04em; }

.preset-mini { font: 11px/1.2 var(--mono); color: var(--tinta-2); font-variant-numeric: tabular-nums; }

.barra-der { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.reloj { width: 150px; height: 34px; padding: 0 6px; }
.reloj canvas { width: 100%; height: 100%; }

.boton {
  padding: 6px 14px;
  border: 1px solid #3a352c;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a2620, #1c1a16);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .08), 0 2px 0 #0a0908;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  cursor: pointer;
}

.boton[aria-pressed="true"] {
  color: var(--display);
  border-color: var(--serigrafia);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}

.boton.primario { color: var(--fondo); background: var(--serigrafia); border-color: var(--serigrafia); }

/* ------------------------------------------------------------ lamparas */

.lampara {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid #2d2a23;
  border-radius: 4px;
  background: #0d0c0a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
}

.lampara::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #2a2721;
}

.lampara.ok { color: var(--tinta); }
.lampara.ok::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.lampara.aviso { color: var(--tinta); }
.lampara.aviso::before { background: var(--aviso); box-shadow: 0 0 6px var(--aviso); }
.lampara.crit { color: var(--tinta); }
.lampara.crit::before { background: var(--crit); box-shadow: 0 0 6px var(--crit); }
.lampara.parpadeo::before { animation: parpadeo 1s steps(2, start) infinite; }

@keyframes parpadeo { to { visibility: hidden; } }

/* ----------------------------------------------------------------- rack */

.rack {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--hueco);
  max-width: 1760px;
  margin: 0 auto;
  padding: 16px;
}

.rack.sin-senal .modulo:not(.cab) { opacity: .45; filter: saturate(.4); }

.modulo {
  position: relative;
  min-width: 0;
  padding: 14px 18px 18px;
  border: 1px solid var(--chapa-borde);
  border-radius: var(--radio);
  background: linear-gradient(180deg, var(--chapa-1), var(--chapa-2));
  box-shadow: inset 0 1px 0 var(--chapa-luz), 0 12px 30px rgba(0, 0, 0, .45);
}

/* tornillos de las cuatro esquinas */
.modulo::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background:
    radial-gradient(circle at 4px 4px, #4a4539 0 2px, #1a1814 2.5px, transparent 3.5px) top left / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #4a4539 0 2px, #1a1814 2.5px, transparent 3.5px) top right / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #4a4539 0 2px, #1a1814 2.5px, transparent 3.5px) bottom left / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #4a4539 0 2px, #1a1814 2.5px, transparent 3.5px) bottom right / 9px 9px no-repeat;
}

.a12 { grid-column: span 12; }
.a8 { grid-column: span 8; }
.a6 { grid-column: span 6; }
.a4 { grid-column: span 4; }

@media (max-width: 1180px) {
  .a8, .a6, .a4 { grid-column: span 12; }
}

.mod-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 8px 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rejilla);
}

.mod-cab h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--serigrafia);
}

.mod-sub { font-size: 12px; color: var(--tinta-2); }

.mod-cuerpo { display: flex; flex-direction: column; gap: 14px; }

.fila { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }

.rotulo {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* --------------------------------------------------------------- pantallas */

.pantalla {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--pantalla);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85), inset 0 0 0 1px #000, 0 1px 0 var(--chapa-luz);
}

/* lineas de barrido: solo en las pantallas, nunca en toda la pagina */
.pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}

canvas { display: block; }

/* lecturas de siete segmentos */
.lectura { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lect-et {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
  white-space: nowrap;
}
.lect-pant { height: 36px; padding: 0 4px; }
.lect-pant canvas { width: 100%; height: 100%; }
.lectura.grande .lect-pant { height: 52px; }
.lect-ud { font: 11px/1 var(--mono); color: var(--tenue); min-height: 11px; }

.lecturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px 12px;
}

/* vumetros de aguja */
.medidor { min-width: 0; }
.medidor canvas.aguja { width: 100%; aspect-ratio: 16 / 10; }

.medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }

/* escaleras de led */
canvas.escalera.hor { width: 100%; height: 18px; }
canvas.escalera.vert { width: 34px; height: 100%; min-height: 150px; }

.barra-led { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; }
.barra-led .valor { font: 12px/1 var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; min-width: 128px; text-align: right; }

/* osciloscopio */
.osc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.osc-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.osc-tit { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }
.osc-pant canvas { width: 100%; height: 132px; cursor: crosshair; }
.osc.bajo .osc-pant canvas { height: 104px; }

.leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ley { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-2); }
.ley-mu { width: 10px; height: 10px; border-radius: 2px; flex: none; }   /* que el texto largo no lo aplaste a cero */
.ley-v { font: 600 12px/1 var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; }

/* barra segmentada (memoria) */
.segs { display: flex; gap: 2px; height: 22px; padding: 3px; }
.seg { height: 100%; border-radius: 3px; min-width: 0; transition: flex-basis .6s ease; }
.seg.vacio { background: repeating-linear-gradient(90deg, #1b1914 0 3px, #15130f 3px 6px); }
@media (prefers-reduced-motion: reduce) { .seg { transition: none; } }

.leyenda-segs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.leyenda-segs .ley { justify-content: flex-start; }

/* uso de un recurso con una sola serie: barra fina + cifras */
.uso { display: grid; grid-template-columns: minmax(80px, 150px) 1fr auto; gap: 10px; align-items: center; }
.uso-n { font: 12px/1.2 var(--mono); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uso-n small { display: block; color: var(--tenue); font-size: 10px; }
.uso-pista { height: 10px; border-radius: 3px; background: #1b1914; box-shadow: inset 0 1px 2px #000; overflow: hidden; display: flex; }
.uso-fill { height: 100%; border-radius: 3px; }
.uso-fill + .uso-fill { margin-left: 2px; }
.uso-v { font: 12px/1 var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; min-width: 150px; text-align: right; }
.uso-v .alarma { color: var(--tinta); margin-left: 6px; }

/* tablas pequenas (procesos, interfaces, discos) */
.tabla-mini { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla-mini th {
  padding: 4px 8px;
  border-bottom: 1px solid var(--rejilla);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: left;
}
.tabla-mini td { padding: 5px 8px; border-bottom: 1px solid #1c1a15; color: var(--tinta); vertical-align: middle; }
.tabla-mini td.n, .tabla-mini th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabla-mini .alias { color: var(--display); font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.tabla-mini .pista { width: 70px; height: 6px; border-radius: 2px; background: #1b1914; display: inline-block; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.tabla-mini .pista i { display: block; height: 100%; background: var(--s1); border-radius: 2px; }

.envoltura-tabla { overflow-x: auto; }

/* espectro */
canvas.espectro { width: 100%; height: 210px; }
.espectro-pant { padding: 6px 8px; }

/* modulos concretos */
.cpu-cuerpo { display: grid; grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) minmax(210px, 280px); gap: 16px; align-items: start; }
.gpu-cuerpo { display: grid; grid-template-columns: minmax(160px, 1fr) 40px minmax(170px, 1.2fr); gap: 14px; align-items: stretch; }
.gpu-termo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gpu-termo .escalera.vert { flex: 1 1 150px; height: auto; }
.lamparas { display: flex; flex-wrap: wrap; gap: 6px; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

@media (max-width: 1180px) {
  .cpu-cuerpo { grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); }
  .cpu-cuerpo .lecturas { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .rack { padding: 10px 16px; gap: 12px; }
  .modulo { padding: 12px 12px 14px; }
  .cpu-cuerpo, .gpu-cuerpo, .dos { grid-template-columns: minmax(0, 1fr); }
  .gpu-termo { flex-direction: row; }
  canvas.escalera.vert { display: none; }
  .barra-led, .uso { grid-template-columns: minmax(70px, 100px) minmax(0, 1fr); }
  .barra-led .valor, .uso-v { grid-column: 1 / -1; text-align: left; min-width: 0; }
  .reloj { display: none; }
  .preset { min-width: 0; flex: 1 1 140px; }
}

/* cabecera de maquina: en fila (el .mod-cuerpo de base va en columna) */
.mod-cuerpo.cab-cuerpo { flex-direction: row; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.cab-host { font-size: 26px; font-weight: 700; letter-spacing: .06em; color: var(--tinta); }
.cab-info { font-size: 12px; color: var(--tinta-2); margin-top: 2px; }
.cab-id { flex: 1 1 280px; min-width: 0; }           /* el texto del equipo cede antes que las lecturas */
.cab-lect { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px 14px; flex: 1 1 740px; min-width: 0; }

/* ------------------------------------------------------------ selector de vista */

.vistas { display: inline-flex; border: 1px solid #3a352c; border-radius: 7px; overflow: hidden; box-shadow: 0 2px 0 #0a0908; }
.vistas .boton { border: 0; border-radius: 0; box-shadow: none; }
.vistas .boton + .boton { border-left: 1px solid #3a352c; }

/* ------------------------------------------------------------ vista compacta
   Una pantalla: franja de equipo y tres filas que se reparten el alto disponible.
   --alto-barra lo mide el JS (barra superior + aviso de sin senal si lo hay). */

.rack.compacta {
  height: calc(100dvh - var(--alto-barra, 60px));
  grid-auto-flow: row;
  grid-template-rows: auto minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .72fr);
  gap: 10px;
  padding: 10px 14px 12px;
  overflow: hidden;
}

.rack.compacta > .modulo { display: flex; flex-direction: column; min-height: 0; padding: 8px 12px 10px; }
.rack.compacta .modulo::before { inset: 4px; }
.rack.compacta .mod-cab { margin: 0 4px 6px; padding-bottom: 5px; gap: 2px 10px; }
.rack.compacta .mod-cab h2 { font-size: 10px; }
.rack.compacta .mod-sub { font-size: 11px; }
.rack.compacta .mod-cuerpo { flex: 1 1 auto; min-height: 0; gap: 6px; }

.k3 { grid-column: span 3; }
.k4 { grid-column: span 4; }
.k6 { grid-column: span 6; }
.k8 { grid-column: span 8; }
.k9 { grid-column: span 9; }
.k12 { grid-column: span 12; }

/* franja del equipo, en una sola linea */
.rack.compacta > .tira { flex-direction: row; align-items: center; gap: 14px 22px; padding: 8px 16px; flex-wrap: wrap; }
.tira-id { min-width: 0; }
.tira-host { font-size: 18px; font-weight: 700; letter-spacing: .06em; }
.tira-info { font-size: 11px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.tira-lect { display: flex; flex-wrap: wrap; gap: 8px 12px; flex: 1 1 auto; justify-content: flex-end; align-items: flex-end; }
.tira-lect .lectura { width: 96px; }
.tira-lect .lectura.ancha { width: 118px; }
.lectura.chica .lect-pant { height: 28px; }
.lectura.chica .lect-ud { display: none; }

/* los instrumentos crecen hasta llenar su celda */
.rack.compacta .medidor { flex: 1 1 0; min-height: 0; display: flex; }   /* la aguja es lo primero que encoge */
.rack.compacta .k-llena { flex: 1 1 0; min-height: 0; }
.rack.compacta .datos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.rack.compacta .dato { font-size: 11px; padding: 1px 0; }
.rack.compacta .dato b { font-size: 11px; }
.rack.compacta .medidor canvas.aguja { width: 100%; height: 100%; aspect-ratio: auto; }
.rack.compacta .espectro-pant { flex: 1 1 0; min-height: 0; }
.rack.compacta canvas.espectro { height: 100%; }
.rack.compacta .osc { flex: 1 1 0; min-height: 0; }
.rack.compacta .osc-pant { flex: 1 1 0; min-height: 0; }
.rack.compacta .osc-pant canvas { height: 100%; }
.rack.compacta .segs { height: 18px; padding: 2px; flex: none; }
.rack.compacta .leyenda-segs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 1px 8px; }
.rack.compacta .leyenda-segs .ley { font-size: 11px; gap: 4px; white-space: nowrap; }
.rack.compacta .leyenda-segs .ley-v { font-size: 11px; }
.rack.compacta .barra-led { grid-template-columns: 62px 1fr auto; gap: 8px; }
.rack.compacta .barra-led .valor { min-width: 0; font-size: 11px; }
.rack.compacta canvas.escalera.hor { height: 12px; }
.rack.compacta .uso { grid-template-columns: minmax(60px, 96px) 1fr auto; gap: 8px; }
.rack.compacta .uso-v { min-width: 0; font-size: 11px; }
.rack.compacta .uso-n small { display: none; }

.k-cpu { display: grid; grid-template-columns: minmax(150px, 32%) minmax(0, 1fr); gap: 10px; }
.k-col { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.k-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; flex: 1 1 0; min-height: 0; }
.k-dos > .medidor { min-height: 0; }
.k-gpu { display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 8px; flex: 1 1 0; min-height: 0; }
.k-gpu canvas.escalera.vert { width: 22px; min-height: 0; height: 100%; }
.k-lista { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; }
.k-frenos { font-size: 11px; color: var(--tinta-2); min-height: 1.3em; }

/* datos en texto: la letra pequena de cada celda */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0 12px; flex: none; }
.dato { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid #1c1a15; font-size: 12px; min-width: 0; }
.dato span { color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dato b { font: 600 12px/1.3 var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }

.rack.compacta .modelos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; overflow-y: auto; min-height: 0; }
.rack.compacta .modelos .lampara { padding: 2px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* pantallas pequenas o bajas: la compacta deja de forzar el alto y se apila */
@media (max-width: 1099px), (max-height: 660px) {
  .rack.compacta { height: auto; grid-template-rows: none; overflow: visible; }
  .rack.compacta > .modulo { grid-column: span 6; min-height: 0; }
  .rack.compacta > .tira { grid-column: span 12; }
  /* apilada, la celda ya no tiene alto que repartir: cada instrumento recupera el suyo */
  .rack.compacta .medidor, .rack.compacta .k-dos, .rack.compacta .k-gpu,
  .rack.compacta .espectro-pant, .rack.compacta .osc, .rack.compacta .osc-pant { flex: none; }
  .rack.compacta .medidor canvas.aguja { aspect-ratio: 16 / 10; height: auto; }
  .rack.compacta canvas.espectro { height: 170px; }
  .rack.compacta .osc-pant canvas { height: 120px; }
  .rack.compacta .k-gpu canvas.escalera.vert { min-height: 110px; }
  .rack.compacta .k-lista, .rack.compacta .modelos { overflow: visible; }
  .rack.compacta .k-llena { flex: none; }
}
@media (max-width: 700px) {
  .rack.compacta > .modulo { grid-column: span 12; }
  .k-cpu { grid-template-columns: minmax(0, 1fr); }
  .k-cpu .espectro-pant { min-height: 160px; }
}

/* aviso de maquina sin senal */
.aviso-maquina {
  max-width: 1760px;
  margin: 12px auto 0;
  padding: 10px 16px;
  border: 1px solid #5a2320;
  border-radius: 8px;
  background: #1d0f0d;
  color: var(--tinta);
}
.aviso-maquina b { color: var(--crit); letter-spacing: .14em; margin-right: 8px; }

/* modelos del router */
.modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.modelos .lampara { justify-content: flex-start; font-family: var(--mono); letter-spacing: .02em; text-transform: none; font-size: 12px; padding: 6px 10px; }

/* ---------------------------------------------------------------- vista tabla */

.vista-tabla { max-width: 1200px; margin: 0 auto; padding: 16px; }
.vista-tabla h3 {
  margin: 22px 0 6px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--serigrafia);
}
.vista-tabla table { width: 100%; border-collapse: collapse; }
.vista-tabla th, .vista-tabla td { padding: 6px 10px; border-bottom: 1px solid var(--rejilla); text-align: left; font-size: 13px; }
.vista-tabla th { color: var(--tinta-2); font-weight: 500; width: 40%; }
.vista-tabla td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta); }

/* ------------------------------------------------------------------ tooltip */

.tip {
  position: fixed;
  z-index: 50;
  min-width: 150px;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid #3a352c;
  border-radius: 6px;
  background: rgba(12, 11, 9, .96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .6);
  pointer-events: none;
  font-size: 12px;
}
.tip-fila { display: flex; align-items: center; gap: 7px; }
.tip-fila + .tip-fila { margin-top: 3px; }
.tip-fila.titulo { color: var(--tinta-2); margin-bottom: 4px; }
.tip-mu { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tip-et { color: var(--tinta-2); flex: 1; }
.tip-v { font-family: var(--mono); color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ acceso */

.acceso {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 7, 6, .82);
  backdrop-filter: blur(3px);
}
.acceso[hidden] { display: none; }
.acceso-caja { width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px; padding-bottom: 22px; }
.acceso-et { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); margin: 0 8px; }
.acceso-caja input {
  margin: 0 8px;
  padding: 10px 12px;
  border: 1px solid #3a352c;
  border-radius: 6px;
  background: var(--pantalla);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
  color: var(--display);
  font-family: var(--mono);
}
.acceso-caja .boton { margin: 0 8px; }
.acceso-err { min-height: 1.4em; margin: 0 8px; color: var(--tinta); }
.acceso-err:not(:empty)::before { content: "✕ "; color: var(--crit); }

.sin-js { padding: 24px; text-align: center; color: var(--tinta-2); }

@media (forced-colors: active) {
  .pantalla::after, .modulo::before { display: none; }
}

@media (max-width: 1500px) { .marca-sub { display: none; } }

/* =====================================================================
   TEMA MODERNO: tarjetas lisas, arcos, barras continuas, cifras limpias.
   Paleta validada sobre la tarjeta #15181e (todas las parejas en graficas,
   adyacentes con la cuarta en la barra de memoria).
   ===================================================================== */

:root[data-tema="moderno"] {
  --fondo: #0e1014;
  --chapa-1: #15181e;
  --chapa-2: #15181e;
  --chapa-borde: #232831;
  --chapa-luz: rgba(255, 255, 255, .03);
  --pantalla: #15181e;
  --rejilla: #242932;
  --tinta: #e8eaef;
  --tinta-2: #a3aab6;
  --tenue: #6d7582;
  --serigrafia: #e8eaef;
  --display: #f4f5f7;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --acento: #3987e5;
  --pista: #242a33;
  --radio: 14px;
}

:root[data-tema="moderno"] body { background: var(--fondo); }
:root[data-tema="moderno"] .barra { background: rgba(14, 16, 20, .92); backdrop-filter: blur(8px); border-bottom-color: #1e222a; box-shadow: none; }
:root[data-tema="moderno"] .marca-texto { color: var(--tinta); letter-spacing: .02em; text-transform: none; font-size: 16px; }
:root[data-tema="moderno"] .marca-sub { text-transform: none; letter-spacing: 0; }
:root[data-tema="moderno"] .marca-led { background: var(--acento); box-shadow: none; }
:root[data-tema="moderno"] .modulo { box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-tema="moderno"] .modulo::before { display: none; }
:root[data-tema="moderno"] .mod-cab { border-bottom: 0; padding-bottom: 0; }
:root[data-tema="moderno"] .mod-cab h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta); }
:root[data-tema="moderno"] .rack.compacta .mod-cab h2 { font-size: 13px; }
:root[data-tema="moderno"] .pantalla { background: transparent; box-shadow: none; }
:root[data-tema="moderno"] .pantalla::after { display: none; }
:root[data-tema="moderno"] .lect-et,
:root[data-tema="moderno"] .rotulo,
:root[data-tema="moderno"] .osc-tit,
:root[data-tema="moderno"] .tabla-mini th { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
:root[data-tema="moderno"] .preset { background: #171a20; border-color: #262b34; border-radius: 10px; box-shadow: none; }
:root[data-tema="moderno"] .preset[aria-pressed="true"] { background: #1b2433; border-color: var(--acento); box-shadow: none; }
:root[data-tema="moderno"] .vistas { border-color: #262b34; border-radius: 10px; box-shadow: none; }
:root[data-tema="moderno"] .vistas .boton + .boton { border-left-color: #262b34; }
:root[data-tema="moderno"] .boton { background: #171a20; border-color: #262b34; box-shadow: none; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
:root[data-tema="moderno"] .boton[aria-pressed="true"] { background: #252c38; color: var(--tinta); box-shadow: none; }
:root[data-tema="moderno"] .boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
:root[data-tema="moderno"] .lampara { border-radius: 999px; border-color: #262b34; background: #1a1d24; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
:root[data-tema="moderno"] .seg { border-radius: 4px; }
:root[data-tema="moderno"] .seg.vacio { background: #20242c; }
:root[data-tema="moderno"] .segs { padding: 0; }
:root[data-tema="moderno"] .uso-pista { background: #20242c; box-shadow: none; border-radius: 999px; }
:root[data-tema="moderno"] .uso-fill { border-radius: 999px; }
:root[data-tema="moderno"] .tabla-mini td,
:root[data-tema="moderno"] .dato { border-bottom-color: #1d2129; }
:root[data-tema="moderno"] .tip { background: rgba(21, 24, 30, .97); border-color: #2a303a; border-radius: 10px; }
:root[data-tema="moderno"] .vista-tabla h3 { letter-spacing: 0; text-transform: none; font-size: 15px; color: var(--tinta); }
:root[data-tema="moderno"] .acceso-caja input { background: #0f1115; box-shadow: none; border-color: #2a303a; color: var(--tinta); border-radius: 8px; }
:root[data-tema="moderno"] .aviso-maquina { border-radius: 12px; }

/* =====================================================================
   TEMA FUTURISTA: pantalla tactica. Esquinas achaflanadas, rejilla de fondo,
   anillos segmentados. El neon va en la decoracion y en las cifras; las
   series de datos son una paleta validada sobre #07101b.
   ===================================================================== */

:root[data-tema="futurista"] {
  --fondo: #03060b;
  --chapa-1: rgba(8, 24, 40, .80);
  --chapa-2: rgba(4, 12, 24, .86);
  --chapa-borde: rgba(0, 220, 255, .26);
  --chapa-luz: rgba(0, 229, 255, .08);
  --pantalla: rgba(0, 12, 22, .78);
  --rejilla: #0e2a36;
  --tinta: #d6f6ff;
  --tinta-2: #86b8cb;
  --tenue: #52788a;
  --serigrafia: #3fe9ff;
  --display: #7af4ff;
  --s1: #169ab6;
  --s2: #d4652f;
  --s3: #8c7fec;
  --s4: #a8921a;
  --acento: #22d3ee;
  --pista: #0c2230;
  --radio: 0px;
}

:root[data-tema="futurista"] body {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(0, 160, 220, .16), transparent 62%),
    linear-gradient(rgba(0, 229, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(0, 229, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--fondo);
  background-attachment: fixed;
}
:root[data-tema="futurista"] .barra { background: rgba(3, 8, 16, .9); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(0, 220, 255, .3); box-shadow: 0 0 26px rgba(0, 200, 255, .1); }
:root[data-tema="futurista"] .marca-texto { color: var(--serigrafia); font-family: var(--mono); letter-spacing: .45em; text-shadow: 0 0 10px rgba(63, 233, 255, .7); }
:root[data-tema="futurista"] .marca-sub { font-family: var(--mono); color: var(--tinta-2); }
:root[data-tema="futurista"] .marca-led { border-radius: 0; transform: rotate(45deg); background: var(--acento); box-shadow: 0 0 10px var(--acento); }

:root[data-tema="futurista"] .modulo {
  border-radius: 0;
  box-shadow: inset 0 0 30px rgba(0, 200, 255, .06);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
/* escuadras de neon en las dos esquinas que no van achaflanadas */
:root[data-tema="futurista"] .modulo::before {
  inset: 0;
  opacity: .9;
  background:
    linear-gradient(var(--serigrafia), var(--serigrafia)) top right / 20px 2px no-repeat,
    linear-gradient(var(--serigrafia), var(--serigrafia)) top right / 2px 20px no-repeat,
    linear-gradient(var(--serigrafia), var(--serigrafia)) bottom left / 20px 2px no-repeat,
    linear-gradient(var(--serigrafia), var(--serigrafia)) bottom left / 2px 20px no-repeat;
}
:root[data-tema="futurista"] .mod-cab { border-bottom-color: rgba(0, 220, 255, .16); }
:root[data-tema="futurista"] .mod-cab h2 { font-family: var(--mono); letter-spacing: .3em; color: var(--serigrafia); text-shadow: 0 0 8px rgba(63, 233, 255, .55); }
:root[data-tema="futurista"] .mod-sub { font-family: var(--mono); font-size: 11px; }
:root[data-tema="futurista"] .pantalla { border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0, 220, 255, .16); }
:root[data-tema="futurista"] .pantalla::after { background: repeating-linear-gradient(0deg, rgba(0, 229, 255, .03) 0 1px, transparent 1px 3px); }
:root[data-tema="futurista"] .lect-et,
:root[data-tema="futurista"] .rotulo,
:root[data-tema="futurista"] .osc-tit,
:root[data-tema="futurista"] .tabla-mini th { font-family: var(--mono); color: var(--tinta-2); letter-spacing: .18em; }
:root[data-tema="futurista"] .preset {
  border-radius: 0; background: rgba(0, 30, 50, .55); border-color: rgba(0, 220, 255, .25); box-shadow: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
:root[data-tema="futurista"] .preset[aria-pressed="true"] { background: rgba(0, 120, 160, .26); border-color: var(--acento); box-shadow: inset 0 0 14px rgba(0, 229, 255, .25); }
:root[data-tema="futurista"] .preset-nombre { font-family: var(--mono); letter-spacing: .08em; }
:root[data-tema="futurista"] .preset-led { border-radius: 0; transform: rotate(45deg); }
:root[data-tema="futurista"] .vistas { border-radius: 0; border-color: rgba(0, 220, 255, .3); box-shadow: none; }
:root[data-tema="futurista"] .vistas .boton + .boton { border-left-color: rgba(0, 220, 255, .22); }
:root[data-tema="futurista"] .boton { border-radius: 0; background: rgba(0, 30, 50, .55); border-color: rgba(0, 220, 255, .25); box-shadow: none; font-family: var(--mono); color: var(--tinta-2); }
:root[data-tema="futurista"] .boton[aria-pressed="true"] { background: rgba(0, 120, 160, .3); color: var(--display); text-shadow: 0 0 8px rgba(122, 244, 255, .7); box-shadow: none; }
:root[data-tema="futurista"] .boton.primario { background: rgba(0, 150, 190, .45); border-color: var(--acento); color: var(--display); }
:root[data-tema="futurista"] .lampara { border-radius: 0; background: rgba(0, 20, 35, .65); border-color: rgba(0, 220, 255, .2); font-family: var(--mono); }
:root[data-tema="futurista"] .lampara::before { border-radius: 0; transform: rotate(45deg); }
:root[data-tema="futurista"] .seg { border-radius: 0; }
:root[data-tema="futurista"] .seg.vacio { background: repeating-linear-gradient(90deg, rgba(0, 229, 255, .08) 0 2px, transparent 2px 5px); }
:root[data-tema="futurista"] .uso-pista { border-radius: 0; background: #0a1e2a; box-shadow: inset 0 0 0 1px rgba(0, 220, 255, .12); }
:root[data-tema="futurista"] .uso-fill { border-radius: 0; }
:root[data-tema="futurista"] .ley-mu,
:root[data-tema="futurista"] .tip-mu { border-radius: 0; }
:root[data-tema="futurista"] .tabla-mini td,
:root[data-tema="futurista"] .dato { border-bottom-color: rgba(0, 220, 255, .08); }
:root[data-tema="futurista"] .dato span { font-family: var(--mono); font-size: 11px; }
:root[data-tema="futurista"] .tip { border-radius: 0; background: rgba(3, 10, 20, .96); border-color: rgba(0, 220, 255, .45); font-family: var(--mono); box-shadow: 0 0 18px rgba(0, 200, 255, .15); }
:root[data-tema="futurista"] .cab-host,
:root[data-tema="futurista"] .tira-host { font-family: var(--mono); letter-spacing: .12em; color: var(--display); text-shadow: 0 0 10px rgba(122, 244, 255, .45); }
:root[data-tema="futurista"] .vista-tabla h3 { font-family: var(--mono); color: var(--serigrafia); }
:root[data-tema="futurista"] .aviso-maquina { border-radius: 0; background: rgba(40, 6, 8, .8); box-shadow: 0 0 16px rgba(208, 59, 59, .25); }
:root[data-tema="futurista"] .acceso-caja input { border-radius: 0; border-color: rgba(0, 220, 255, .35); }