/* ============ THEME ============ */
:root{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --svp: #4DAAD4;        /* Azul SVP */
  --svp-ink: #0c5c7a;    /* Azul más oscuro para hover */
  --ok: #2e7d32;
  --bad:#c0392b;
  --layout-w: min(1340px, 95%);
  --gps-skyhawk-dial-scale: 1.24;
}
.theme-light { background: var(--bg); color: var(--ink); }

/* ============ DARK THEME ============ */
html.theme-dark{
  --bg: #0f1923;
  --surface: #162032;
  --ink: #e2eaf4;
  --muted: #7d98b8;
  --line: #2a3a52;
  --svp: #4DAAD4;
  --svp-ink: #7ec8e8;
  --ok: #34d058;
  --bad: #ff6b6b;
}
html.theme-dark body{ background: var(--bg); color: var(--ink); }

/* Appbar dark */
html.theme-dark .appbar{
  background: rgba(15,25,35,.93);
  border-bottom-color: var(--line);
}

/* Hardcoded white backgrounds → surface */
html.theme-dark .dual-section{ background: var(--surface); }
html.theme-dark .status-pill{ background: var(--surface); }
html.theme-dark .status-pill.connected{
  background: rgba(52,208,88,.1);
  border-color: rgba(52,208,88,.28);
}
html.theme-dark .status-pill.disconnected{
  background: rgba(255,107,107,.1);
  border-color: rgba(255,107,107,.28);
}
html.theme-dark .status-pill.recording{
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.28);
  color: #f87171;
}
html.theme-dark .track-global-stop{
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.25);
  color: #f87171;
}
html.theme-dark .track-global-stop:hover{
  background: rgba(239,68,68,.18);
}

/* Gradients on GPS/nav config cards */
html.theme-dark .navcfg-body #gps-map-config-card,
html.theme-dark .navcfg-body #gps-track-config-card{
  background: var(--surface);
  border-color: var(--line);
}

/* Priority / fleet / sim cards */
html.theme-dark .priority-card,
html.theme-dark .fleet-card,
html.theme-dark .sim-card{ background: var(--surface); }
html.theme-dark .fleet-field{ background: var(--surface); color: var(--ink); border-color: var(--line); }

