/* Dispatch Console — TETRA Core
   Paleta: #05080A fondo, #07111A paneles, #8DFF4F verde, #FF2B2B rojo,
   #FFD43B ámbar, #2DA8FF azul, borde #123B20.
   Sin brillos/glow. Fuente monospace limpia. */

:root {
  --bg:        #05080A;
  --panel:     #07111A;
  --grid:      #0A2A1A;
  --border:    #123B20;
  --border-d:  #1a4a2a;
  --green:     #8DFF4F;
  --green-d:   #2D6B1F;
  --red:       #FF2B2B;
  --red-bg:    #661111;
  --amber:     #FFD43B;
  --blue:      #2DA8FF;
  --txt:       #B7C2CC;
  --txt-dim:   #6a8a95;
  --font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body { background: var(--bg); overflow: hidden; margin: 0; font-family: var(--font-mono); }
header { display: none; }

#dispatch-shell {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-mono);
  padding: 10px;
  gap: 10px;
  font-size: 13px;
}

/* ============ HEADER ============ */
.d-header {
  display: flex; align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 92px;
  overflow: hidden;
  flex-shrink: 0;
}
.d-brand {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 10px 20px;
  border-right: 1px solid var(--border);
  min-width: 270px;
}
.d-brand-row { display: flex; align-items: center; gap: 12px; }
.d-logo { font-size: 1.9em; color: var(--green); line-height: 1; }
.d-title {
  font-size: 22px; font-weight: 700; letter-spacing: 3px;
  color: var(--green);
}
.d-subtitle {
  font-size: 11px; color: var(--txt-dim);
  letter-spacing: 3px; margin-top: 2px;
  text-transform: uppercase;
}