/* Inputs / selects */
html.theme-dark select,
html.theme-dark input[type=text],
html.theme-dark input[type=number],
html.theme-dark input[type=password],
html.theme-dark input[type=email],
html.theme-dark textarea{
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

/* WiFi signal bars */
html.theme-dark .wifi-card .wifi-sim-bars .signal-bar{
  background: var(--line);
  border-color: var(--line);
}

/* Modal / overlay */
html.theme-dark .ui-feedback-overlay{ background: rgba(0,0,0,.75); }
html.theme-dark .ui-feedback-modal{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

/* Charts backgrounds */
html.theme-dark canvas{ filter: brightness(.92); }

/* Scrollbar */
html.theme-dark{ scrollbar-color: var(--line) var(--bg); }

/* ── Throughput buttons (hardcoded #fff) ── */
html.theme-dark .throughput-detail-open,
html.theme-dark .throughput-detail-open:hover,
html.theme-dark .throughput-detail-close{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html.theme-dark .throughput-detail-open:hover{
  background: var(--bg);
}

/* ── Password toggle eye icon ── */
html.theme-dark .pw-btn i.bi{ color: var(--muted); }

/* ── GPS telemetry boxes (Navigation tab) ── */
html.theme-dark .gps-section{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .gps-telemetry-label{ color: var(--muted); }
html.theme-dark .gps-telemetry-value{ color: var(--ink); }

/* ── System config – nested cards ── */
html.theme-dark #webserver-access-card .webserver-block{
  background: var(--bg);
  border-color: var(--line);
}
html.theme-dark .system-config > .dual-section h3{
  border-bottom-color: var(--line);
}

/* ── WiFi enable pill / wificfg enable wrap ── */
html.theme-dark #wifi-settings-card .wifi-enable-inline,
html.theme-dark .wificfg-enable-wrap{
  background: var(--surface);
  border-color: var(--line);
}

/* ── Secondary / cancel buttons ── */
html.theme-dark .navcfg-btn.secondary,
html.theme-dark .btn-secondary{
  background: #1e2d42;
  border-color: #3a5068;
  color: var(--ink);
}
html.theme-dark .navcfg-btn.secondary:hover,
html.theme-dark .btn-secondary:hover{
  background: #243650;
  border-color: #4a6278;
}

/* ── Reboot overlay ── */
html.theme-dark .system-reboot-overlay__box{
  background: var(--surface);
  border-color: var(--line);
}

/* ── FW update stage rows ── */
html.theme-dark #fw-update-card .fw-stage-row{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark #fw-update-card .fw-stage-state{
  background: var(--line);
  color: var(--ink);
}

/* ── ui-feedback close button ── */
html.theme-dark .ui-feedback-close-btn{
  background: var(--surface);
}

/* ── Login input ── */
html.theme-dark .login-input{
  background: var(--surface);
}

/* ── GPS Track Recorder (Navigation Config) ── */
html.theme-dark .gps-track-toolbar{
  background: var(--surface);
}
html.theme-dark .gps-track-btn-secondary{
  background: #1e2d42;
  border-color: #3a5068;
  color: var(--ink);
}
html.theme-dark .gps-track-btn-secondary:hover{
  background: #243650;
}
html.theme-dark .gps-track-status{
  color: var(--ink);
}
html.theme-dark .gps-track-status__count{
  background: var(--line);
  color: var(--ink);
}
html.theme-dark .gps-track-status.is-recording .gps-track-status__count{
  background: rgba(248,113,113,.12);
  color: #f87171;
}
html.theme-dark .gps-track-status.is-warning .gps-track-status__count{
  background: rgba(251,191,36,.12);
  color: #fbbf24;
}
html.theme-dark .gps-track-config-note{
  color: var(--muted);
}

/* ── WAN settings – inner boxes ── */
html.theme-dark .wancfg-enable-inline{
  background: var(--surface);
}
html.theme-dark .wancfg-loading{
  background: rgba(15,25,35,.88);
}
html.theme-dark .wancfg-loading-spinner{
  border-color: var(--line);
  border-top-color: var(--svp);
}
html.theme-dark .wancfg-block,
html.theme-dark .wancfg-main-block{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .wancfg-runtime-block,
html.theme-dark .wancfg-static-fields{
  background: var(--bg);
  border-color: var(--line);
}
html.theme-dark .wancfg-link-card{
  background: var(--bg);
  border-color: var(--line);
}
html.theme-dark .wan-runtime-item{
  background: var(--surface);
  border-color: var(--line);
}

/* ── WiFi settings – inner boxes ── */
html.theme-dark .wificfg-enable-inline{
  background: var(--surface);
}
html.theme-dark .wificfg-close{
  background: var(--surface);
}
html.theme-dark .wificfg-tabs{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .wificfg-panel{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .wificfg-block{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .wificfg-runtime-block{
  background: var(--bg);
  border-color: var(--line);
}
html.theme-dark .wificfg-runtime-item{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .wificfg-band-track{
  background: var(--bg);
  border-color: var(--line);
}
html.theme-dark .wificfg-band-text{
  color: var(--muted);
}
html.theme-dark .wificfg-scan-btn{
  background: var(--surface);
  border-color: var(--line);
  color: var(--svp-ink);
}
html.theme-dark #wifi-settings-card .wifi-band-segment{
  background: var(--bg);
  border-color: var(--line);
}
html.theme-dark #wifi-settings-card .wifi-band-option{
  color: var(--muted);
}

/* ── SIM settings – injected CSS (higher specificity wins over injected #fff) ── */
html.theme-dark .simcfg-enable-inline{
  background: var(--surface);
}
html.theme-dark .simcfg-tabs{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .simcfg-panel{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .simcfg-field input,
html.theme-dark .simcfg-field select,
html.theme-dark .simcfg-field textarea{
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html.theme-dark .simcfg-tech-pill{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html.theme-dark .simcfg-tech-pill:hover{
  background: var(--bg);
  border-color: var(--svp);
}
html.theme-dark .simcfg-ms{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .simcfg-ms.disabled{
  background: var(--bg);
}
html.theme-dark .simcfg-ms.disabled > summary{
  color: var(--muted);
}
html.theme-dark .simcfg-ms-opt:hover{
  background: rgba(77,170,212,.08);
}
html.theme-dark .simcfg-btn.secondary{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html.theme-dark .simcfg-loading{
  background: rgba(15,25,35,.88);
}
html.theme-dark .simcfg-loading-spinner{
  border-color: var(--line);
  border-top-color: var(--svp);
}
html.theme-dark .simcfg-disabled input,
html.theme-dark .simcfg-disabled select,
html.theme-dark .simcfg-disabled textarea,
html.theme-dark .simcfg-disabled button{
  background: var(--bg);
  color: var(--muted);
}

/* ── Connection Quality – cards / panels ── */
html.theme-dark .connection-quality-score-card,
html.theme-dark .connection-quality-panel,
html.theme-dark .connection-quality-kpi,
html.theme-dark .connection-quality-mini-card,
html.theme-dark .connection-quality-chart-wrap{
  background: var(--surface);
  border-color: var(--line);
}

/* info button */
html.theme-dark .connection-quality-info-btn{
  background: rgba(77,170,212,.14);
  border-color: rgba(77,170,212,.3);
}
html.theme-dark .connection-quality-info-btn:hover{ background: rgba(77,170,212,.22); }

/* score ring */
html.theme-dark .connection-quality-score-ring{
  background: var(--surface);
  color: var(--muted);
  border-color: rgba(148,163,184,.25);
}
html.theme-dark .connection-quality-score-ring.status-good{
  background: rgba(52,208,88,.08);
  color: #4ade80;
  border-color: rgba(52,208,88,.28);
}
html.theme-dark .connection-quality-score-ring.status-fair{
  background: rgba(251,146,60,.08);
  color: #fb923c;
  border-color: rgba(251,146,60,.28);
}
html.theme-dark .connection-quality-score-ring.status-poor{
  background: rgba(248,113,113,.08);
  color: #f87171;
  border-color: rgba(248,113,113,.28);
}

/* status pill */
html.theme-dark .connection-quality-status-pill{
  background: var(--surface);
  color: var(--muted);
  border-color: var(--line);
}
html.theme-dark .connection-quality-status-pill.status-good{
  color: #4ade80;
  border-color: rgba(52,208,88,.28);
  background: rgba(52,208,88,.08);
}
html.theme-dark .connection-quality-status-pill.status-fair{
  color: #fb923c;
  border-color: rgba(251,146,60,.28);
  background: rgba(251,146,60,.08);
}
html.theme-dark .connection-quality-status-pill.status-poor{
  color: #f87171;
  border-color: rgba(248,113,113,.28);
  background: rgba(248,113,113,.08);
}

/* progress track */
html.theme-dark .connection-quality-usage-track{ background: var(--line); }

/* info modal */
html.theme-dark .connection-quality-info-modal{
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark .connection-quality-info-close{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html.theme-dark .connection-quality-info-formula{
  background: rgba(77,170,212,.1);
  border-color: rgba(77,170,212,.25);
}
html.theme-dark .connection-quality-info-item{
  background: var(--bg);
  border-color: var(--line);
}

/* ============ THEME TOGGLE BUTTON ============ */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 58px;
  height: 30px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  padding: 4px 7px;
  position: relative;
  transition: border-color .25s, background .25s;
  flex-shrink: 0;
  overflow: hidden;
  outline: none;
}
.theme-toggle:hover{ border-color: var(--svp); }
.theme-toggle:focus-visible{
  outline: 2px solid var(--svp);
  outline-offset: 2px;
}
/* sliding knob */
.theme-toggle::before{
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--svp);
  transition: left .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 5px rgba(77,170,212,.5);
  pointer-events: none;
}
html.theme-dark .theme-toggle::before{ left: calc(100% - 25px); }
.theme-icon-sun,
.theme-icon-moon{
  font-size: 13px;
  position: relative;
  z-index: 1;
  transition: opacity .25s, color .25s;
  pointer-events: none;
}
.theme-icon-sun{ color: #fff; opacity: 1; }
.theme-icon-moon{ color: var(--muted); opacity: .45; }
html.theme-dark .theme-icon-sun{ color: var(--muted); opacity: .45; }
html.theme-dark .theme-icon-moon{ color: #fff; opacity: 1; }

/* ============ BASICS ============ */
*,
*::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html{
  overflow-y: auto;
  scrollbar-gutter: stable;
}
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
img { display:block; max-width:100%; }

/* ============ HEADER ============ */
/* ===== Compact App Bar (header) ===== */
.appbar{
  position: sticky;
  top: 0;
  z-index: 20;
  height: 130px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.appbar-row{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--layout-w);
  margin: 0 auto;
  gap: 12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.appbar-home-link{
  display:block;
  cursor:pointer;
}
.appbar-logo{ width:120px; height:auto; opacity:.95; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-title{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--svp);
  letter-spacing: .3px;
}
.brand-subtitle{
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted);
  margin-top: 2px;
}

/* Tabs: colócalas justo debajo de la appbar (antes top:0) */
.tab-labels{ top: calc(64px + 8px); }

/* Ajustes menores para respiración general */
.main-container{ margin-top: 6px; }

/* Responsive: header aún más limpio en móvil */
@media (max-width: 600px){
  .brand-subtitle{ display:none; }
  .appbar-logo{ width:30px; }
  .brand-title{ font-size: 1.1rem; }
}

/* ===== Logo a 120px (responsive) ===== */
.appbar-logo{
  width: 120px;         /* antes 36px */
  height: auto;
  opacity: .95;
}

/* Mantén todo ordenado en pantallas pequeñas */
@media (max-width: 900px){
  .appbar-logo{ width: 100px; }
}
@media (max-width: 600px){
  .appbar-logo{ width: 88px; }   /* cabrá sin aplastar el título */
  .brand-subtitle{ display:none; } /* ya lo teníamos, por limpieza */
}

/* ----- TRANSICIÓN TEMPRANA: el header ya no es sticky ----- */
.appbar{
  position: relative !important;  /* antes: sticky */
  top: auto !important;
}

/* El tab bar se fija directamente arriba (por encima del header si coincidiera) */
.tab-labels{
  position: sticky;
  top: 0 !important;              /* antes: calc(64px + 8px) */
  z-index: 40;                    /* por delante del header */
  box-shadow: 0 4px 10px rgba(0,0,0,.06); /* sutil al fijarse */
}

/* Un poco menos de aire arriba del contenido, ya que el header no ocupa sitio */
.main-container{ margin-top: 10px !important; }

/* (Seguimos respetando el logo a 120 px) */
.appbar-logo{ width: 120px; height: auto; opacity: .95; }

/* Responsivo para que todo quepa bien en pantallas pequeñas */
@media (max-width: 900px){ .appbar-logo{ width: 100px; } }
@media (max-width: 600px){
  .appbar-logo{ width: 88px; }
  .brand-subtitle{ display: none; }
}



/* ============ WRAPPER ============ */
.main-container{ width:var(--layout-w); margin: 20px auto; }

/* ============ TABS (CSS-only) ============ */
.tabs input[type=radio]{ position:absolute; opacity:0; pointer-events:none; }
.tab-labels{
  display:flex; gap:8px; background:var(--surface); padding:6px; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  align-items:center;
  position:sticky; top:0; z-index:5;
}
.mobile-tabbar{
  display:none;
}
.tab-menu{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
}
.tab-label{
  display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
  color:var(--muted); cursor:pointer; user-select:none; font-weight:600;
  white-space:nowrap;
}
.tab-menu label[for="tab-home"]{
  margin-left:8px;
}
#tab-home:checked ~ .tab-labels label[for="tab-home"],
#tab-navigation:checked ~ .tab-labels label[for="tab-navigation"],
#tab-config:checked ~ .tab-labels label[for="tab-config"],
#tab-mission:checked ~ .tab-labels label[for="tab-mission"]{
  background: var(--svp); color:#fff;
}
#tab-intercom:checked ~ .tab-labels label[for="tab-intercom"],
#tab-alerts:checked ~ .tab-labels label[for="tab-alerts"]{
  background: var(--svp); color:#fff;
}
#tab-home:checked ~ .tab-labels .mobile-tab-current-label[data-tab="home"],
#tab-navigation:checked ~ .tab-labels .mobile-tab-current-label[data-tab="navigation"],
#tab-mission:checked ~ .tab-labels .mobile-tab-current-label[data-tab="mission"],
#tab-alerts:checked ~ .tab-labels .mobile-tab-current-label[data-tab="alerts"],
#tab-intercom:checked ~ .tab-labels .mobile-tab-current-label[data-tab="intercom"],
#tab-config:checked ~ .tab-labels .mobile-tab-current-label[data-tab="config"]{
  display:inline-flex;
}
.tab-status-wrap{
  margin-left:auto;
  margin-right:8px;
  display:flex;
  align-items:center;
  gap:8px;
}
.tab-status-pill{
  box-shadow:none;
  cursor:default;
  user-select:none;
}
.track-global-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.track-global-controls[hidden]{
  display:none !important;
}
.track-global-stop{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  border:1px solid rgba(185,28,28,.24);
  border-radius:999px;
  background:#fff1f2;
  color:#b91c1c;
  font-weight:900;
  cursor:pointer;
}
.track-global-stop:hover{
  background:#ffe4e6;
}
.track-global-stop:disabled{
  opacity:.65;
  cursor:not-allowed;
}
.tab-panels{ margin-top:14px; }
.tab-panel{ display:none; }
#tab-home:checked ~ .tab-panels .tab-panel[data-panel="home"]{ display:block; }
#tab-navigation:checked ~ .tab-panels .tab-panel[data-panel="navigation"]{ display:block; }
#tab-config:checked ~ .tab-panels .tab-panel[data-panel="config"]{ display:block; }
#tab-mission:checked ~ .tab-panels .tab-panel[data-panel="mission"]{ display:block; }
#tab-alerts:checked ~ .tab-panels .tab-panel[data-panel="alerts"]{ display:block; }
.tab-panel[data-panel="home"],
.tab-panel[data-panel="navigation"],
.tab-panel[data-panel="config"],
.tab-panel[data-panel="alerts"]{ padding-bottom:16px; }

/* ============ CARDS / CONTAINERS ============ */
.config-container{
  background: var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px; margin:16px 0; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.config-container h2{ margin:0 0 12px; color:var(--svp); font-size:1.15rem; }

.dual-section{
  background: #ffffff; border:1px solid var(--line);
  border-radius:14px; padding:16px; margin:0; box-shadow:0 1px 4px rgba(0,0,0,.03);
}
.dual-section + .dual-section{ margin-top:16px; }
.dual-section h3{
  margin:0 0 10px; padding-bottom:6px; border-bottom:2px solid var(--line);
  color: var(--svp-ink); font-size:1.05rem;
}
.stack-col{ display:grid; grid-template-rows:1fr 1fr; gap:16px; }

/* Grid de configuración en desktop */
.system-config{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; padding-top:8px;
}
.system-config > h2{ grid-column:1 / -1; margin-bottom:4px; }
.system-config .dual-section{ min-height: 260px; }
.system-config .dual-section.short{ min-height: 0; }

#vpn-certificate-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.vpn-certificate-head{
  display:block;
}
.vpn-certificate-copy{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.vpn-certificate-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.vpn-certificate-info-btn{
  position:static;
  flex:0 0 auto;
}
#vpn-certificate-download-btn[disabled]{
  opacity:.7;
  cursor:not-allowed;
}
.vpn-certificate-info-modal{
  max-width:min(560px, calc(100vw - 32px));
}

/* Responsivo */
@media (max-width:1100px){ .system-config{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .system-config{ grid-template-columns: 1fr; } }

/* ============ FORM ELEMENTS ============ */
label{ display:block; margin:10px 0 6px; font-weight:700; color: var(--ink); }
.ip-input,
input[type="text"], input[type="password"], input[type="number"], select{
  height:40px; padding:8px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:15px; width: 220px; max-width:100%;
}
.file-input{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.file-input input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.file-btn{
  margin:0;
  text-align:center;
}
.file-btn.is-disabled,
.file-btn[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
  cursor:not-allowed;
}
.file-input input[type="file"]:focus-visible + .file-btn{
  outline:2px solid var(--svp-ink);
  outline-offset:2px;
}
.file-name{
  color:var(--muted);
  font-weight:600;
  min-width:96px;
  word-break:break-all;
}
#fw-update-card .form-row + .form-row{ margin-top:12px; }
.fw-actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
#fw-update-card[data-fw-view="compact"] .form-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
#fw-update-card[data-fw-view="compact"] .fw-compact-body{
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:12px;
}
#fw-update-card[data-fw-view="compact"] .fw-compact-body .form-row{
  width:100%;
}
#fw-update-card[data-fw-view="compact"] .fw-compact-body .file-input{
  width:100%;
  justify-content:flex-start;
}
#fw-update-card[data-fw-view="compact"] .fw-compact-body .fw-actions-row{
  justify-content:flex-start;
  align-items:center;
}
#fw-update-card[data-fw-view="compact"]{
  display:block;
  text-align:left;
}
#fw-update-card .file-btn,
#fw-update-card #fw-upload-btn{
  width:138px;
  min-height:38px;
  justify-content:center;
  padding:0 12px;
  font-size:.92rem;
}
.field-pw{ position:relative; display:block; width:100%; }
.field-pw input{ width:100%; max-width:100%; padding-right:44px; }
.pw-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; background:transparent; cursor:pointer; border-radius:8px;
}
.pw-btn:focus-visible{ outline:2px solid var(--svp); outline-offset:2px; }
.pw-btn i.bi{ font-size:20px; color:#000; }

/* ============ BUTTONS ============ */
.btn, .login-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--svp); color:#fff; border:0; height:42px; padding:0 16px;
  border-radius:10px;
  font-family:inherit;
  font-size:1rem;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  transition:filter .18s, transform .02s;
}
.btn:hover, .login-btn:hover{ filter:brightness(.96); }
.btn:active, .login-btn:active{ transform:translateY(1px); }

/* ============ MISSION / PRIORITIES ============ */
.priority-note{ margin:0 0 12px; color:var(--muted); font-weight:600; }
.priority-summary{
  margin:0 0 12px;
  padding:0;
  border:0;
  background:transparent;
  font-weight:600;
  color:var(--muted);
}
.priority-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 900px){
  .priority-grid{ grid-template-columns: 1fr; }
}
.priority-option{ display:block; cursor:pointer; position:relative; }
.priority-option input{ position:absolute; opacity:0; pointer-events:none; }
.priority-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  min-height:110px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.03);
  transition:border-color .15s, box-shadow .15s, transform .05s;
}
.priority-card .title{ font-weight:900; color: var(--svp-ink); }
.priority-card .desc{ color:var(--muted); font-weight:600; font-size:.95rem; }
.priority-option input:checked + .priority-card{
  border-color: var(--svp);
  box-shadow:0 3px 12px rgba(77,170,212,.25);
}
.priority-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.priority-status{ font-weight:800; color:var(--muted); }
.priority-status.ok{ color:var(--ok); }
.priority-status.err{ color:var(--bad); }
.priority-current strong{
  color: var(--svp-ink);
  font-weight: 900;
}

.priority-mini{ color:var(--muted); font-weight:700; }

/* ============ MISSION / FLEET ============ */
.fleet-card{
  background:#fff;
  border-color:var(--line);
}
.fleet-head{
  display:block;
}
.fleet-note{
  margin:0 0 10px;
  color:var(--muted);
  font-weight:600;
}
.fleet-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}
@media (max-width: 1100px){
  .fleet-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .fleet-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px){
  .fleet-grid{ grid-template-columns: 1fr; }
}
.fleet-field{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.03);
  min-height:100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
}
.fleet-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:800;
  line-height:1.25;
  min-height:2.1em;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.fleet-value{
  font-weight:800;
  color:var(--svp-ink);
  font-size:1rem;
  line-height:1.25;
  min-height:1.35em;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  overflow-wrap:anywhere;
}
.fleet-value.is-empty{ color:#94a3b8; }

/* ============ THROUGHPUT / CHARTS ============ */
.throughput-full{ width:auto; }
.throughput-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.throughput-head h2{ margin:0; }
.throughput-detail-open{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--svp-ink);
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.throughput-detail-open:hover{
  background:#f8fafc;
}
.throughput-text{ color:var(--muted); font-weight:700; margin:6px 0; }
canvas{ width:100% !important; }
.throughput-detail-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.throughput-detail-backdrop.open{
  display:flex;
}
.throughput-detail-modal{
  width:min(1220px, 97vw);
  max-height:92vh;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.2);
  color:var(--ink);
}
.throughput-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--line);
}
.throughput-detail-title{
  margin:0;
  font-size:1.1rem;
  color:var(--svp);
  font-weight:900;
}
.throughput-detail-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.86rem;
  font-weight:700;
}
.throughput-detail-close{
  height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
}
.throughput-detail-body{
  padding:12px 16px 16px;
}
.throughput-detail-body .throughput-text{
  margin-top:10px;
}
.throughput-detail-body canvas{
  max-height:280px;
}

/* ============ NETWORK CARDS (SIM/WAN) ============ */
.cellular-section{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.sim-card{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px; width:200px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.03);
  transition:transform .15s, box-shadow .15s;
}
.sim-card:hover{ transform:translateY(-2px); box-shadow:0 3px 10px rgba(0,0,0,.06); }
.sim-card h4{ margin:4px 0 6px; }
.operator, .connection-type{ margin:4px 0; color:var(--muted); font-weight:600; }
.signal-bars-vertical{ display:flex; align-items:flex-end; justify-content:center; height:40px; margin:6px 0; }
.signal-bar{ width:6px; background:#d1d5db; margin:2px; transition:background .25s; }
.bar1{ height:30%; } .bar2{ height:50%; } .bar3{ height:70%; } .bar4{ height:100%; }
.signal-bar.active{ background:#16a34a; } /* verde señal */
.signal-bars-wrap{ position:relative; width:max-content; margin:6px auto; }
.sim-runtime{ margin-top:6px; font-weight:700; font-size:.88rem; color:var(--muted); line-height:1.25; min-height:20px; }
.sim-runtime-line{
  display:block;
  white-space:nowrap;
}
.wan-card{
  position:relative;
}
.wan-link-icon-wrap{
  position:relative;
  height:40px;
  margin:6px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wan-link-icon{
  font-size:30px;
  line-height:1;
  color:#9ca3af;
}
.wan-state-connected .wan-link-icon{ color:#16a34a; }
.wan-state-off .wan-link-icon{ color:#dc2626; }
.wan-state-error .wan-link-icon,
.wan-state-not_connected .wan-link-icon{ color:#9ca3af; }
.wan-state-pending .wan-link-icon{
  color:#facc15;
  animation:pending-warm-icon 1s ease-in-out infinite;
}
.wan-link-error-cross{
  position:absolute;
  top:-1px;
  right:calc(50% - 22px);
  color:#6b7280;
  font-weight:900;
  font-size:16px;
  line-height:1;
}
.wan-gear,
.wifi-gear,
.navcfg-open-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.navcfg-open-btn{
  position:static;
  top:auto;
  right:auto;
  flex:0 0 auto;
}
.wan-gear:hover,
.wifi-gear:hover,
.navcfg-open-btn:hover{
  background:rgba(0,0,0,.05);
}
.wan-gear i,
.wifi-gear i,
.navcfg-open-btn i{
  font-size:18px;
  color:var(--svp-ink);
}
.wifi-card{
  position:relative;
}
.wifi-card .wifi-sim-bars{
  margin:6px auto;
}
.wifi-card .wifi-sim-bars .signal-bar{
  background:#fff;
  border:1px solid #d1d5db;
}
.wifi-card .wifi-sim-bars .signal-bar.active{
  background:#16a34a;
  border-color:#16a34a;
}
.wifi-card.wifi-state-pending .wifi-sim-bars .signal-bar{
  background:#fcd34d;
  border-color:#fcd34d;
  animation:pending-warm-bar 1s ease-in-out infinite;
}
.wifi-mode-icon-wrap{
  height:40px;
  margin:6px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wifi-mode-icon{
  font-size:29px;
  line-height:1;
}
.wifi-mode-icon.on{ color:#16a34a; }
.wifi-mode-icon.off{ color:#9ca3af; }
.wifi-mode-icon.pending{
  color:#facc15;
  animation:pending-warm-icon 1s ease-in-out infinite;
}
.sim-state-connected .signal-bars-vertical .signal-bar.active{ background:#16a34a; }

/* Dialing animation: 0.2s por barra */
.signal-bars-vertical.state-dialing .signal-bar,
.signal-bars-vertical.state-pending .signal-bar{ background:#d1d5db; }
.signal-bars-vertical.state-dialing .signal-bar.bar1,
.signal-bars-vertical.state-pending .signal-bar.bar1{
  animation: sim-dial-step 0.8s linear infinite;
  animation-delay: 0s;
}
.signal-bars-vertical.state-dialing .signal-bar.bar2,
.signal-bars-vertical.state-pending .signal-bar.bar2{
  animation: sim-dial-step 0.8s linear infinite;
  animation-delay: 0.2s;
}
.signal-bars-vertical.state-dialing .signal-bar.bar3,
.signal-bars-vertical.state-pending .signal-bar.bar3{
  animation: sim-dial-step 0.8s linear infinite;
  animation-delay: 0.4s;
}
.signal-bars-vertical.state-dialing .signal-bar.bar4,
.signal-bars-vertical.state-pending .signal-bar.bar4{
  animation: sim-dial-step 0.8s linear infinite;
  animation-delay: 0.6s;
}
@keyframes sim-dial-step{
  0%, 18% { background:#facc15; }
  19%, 100% { background:#d1d5db; }
}
@keyframes pending-warm-icon{
  0%, 100% { color:#fcd34d; }
  50% { color:#f59e0b; }
}
@keyframes pending-warm-bar{
  0%, 100% {
    background:#fcd34d;
    border-color:#fcd34d;
  }
  50% {
    background:#f59e0b;
    border-color:#f59e0b;
  }
}

.sim-state-error .signal-bars-vertical .signal-bar,
.sim-state-not_connected .signal-bars-vertical .signal-bar,
.sim-state-off .signal-bars-vertical .signal-bar{
  background:#d1d5db;
}
.sim-state-pending .connection-type,
.wan-state-pending .connection-type,
.wifi-card.wifi-state-pending .connection-type{
  color:#b45309;
  font-weight:800;
}
.sim-state-off .connection-type{
  color:#6b7280;
  font-weight:800;
}
.signal-error-cross{
  position:absolute;
  top:-1px;
  right:-10px;
  color:#dc2626;
  font-weight:900;
  font-size:18px;
  line-height:1;
}
.sim-runtime.runtime-dialing{ color:#b45309; }
.sim-runtime.runtime-error{ color:#dc2626; }
.sim-runtime.runtime-not_connected{ color:#6b7280; }
.sim-runtime.runtime-off{ color:#6b7280; }
.sim-runtime.runtime-pending{ color:#b45309; }
.status-chip{
  display:inline-block; padding:3px 10px; border-radius:999px; font-weight:700; font-size:.9rem;
  background: var(--ok); color:#fff;
}
.status-chip.connected{ background:var(--ok); }
.status-chip.disconnected{ background: var(--bad); }
.status-chip.pending{ background:#b45309; }
.status-chip.off{ background:#475569; }
.status-chip.error{ background:#6b7280; }
/* Prevent parent .wan-runtime-item span rule from overriding chip colour/display */
.wan-runtime-item .status-chip{ display:inline-block; color:#fff; }

/* WAN details */
.wan-details{ margin-top: 10px; line-height:1.25; }

/* WAN runtime in Configuration tab */
.wan-runtime-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
}
.wan-runtime-title{
  color:var(--muted);
  font-size:.88rem;
  font-weight:700;
}
.wan-runtime-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 10px;
}
.wan-runtime-item{
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
}
.wan-runtime-item span{
  display:block;
  color:var(--muted);
  font-size:.74rem;
  font-weight:700;
  margin-bottom:4px;
}
.wan-runtime-item strong{
  display:block;
  color:var(--ink);
  font-size:.92rem;
  word-break:break-word;
}

/* WAN modal from Network Interfaces card */
body.modal-open{
  overflow:hidden;
}
.nav-section-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.nav-section-head h2{
  margin:0;
}
.navcfg-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.navcfg-backdrop.open{
  display:flex;
}
.navcfg-modal{
  width:min(760px, 96vw);
  max-height:90vh;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.2);
  color:var(--ink);
}
.navcfg-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--line);
}
.navcfg-title{
  margin:0;
  font-size:1.1rem;
  color:var(--svp);
  font-weight:900;
}
.navcfg-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.86rem;
  font-weight:700;
}
.navcfg-body{
  padding:12px 16px 8px;
}
.navcfg-body #gps-map-config-card{
  margin:0;
  border-color:#c8d3df;
  box-shadow:none;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.navcfg-body #gps-track-config-card{
  margin-top:14px;
  border-color:#c8d3df;
  box-shadow:none;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.navcfg-body #gps-map-config-card h3{
  margin-bottom:12px;
  padding-bottom:8px;
}
.navcfg-body #gps-track-config-card h3{
  margin-bottom:12px;
  padding-bottom:8px;
}
.navcfg-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding:10px 16px 14px;
}
.navcfg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  height:42px;
  padding:0 16px;
  font-weight:900;
  cursor:pointer;
}
.navcfg-btn.primary{
  background:var(--svp);
  color:#fff;
}
.navcfg-btn.secondary{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
}
.navcfg-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}
.intercom-events-head{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--surface);
}
.intercom-events-head-copy{
  flex:1 1 auto;
  min-width:0;
}
.intercom-events-head-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  margin-left:auto;
  flex-wrap:wrap;
}
.wancfg-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.wancfg-backdrop.open{
  display:flex;
}
.wancfg-modal{
  --wancfg-field-w: 290px;
  position:relative;
  width:min(780px, 96vw);
  max-height:90vh;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.2);
  color:var(--ink);
}
.wancfg-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--line);
}
.wancfg-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.wancfg-enable-inline{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
.wancfg-enable-label{
  font-size:.82rem;
  font-weight:900;
  color:var(--muted);
}
.wancfg-title{
  margin:0;
  font-size:1.1rem;
  color:var(--svp);
  font-weight:900;
}
.wancfg-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.86rem;
  font-weight:700;
}
.wancfg-body{
  padding:12px 16px 8px;
}
.wancfg-loading{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.88);
  border-radius:16px;
  z-index:30;
  padding:20px;
  text-align:center;
}
.wancfg-loading.show{
  display:flex;
}
.wancfg-loading-box{
  display:grid;
  justify-items:center;
  gap:12px;
  color:var(--ink);
  font-weight:900;
}
.wancfg-loading-spinner{
  width:44px;
  height:44px;
  border-radius:50%;
  border:4px solid #dbe7ff;
  border-top-color:var(--svp);
  animation:wancfg-modal-spin .85s linear infinite;
}
.wancfg-loading-text{
  margin:0;
  font-size:.96rem;
  color:var(--ink);
}
@keyframes wancfg-modal-spin{
  to { transform: rotate(360deg); }
}
.wancfg-link-status-block{
  margin-bottom:10px;
}
.wancfg-block{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
}
.wancfg-block + .wancfg-block{
  margin-top:12px;
}
.wancfg-main-block{
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.wancfg-runtime-block{
  border-radius:12px;
  background:#f8fbff;
  padding:10px 12px;
  margin-top:10px;
}
.wancfg-runtime-block.is-hidden{ display:none; }
.wancfg-mode-row{
  width:min(var(--wancfg-field-w), 100%);
}
.wancfg-static-fields{
  margin-top:10px;
  border-radius:12px;
  background:#f8fbff;
  padding:10px 12px;
}
.wancfg-static-fields.is-hidden{
  display:none;
}
.wancfg-link-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fbff;
  padding:9px 11px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:66px;
  width:min(320px, 100%);
}
.wancfg-link-icon-wrap{
  position:relative;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:#9ca3af;
}
.wancfg-link-icon{
  font-size:25px;
  line-height:1;
}
.wancfg-link-error-cross{
  position:absolute;
  top:0;
  right:0;
  transform:translate(40%, -30%);
  display:none;
  color:#6b7280;
  font-size:14px;
  font-weight:900;
  line-height:1;
}
.wancfg-link-error-cross.is-visible{ display:block; }
.wancfg-link-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.wancfg-link-label{
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.wancfg-link-card.state-connected .wancfg-link-icon-wrap{ color:#16a34a; }
.wancfg-link-card.state-off .wancfg-link-icon-wrap{ color:#dc2626; }
.wancfg-link-card.state-error .wancfg-link-icon-wrap,
.wancfg-link-card.state-not_connected .wancfg-link-icon-wrap,
.wancfg-link-card.state-pending .wancfg-link-icon-wrap{ color:#9ca3af; }
.wancfg-static-grid{
  margin-top:0;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.wancfg-body .wancfg-static-item label{
  display:block;
  color:var(--muted);
  font-size:.74rem;
  font-weight:700;
  margin-bottom:6px;
}
.wancfg-static-item input{
  width:100%;
}
.wancfg-body .form-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.wancfg-body .form-row + .form-row{
  margin-top:6px;
}
.wancfg-body input[type="text"],
.wancfg-body input[type="password"],
.wancfg-body input[type="number"],
.wancfg-body select{
  width:100%;
  max-width:100%;
  font-size:16px;
}
.wancfg-body label{
  font-size:.88rem;
  font-weight:800;
}
.wancfg-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding:10px 16px 14px;
}
.wancfg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  height:42px;
  padding:0 16px;
  font-weight:900;
  cursor:pointer;
}
.wancfg-btn.primary{
  background:var(--svp);
  color:#fff;
}
.wancfg-btn.secondary{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
}
.wancfg-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}
.wancfg-runtime-block .wan-runtime-grid{
  width:100%;
}

/* WiFi modal from Network Interfaces card */
.wificfg-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.wificfg-backdrop.open{
  display:flex;
}
.wificfg-modal{
  --wificfg-field-w: 290px;
  width:min(840px, 96vw);
  max-height:90vh;
  overflow:auto;
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.2);
  color:var(--ink);
}
.wificfg-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line);
}
.wificfg-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.wificfg-enable-inline{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
.wificfg-enable-label{
  font-size:.82rem;
  font-weight:900;
  color:var(--muted);
}
.wificfg-title{
  margin:0;
  font-size:1.1rem;
  color:var(--svp);
  font-weight:900;
}
.wificfg-subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.9rem;
  font-weight:700;
}
.wificfg-close{
  height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
}
.wificfg-tabs{
  margin:12px 16px 0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px;
}
.wificfg-tab{
  border:0;
  background:transparent;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:900;
  color:var(--muted);
}
.wificfg-tab.active{
  background:var(--svp);
  color:#fff;
}
.wificfg-panel{
  margin:12px 16px 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  display:none;
}
.wificfg-panel.active{
  display:block;
}
.wificfg-panel .form-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.wificfg-panel input[type="text"],
.wificfg-panel input[type="password"],
.wificfg-panel select{
  width:min(var(--wificfg-field-w), 100%);
  max-width:100%;
}
.wificfg-panel .field-pw{
  width:min(var(--wificfg-field-w), 100%);
}
.wificfg-password-hint{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
}
.wificfg-block{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:12px;
}
.wificfg-runtime-block{
  border:1px dashed #cfd9e4;
  border-radius:12px;
  background:#f8fbff;
  padding:12px;
  margin-top:12px;
}
.wificfg-runtime-block h4{
  margin:0;
  color:var(--svp-ink);
  font-size:.95rem;
}
.wificfg-runtime-note{
  margin:6px 0 10px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}
.wificfg-runtime-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  width:min(calc(var(--wificfg-field-w) * 1.95), 100%);
}
.wificfg-runtime-item{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:8px 10px;
}
.wificfg-runtime-item span{
  display:block;
  color:var(--muted);
  font-size:.74rem;
  font-weight:800;
  margin-bottom:4px;
}
.wificfg-runtime-item strong{
  display:block;
  color:var(--ink);
  font-size:.92rem;
  word-break:break-word;
}
.wificfg-block + .wificfg-block{
  margin-top:12px;
}
.wificfg-block h4{
  margin:0 0 8px;
  color:var(--svp-ink);
  font-size:.95rem;
}
.wificfg-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 12px;
  justify-items:start;
}
.wificfg-band-switch{
  position:relative;
  display:inline-block;
  width:220px;
  max-width:100%;
  cursor:pointer;
  user-select:none;
}
.wificfg-band-switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.wificfg-band-track{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:0;
  height:40px;
  border-radius:999px;
  border:1px solid #cfdae6;
  background:#eef3f8;
  overflow:hidden;
}
.wificfg-band-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:calc(50% - 2px);
  height:calc(100% - 4px);
  border-radius:999px;
  background:var(--svp);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:transform .2s ease;
}
.wificfg-band-text{
  position:relative;
  z-index:1;
  text-align:center;
  font-size:.9rem;
  font-weight:800;
  color:#4b5563;
}
.wificfg-band-switch input:checked + .wificfg-band-track .wificfg-band-thumb{
  transform:translateX(100%);
}
.wificfg-band-switch input:not(:checked) + .wificfg-band-track .wificfg-band-text.left{
  color:#fff;
}
.wificfg-band-switch input:checked + .wificfg-band-track .wificfg-band-text.right{
  color:#fff;
}
.wificfg-scan-row{
  margin-top:10px;
}
.wificfg-scan-btn{
  width:min(var(--wificfg-field-w), 100%);
  height:40px;
  border:1px solid #c9d6e4;
  border-radius:11px;
  background:#f7fbff;
  color:var(--svp-ink);
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
}
.wificfg-scan-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}
.wificfg-scan-spinner{
  display:none;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid #dbe7ff;
  border-top-color:var(--svp);
  animation:wificfg-modal-spin .75s linear infinite;
}
.wificfg-scan-btn.is-loading .wificfg-scan-spinner{
  display:inline-block;
}
.wificfg-networks-modal{
  position:absolute;
  inset:20px;
  border-radius:14px;
  border:1px solid #d4e0ec;
  background:linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow:0 20px 40px rgba(0,0,0,.2);
  z-index:40;
  display:none;
  flex-direction:column;
  overflow:hidden;
}
.wificfg-networks-modal.open{
  display:flex;
}
.wificfg-networks-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px 12px;
  border-bottom:1px solid #d8e4f0;
  background:rgba(255,255,255,.88);
}
.wificfg-networks-head h4{
  margin:0;
  color:var(--svp-ink);
  font-size:1rem;
}
.wificfg-networks-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}
.wificfg-networks-body{
  display:flex;
  flex-direction:column;
  min-height:200px;
  padding:12px 14px 14px;
}
.wificfg-networks-loading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px dashed #c6d8ea;
  border-radius:11px;
  padding:12px;
  background:#fff;
  color:#334155;
  font-weight:800;
}
.wificfg-networks-loading.show{
  display:flex;
}
.wificfg-networks-empty{
  margin:10px 0 0;
  color:#475569;
  font-weight:700;
}
.wificfg-networks-list{
  margin-top:10px;
  display:grid;
  gap:8px;
  overflow:auto;
  max-height:45vh;
}
.wificfg-networks-list.is-loading{
  opacity:.55;
}
.wificfg-network-item{
  width:100%;
  border:1px solid #d3dce8;
  border-radius:11px;
  background:#fff;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
}
.wificfg-network-item:hover{
  border-color:#89a9ce;
  box-shadow:0 3px 10px rgba(77,170,212,.18);
}
.wificfg-network-item.active{
  border-color:var(--svp);
  background:#edf7fe;
}
.wificfg-network-left{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.wificfg-network-ssid{
  color:#0f172a;
  font-size:.94rem;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  max-width:340px;
}
.wificfg-network-security{
  margin-top:3px;
  color:#64748b;
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.wificfg-network-security.secured{
  color:#155e75;
}
.wificfg-network-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.wificfg-network-signal{
  color:#1f2937;
  font-size:.8rem;
  font-weight:800;
  min-width:56px;
  text-align:right;
}
.wificfg-net-bars{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:16px;
}
.wificfg-net-bar{
  width:4px;
  border-radius:3px;
  background:#cbd5e1;
}
.wificfg-net-bar.bar1{ height:5px; }
.wificfg-net-bar.bar2{ height:8px; }
.wificfg-net-bar.bar3{ height:11px; }
.wificfg-net-bar.bar4{ height:14px; }
.wificfg-net-bar.active{
  background:#16a34a;
}
.wificfg-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding:12px 16px 16px;
  margin-top:12px;
}
.wificfg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  height:42px;
  padding:0 16px;
  font-weight:900;
  cursor:pointer;
}
.wificfg-btn.primary{
  background:var(--svp);
  color:#fff;
}
.wificfg-btn.secondary{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
}
.wificfg-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}
.wificfg-loading{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.88);
  border-radius:16px;
  z-index:30;
  padding:20px;
  text-align:center;
}
.wificfg-loading.show{
  display:flex;
}
.wificfg-loading-box{
  display:grid;
  justify-items:center;
  gap:12px;
  color:var(--ink);
  font-weight:900;
}
.wificfg-loading-spinner{
  width:44px;
  height:44px;
  border-radius:50%;
  border:4px solid #dbe7ff;
  border-top-color:var(--svp);
  animation:wificfg-modal-spin .85s linear infinite;
}
.wificfg-loading-text{
  margin:0;
  font-size:.96rem;
  color:var(--ink);
}
@keyframes wificfg-modal-spin{
  to { transform: rotate(360deg); }
}