.d-hblock {
  display: flex; flex-direction: column; justify-content: center;
  padding: 10px 16px;
  border-right: 1px solid var(--border);
  min-width: 120px;
}
.d-hlbl {
  font-size: 11px; color: var(--txt-dim);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 4px;
}
.d-hval {
  font-size: 16px; color: var(--green); font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.d-hsub {
  font-size: 11px; color: var(--txt-dim);
  letter-spacing: 1px; text-transform: uppercase;
  margin-top: 3px;
}

.d-hgroup {
  display: flex; flex: 1 1 auto; min-width: 0;
  align-items: stretch;
}
.d-hsignal { padding: 12px 16px; border-right: none; }
.d-hsignal .d-hlbl { display: none; }   /* en desktop la etiqueta es redundante */
.signal-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.signal-bars span {
  display: inline-block; width: 5px;
  background: var(--green); border-radius: 1px;
}
.signal-bars span:nth-child(1) { height: 6px; }
.signal-bars span:nth-child(2) { height: 12px; }
.signal-bars span:nth-child(3) { height: 17px; }
.signal-bars span:nth-child(4) { height: 22px; }
.signal-bars span:nth-child(5) { height: 26px; }

/* Telemetría hardware en cabecera: ocupa la banda libre entre las barritas
   de señal y el botón MAPA. flex:1 → absorbe el hueco que antes dejaba
   .d-hgroup, así queda pegada a la derecha de las barritas. */
.d-htele {
  display: flex; align-items: center; gap: 14px;
  flex: 1 1 auto; min-width: 0;
  padding: 8px 16px;
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.htele-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.htele-item .hw-icon { font-size: 1.15em; }
.htele-item .hw-icon.hw-temp { color: var(--red); }
.htele-item .hw-icon.hw-volt { color: var(--green); }
.htele-item .hw-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--txt-dim);
  letter-spacing: 1px; text-transform: uppercase;
}
.htele-item .hw-val {
  font-size: 16px; color: var(--green); font-weight: 700;
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.htele-item .hw-sub { font-size: 10px; color: var(--txt-dim); white-space: nowrap; }
.d-htele.hw-offline .hw-val  { color: var(--txt-dim); font-weight: 500; }
.d-htele.hw-offline .hw-icon { opacity: 0.4; }
.d-htele.hw-offline .mini-bars .mb { background: #1a2330; }

.dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  margin-right: 6px; vertical-align: middle;
}
.dot.warn { background: var(--amber); }
.dot.err  { background: var(--red); animation: pulse-red 1s infinite; }
@keyframes pulse-red { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.d-admin-block {
  border-left: 1px solid var(--border); margin-left: auto;
  padding: 8px 14px; gap: 7px; display: flex;
  flex-direction: column; align-items: flex-end;
}
.d-admin-actions { display: flex; align-items: center; gap: 6px; }
/* Paleta: línea compacta de cuadros de color, alineada a la derecha encima
   de las acciones. Ancho mínimo → el módulo queda estrecho y la telemetría
   se ve bien. */
.d-admin-block .theme-picker {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 5px; margin-left: 0;
}
.d-admin-btn {
  display: inline-block; padding: 8px 14px;
  background: transparent; color: var(--blue);
  border: 1px solid var(--blue); border-radius: 2px;
  text-decoration: none; font-weight: 700;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.d-admin-btn:hover { background: var(--blue); color: var(--bg); }
.d-admin-btn-secondary { color: var(--txt-dim); border-color: #2a4055; font-weight: 500; }

/* ============ ROWS ============ */
.d-row {
  display: grid; gap: 10px; flex: 1; min-height: 0;
}
/* Cuerpo a 2 columnas: izquierda (LIVE + SUSCRIPTORES estrecha) | derecha
   (RF + EVENTOS grande + PASARELAS) a TODA ALTURA. */
.d-row.top    { grid-template-columns: 1.62fr 1fr; flex: 1; }
.d-row.bottom { grid-template-columns: 1fr; }   /* legacy, ya no se usa */
/* Columna izquierda apilada: Live arriba (más alto), Suscriptores abajo (estrecha). */
.d-col-left { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
/* Suscriptores se llevan la mayor parte del alto (entran más); LIVE más bajo. */
.d-col-left .d-section.live { flex: 1;   min-height: 0; }
.d-col-left .d-section.subs { flex: 1.9; min-height: 0; }

/* RX/TX de la portadora junto al título de LIVE TRANSMISSIONS. */
/* Barra de frecuencias RF de la portadora, centrada sobre los timeslots. */
.rf-freq-bar {
  text-align: center; padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}
.rf-freq-bar:empty, .rf-freq-bar:has(.live-freq:empty) { display: none; }
.live-freq {
  font-size: 13px; font-weight: 700;
  color: var(--txt-dim); letter-spacing: 0.8px; font-family: var(--font-mono);
}
.live-freq .lf-rx { color: var(--blue); }
.live-freq .lf-tx { color: var(--red); }

.d-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.d-section-title {
  padding: 9px 16px;
  font-size: 13px; letter-spacing: 2px; color: var(--green);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.d-section-title .title-icon { color: var(--green); margin-right: 8px; }
.d-section-title .count {
  float: right; color: var(--txt-dim); font-weight: 500; letter-spacing: 1.5px;
  font-size: 11px;
}

/* ============ LIVE TRANSMISSIONS ============ */
.d-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 8px; padding: 8px;
  overflow: hidden; flex: 1;
  min-height: 0;
}
.d-empty {
  grid-column: 1/-1; text-align: center; color: var(--txt-dim);
  padding: 40px 0; font-style: italic;
}

/* Con 1 llamada ocupa todo el ancho; con 2+ va a 2 columnas (2x2 con 3-4). */
.d-live-grid[data-count="1"] { grid-template-columns: 1fr; }

/* DENSO (3-4 llamadas): el 2x2 deja media altura por tarjeta, así que el
   contenido se compacta para que no se recorte (bandera, callsign, barras,
   paddings). Sin esto, con 4 llamadas se perdían datos. */
.d-live-grid[data-count="3"] .lc-head,
.d-live-grid[data-count="4"] .lc-head { padding: 4px 10px; }
.d-live-grid[data-count="3"] .lc-body,
.d-live-grid[data-count="4"] .lc-body {
  grid-template-columns: 82px 1fr 30px; gap: 8px; padding: 7px 10px;
}
.d-live-grid[data-count="3"] .lc-flag,
.d-live-grid[data-count="3"] .lc-sos-box,
.d-live-grid[data-count="4"] .lc-flag,
.d-live-grid[data-count="4"] .lc-sos-box { width: 78px; height: 58px; }
.d-live-grid[data-count="3"] .lc-callsign,
.d-live-grid[data-count="4"] .lc-callsign { font-size: 22px; }
.d-live-grid[data-count="3"] .lc-name,
.d-live-grid[data-count="4"] .lc-name { font-size: 12px; margin-top: 3px; }
.d-live-grid[data-count="3"] .lc-city,
.d-live-grid[data-count="3"] .lc-country,
.d-live-grid[data-count="4"] .lc-city,
.d-live-grid[data-count="4"] .lc-country { font-size: 11px; margin-top: 1px; }
.d-live-grid[data-count="3"] .lc-bars,
.d-live-grid[data-count="4"] .lc-bars { height: 46px; gap: 2px; }
.d-live-grid[data-count="3"] .lc-bar,
.d-live-grid[data-count="4"] .lc-bar { width: 5px; }
.d-live-grid[data-count="3"] .lc-sos-box,
.d-live-grid[data-count="4"] .lc-sos-box { font-size: 1.1em; }

.live-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border, #243042);
  border-radius: 4px;
  background: var(--bg);
  position: relative; overflow: hidden;
  min-height: 0;
}
.live-card.emergency {
  border-color: var(--red);
  box-shadow: 0 0 12px rgba(255,82,82,0.25);
  animation: emergency-pulse 1.5s ease-in-out infinite;
}
@keyframes emergency-pulse {
  0%, 100% { box-shadow: 0 0 8px  rgba(255,82,82,0.20); }
  50%      { box-shadow: 0 0 18px rgba(255,82,82,0.50); }
}

.lc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lc-ch-chip {
  background: var(--bg); color: var(--green);
  padding: 4px 12px; font-size: 12px; font-weight: 700;
  border-radius: 3px; border: 1px solid var(--green);
  letter-spacing: 1px;
}
.live-card.emergency .lc-ch-chip { color: var(--red); border-color: var(--red); }
.lc-type { flex: 1; line-height: 1.2; min-width: 0; }
.lc-type .lc-tg-name {
  color: var(--green); font-weight: 700; font-size: 13px; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-type .lc-tg-desc {
  color: var(--txt-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  margin-top: 1px;
}
.live-card.emergency .lc-type .lc-tg-name { color: var(--red); }
.lc-type.priv .lc-tg-name { color: var(--amber); }
.lc-tx-chip {
  background: rgba(255,43,43,0.12); color: var(--red);
  padding: 4px 10px; font-size: 10px; font-weight: 700;
  border-radius: 3px; border: 1px solid var(--red);
  letter-spacing: 1.3px; white-space: nowrap;
}
.lc-tx-chip.rx { color: var(--green); border-color: var(--green); background: rgba(141,255,79,0.08); }
.lc-tx-chip.prio { color: var(--amber); border-color: var(--amber); background: rgba(255,212,59,0.1); }

.lc-body {
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  gap: 8px;
  padding: 8px 12px;
  flex: 1; min-height: 0;
  align-items: center;
}
.lc-flag {
  width: 84px; height: 62px;
  object-fit: cover;
  border: 1px solid #2a4055;
  border-radius: 3px;
}
.lc-sos-box {
  width: 84px; height: 62px;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.7em; font-weight: 900; letter-spacing: 2px;
  border-radius: 3px;
  animation: pulse-red 0.8s infinite;
}
.lc-info { min-width: 0; }
.lc-callsign {
  font-size: 24px; font-weight: 700; color: var(--green);
  letter-spacing: 1.5px; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-name {
  font-family: var(--font-body);
  font-size: 14px; color: var(--txt); margin-top: 6px;
  font-weight: 500;
}
.lc-city {
  font-family: var(--font-body);
  font-size: 12px; color: var(--txt-dim); margin-top: 3px;
}
.lc-country {
  font-family: var(--font-body);
  font-size: 12px; color: var(--txt-dim); margin-top: 1px;
}
.lc-gps {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--amber); margin-top: 4px;
  letter-spacing: 0.5px;
}
/* Barras de señal RSSI, escalonadas (b1 más baja, b8 más alta).
   8 barras horizontales: b1=8px alta, b8=64px alta. Ancho fijo cada una.
   Color amber por defecto, rojo en emergency. Apagadas = gris oscuro. */
.lc-bars {
  display: flex; align-items: flex-end; gap: 3px;
  height: 50px; width: auto; padding: 4px;
}
.lc-bar {
  width: 6px;
  background: #15252b;
  border-radius: 1px;
  transition: background 0.2s;
}
.lc-bar.b1 { height: 12%; }
.lc-bar.b2 { height: 22%; }
.lc-bar.b3 { height: 33%; }
.lc-bar.b4 { height: 45%; }
.lc-bar.b5 { height: 58%; }
.lc-bar.b6 { height: 72%; }
.lc-bar.b7 { height: 86%; }
.lc-bar.b8 { height: 100%; }
/* Escala de color por nivel RSSI (se aplica al wrapper .lc-bars) */
.lc-bars[data-rssi-level="excellent"] .lc-bar.on { background: #8DFF4F; }  /* verde brillante */
.lc-bars[data-rssi-level="good"]      .lc-bar.on { background: #B5FF4F; }  /* lima */
.lc-bars[data-rssi-level="ok"]        .lc-bar.on { background: #FFEA4F; }  /* amarillo */
.lc-bars[data-rssi-level="low"]       .lc-bar.on { background: #FFB04F; }  /* naranja */
.lc-bars[data-rssi-level="bad"]       .lc-bar.on { background: #FF6E6E; }  /* rojo */
.lc-bars[data-rssi-level="none"]      .lc-bar.on { background: #5a7a85; }  /* gris (sin lectura) */
.live-card.emergency .lc-bar.on { background: var(--red, #ff5252) !important; }

/* Contenedor barras + valor numérico */
.lc-signal {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding-right: 4px;
}
.lc-rssi-val {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: 0.5px;
  color: var(--amber, #ffb04f); font-weight: 700;
  min-width: 60px; text-align: center;
}
.lc-rssi-val.excellent { color: #8DFF4F; }
.lc-rssi-val.good      { color: #B5FF4F; }
.lc-rssi-val.ok        { color: #FFEA4F; }
.lc-rssi-val.low       { color: #FFB04F; }
.lc-rssi-val.bad       { color: #FF6E6E; }
.lc-rssi-val.none      { color: #5a7a85; }

.lc-foot {
  display: flex; align-items: center; gap: 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 4px 14px;
  flex-shrink: 0;
}
.lc-foot-cell { display: flex; align-items: center; gap: 8px; }
.lc-foot-lbl {
  font-size: 9px; color: var(--txt-dim); letter-spacing: 1px;
  text-transform: uppercase;
}
.lc-foot-val {
  font-size: 12px; color: var(--green); font-weight: 700;
  letter-spacing: 0.3px;
}
.lc-foot-val.dur { color: var(--amber); }
.lc-foot-val.freq { color: var(--txt); font-size: 10px; line-height: 1.3; font-weight: 500; }
.lc-foot-val.freq .freq-label { color: var(--txt-dim); }

/* ============ TABLES ============ */
.d-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.d-table thead th {
  position: sticky; top: 0;
  background: var(--panel);
  text-align: left; padding: 9px 14px;
  font-size: 11px; color: var(--txt-dim); letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase; font-weight: 600;
}
.d-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(18,59,32,0.5);
  color: var(--txt);
  font-weight: 500;
}
.channels-table td:first-child {
  color: var(--green); font-weight: 700;
  letter-spacing: 0.5px;
}
.channels-table td { font-size: 13px; }
.chip-busy {
  display: inline-block; padding: 3px 12px;
  background: rgba(255,43,43,0.1); color: var(--red);
  border: 1px solid var(--red); border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px;
}
.chip-free {
  display: inline-block; padding: 3px 12px;
  background: rgba(141,255,79,0.08); color: var(--green);
  border: 1px solid var(--green); border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px;
}
.chip-online {
  display: inline-block; padding: 3px 12px;
  background: rgba(141,255,79,0.08); color: var(--green);
  border: 1px solid var(--green); border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px;
}
/* Chips de transporte por conexión (una fila por indicativo puede tener
   varios: radio bluestation + app móvil + nativo). */
.sub-conns { display: flex; flex-wrap: wrap; gap: 4px; }
.sub-conn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  border: 1px solid var(--border); white-space: nowrap;
}
.chip-bluestation { color: var(--green); border-color: var(--green); background: rgba(141,255,79,0.08); }
.chip-app         { color: var(--blue);  border-color: var(--blue);  background: rgba(80,170,255,0.08); }
.chip-nativo      { color: var(--txt-dim); border-color: #2a4055; }
.uso-tx { color: var(--red); font-weight: 700; }
.uso-rx { color: var(--blue); font-weight: 700; }
.uso-zero { color: var(--txt-dim); }
.uso-emerg {
  color: #fff; font-weight: 700;
  background: var(--red);
  padding: 2px 8px; border-radius: 2px;
  animation: pulse-red 0.7s infinite;
}

.d-section .scroll { overflow-y: auto; flex: 1; min-height: 0; }

/* ============ SUBSCRIBERS ============ */
/* ---- Tarjetas de suscriptores (rejilla, varias por fila) ---- */
.subs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 7px; padding: 8px;
  align-content: start;
}
.sub-card {
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 5px;
  padding: 7px 9px; min-width: 0;
}
.sub-card .sc-head { display: flex; align-items: flex-start; gap: 10px; }
.sub-card .sub-flag,
.sub-card .sub-avatar-icon { width: 34px; height: 24px; }
.sub-card .sc-id { flex: 1; min-width: 0; }
.sub-card .sub-callsign {
  color: var(--green); font-weight: 700; font-size: 18px;
  letter-spacing: 0.5px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub-card .sub-name {
  font-family: var(--font-body); color: var(--txt);
  font-size: 12px; margin-top: 2px; font-weight: 500;
}
.sub-card .sub-city {
  font-family: var(--font-body); color: var(--txt-dim);
  font-size: 11px; margin-top: 1px;
}
.sub-card .sc-last {
  color: var(--green); font-weight: 700; font-size: 11px;
  white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
}
.sub-card .sc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
}
.sub-card .sc-conns { display: flex; flex-wrap: wrap; gap: 4px; }
.sub-card .sc-issis { display: flex; flex-direction: column; gap: 6px; }
.sub-card .sc-issi { border-top: 1px solid var(--border); padding-top: 6px; }
/* Indicativo (RadioID) de cada equipo conectado, junto a su ISSI */
.sub-card .sc-issi-cs { font-weight: 600; color: var(--cyan); margin-left: 4px; font-size: 12px; }
/* Tarjeta de estación: distintivo Bluestation/App + nº de equipos conectados */
.sub-card .chip-station { background: rgba(0,160,200,0.18); border:1px solid var(--cyan); color: var(--cyan); font-weight:600; }
.sub-card .chip-count { background: transparent; border:1px solid var(--border); color: var(--muted, #8aa); }
.sub-card .sub-ownerissi { display: block; font-size: 11px; color: var(--muted, #8aa); font-family: monospace; margin-top: 1px; }
.sub-card .sc-noeq { color:#5a7a85; font-style:italic; font-size:12px; padding:4px 0; }
/* ===== Vista de LISTA de suscriptores (densa) ===== */
.subs-view-btn { margin-left: 10px; background: transparent; border: 1px solid var(--border);
  color: var(--txt-dim); border-radius: 3px; cursor: pointer; font-size: 11px; padding: 1px 8px; }
.subs-view-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.subs-grid.as-list { display: block; grid-template-columns: none; gap: 0; padding: 4px 8px; }
.subs-grid.as-list .sl-group { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 2px 0 4px; }
.sl-head, .sl-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; flex-wrap: wrap; }
.sl-head .sub-flag, .sl-row .sub-flag,
.sl-head .sub-avatar-icon, .sl-row .sub-avatar-icon { width: 24px; height: 17px; flex: 0 0 auto; border-radius: 2px; }
.sl-cs { font-weight: 700; color: var(--cyan); }
.sl-issi { color: var(--muted, #8aa); font-family: monospace; font-size: 12px; }
.sl-badge { font-size: 10px; color: var(--cyan); border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; }
.sl-meta { color: var(--muted, #8aa); font-size: 12px; }
.sl-count { margin-left: auto; color: var(--muted, #8aa); font-size: 11px; }
.sl-eq { display: flex; align-items: center; gap: 8px; padding: 2px 2px 2px 30px; font-size: 12px; }
.sl-eq-issi { font-family: monospace; color: var(--txt, #cfe); }
.sl-eq-cs { color: #e0b341; font-weight: 600; }
.sl-tg { color: var(--green); font-size: 11px; font-weight: 600; }
.sl-tg-scan { color: var(--muted, #8aa); opacity: 0.55; font-size: 10px; font-family: monospace; }
.sl-rssi { margin-left: auto; }
.sl-noeq { color: #5a7a85; font-style: italic; padding-left: 30px; }
/* Eventos: comportamiento original (crece para llenar). GATEWAYS va debajo,
   como caja fija pequeña al pie de la columna (no le roba espacio a Eventos). */
.gw-box { flex: 0 0 auto; }
/* Recuadro de GATEWAYS — lineal, una fila por gateway */
.gw-box { display:flex; flex-direction:column; gap:3px; padding:4px 8px; }
.gw-box .gw-empty { color:#5a7a85; font-style:italic; font-size:12px; }
.gw-line { display:flex; align-items:center; gap:8px; font-size:12px; padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,0.04); white-space:nowrap; }
.gw-line .gw-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.gw-line .gw-dot.on  { background:#8DFF4F; box-shadow:0 0 6px rgba(141,255,79,0.5); }
.gw-line .gw-dot.off { background:#6a6a6a; }
.gw-line .gw-name { font-weight:600; color:var(--cyan); min-width:96px; }
.gw-line .gw-tetra { color:var(--txt, #cfe); font-family:monospace; }
.gw-line .gw-arrow { color:#5a7a85; }
.gw-line .gw-sys { color:#e0b341; font-weight:600; }
/* Telemetría per-FlowStation (freq/temp/CPU/MEM/IP de esa BS) */
.sub-card .sc-fstel { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
  display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--cyan); opacity: 0.85; }
.sub-card .sc-fstel .fs-tel-warn { color: #b58a4a; font-style: italic; }
.sub-card .sc-issi:first-child { border-top: none; padding-top: 0; }
.sub-card .sc-issi-head { display: flex; align-items: center; gap: 8px; }
.sub-card .sc-tport { font-size: 14px; line-height: 1; }
.sub-card .sc-issi-id { color: var(--txt-dim); font-weight: 700; font-size: 13px; }
.sub-card .sc-issi-head .sub-rssi { margin: 0 0 0 auto; }
.sub-card .sc-issi-tg { margin-top: 3px; }

.subs-table { font-size: 13px; }
.subs-table .sub-callsign {
  color: var(--green); font-weight: 700; letter-spacing: 0.5px; font-size: 15px;
}
.subs-table .sub-name {
  font-family: var(--font-body);
  color: var(--txt); font-size: 12px; margin-top: 2px; font-weight: 500;
}
.subs-table .sub-city {
  font-family: var(--font-body);
  color: var(--txt-dim); font-size: 11px; margin-top: 1px;
}
.sub-operator { display: flex; align-items: center; gap: 12px; }
.sub-flag {
  width: 34px; height: 24px;
  object-fit: cover; border: 1px solid #2a4055; border-radius: 2px;
  flex-shrink: 0;
}
.sub-avatar-icon {
  width: 34px; height: 24px;
  background: #2a4055;
  display: flex; align-items: center; justify-content: center;
  color: #7a9aa5; font-size: 13px; border-radius: 2px;
  flex-shrink: 0;
}
.sub-last {
  color: var(--green); font-weight: 700;
}
.subs-table tbody code {
  color: var(--green); font-weight: 700;
  font-size: 14px;
}

/* ============ EVENTS ============ */
.d-events {
  flex: 1; overflow-y: auto; padding: 4px 0;
  font-size: 13px;
  min-height: 0;
}
.evt {
  display: grid;
  grid-template-columns: 72px 120px 1fr 48px;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(18,59,32,0.5);
  align-items: center;
}
.evt-ts {
  color: var(--amber); font-size: 12px; font-weight: 700;
}
.evt-date {
  display: block; font-size: 10px; font-weight: 600;
  color: var(--fg-dim); opacity: 0.8;
}
.evt-chip {
  font-size: 10px; font-weight: 700; padding: 4px 8px;
  border-radius: 3px; text-align: center; letter-spacing: 1.1px;
  border: 1px solid; text-transform: uppercase;
}
.evt-chip.VOICE_FRAME { color: var(--green); border-color: var(--green); background: rgba(141,255,79,0.07); }
.evt-chip.EMERGENCY   { color: var(--red); border-color: var(--red); background: rgba(255,43,43,0.12); animation: pulse-red 1.2s infinite; }
.evt-chip.HEARTBEAT   { color: var(--green); border-color: var(--green); background: rgba(141,255,79,0.07); }
.evt-chip.CALL_SETUP  { color: var(--blue); border-color: var(--blue); background: rgba(45,168,255,0.08); }
.evt-chip.CALL_RELEASE{ color: var(--amber); border-color: var(--amber); background: rgba(255,212,59,0.08); }
.evt-chip.SDS_MESSAGE { color: var(--blue); border-color: var(--blue); background: rgba(45,168,255,0.08); }
.evt-chip.GROUP_TX    { color: var(--green); border-color: var(--green); background: rgba(141,255,79,0.07); }
.evt-chip.AFFILIATE   { color: var(--blue); border-color: var(--blue); background: rgba(45,168,255,0.08); }
.evt-msg {
  font-family: var(--font-body);
  color: var(--txt); font-size: 12px; font-weight: 500;
}
.evt-tag {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-align: right;
}
.evt-tag.TX  { color: var(--red); }
.evt-tag.RX  { color: var(--blue); }
.evt-tag.OK  { color: var(--green); }
.evt-tag.INFO { color: var(--blue); }
.evt-tag.SDS { color: var(--blue); }

/* ============ HARDWARE STRIP ============ */
/* Wrapper <details> alrededor del grid HW. En desktop el summary se oculta y
   el grid se muestra siempre (vía CSS); en móvil <600px se vuelve colapsable. */
.d-hw-wrap { flex-shrink: 0; }
.d-hw-summary {
  display: none;   /* oculto por defecto (desktop / tablet) */
  cursor: pointer;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--green);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 700;
  list-style: none;
  user-select: none;
}
.d-hw-summary::-webkit-details-marker { display: none; }
.d-hw-summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s;
}
.d-hw-wrap[open] .d-hw-summary::before { transform: rotate(90deg); }

.d-hw {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  flex-shrink: 0;
}
.d-hw-block {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 10px;
  min-height: 34px;
}
.hw-icon { font-size: 1.1em; }
.hw-icon.hw-pi { color: var(--red); }
.hw-icon.hw-temp { color: var(--red); }
.hw-icon.hw-volt { color: var(--green); }
.hw-lbl {
  font-size: 10px; color: var(--txt-dim);
  letter-spacing: 1.3px; text-transform: uppercase;
  font-weight: 600;
}
.hw-val {
  font-size: 12px; color: var(--green); font-weight: 700;
  margin-top: 1px;
  letter-spacing: 0.3px;
}
.hw-sub { font-size: 9px; color: var(--txt-dim); margin-top: 1px; }

/* Cuando no hay FlowStation conectada: la barra inferior se ve "apagada" */
.d-hw.hw-offline .hw-val   { color: var(--txt-dim); font-weight: 500; }
.d-hw.hw-offline .hw-icon  { opacity: 0.4; }
.d-hw.hw-offline .mini-bars .mb { background: #1a2330; }

/* TG en uso destacado arriba; debajo CSV de TGs escaneando */
.sub-tgs       { line-height: 1.4; }
.tg-active-row { margin-bottom: 2px; }
.tg-active {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(141, 255, 79, 0.18);
  border: 1px solid rgba(141, 255, 79, 0.6);
  color: var(--green, #8DFF4F);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px;
  text-shadow: 0 0 4px rgba(141, 255, 79, 0.3);
  white-space: nowrap;
}
.tg-scan-row {
  font-size: 10px; color: var(--txt-dim, #6a8a95);
  letter-spacing: 0.3px;
}
.sub-no-tg { color: #5a7a85; font-size: 11px; }
/* Desglose TG por ISSI (cuando un operador agrupa varios ISSI/equipos) */
.tg-per-issi {
  display: flex; align-items: baseline; gap: 8px;
  padding: 2px 0;
}
.tg-per-issi + .tg-per-issi { border-top: 1px dashed var(--border); }
.tg-issi-label {
  color: var(--txt-dim); font-size: 11px; font-weight: 700;
  flex: 0 0 auto; min-width: 62px;
}
.tg-issi-tgs { flex: 1 1 auto; min-width: 0; }

/* RSSI debajo de ONLINE en suscriptores + en tarjeta de llamada */
.sub-rssi      { margin-top: 3px; font-size: 10px; }
.rssi-excellent{ color: #8DFF4F; }
.rssi-good     { color: #B5FF4F; }
.rssi-ok       { color: #FFEA4F; }
.rssi-low      { color: #FFB04F; }
.rssi-bad      { color: #FF6E6E; }
.lc-rssi {
  font-size: 10px; margin-top: 2px;
  letter-spacing: 0.5px;
}

.mini-bars {
  display: inline-flex; align-items: flex-end; gap: 1px;
  vertical-align: middle; margin-left: 6px; height: 12px;
}
.mini-bars .mb { width: 3px; background: #2a4055; }
.mini-bars .mb.on { background: var(--green); }
.mini-bars .mb:nth-child(1) { height: 4px; }
.mini-bars .mb:nth-child(2) { height: 5px; }
.mini-bars .mb:nth-child(3) { height: 7px; }
.mini-bars .mb:nth-child(4) { height: 8px; }
.mini-bars .mb:nth-child(5) { height: 10px; }
.mini-bars .mb:nth-child(6) { height: 12px; }

/* ============ FOOTER ============ */
.d-footer {
  display: flex; align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 3px;
  min-height: 34px;
  font-size: 12px;
  flex-shrink: 0;
}
.d-footer-block {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px;
  border-right: 1px solid var(--border);
}
.d-footer-block .d-lbl { color: var(--txt-dim); letter-spacing: 1.3px; font-size: 11px; text-transform: uppercase; font-weight: 600; }
.d-footer-block strong {
  color: var(--green); font-weight: 700; font-size: 14px;
  letter-spacing: 0.5px;
}
.d-footer-block.right { border-right: none; border-left: 1px solid var(--border); }
.d-grow { flex: 1; }
.fb-icon { color: var(--blue); }

code { background: transparent; padding: 0; border: none; color: inherit; font-family: inherit; }

/* ============ SOS PENDIENTE banner ============ */
.sos-pending-bar {
  background: var(--red);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 10px 16px;
  margin-bottom: 6px;
  font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 1.5px; font-size: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  animation: pulse-red 0.6s infinite;
  box-shadow: 0 0 18px rgba(255,43,43,0.7);
}
.sos-pending-bar .sp-icon { font-size: 1.5em; }
.sos-pending-bar .sp-item {
  background: rgba(0,0,0,0.25);
  padding: 4px 10px; border-radius: 2px;
}

/* ============ RF CHANNEL — TIMESLOTS ============ */
.ts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.ts-card {
  border: 1px solid var(--border-d);
  border-radius: 4px;
  background: var(--panel);
  padding: 10px 12px;
  position: relative;
  min-height: 96px;
  display: flex; flex-direction: column;
}
.ts-card.busy { border-color: var(--blue); }
.ts-card.busy.mcch { border-color: var(--blue); }
.ts-card.busy.tch { border-color: var(--green); }
.ts-card.busy.emergency { border-color: var(--red); }

.ts-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ts-label {
  background: var(--blue); color: var(--bg);
  font-weight: 700; font-size: 11px; letter-spacing: 1.2px;
  padding: 3px 8px; border-radius: 3px;
}
.ts-card.busy.tch .ts-label       { background: var(--green); }
.ts-card.busy.emergency .ts-label { background: var(--red); color: #fff; }

.ts-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #2a3a45;  /* gris para idle */
}
.ts-card.busy .ts-dot { background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.ts-card.busy.tch .ts-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.ts-card.busy.emergency .ts-dot {
  background: var(--red); box-shadow: 0 0 8px var(--red);
  animation: pulse-red 0.8s infinite;
}

.ts-body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.ts-mini-bars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 14px; margin-bottom: 4px;
}
.ts-mini-bars .b {
  width: 3px; background: var(--blue); border-radius: 1px;
}
.ts-card.busy.tch .ts-mini-bars .b       { background: var(--green); }
.ts-card.busy.emergency .ts-mini-bars .b { background: var(--red); }
.ts-mini-bars .b:nth-child(1) { height: 4px; }
.ts-mini-bars .b:nth-child(2) { height: 7px; }
.ts-mini-bars .b:nth-child(3) { height: 10px; }
.ts-mini-bars .b:nth-child(4) { height: 14px; }
.ts-mini-bars .b:nth-child(5) { height: 8px; }
.ts-mini-bars .b:nth-child(6) { height: 11px; }
.ts-mini-bars .b:nth-child(7) { height: 6px; }
.ts-mini-bars .b:nth-child(8) { height: 13px; }

.ts-idle-line {
  color: var(--txt-dim); font-family: var(--font-mono);
  letter-spacing: 6px; font-size: 14px;
}
.ts-type {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 13px; letter-spacing: 1.5px;
  color: var(--blue);
}
.ts-card.busy.tch .ts-type       { color: var(--green); }
.ts-card.busy.emergency .ts-type { color: var(--red); }
.ts-card:not(.busy) .ts-type     { color: var(--txt-dim); }

.ts-sub {
  font-family: var(--font-body);
  font-size: 11px; color: var(--txt-dim);
  letter-spacing: 0.5px;
}
.ts-card.busy .ts-sub { color: var(--txt); }


/* ============ RESPONSIVE ============
   Principio: NUNCA ocultar información crítica con display:none.
   Reorganizar, envolver, scroll horizontal, o colapsar en <details>.
   ================================================================ */

/* Tablas: siempre scroll horizontal si no caben (evita truncado) */
.d-section .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.subs-table   { min-width: 620px; }
.channels-table { min-width: 520px; }

/* Tablet horizontal: el split top/bottom pasa a 1 col cuando no cabe el grid 1.62fr/1fr.
   Live transmissions adopta auto-fit para escalar de 1 a N cards según ancho real. */
@media (max-width: 1200px) {
  .d-row.top, .d-row.bottom { grid-template-columns: 1fr; }
  .d-live-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* ----------- Tablet vertical / móvil grande (≤ 900px) -----------
   Activamos scroll vertical natural; el header se reorganiza pero
   TODOS los bloques siguen visibles. */
@media (max-width: 900px) {
  body { overflow: auto; }
  #dispatch-shell {
    position: static;
    height: auto;
    min-height: 100vh;
    padding: 8px;
    gap: 8px;
    font-size: 13px;
  }

  /* Header: brand arriba, grupo de datos en fila wrap, admin debajo */
  .d-header {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .d-brand {
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px;
  }
  .d-hgroup {
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
  }
  .d-hblock {
    flex: 1 1 140px;
    min-width: 140px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
  }
  .d-hsignal { padding: 8px 12px; }
  .d-hsignal .d-hlbl { display: block; }  /* mostramos etiqueta para identificar barras */

  .d-admin-block {
    margin-left: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Touch-friendly */
  .d-admin-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
  }

  /* Telemetría hw: ocupa todo el ancho y ENVUELVE sus ítems (sin clip) para
     que se vean los 6 en móvil. */
  .d-htele {
    flex: 1 1 100%;
    flex-wrap: wrap;
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--border);
    gap: 10px 22px;
    padding: 10px 14px;
  }

  /* Módulo admin (paleta encima + acciones): centrado en móvil. */
  .d-admin-block { align-items: center; }
  .d-admin-block .theme-picker { justify-content: center; }
  .d-admin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

  /* Reordenar en móvil: los EQUIPOS ONLINE deben verse ANTES que los logs.
     Los eventos van anidados en la sección "channels" (timeslots+eventos) de
     la fila superior, y los suscriptores en la fila inferior. Aplanamos las
     filas con display:contents y ordenamos las secciones por flex order del
     shell: cabecera → SOS → live → SUSCRIPTORES → channels(timeslots+eventos)
     → footer. */
  .d-row { display: contents; }
  .d-col-left { display: contents; }
  .d-header        { order: 0; }
  #sos-pending-bar { order: 1; }
  .d-section.live     { order: 2; }
  .d-section.subs     { order: 3; }
  .d-section.channels { order: 4; }
  .d-footer        { order: 5; }
  .d-section { min-height: 260px; }

  /* Footer: que envuelva */
  .d-footer { flex-wrap: wrap; }
  .d-footer-block {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .d-footer-block.right { border-left: none; }

  /* Tablas */
  .d-table { min-width: 480px; }

  /* Eventos: mostrar tag debajo del mensaje en lugar de columna a la derecha,
     así no se pierde TX/RX/OK */
  .evt {
    grid-template-columns: 60px 100px 1fr;
    grid-template-rows: auto auto;
    row-gap: 2px;
    padding: 8px 12px;
  }
  .evt-tag {
    grid-column: 2 / -1;
    text-align: left;
    font-size: 11px;
    letter-spacing: 1.2px;
  }
}

/* ----------- Tablet / móvil mediano (≤ 768px) -----------
   Header en fila con wrap. Subtitle del brand se compacta. Timeslots 2x2. */
@media (max-width: 768px) {
  /* Header layout: brand + admin en la primera fila, grupo de datos debajo */
  .d-header {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .d-brand {
    flex: 1 1 auto;
    border-right: 1px solid var(--border);
    border-bottom: none;
    padding: 10px 14px;
  }
  .d-brand .d-subtitle {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .d-hgroup {
    flex: 1 1 100%;
    order: 3;  /* después del admin block */
    border-top: 1px solid var(--border);
    border-bottom: none;
  }
  .d-hblock {
    flex: 1 1 130px;
    min-width: 130px;
    padding: 6px 10px;
  }
  .d-hsub { font-size: 10px; }

  .d-admin-block {
    margin-left: auto;
    border-left: 1px solid var(--border);
    border-top: none;
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: wrap;
    order: 2;
  }

  /* RF Channel timeslots: 2x2 en vez de 4x1 */
  .ts-grid { grid-template-columns: repeat(2, 1fr); }
  .ts-card { min-height: 88px; }

  /* Hardware grid: auto-fit ya se ocupa solo */
  .d-table { min-width: 560px; }
}

/* ----------- Móvil pequeño (≤ 600px) -----------
   Compactar tipografías. Eventos se colapsan en <details> a partir de aquí
   pero NO se ocultan: se vuelven secundarios. Hardware bar también colapsable. */
@media (max-width: 600px) {
  #dispatch-shell { padding: 6px; gap: 6px; font-size: 13px; }
  .d-title { font-size: 18px; letter-spacing: 2px; }
  .d-logo  { font-size: 1.5em; }
  .d-hblock { padding: 6px 10px; min-width: 110px; flex: 1 1 110px; }
  .d-hlbl  { font-size: 10px; }
  .d-hval  { font-size: 13px; }
  .d-hsub  { font-size: 9px; }

  /* Cards live mínimas pero legibles (≥12px) */
  .d-live-grid { grid-template-columns: 1fr; }
  .lc-callsign { font-size: 28px; letter-spacing: 1px; }
  .lc-body { grid-template-columns: 70px 1fr 28px; gap: 8px; padding: 8px; }
  .lc-flag, .lc-sos-box { width: 60px; height: 45px; }
  .lc-bars { height: 60px; width: 28px; }
  .lc-name { font-size: 12px; }
  .lc-city, .lc-country { font-size: 12px; }
  .lc-foot { gap: 8px; padding: 4px 10px; flex-wrap: wrap; }
  .lc-foot-cell { gap: 4px; }
  .lc-foot-lbl { font-size: 12px; }
  .lc-foot-val { font-size: 12px; }
  .lc-foot-val.freq { font-size: 12px; }

  /* Footer minimal */
  .d-footer-block { padding: 6px 10px; flex: 1 1 100%; }
  .d-footer-block strong { font-size: 12px; }

  /* Telemetría: en móvil ocupa toda la fila bajo las barritas y envuelve. */
  .d-htele {
    flex: 1 1 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 8px 12px;
  }
}

/* ----------- Móvil pequeño (≤ 480px) -----------
   Máxima compresión, sin ocultar datos.
   El header se apila en columna completa para que MCC/MNC, RED, HORA, etc.
   sean todos accesibles. */
@media (max-width: 480px) {
  #dispatch-shell { padding: 5px; gap: 5px; font-size: 12px; }

  .d-title { font-size: 16px; letter-spacing: 1.5px; }
  .d-logo  { font-size: 1.3em; }
  .d-brand {
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex: 1 1 100%;
  }
  .d-brand .d-subtitle { display: block; font-size: 9px; }

  .d-hgroup {
    flex-direction: column;
    flex: 1 1 100%;
    order: 3;
  }
  .d-hblock {
    flex: 1 1 100%;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    gap: 8px;
  }
  .d-hblock .d-hlbl { margin-bottom: 0; flex: 0 0 auto; }
  .d-hblock .d-hval { flex: 1 1 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d-hblock .d-hsub { display: none; }   /* sub-etiquetas redundantes; el dato sigue accesible */
  .d-hsignal .d-hlbl { display: block; }
  .d-hsignal .signal-bars { margin-left: auto; }

  .d-admin-block {
    flex: 1 1 100%;
    margin-left: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    justify-content: center;
    padding: 6px 8px;
    order: 2;
  }
  .d-admin-btn {
    padding: 12px;
    font-size: 12px;
    letter-spacing: 1px;
    min-height: 44px;
    min-width: 44px;
  }

  /* LIVE cards aún más compactas (≥12px legibilidad) */
  .lc-callsign { font-size: 24px; }
  .lc-head { padding: 5px 8px; gap: 6px; }
  .lc-ch-chip { padding: 3px 8px; font-size: 12px; }
  .lc-tx-chip { padding: 3px 6px; font-size: 12px; }
  .lc-body { grid-template-columns: 56px 1fr 24px; gap: 6px; padding: 6px; }
  .lc-flag, .lc-sos-box { width: 50px; height: 38px; }
  .lc-bars { height: 50px; width: 24px; }
  .lc-name, .lc-city, .lc-country, .lc-gps { font-size: 12px; }

  /* Timeslots: mantener 2x2 pero más compactos */
  .ts-grid { gap: 5px; padding: 5px; grid-template-columns: repeat(2, 1fr); }
  .ts-card { min-height: 76px; padding: 6px 8px; }
  .ts-label { font-size: 12px; padding: 2px 6px; }
  .ts-type { font-size: 12px; letter-spacing: 1px; }

  /* EVENTOS: NO se ocultan. Compactamos el grid en 2 filas + permitimos scroll.
     Antes en ≤480px tenían display:none — eso violaba el requisito. */
  .d-section.events { display: flex; min-height: 200px; }
  .evt {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    padding: 6px 10px;
  }
  .evt-ts { grid-column: 1; grid-row: 1; font-size: 12px; }
  .evt-chip { grid-column: 2; grid-row: 1; justify-self: start; }
  .evt-msg { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
  .evt-tag {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
    font-size: 12px;
    letter-spacing: 1px;
  }

  /* SOS banner compacto */
  .sos-pending-bar { font-size: 12px; padding: 8px 10px; letter-spacing: 1px; gap: 8px; }
  .sos-pending-bar .sp-icon { font-size: 1.2em; }

  /* Footer minimal: 1 columna */
  .d-footer-block { flex: 1 1 100%; padding: 5px 8px; }

  /* Section title compacto */
  .d-section-title { padding: 7px 10px; font-size: 12px; letter-spacing: 1.5px; }

  /* HARDWARE summary: ya marcado display:block desde ≤600px */
  .d-hw-wrap[open] .d-hw {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 5px;
  }
  .d-hw-block { padding: 6px 8px; gap: 6px; }
  .hw-lbl { font-size: 12px; letter-spacing: 1px; }
  .hw-val { font-size: 12px; }
}

/* ----------- Móvil ultra-estrecho (≤ 360px) ----------- */
@media (max-width: 360px) {
  .d-title { font-size: 14px; }
  .d-admin-btn { font-size: 12px; padding: 12px 8px; letter-spacing: 0.5px; }
  .lc-callsign { font-size: 20px; }
  .ts-grid { grid-template-columns: 1fr; }  /* 1 col cuando no caben 2 */
}

/* =============================================================
   TEMA CLARO (light) — overrides cuando <html data-theme="light">
   Se mantiene la jerarquía visual: fondos claros, texto oscuro,
   acentos azul/verde para títulos y datos.
   ============================================================= */
html[data-theme="light"] {
  --bg:        #F5F7FA;
  --panel:     #FFFFFF;
  --grid:      #E6F0E9;
  --border:    #C9D6E2;
  --border-d:  #AEC2D4;
  --green:     #1F7A2E;
  --green-d:   #155A22;
  --red:       #C62828;
  --red-bg:    #F8D7D7;
  --amber:     #B8860B;
  --blue:      #1565C0;
  --txt:       #1F2933;
  --txt-dim:   #5C6B7A;
}

html[data-theme="light"] body { background: var(--bg); }

/* Botones admin del dispatch: en claro el azul sobre blanco luce bien */
html[data-theme="light"] .d-admin-btn:hover { color: #FFFFFF; }

/* Tabla: hover sutil en claro */
html[data-theme="light"] .d-table tr:hover td,
html[data-theme="light"] tr:hover td { background: rgba(21,101,192,0.06); }

/* Chips y badges con fondo translúcido — recolorizar para legibilidad */
html[data-theme="light"] .lc-tx-chip {
  background: rgba(198,40,40,0.10);
}

/* Animación de emergencia menos agresiva en claro */
html[data-theme="light"] .live-card.emergency {
  box-shadow: 0 0 10px rgba(198,40,40,0.30);
}

/* Quitar overflow:hidden del body en páginas no-dispatch para que se pueda
   hacer scroll normal; en dispatch (#dispatch-shell fixed) sigue oculto */
html[data-theme="light"] code,
html[data-theme="light"] pre {
  background: #F0F4F8;
  color: var(--green);
}

/* =============================================================
   Paletas adicionales (oscuras) para la consola dispatch.
   --green es el acento primario en todo el dispatch, así que se
   remapea al color de cada paleta para recolorear el conjunto.
   ============================================================= */
html[data-theme="amber"] {        /* Ámbar CRT */
  --bg: #0A0700; --panel: #140D02; --grid: #2A1E05;
  --border: #3A2A08; --border-d: #4A370C;
  --green: #FFB000; --green-d: #9A6A00;
  --red: #FF4030; --red-bg: #5A1A0A;
  --amber: #FFD43B; --blue: #FFA040;
  --txt: #FFCB8A; --txt-dim: #B0875A;
}
html[data-theme="ice"] {          /* Azul hielo */
  --bg: #0A0F14; --panel: #111A22; --grid: #0E2230;
  --border: #1C3A4A; --border-d: #28506A;
  --green: #38BDF8; --green-d: #1E6E96;
  --red: #FF5A5A; --red-bg: #4A1414;
  --amber: #FFC857; --blue: #7DD3FC;
  --txt: #C8D6E0; --txt-dim: #6B8595;
}
html[data-theme="purple"] {       /* Púrpura noche */
  --bg: #0B0613; --panel: #150B22; --grid: #1E1030;
  --border: #34204A; --border-d: #4A2E68;
  --green: #B57AFF; --green-d: #6E3FB0;
  --red: #FF5F8F; --red-bg: #4A1430;
  --amber: #FFC857; --blue: #8A7DFF;
  --txt: #D6C8E6; --txt-dim: #8A7AA0;
}
html[data-theme="contrast"] {     /* Alto contraste */
  --bg: #000000; --panel: #0A0A0A; --grid: #141414;
  --border: #444444; --border-d: #666666;
  --green: #FFEB00; --green-d: #B0A000;
  --red: #FF4040; --red-bg: #5A0000;
  --amber: #FFD43B; --blue: #00D0FF;
  --txt: #FFFFFF; --txt-dim: #BBBBBB;
}

/* Botón toggle de tema (header _base y header dispatch) */
.theme-toggle {
  background: transparent; border: 1px solid var(--txt-dim, #6a8a95);
  color: var(--txt-dim, #6a8a95);
  cursor: pointer; padding: 4px 9px; border-radius: 3px;
  font-size: 14px; line-height: 1;
  margin-left: 8px;
}
.theme-toggle:hover { color: var(--green, #8DFF4F); border-color: var(--green, #8DFF4F); }
.d-admin-block .theme-toggle {
  font-size: 16px; padding: 6px 10px;
  border-color: var(--blue); color: var(--blue);
}
.d-admin-block .theme-toggle:hover {
  background: var(--blue); color: var(--bg);
}