/* ============ GPS ============ */
.gps-grid{
  display:grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.gps-track-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.navcfg-body #gps-track-config-card .gps-track-toolbar{
  margin-bottom:0;
}
.gps-track-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.gps-track-toolbar input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.gps-track-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gps-track-btn:hover{
  transform:translateY(-1px);
}
.gps-track-btn:disabled{
  opacity:.68;
  cursor:not-allowed;
  transform:none;
}
.gps-track-btn-record{
  background:#0f172a;
  color:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.18);
}
.gps-track-btn-record.is-recording{
  background:#b91c1c;
  box-shadow:0 10px 22px rgba(185,28,28,.22);
}
.gps-track-btn-secondary{
  background:#fff;
  border-color:var(--line);
  color:var(--ink);
}
.gpx-overlay-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.gpx-import-btn{
  box-shadow:0 4px 12px rgba(77,170,212,.22);
}
.gpx-overlay-status-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.gpx-overlay-status-row[hidden]{ display:none; }
.gpx-overlay-filename{
  font-size:.88rem;
  font-weight:700;
  color:var(--ink);
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gpx-clear-btn{
  height:34px;
  padding:0 10px;
  font-size:.82rem;
}
html.theme-dark .gpx-import-btn{
  box-shadow:0 4px 14px rgba(77,170,212,.15);
}
.gps-track-status{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
  color:#334155;
  font-size:.92rem;
  font-weight:800;
}
.gps-track-status__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#94a3b8;
  box-shadow:0 0 0 4px rgba(148,163,184,.16);
}
.gps-track-status.is-recording .gps-track-status__dot{
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.18);
}
.gps-track-status.is-warning .gps-track-status__dot{
  background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.2);
}
.gps-track-status__count{
  padding:4px 9px;
  border-radius:999px;
  background:#e2e8f0;
  color:#0f172a;
  font-family:"SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.82rem;
  min-width:92px;
  text-align:center;
}
.gps-track-status.is-recording .gps-track-status__count{
  background:#fee2e2;
  color:#991b1b;
}
.gps-track-status.is-warning .gps-track-status__count{
  background:#fef3c7;
  color:#92400e;
}
.gps-track-config-note{
  margin:10px 0 0;
  color:#64748b;
  font-size:.84rem;
  line-height:1.4;
}
.gps-left-col{
  display:grid;
  gap:12px;
}
.gps-section{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px;
}
.gps-section p{
  margin:0 0 7px;
  font-variant-numeric: tabular-nums;
}
.gps-section p:last-child{
  margin-bottom:0;
}
.gps-telemetry-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.gps-telemetry-label{
  color:#475569;
  font-weight:700;
}
.gps-telemetry-value{
  color:#0f172a;
  font-weight:800;
  font-family:"SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
.gps-instruments{
  background:linear-gradient(180deg, #171b21 0%, #0e1116 100%);
  border:1px solid #29313c;
  border-radius:12px;
  padding:12px;
  color:#e2e8f0;
  box-shadow:inset 0 0 18px rgba(0,0,0,.28), 0 1px 4px rgba(15,23,42,.08);
}
.gps-instruments-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px 14px;
}
.flight-indicator{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  justify-items:center;
  align-items:center;
  gap:12px;
  min-height:236px;
  width:100%;
  box-shadow:none;
}
.instrument-chassis{
  --gps-instrument-max-size: 250px;
  position:relative;
  width:min(100%, var(--gps-instrument-max-size));
  aspect-ratio:1 / 1;
  padding:18px;
  background:linear-gradient(135deg, #4b4e53 0%, #2a2c2f 100%);
  border-radius:12px;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.15),
    inset -1px -1px 2px rgba(0,0,0,0.8),
    0 12px 20px rgba(0,0,0,0.55);
  border:1px solid #090a0c;
  overflow:hidden;
}
.instrument-chassis::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  box-shadow:inset 0 6px 15px rgba(0,0,0,1);
  pointer-events:none;
  z-index:4;
}
.screw{
  position:absolute;
  width:16px;
  height:16px;
  background:linear-gradient(135deg, #b0b0b0 0%, #4a4a4a 100%);
  border-radius:50%;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.5),
    inset 0 -1px 2px rgba(0,0,0,0.9),
    0 2px 4px rgba(0,0,0,0.9);
  z-index:6;
}
.screw::before,
.screw::after{
  content:"";
  position:absolute;
  background:rgba(0, 0, 0, 0.82);
  box-shadow:0 1px 0 rgba(255,255,255,0.15);
}
.screw::before{
  top:2px;
  left:7px;
  width:2px;
  height:12px;
}
.screw::after{
  top:7px;
  left:2px;
  width:12px;
  height:2px;
}
.screw.tl{ top:10px; left:10px; transform:rotate(15deg); }
.screw.tr{ top:10px; right:10px; transform:rotate(75deg); }
.screw.bl{ bottom:10px; left:10px; transform:rotate(120deg); }
.screw.br{ bottom:10px; right:10px; transform:rotate(-35deg); }
.flight-indicator__dial{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-radius:50%;
  overflow:hidden;
}
.flight-indicator__dial canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  border-radius:50%;
}
.flight-indicator__dial--skyhawk .instrument{
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  transform:translate(-50%, -50%) scale(var(--gps-skyhawk-dial-scale));
  transform-origin:center center;
  filter:contrast(1.16) saturate(1.12) brightness(1.02);
}
.flight-indicator__dial--gauge{
  border-radius:50%;
}
.flight-indicator__dial--skyhawk.is-missing{
  opacity:.86;
}
.flight-indicator__dial--gauge canvas.is-missing{
  opacity:.86;
}
.flight-indicator__meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
}
.flight-indicator__name{
  font-size:.86rem;
  letter-spacing:.04em;
  color:#d8dee8;
  font-weight:400;
  text-transform:none;
  text-align:center;
}
.flight-indicator__readout{
  font-size:.79rem;
  color:#0f172a;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
body.trackplay-open{
  overflow:hidden;
}
.trackplay-backdrop{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:8px;
  background:rgba(2,6,23,.7);
}
.trackplay-backdrop.open{
  display:flex;
}
.trackplay-modal{
  width:min(1760px, 99vw);
  height:min(96dvh, calc(100dvh - 10px));
  max-height:none;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  overflow:hidden;
  background:linear-gradient(180deg, #5b5f65 0%, #4d5259 100%);
  border:1px solid #3c4249;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(2,6,23,.34);
}
.trackplay-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.trackplay-head > div{
  min-width:0;
}
.trackplay-title{
  margin:0;
  color:#e6f2ff;
  font-size:1.1rem;
  font-weight:900;
}
.trackplay-subtitle{
  margin:4px 0 0;
  color:#c6d4e5;
  font-size:.79rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.trackplay-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid #687383;
  border-radius:10px;
  background:#2f353d;
  color:#eef6ff;
  cursor:pointer;
}
.trackplay-body{
  display:block;
  min-height:0;
  overflow:hidden;
  padding:8px;
}
.trackplay-layout{
  --trackplay-panel-width:max(146px, min(clamp(206px, 19vw, 290px), calc((100dvh - 196px) / 4)));
  display:grid;
  grid-template-columns:var(--trackplay-panel-width) minmax(0, 1fr);
  gap:6px;
  align-items:stretch;
  height:100%;
  min-height:0;
}
.trackplay-side{
  --trackplay-chassis-size:var(--trackplay-panel-width);
  --trackplay-chassis-padding:16px;
  --trackplay-screw-size:14px;
  --trackplay-screw-offset:10px;
  --trackplay-screw-slot-size:2px;
  --trackplay-label-gap:6px;
  --trackplay-label-height:15px;
  --gps-skyhawk-dial-scale:1.19;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:0;
  background:#55585d;
  border:1px solid #3d4248;
  border-radius:14px;
  overflow:hidden;
}
.trackplay-telemetry-table{
  display:grid;
  grid-template-columns:1fr;
  gap:1px 0;
  padding:4px 7px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.trackplay-telemetry-row{
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.75rem;
  line-height:1.14;
}
.trackplay-telemetry-label{
  display:inline-flex;
  align-items:center;
  min-width:3.4ch;
  color:#8fb6db;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:0;
}
.trackplay-telemetry-label::before{
  content:attr(data-short);
  font-size:.61rem;
}
.trackplay-telemetry-value{
  color:#e6f2ff;
  font-weight:800;
  font-size:.76rem;
  font-family:"SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  text-overflow:ellipsis;
  overflow:hidden;
}
.trackplay-instruments{
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#55585d;
}
.trackplay-instruments-grid{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:repeat(4, minmax(0, 1fr));
  gap:0;
  padding:0;
  align-content:stretch;
  align-items:stretch;
}
.trackplay-instruments .flight-indicator{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  justify-items:stretch;
  align-content:stretch;
  align-items:stretch;
  padding:0;
  gap:var(--trackplay-label-gap);
  margin:0;
  overflow:hidden;
}
.trackplay-instruments .instrument-chassis{
  width:min(100%, var(--trackplay-chassis-size));
  height:min(100%, var(--trackplay-chassis-size));
  max-width:100%;
  max-height:100%;
  padding:var(--trackplay-chassis-padding);
  justify-self:center;
  align-self:center;
}
.trackplay-instruments .instrument-chassis::after{
  inset:var(--trackplay-chassis-padding);
}
.trackplay-instruments .screw{
  width:var(--trackplay-screw-size);
  height:var(--trackplay-screw-size);
}
.trackplay-instruments .screw::before{
  top:calc(var(--trackplay-screw-size) * 0.125);
  left:calc(50% - (var(--trackplay-screw-slot-size) / 2));
  width:var(--trackplay-screw-slot-size);
  height:calc(var(--trackplay-screw-size) * 0.75);
}
.trackplay-instruments .screw::after{
  top:calc(50% - (var(--trackplay-screw-slot-size) / 2));
  left:calc(var(--trackplay-screw-size) * 0.125);
  width:calc(var(--trackplay-screw-size) * 0.75);
  height:var(--trackplay-screw-slot-size);
}
.trackplay-instruments .screw.tl{
  top:var(--trackplay-screw-offset);
  left:var(--trackplay-screw-offset);
}
.trackplay-instruments .screw.tr{
  top:var(--trackplay-screw-offset);
  right:var(--trackplay-screw-offset);
}
.trackplay-instruments .screw.bl{
  bottom:var(--trackplay-screw-offset);
  left:var(--trackplay-screw-offset);
}
.trackplay-instruments .screw.br{
  bottom:var(--trackplay-screw-offset);
  right:var(--trackplay-screw-offset);
}
.trackplay-instruments .flight-indicator__dial{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  margin:0;
  padding:0;
}
.trackplay-instruments .flight-indicator__meta{
  display:flex;
  min-height:var(--trackplay-label-height);
}
.trackplay-instruments .flight-indicator__name{
  font-size:.73rem;
  letter-spacing:.03em;
}
.trackplay-main{
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  gap:8px;
  border-radius:12px;
  border:1px solid #3d4248;
  background:#55585d;
  padding:8px;
}
#track-playback-map{
  width:100%;
  height:100%;
  min-height:0;
  border:1px solid #3d4248;
  border-radius:14px;
  background:#55585d;
  overflow:hidden;
}
.trackplay-controls{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:10px;
  align-items:center;
  padding:6px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:linear-gradient(180deg, #646a72 0%, #555b63 100%);
}
.trackplay-controls .gps-track-btn-secondary{
  background:#2d333a;
  border-color:#6a7585;
  color:#e8f2ff;
}
.trackplay-slider-wrap{
  display:grid;
  gap:6px;
  min-width:0;
}
.trackplay-slider-wrap input[type="range"]{
  width:100%;
}
.trackplay-time-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  color:#e4edf8;
  font-size:.8rem;
  font-weight:800;
}
.trackplay-vehicle-marker{
  background:transparent;
  border:0;
}
.trackplay-vehicle-marker__wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.trackplay-vehicle-marker__img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(15,23,42,.35));
}
.trackplay-speed{
  display:inline-flex;
  align-items:center;
  justify-self:end;
  gap:5px;
  color:#ebf4ff;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.trackplay-speed select{
  width:5.3em;
  min-width:5.3em;
  max-width:5.3em;
  height:30px;
  padding:3px 20px 3px 6px;
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  background:#2d333a;
  border-color:#6a7585;
  color:#edf5ff;
}
#gps-map-config-card .gps-ui-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#gps-map-config-card .gps-ui-form .form-row{
  margin:0;
}
#gps-map-config-card .gps-ui-toggle-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 22px;
  align-items:start;
}
#gps-map-config-card .gps-ui-field{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
#gps-map-config-card .gps-ui-toggle-field{
  gap:6px;
}
#gps-map-config-card .gps-ui-toggle-line{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}
#gps-map-config-card .gps-ui-toggle-line label{
  margin:0;
}
#gps-map-config-card .gps-ui-toggle-line .switch{
  margin-left:2px;
}
#gps-map-config-card .gps-ui-units-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px 16px;
}
#gps-map-config-card .gps-ui-units-grid select{
  width:100%;
  max-width:none;
}
.gps-ui-help{
  margin:0;
  color:#64748b;
  font-size:.82rem;
  line-height:1.35;
}
.gps-ui-note{
  margin-top:2px;
  color:#64748b;
  font-size:.86rem;
}
#map{
  height: 500px;
  width: 100%;
  border-radius:12px;
  border:1px solid var(--line);
  min-height:420px;
}
/* Leaflet markers (rutas locales) */
.leaflet-container .leaflet-marker-icon {
  background-image: url('../vendor/leaflet/images/marker-icon.png');
}
.leaflet-container .leaflet-marker-shadow {
  background-image: url('../vendor/leaflet/images/marker-shadow.png');
}
.leaflet-marker-icon.heli-marker{
  background:transparent;
  border:0;
}
.heli-marker__wrap{
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.heli-marker__img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
  mix-blend-mode:normal;
}
.leaflet-marker-icon.gps-trail-arrow-icon{
  background:transparent;
  border:0;
}
.gps-trail-arrow{
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:12px solid rgba(14,165,233,.92);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.32));
}
/* Tooltip permanente del marcador (nombre del dispositivo) */
.leaflet-tooltip.map-label{
  background:#111827F2; color:#fff; border:1px solid #ffffff3d;
  border-radius:12px; padding:2px 8px; font-weight:700; font-size:.85rem;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* ============ SWITCH (iOS style) ============ */
.switch{ position:relative; display:inline-block; width:44px; height:24px; margin-left:8px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; inset:0; background:#cbd5e1; border-radius:24px; transition:.2s;
}
.switch .slider:before{
  content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background:#22c55e; }
.switch input:checked + .slider:before{ transform:translateX(20px); }
.switch input:disabled + .slider{ background:#e5e7eb; opacity:.6; }
.switch input:disabled + .slider:before{ background:#f3f4f6; }

@media (max-width: 900px){
  #gps-map-config-card .gps-ui-toggle-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .gps-track-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .gps-track-status{
    margin-left:0;
  }
  #gps-map-config-card .gps-ui-units-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  #gps-map-config-card .gps-ui-units-grid .gps-ui-field:last-child{
    grid-column:1 / -1;
  }
  .gps-grid{
    grid-template-columns:1fr;
  }
  #map{
    height:460px;
  }
  .navcfg-head{
    flex-direction:column;
  }
  .intercom-events-head{
    flex-direction:row;
    align-items:flex-start;
  }
  .intercom-events-head-actions{
    max-width:44%;
  }
  .trackplay-layout{
    --trackplay-panel-width:max(136px, min(clamp(184px, 24vw, 250px), calc((100dvh - 194px) / 4)));
  }
  .trackplay-side{
    --trackplay-chassis-padding:16px;
    --trackplay-screw-size:14px;
    --trackplay-screw-offset:10px;
    --trackplay-label-height:13px;
    --gps-skyhawk-dial-scale:1.19;
  }
  .trackplay-controls{
    padding:5px;
  }
  .trackplay-controls .gps-track-btn{
    min-height:38px;
    padding:0 12px;
  }
}
@media (max-width: 520px){
  .intercom-events-head{
    flex-direction:column;
  }
  .intercom-events-head-actions{
    max-width:none;
    width:100%;
  }
  #gps-map-config-card .gps-ui-units-grid{
    grid-template-columns:1fr;
  }
  #gps-map-config-card .gps-ui-units-grid .gps-ui-field:last-child{
    grid-column:auto;
  }
  .gps-instruments-grid{
    grid-template-columns:1fr;
  }
  .flight-indicator{
    max-width:220px;
  }
  .instrument-chassis{
    --gps-instrument-max-size: 220px;
  }
  #map{
    height:380px;
  }
  .navcfg-actions{
    justify-content:stretch;
  }
  .navcfg-btn{
    flex:1 1 160px;
  }
  .gps-track-btn{
    flex:1 1 180px;
  }
  .trackplay-layout{
    --trackplay-panel-width:auto;
    grid-template-columns:1fr;
  }
  .trackplay-side{
    --trackplay-chassis-padding:10px;
    --trackplay-screw-size:10px;
    --trackplay-screw-offset:7px;
    --trackplay-label-height:12px;
    --gps-skyhawk-dial-scale:1.12;
  }
  .trackplay-telemetry-table{
    padding:3px 5px;
  }
  .trackplay-telemetry-row{
    font-size:.69rem;
  }
  .trackplay-telemetry-label::before{
    font-size:.57rem;
  }
  .trackplay-telemetry-value{
    font-size:.68rem;
  }
  .trackplay-instruments-grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
  }
  .trackplay-instruments .flight-indicator{
    min-height:0;
    gap:3px;
  }
  .trackplay-instruments .instrument-chassis{
    width:min(100%, 180px);
    padding:10px;
  }
  .trackplay-instruments .instrument-chassis::after{
    inset:10px;
  }
  .trackplay-controls{
    gap:6px;
    padding:4px;
  }
  .trackplay-controls .gps-track-btn{
    min-height:34px;
    padding:0 9px;
    gap:4px;
  }
  .trackplay-controls .gps-track-btn span{
    font-size:.8rem;
  }
  .trackplay-time-row{
    font-size:.72rem;
  }
  .trackplay-speed{
    gap:4px;
  }
  .trackplay-speed select{
    width:5.1em;
    min-width:5.1em;
    max-width:5.1em;
    height:28px;
    font-size:.72rem;
  }
}

/* ============ LOGIN ============ */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
}
.login-card{
  width:min(440px, 92vw); background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.06); padding:26px 28px;
}
.login-form{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.login-form .form-row{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.login-header{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:6px; }
.login-logo{ width:120px; opacity:.95; }
.login-title{ margin:0; font-size:26px; color:var(--svp); text-align:center; }
.login-label{ display:block; margin:12px 0 6px; font-weight:800; color:var(--ink); text-align:center; }
.login-form .login-input,
.login-form .field-pw{
  width:min(220px, 100%);
}
.login-input{
  width:100%; height:44px; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; background:#fff; color:var(--ink); font-size:16px; text-align:center;
}
.login-btn{ width:auto; min-width:0; height:42px; padding:0 18px; margin-top:16px; }
.alert.error{
  background:#ffe9e6; color:#8c2f25; border:1px solid #ffd0c9;
  border-radius:10px; padding:10px 12px; margin:10px 0 14px;
}

/* ============ MISC ============ */
footer button{ background:var(--svp); }
footer button:hover{ filter:brightness(.95); }

/* Alineación simétrica en tarjetas */
.cellular-section .sim-card h4,
.wan-card h4,
.wifi-card h4{ margin:10px 0 8px; }

/* ==== añadidos/ajustes para esta iteración ==== */

/* Ocultar completamente la tarjeta LAN */
.is-hidden { display: none !important; }

/* System Configuration compacto: 3 tarjetas por fila cuando hay espacio */
.system-config{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:stretch;
  gap:16px;
  padding-top:16px;
}
.system-config > .system-header{ grid-column:1 / -1; margin-bottom:8px; }
.mission-config > .system-header{ margin-bottom:8px; }
.system-config > .dual-section{
  margin-top:0;
  min-height:280px;
  height:100%;
  border-color:#c8d3df;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}

.system-config > .dual-section h3{
  border-bottom-color:#cfdae6;
}

#webserver-access-card .webserver-block{
  border:1px solid #cfdae6;
  border-radius:12px;
  padding:10px;
  background:#fff;
}
#webserver-access-card .field-pw{
  width:100%;
}
#webserver-access-card input[type="text"],
#webserver-access-card input[type="password"]{
  width:100%;
  max-width:100%;
}

.system-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.system-header h2{
  margin:0;
  color:var(--svp);
  font-size:1.15rem;
}
.system-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding-top:4px;
}

.btn-secondary{
  background:#e5e7eb;
  color:#111827;
  border:1px solid #cbd5e1;
}
.btn-secondary:hover{ filter:brightness(.98); }

.webserver-access-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.system-config > .dual-section + .dual-section{ margin-top:0; }
@media (max-width: 1200px){
  .system-config{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ── Configuration: matriz estética 2x2 ──
   col1 = Webserver & Access / Unit Info, col2 = LED Configuration / Firmware Update.
   Las tarjetas ocultas (LAN, WiFi) son display:none y no ocupan celda del grid. */
.config-matrix{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.config-matrix > .dual-section{
  margin-top:0;
  min-height:280px;
  height:100%;
  border-color:#c8d3df;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}
.config-matrix > .dual-section h3{ border-bottom-color:#cfdae6; }
@media (max-width:760px){ .config-matrix{ grid-template-columns:1fr; } }

/* LED Configuration card */
.led-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.led-enable-inline{ display:flex; align-items:center; gap:8px; }
.led-switch-label{ margin:0; font-weight:700; color:var(--ink); }
.led-help{ margin:10px 0 14px; color:var(--muted); font-size:.9rem; line-height:1.45; }
#led-config-card .led-window-select{ width:100%; max-width:100%; }
#led-config-card .led-window-select:disabled{ opacity:.55; cursor:not-allowed; }
.led-window-hint{ margin:6px 0 0; color:var(--muted); font-size:.8rem; }

.starlink-device-grid{
  grid-template-columns:repeat(3, minmax(0,1fr));
  padding-top:0;
}
@media (max-width: 1200px){
  .starlink-device-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.navigation-config{
  padding-top:16px;
}
.navigation-config > .system-header{
  margin-bottom:8px;
}
.navigation-config > .dual-section{
  border-color:#c8d3df;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}
#navigation-save-button:disabled{
  opacity:.65;
  cursor:not-allowed;
}

#wifi-settings-card .wifi-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:2px solid var(--line);
}
#wifi-settings-card .wifi-card-head h3{
  margin:0;
  padding:0;
  border:0;
}
#wifi-settings-card .wifi-enable-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
#wifi-settings-card .wifi-enable-inline .wifi-switch-label{
  white-space:nowrap;
}
#wifi-settings-card .wifi-enable-inline .switch{
  margin-left:0;
}
#wifi-settings-card #wifi-band-row,
#wifi-settings-card #wifi-channel-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:8px;
  padding-top:0;
  border-top:0;
}
#wifi-settings-card .wifi-password-hint{
  margin-top:6px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
}
#wifi-settings-card .wifi-password-error{
  margin-top:6px;
  color:#b91c1c;
  font-size:.82rem;
  font-weight:700;
}
#wifi-settings-card .wifi-password-error.is-hidden{
  display:none;
}
#wifi-settings-card .form-row{
  margin-top:8px;
}
#wifi-settings-card .form-row:first-of-type{
  margin-top:0;
}
#wifi-settings-card .field-pw{
  width:220px;
  max-width:100%;
}
#wifi-settings-card .wifi-switch-label{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
#wifi-settings-card .wifi-switch-control{ margin-left:0; }
#wifi-settings-card .wifi-channel-select{
  width:auto;
  min-width:10ch;
  max-width:18ch;
}
#wifi-settings-card .wifi-band-segment{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid #cfdae6;
  border-radius:999px;
  background:#eef3f8;
}
#wifi-settings-card .wifi-band-option{
  appearance:none;
  border:0;
  background:transparent;
  color:#4b5563;
  border-radius:999px;
  padding:7px 14px;
  font-size:.9rem;
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
}
#wifi-settings-card .wifi-band-option.is-active{
  background:var(--svp);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
#wifi-settings-card .wifi-band-option:focus-visible{
  outline:2px solid #7fb9d6;
  outline-offset:1px;
}

.system-reboot-overlay{
  position:fixed;
  inset:0;
  z-index:11000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8, 15, 24, .58);
}

.ui-feedback-overlay{
  position:fixed;
  inset:0;
  z-index:10950;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8, 15, 24, .58);
}
.ui-feedback-overlay.open{
  display:flex;
}
.ui-feedback-modal{
  min-width:min(380px, 90vw);
  max-width:min(560px, 92vw);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 16px 42px rgba(0,0,0,.24);
  padding:18px 20px;
  color:var(--ink);
}
.ui-feedback-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.ui-feedback-title{
  margin:0;
  font-size:1.02rem;
  font-weight:900;
  color:var(--ink);
}
.ui-feedback-message{
  margin:10px 0 0;
  font-size:.97rem;
  line-height:1.35;
  color:var(--ink);
  white-space:pre-wrap;
}
.ui-feedback-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}
.ui-feedback-close-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:10px;
  height:36px;
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
}
.ui-feedback-icon{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  flex:0 0 26px;
  font-weight:900;
  line-height:1;
}
.ui-feedback-icon__glyph{
  font-size:16px;
}
.ui-feedback-icon__spinner{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  animation:ui-feedback-spin .8s linear infinite;
}
.ui-feedback-overlay.is-success .ui-feedback-icon{
  background:#16a34a;
  color:#fff;
}
.ui-feedback-overlay.is-info .ui-feedback-icon{
  background:#2563eb;
  color:#fff;
}
.ui-feedback-overlay.is-warning .ui-feedback-icon{
  background:#d97706;
  color:#fff;
}
.ui-feedback-overlay.is-error .ui-feedback-icon{
  background:#dc2626;
  color:#fff;
}
.ui-feedback-overlay.is-loading .ui-feedback-icon{
  background:var(--svp);
  color:#fff;
}
@keyframes ui-feedback-spin{
  to { transform: rotate(360deg); }
}
body.ui-feedback-blocking .main-container,
body.ui-feedback-blocking .appbar{
  pointer-events:none;
  user-select:none;
}
body.ui-feedback-blocking .ui-feedback-overlay{
  pointer-events:auto;
}
.system-reboot-overlay__box{
  min-width:min(380px, 90vw);
  max-width:min(520px, 92vw);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 16px 42px rgba(0,0,0,.24);
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--ink);
  font-size:1rem;
  font-weight:800;
}
.system-reboot-overlay__texts{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.system-reboot-overlay__title{
  line-height:1.2;
}
.system-reboot-overlay__hint{
  font-size:.84rem;
  font-weight:700;
  color:var(--muted);
  line-height:1.2;
}
.system-reboot-overlay__spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #cbd5e1;
  border-top-color:var(--svp);
  animation:system-reboot-spin .8s linear infinite;
}
@keyframes system-reboot-spin{
  to { transform: rotate(360deg); }
}
body.system-rebooting .system-reboot-overlay{
  display:flex;
}
body.system-rebooting .main-container,
body.system-rebooting .appbar{
  pointer-events:none;
  user-select:none;
}
body.system-rebooting .system-reboot-overlay{
  pointer-events:auto;
}

#fw-update-card .fw-progress-block{
  margin-top:10px;
  max-width:250px;
}
#fw-update-card[data-fw-view="compact"] .fw-progress-block{
  margin:0 auto;
}
#fw-update-card .fw-progress-block[hidden]{
  display:none;
}
#fw-update-card .fw-progress-track{
  height:8px;
  background:#ddd;
  border-radius:8px;
  overflow:hidden;
}
#fw-update-card .fw-progress-fill{
  height:8px;
  width:0%;
  background:var(--svp);
}
#fw-update-card .fw-progress-meta{
  margin:8px 0 0;
  color:var(--ink);
  font-weight:600;
  line-height:1.3;
  word-break:break-word;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#fw-update-card #fw-pct{
  display:inline-block;
  min-width:4ch;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
#fw-update-card .fw-diagnostics{
  margin-top:12px;
  border-top:1px solid var(--line);
  padding-top:12px;
}
#fw-update-card .fw-connection{
  margin:0 0 8px;
  font-weight:700;
  color:var(--muted);
}
#fw-update-card .fw-connection.is-ok{ color:#166534; }
#fw-update-card .fw-connection.is-warn{ color:#92400e; }
#fw-update-card .fw-connection.is-error{ color:#b91c1c; }
#fw-update-card .fw-meta-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  margin-bottom:8px;
}
#fw-update-card .fw-meta-grid p{
  margin:0;
  font-size:.88rem;
  color:var(--ink);
  word-break:break-word;
}

#fw-update-card .fw-meta-grid code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;
  font-size:.82rem;
}
#fw-update-card .fw-stage-list{
  margin:6px 0 10px;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
#fw-update-card .fw-stage-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 8px;
  background:#fff;
}
#fw-update-card .fw-stage-name{
  font-weight:700;
  color:var(--ink);
}
#fw-update-card .fw-stage-state{
  font-size:.78rem;
  font-weight:800;
  border-radius:999px;
  padding:3px 8px;
  background:#e5e7eb;
  color:#1f2937;
}
#fw-update-card .fw-stage-state.is-running{
  background:#fef3c7;
  color:#92400e;
}
#fw-update-card .fw-stage-state.is-done{
  background:#dcfce7;
  color:#166534;
}
#fw-update-card .fw-stage-state.is-failed{
  background:#fee2e2;
  color:#b91c1c;
}
#fw-update-card .fw-flags{
  margin:6px 0 10px;
  font-weight:700;
  color:var(--muted);
}
#fw-update-card .fw-log-panels{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
#fw-update-card .fw-log-panel .section-subtitle{
  margin:0 0 5px;
}
#fw-update-card .fw-log-box{
  margin:0;
  min-height:120px;
  max-height:200px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0f172a;
  color:#e5e7eb;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;
  font-size:.76rem;
  line-height:1.35;
  padding:8px;
  white-space:pre-wrap;
  word-break:break-word;
}
.section-subtitle{
  margin:0 0 8px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:800;
}
.unit-info-form{ margin-bottom:10px; }

@media (max-width: 1100px){
  #fw-update-card .fw-progress-block{ max-width:100%; }
}
@media (min-width: 1160px){
  #fw-update-card .fw-log-panels{
    grid-template-columns:1fr 1fr;
  }
}

/* Responsive */
@media (max-width: 760px){
  .tab-labels{ flex-wrap:wrap; }
  .tab-status-wrap{
    width:100%;
    justify-content:flex-end;
    margin-left:0;
  }
  .track-global-controls{
    width:100%;
    justify-content:flex-end;
  }
  .tab-status-pill{
    font-size:.82rem;
    padding:5px 9px;
  }
  .system-config{ grid-template-columns: 1fr; }
  .system-config > .dual-section{ min-height:0; }
  .system-actions{ width:100%; }
  .system-actions .btn{ flex:1 1 auto; }
  .webserver-access-grid{ grid-template-columns: 1fr; }
  #wifi-settings-card .wifi-card-head{
    flex-direction:column;
    align-items:stretch;
  }
  #wifi-settings-card .wifi-enable-inline{
    align-self:flex-start;
  }
  .wificfg-head{
    flex-direction:column;
    align-items:stretch;
  }
  .wancfg-head{
    flex-direction:column;
    align-items:stretch;
  }
  .wancfg-head-actions{
    justify-content:flex-start;
  }
  .wancfg-link-card{
    width:100%;
  }
  .wancfg-mode-row{
    width:100%;
  }
  .wancfg-static-grid{
    grid-template-columns:1fr;
  }
  .wancfg-runtime-block .wan-runtime-grid{
    grid-template-columns:1fr;
    width:min(var(--wancfg-field-w), 100%);
  }
  .wificfg-head-actions{
    justify-content:flex-start;
  }
  .wificfg-grid{
    grid-template-columns:1fr;
  }
  .wificfg-runtime-grid{
    grid-template-columns:1fr;
    width:min(var(--wificfg-field-w), 100%);
  }
  .wificfg-networks-modal{
    inset:10px;
  }
  .wificfg-network-item{
    gap:10px;
    padding:9px 10px;
  }
  .wificfg-network-ssid{
    max-width:180px;
  }
  .throughput-detail-head{
    flex-direction:column;
    align-items:stretch;
  }
  .throughput-detail-modal{
    width:min(97vw, 97vw);
    max-height:94vh;
  }
  .throughput-detail-body{
    padding:10px 12px 14px;
  }
  .throughput-head{
    gap:8px;
  }
  #fw-update-card .fw-progress-block{ max-width:100%; }
}

/* Estado de main application (fleet) */
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-weight:700; color:var(--muted);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.status-pill .status-dot{
  width:8px; height:8px; border-radius:50%;
  background:#94a3b8;
  box-shadow:0 0 0 4px rgba(148,163,184,.12);
}
.status-pill.connected{
  color:var(--ok);
  border-color:rgba(46,125,50,.25);
  background:#f2fbf4;
}
.status-pill.connected .status-dot{
  background:var(--ok);
  box-shadow:0 0 0 4px rgba(46,125,50,.15);
}
.status-pill.disconnected{
  color:var(--bad);
  border-color:rgba(192,57,43,.25);
  background:#fff3f2;
}
.status-pill.disconnected .status-dot{
  background:var(--bad);
  box-shadow:0 0 0 4px rgba(192,57,43,.15);
}
.status-pill.recording{
  color:#b91c1c;
  border-color:rgba(185,28,28,.24);
  background:#fff1f2;
}
.status-pill.recording .status-dot{
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.15);
}

/* Connection quality */
.connection-quality-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.connection-quality-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.connection-quality-head h2{
  margin-bottom:4px;
}
.connection-quality-subtitle,
.connection-quality-note{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.connection-quality-summary-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.connection-quality-score-card,
.connection-quality-panel,
.connection-quality-kpi,
.connection-quality-mini-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.connection-quality-score-card{
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:0;
  position:relative;
}
.connection-quality-info-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(77,170,212,.35);
  background:#eef7fb;
  color:var(--svp-ink);
  font-weight:900;
  font-size:1rem;
  cursor:pointer;
}
.connection-quality-info-btn:hover{
  background:#dff0f8;
}
.vpn-certificate-actions .vpn-certificate-info-btn{
  position:static;
  top:auto;
  right:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  height:28px;
  padding:0;
  flex:0 0 auto;
  line-height:1;
}
.connection-quality-score-ring{
  width:92px;
  height:92px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.7rem;
  font-weight:800;
  border:8px solid rgba(148,163,184,.18);
  color:#475569;
  background:#fff;
  flex:0 0 auto;
}
.connection-quality-score-ring.status-good{
  border-color:rgba(34,197,94,.24);
  color:#15803d;
  background:#f0fdf4;
}
.connection-quality-score-ring.status-fair{
  border-color:rgba(249,115,22,.28);
  color:#c2410c;
  background:#fff7ed;
}
.connection-quality-score-ring.status-poor{
  border-color:rgba(239,68,68,.26);
  color:#b91c1c;
  background:#fef2f2;
}
.connection-quality-score-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:none;
  flex:1 1 auto;
}
.connection-quality-status-pill{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  font-weight:800;
  border:1px solid var(--line);
  background:#f8fafc;
  color:#475569;
}
.connection-quality-status-pill.status-good{
  color:#15803d;
  border-color:rgba(34,197,94,.25);
  background:#f0fdf4;
}
.connection-quality-status-pill.status-fair{
  color:#c2410c;
  border-color:rgba(249,115,22,.28);
  background:#fff7ed;
}
.connection-quality-status-pill.status-poor{
  color:#b91c1c;
  border-color:rgba(239,68,68,.25);
  background:#fef2f2;
}
.connection-quality-kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(210px, 210px));
  gap:10px;
  justify-content:start;
  width:100%;
}
.connection-quality-kpi,
.connection-quality-mini-card{
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:0;
}
.connection-quality-kpi strong,
.connection-quality-mini-card strong{
  font-size:.96rem;
  color:var(--ink);
  white-space:nowrap;
}
.connection-quality-kpi-label{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.connection-quality-panels{
  display:grid;
  grid-template-columns:minmax(0, 0.73fr) minmax(0, 1.27fr);
  gap:14px;
}
.connection-quality-panel{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.connection-quality-panel h3{
  margin:0;
  color:var(--svp-ink);
}
.connection-quality-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.connection-quality-panel-meta{
  color:var(--muted);
  font-size:.92rem;
}
#connection-quality-total-traffic{
  margin-right:44px;
}
.connection-quality-usage-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.connection-quality-usage-item{
  display:grid;
  grid-template-columns:minmax(80px, 88px) minmax(0, 1fr);
  gap:10px;
  align-items:center;
}
.connection-quality-usage-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.connection-quality-usage-label{
  font-weight:800;
  color:var(--ink);
}
.connection-quality-usage-track{
  flex:1 1 auto;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:#e2e8f0;
}
.connection-quality-usage-fill{
  height:100%;
  border-radius:999px;
  background:#4DAAD4;
}
.connection-quality-usage-fill.is-warning{
  background:#f4c84c;
}
.connection-quality-usage-fill.is-critical{
  background:#d84b45;
}
.connection-quality-usage-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  text-align:left;
  flex:0 0 120px;
  width:120px;
}
.connection-quality-usage-share{
  font-weight:800;
}
.connection-quality-usage-details{
  color:var(--muted);
  font-size:.74rem;
  white-space:nowrap;
}
.connection-quality-chart-wrap{
  min-height:190px;
  padding:8px 10px 2px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.connection-quality-chart-wrap canvas{
  width:100%;
  height:180px;
}
.connection-quality-mini-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.connection-quality-info-backdrop{
  position:fixed;
  inset:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.28);
}
.connection-quality-info-backdrop.is-open{
  display:flex;
}
.connection-quality-info-modal{
  width:min(960px, 96vw);
  max-height:min(90vh, 1000px);
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(77,170,212,.18);
  background:linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
  box-shadow:0 24px 80px rgba(15,23,42,.18);
  padding:28px 30px;
}
.connection-quality-info-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.connection-quality-info-title{
  margin:0;
  color:var(--svp-ink);
}
.connection-quality-info-subtitle{
  margin:4px 0 0;
  color:var(--muted);
}
.connection-quality-info-close{
  height:38px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
  flex-shrink:0;
}
.connection-quality-info-body{
  display:flex;
  flex-direction:column;
  gap:18px;
  color:var(--ink);
}
.connection-quality-info-body p{
  margin:0;
  line-height:1.6;
}
.connection-quality-info-formula{
  padding:16px 20px;
  border-radius:16px;
  border:1px solid rgba(77,170,212,.22);
  background:#eef7fb;
  color:var(--svp-ink);
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.03em;
  text-align:center;
}
.connection-quality-info-note{
  color:var(--muted);
  line-height:1.5;
}
.connection-quality-info-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.connection-quality-info-item{
  display:flex;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
.connection-quality-info-item strong{
  min-width:52px;
  font-size:.88rem;
  color:var(--svp-ink);
  flex-shrink:0;
}
.connection-quality-info-item span{
  color:var(--muted);
  line-height:1.55;
  font-size:.9rem;
}
.connection-quality-info-footnote{
  color:var(--muted);
  font-size:.92rem;
}
.cq-info-section-title{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:6px;
  border-top:1px solid var(--line);
}
.cq-info-sym-good{ color:#15803d; }
.cq-info-sym-fair{ color:#92400e; }
.cq-info-sym-poor{ color:#991b1b; }

@media (max-width: 1040px){
  .connection-quality-panels{
    grid-template-columns:1fr;
  }
  .connection-quality-mini-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .connection-quality-kpis{
    grid-template-columns:repeat(3, minmax(190px, 1fr));
  }
}

@media (max-width: 640px){
  .connection-quality-head,
  .connection-quality-panel-head,
  .connection-quality-score-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .connection-quality-kpis,
  .connection-quality-mini-grid{
    grid-template-columns:1fr;
  }
  .connection-quality-usage-item{
    grid-template-columns:1fr;
  }
  .connection-quality-usage-main{
    width:100%;
  }
  .connection-quality-usage-meta{
    align-items:flex-start;
    text-align:left;
    width:auto;
    flex:0 0 auto;
  }
  .connection-quality-usage-details{
    white-space:normal;
  }
  .connection-quality-info-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .connection-quality-info-grid{
    grid-template-columns:1fr;
  }
}

/* ================================================================
   CQ — Connection Quality Redesign (cq-*)
   ================================================================ */

/* Outer card override */
.cq-card {
  gap: 16px;
}
.cq-card h2 {
  margin: 0;
}

/* ── Header ── */
.cq-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cq-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cq-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cq-window-label {
  font-size: .86rem;
  color: var(--muted);
}

/* Live badge */
.cq-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
}
.cq-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: cq-pulse 2.4s ease-in-out infinite;
}
@keyframes cq-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* ── Top row: gauge + breakdown ── */
.cq-top-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  align-items: start;
}

/* Gauge panel */
.cq-gauge-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface) 0%, #f1f5f9 100%);
}
.theme-dark .cq-gauge-panel {
  background: linear-gradient(180deg, var(--surface) 0%, #131f30 100%);
}

.cq-info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
}
.cq-info-btn:hover { color: var(--ink); border-color: var(--svp-ink); }

/* SVG gauge */
.cq-gauge-svg {
  width: 148px;
  height: 148px;
  overflow: visible;
  flex-shrink: 0;
}

/* Arc: R=38, C=2π×38≈238.76, 240° arc len ≈159.17, gap≈79.59 */
/* Zone poor (0-45%): arc=71.63, gap=167.13, rotate(210) */
/* Zone fair (45-75%): arc=47.75, gap=191.01, rotate(318) */
/* Zone good (75-100%): arc=39.79, gap=198.97, rotate(30) */
.cq-arc-bg {
  fill: none;
  stroke: rgba(148,163,184,.2);
  stroke-width: 10;
  stroke-dasharray: 159.17 79.59;
  stroke-linecap: round;
}
.cq-arc-zone-poor {
  fill: none;
  stroke: rgba(220,38,38,.18);
  stroke-width: 10;
  stroke-dasharray: 71.63 167.13;
  stroke-linecap: butt;
}
.cq-arc-zone-fair {
  fill: none;
  stroke: rgba(217,119,6,.2);
  stroke-width: 10;
  stroke-dasharray: 47.75 191.01;
  stroke-linecap: butt;
}
.cq-arc-zone-good {
  fill: none;
  stroke: rgba(22,163,74,.2);
  stroke-width: 10;
  stroke-dasharray: 39.79 198.97;
  stroke-linecap: butt;
}
.cq-arc-score {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 10;
  stroke-dasharray: 0 238.76;
  stroke-linecap: round;
  transition: stroke-dasharray .5s cubic-bezier(.4,0,.2,1), stroke .4s ease;
}
.cq-arc-score.status-good { stroke: #16a34a; }
.cq-arc-score.status-fair { stroke: #d97706; }
.cq-arc-score.status-poor { stroke: #dc2626; }

.cq-gauge-num {
  font-size: 20px;
  font-weight: 800;
  fill: var(--ink, #1f2937);
}
.cq-gauge-sub {
  font-size: 8.5px;
  fill: #94a3b8;
  font-weight: 600;
}

/* Status pill */
.cq-status-pill {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.cq-status-pill.status-good { background: #f0fdf4; border-color: rgba(34,197,94,.3);  color: #15803d; }
.cq-status-pill.status-fair { background: #fffbeb; border-color: rgba(217,119,6,.35); color: #92400e; }
.cq-status-pill.status-poor { background: #fef2f2; border-color: rgba(220,38,38,.3);  color: #991b1b; }
.theme-dark .cq-status-pill.status-good { background: rgba(22,163,74,.15);  color: #4ade80; }
.theme-dark .cq-status-pill.status-fair { background: rgba(217,119,6,.15);  color: #fbbf24; }
.theme-dark .cq-status-pill.status-poor { background: rgba(220,38,38,.15);  color: #f87171; }

/* ── Session KPI strip (below top-row) ── */
.cq-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cq-kpi-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.cq-kpi-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.cq-kpi-cell strong {
  font-size: .93rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Score breakdown ── */
.cq-breakdown-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface) 0%, #f1f5f9 100%);
}
.theme-dark .cq-breakdown-panel {
  background: linear-gradient(180deg, var(--surface) 0%, #131f30 100%);
}
.cq-breakdown-header {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cq-breakdown-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cq-br-row {
  display: grid;
  grid-template-columns: 18px 80px 1fr 34px 42px;
  gap: 8px;
  align-items: center;
}
.cq-br-sym {
  font-size: .85rem;
  font-weight: 800;
  color: var(--svp-ink);
  text-align: center;
}
.cq-br-name {
  font-size: .83rem;
  color: var(--ink);
}
.cq-br-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(148,163,184,.25);
  overflow: hidden;
}
.cq-br-fill {
  height: 100%;
  border-radius: 999px;
  background: #94a3b8;
  width: 0;
  transition: width .5s cubic-bezier(.4,0,.2,1), background .4s ease;
}
.cq-br-fill.score-good { background: #16a34a; }
.cq-br-fill.score-fair { background: #d97706; }
.cq-br-fill.score-poor { background: #dc2626; }
.cq-br-val {
  font-size: .83rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cq-br-wt {
  font-size: .7rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cq-bonus-line {
  font-size: .79rem;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px solid var(--line);
  min-height: 1.2em;
}

/* ── Section shared ── */
.cq-links-section,
.cq-chart-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cq-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cq-section-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cq-section-meta-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cq-section-meta {
  font-size: .83rem;
  color: var(--muted);
}
.cq-headroom-badge {
  font-size: .74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}

/* ── Link status table ── */
.cq-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.cq-links-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}
.cq-links-table thead tr {
  background: rgba(148,163,184,.1);
}
.cq-links-table th {
  padding: 8px 12px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cq-links-table th.cq-th-num { text-align: center; }
.cq-links-table th.cq-th-nocaps { text-transform: none; }
.cq-links-table td {
  padding: 7px 12px;
  color: var(--ink);
  border-bottom: 1px solid rgba(148,163,184,.1);
  white-space: nowrap;
  vertical-align: middle;
}
.cq-links-table tbody tr:last-child td { border-bottom: none; }
.cq-links-table tbody tr.cq-row-offline { opacity: .55; }
.cq-links-table tbody tr:hover { background: rgba(77,170,212,.05); }
.cq-links-table td.cq-td-num { text-align: center; font-variant-numeric: tabular-nums; }
.cq-td-label  { font-weight: 700; font-size: .84rem; }
.cq-link-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.cq-link-dot.is-online  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.cq-link-dot.is-offline { background: rgba(148,163,184,.5); }
.cq-link-status {
  display: inline-flex;
  align-items: center;
}
.cq-link-status-text {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.cq-link-status-text.is-online  { color: #15803d; }
.cq-link-status-text.is-offline { color: #94a3b8; }
.theme-dark .cq-link-status-text.is-online { color: #4ade80; }
.cq-score-chip {
  font-weight: 700;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.cq-score-chip.score-good { color: #15803d; }
.cq-score-chip.score-fair { color: #92400e; }
.cq-score-chip.score-poor { color: #991b1b; }
.theme-dark .cq-score-chip.score-good { color: #4ade80; }
.theme-dark .cq-score-chip.score-fair { color: #fbbf24; }
.theme-dark .cq-score-chip.score-poor { color: #f87171; }

/* ── Trend chart ── */
.cq-chart-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface) 0%, #f8fafc 100%);
  padding: 10px 12px 6px;
  min-height: 172px;
}
.theme-dark .cq-chart-wrap {
  background: linear-gradient(180deg, var(--surface) 0%, #0f1c2e 100%);
}
.cq-chart-wrap canvas {
  width: 100%;
  height: 160px;
}

/* Pct badges */
.cq-pct-badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.cq-pct-good { background: #f0fdf4; border-color: rgba(34,197,94,.3);  color: #15803d; }
.cq-pct-fair { background: #fffbeb; border-color: rgba(217,119,6,.35); color: #92400e; }
.cq-pct-poor { background: #fef2f2; border-color: rgba(220,38,38,.3);  color: #991b1b; }
.theme-dark .cq-pct-good { background: rgba(22,163,74,.12);  color: #4ade80; border-color: rgba(74,222,128,.25); }
.theme-dark .cq-pct-fair { background: rgba(217,119,6,.12);  color: #fbbf24; border-color: rgba(251,191,36,.25); }
.theme-dark .cq-pct-poor { background: rgba(220,38,38,.12);  color: #f87171; border-color: rgba(248,113,113,.25); }

/* Fault strip */
.cq-fault-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cq-fault-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: background .25s ease, border-color .25s ease;
}
.cq-fault-cell.is-warn {
  background: #fffbeb;
  border-color: rgba(217,119,6,.35);
}
.cq-fault-cell.is-crit {
  background: #fef2f2;
  border-color: rgba(220,38,38,.3);
}
.theme-dark .cq-fault-cell.is-warn { background: rgba(217,119,6,.12); border-color: rgba(251,191,36,.25); }
.theme-dark .cq-fault-cell.is-crit { background: rgba(220,38,38,.12); border-color: rgba(248,113,113,.25); }
.cq-fault-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cq-fault-cell strong {
  font-size: .94rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cq-fault-cell.is-warn .cq-fault-label,
.cq-fault-cell.is-warn strong { color: #92400e; }
.cq-fault-cell.is-crit .cq-fault-label,
.cq-fault-cell.is-crit strong { color: #991b1b; }
.theme-dark .cq-fault-cell.is-warn .cq-fault-label,
.theme-dark .cq-fault-cell.is-warn strong { color: #fbbf24; }
.theme-dark .cq-fault-cell.is-crit .cq-fault-label,
.theme-dark .cq-fault-cell.is-crit strong { color: #f87171; }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .cq-top-row { grid-template-columns: 1fr; }
  .cq-gauge-panel { flex-direction: row; align-items: center; justify-content: center; gap: 16px; }
  .cq-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .cq-fault-strip { grid-template-columns: repeat(2, 1fr); }
  .cq-kpi-strip   { grid-template-columns: repeat(3, 1fr); }
  .cq-br-row { grid-template-columns: 18px 66px 1fr 28px 38px; gap: 6px; }
}
@media (max-width: 500px) {
  .cq-kpi-strip { grid-template-columns: 1fr; }
  .cq-fault-strip { grid-template-columns: repeat(2, 1fr); }
  .cq-gauge-panel { flex-direction: column; align-items: center; }
}

/* (el resto de tu hoja —tema claro, botones, cards, etc.— se mantiene igual)
   Si pegaste mi style.css anterior, estos bloques pueden ir al final. */

/* ============ MOBILE POLISH ============ */
@media (max-width: 760px){
  .appbar{
    height:auto;
    min-height:0;
  }

  .appbar-row{
    width:min(100%, calc(100% - 24px));
    min-height:0;
    padding:16px 0 12px;
    align-items:center;
  }

  .brand{
    min-width:0;
    flex:1 1 auto;
  }

  .brand-text{
    min-width:0;
  }

  .brand-title{
    font-size:1rem;
    line-height:1.15;
    word-break:break-word;
  }

  .main-container{
    width:min(100%, calc(100% - 20px));
    margin:14px auto 20px;
  }

  .config-container{
    padding:14px;
    margin:12px 0;
    border-radius:14px;
  }

  .tab-labels{
    display:block;
    padding:10px;
    border-radius:16px;
    box-shadow:0 10px 28px rgba(15,23,42,.08);
  }

  .mobile-tabbar{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .mobile-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 14px;
    border:1px solid rgba(12,92,122,.14);
    border-radius:12px;
    background:linear-gradient(180deg, #ffffff 0%, #eef8fc 100%);
    color:var(--svp-ink);
    font-weight:900;
    box-shadow:0 8px 18px rgba(77,170,212,.14);
    cursor:pointer;
  }

  .mobile-nav-toggle i{
    font-size:1.05rem;
  }

  .mobile-tab-current{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 14px;
    min-height:44px;
    border-radius:12px;
    background:linear-gradient(135deg, rgba(77,170,212,.14) 0%, rgba(12,92,122,.08) 100%);
    border:1px solid rgba(77,170,212,.18);
    color:var(--svp-ink);
    font-weight:800;
    letter-spacing:.02em;
  }

  .mobile-tab-current-label{
    display:none;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .tab-menu{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    margin-top:4px;
  }

  .tabs.mobile-nav-ready .tab-menu{
    max-height:0;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:max-height .28s ease, opacity .2s ease, transform .2s ease, margin-top .2s ease;
    margin-top:0;
  }

  .tabs.mobile-nav-ready.mobile-nav-open .tab-menu{
    max-height:520px;
    opacity:1;
    pointer-events:auto;
    transform:none;
    margin-top:4px;
  }

  .tab-menu label[for="tab-home"]{
    margin-left:0;
  }

  .tab-label{
    width:100%;
    min-width:0;
    justify-content:flex-start;
    padding:5px 14px;
    text-align:left;
    white-space:normal;
    border:1px solid transparent;
    background:#f8fafc;
  }

  .tab-status-wrap{
    width:100%;
    margin:2px 0 0;
    padding-top:10px;
    justify-content:stretch;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
  }

  .tab-status-pill,
  .track-global-controls{
    width:100%;
    justify-content:center;
  }

  .nav-section-head,
  .throughput-head,
  .connection-quality-head,
  .connection-quality-panel-head{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .cellular-section{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    justify-content:stretch;
  }

  .sim-card{
    width:auto;
    min-width:0;
  }

  .starlink-device-grid{
    grid-template-columns:1fr;
  }

  .gps-section{
    padding:14px 12px;
  }

  .gps-instruments-grid{
    gap:14px 10px;
    justify-items:center;
  }

  .flight-indicator{
    min-height:0;
    max-width:210px;
    gap:10px;
  }

  .instrument-chassis{
    --gps-instrument-max-size: 210px;
    padding:14px;
  }

  .instrument-chassis::after{
    inset:14px;
  }

  .screw{
    width:14px;
    height:14px;
  }

  .screw::before{
    left:6px;
    height:10px;
  }

  .screw::after{
    top:6px;
    width:10px;
  }

  .flight-indicator__name{
    font-size:.8rem;
  }

  .gps-telemetry-value{
    max-width:100%;
    overflow-wrap:anywhere;
    text-align:right;
  }

  #map{
    height:360px;
    min-height:320px;
  }

  .trackplay-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0, 1fr);
    gap:10px;
  }

  .trackplay-side{
    grid-template-rows:auto auto;
    max-height:none;
    --trackplay-chassis-padding:12px;
    --trackplay-screw-size:12px;
    --trackplay-screw-offset:8px;
    --trackplay-label-height:12px;
    --gps-skyhawk-dial-scale:1.14;
  }

  .trackplay-instruments-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:none;
    gap:10px;
    padding:10px;
  }

  .trackplay-instruments .flight-indicator{
    max-width:none;
    gap:6px;
  }

  .trackplay-instruments .instrument-chassis{
    width:min(100%, 172px);
    height:auto;
    aspect-ratio:1 / 1;
  }

  .trackplay-main{
    min-height:320px;
  }

  .trackplay-controls{
    grid-template-columns:1fr;
  }

  .trackplay-controls .gps-track-btn{
    width:100%;
  }

  .trackplay-speed{
    justify-self:start;
  }

  .connection-quality-kpis{
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  }

  .connection-quality-mini-grid{
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  }

  input[type="text"],
  input[type="password"],
  input[type="number"],
  select,
  .ip-input{
    width:100%;
    max-width:none;
  }

  #wifi-settings-card .field-pw,
  #webserver-access-card .field-pw{
    width:100%;
  }

  #wifi-settings-card .wifi-band-segment{
    flex-wrap:wrap;
  }

  #wifi-settings-card .wifi-channel-select{
    width:100%;
    max-width:none;
  }
}

@media (max-width: 520px){
  .appbar-row{
    width:min(100%, calc(100% - 16px));
    padding:12px 0 10px;
  }

  .brand{
    gap:8px;
  }

  .appbar-logo{
    width:74px;
  }

  .brand-title{
    font-size:.95rem;
  }

  .main-container{
    width:min(100%, calc(100% - 16px));
  }

  .tab-labels{
    padding:8px;
  }

  .mobile-tabbar{
    gap:8px;
  }

  .mobile-nav-toggle,
  .mobile-tab-current{
    min-height:42px;
  }

  .mobile-nav-toggle{
    padding:0 12px;
  }

  .tab-label{
    padding:11px 12px;
  }

  .config-container{
    padding:12px;
  }

  .gps-telemetry-row{
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }

  .gps-telemetry-value{
    width:100%;
    text-align:left;
  }

  .gps-instruments-grid{
    grid-template-columns:1fr;
  }

  .flight-indicator{
    max-width:220px;
    margin-inline:auto;
  }

  .instrument-chassis{
    --gps-instrument-max-size: 220px;
  }

  #map{
    height:300px;
    min-height:280px;
  }

  .trackplay-instruments-grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
  }

  .trackplay-instruments .instrument-chassis{
    width:min(100%, 180px);
  }

  .trackplay-main{
    min-height:280px;
  }

  .navcfg-backdrop,
  .throughput-detail-backdrop,
  .connection-quality-info-backdrop{
    padding:10px;
  }

  .navcfg-modal,
  .throughput-detail-modal,
  .connection-quality-info-modal{
    border-radius:14px;
  }
}