/* Visual v4 — fontes servidas por nós (NOC não pode depender de CDN). Archivo e
   IBM Plex Mono, SIL Open Font License 1.1. Subconjuntos latin + latin-ext. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/vendor/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/vendor/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/plexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ════════════════════════════════════════════════════════════════════════════
 * Visual v4 — FUNDAÇÃO (F1). Plano: PLANO_VISUAL.md
 * Tudo sob :root[data-face="v4"] (chave "Visual novo" no menu de temas,
 * localStorage noc_face='v4'). Desligada, nada aqui se aplica.
 * As variáveis --v4-* e --q-* são calculadas por js/theme-engine.js a partir
 * da cor da marca e da régua de qualidade (ONU_BAND_META).
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Os nomes antigos passam a apontar para os tokens novos: as telas que
   ainda não foram migradas já pegam a paleta nova sem ser tocadas. ── */
:root[data-face="v4"]{
  --bg:var(--v4-bg); --sidebar:var(--v4-surface); --topbar:var(--v4-surface);
  --panel:var(--v4-surface); --panel-head:var(--v4-surface-2); --bg2:var(--v4-surface-2);
  --border:var(--v4-line); --text:var(--v4-ink); --muted:var(--v4-ink-3); --text-dim:var(--v4-ink-3);
  --accent:var(--v4-data); --accent-soft:color-mix(in srgb,var(--v4-data) 13%,transparent); --purple:var(--v4-data);
  --input-bg:var(--v4-input);
  --bg-page:var(--v4-bg); --bg-panel:var(--v4-surface); --bg-panel-2:var(--v4-surface-2);
  --bg-elevated:var(--v4-surface-2); --bg-hover:var(--v4-surface-2);
  --border-soft:var(--v4-line); --border-strong:var(--v4-line-2);
  --text-strong:var(--v4-ink); --text-muted:var(--v4-ink-3);
  --blue:var(--v4-info); --c-info:var(--v4-info); --sev-minor:var(--v4-info);
  --font-sans:'Archivo',system-ui,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  /* Semáforo. Escuro: a cor-identidade da régua (como sempre foi). Claro: o tom
     da MESMA cor que passa no contraste sobre branco. */
  --green:var(--q-bom); --yellow:var(--q-aceitavel); --red:var(--q-critico);
  --c-ok:var(--q-bom); --c-warn:var(--q-aceitavel); --c-attn:var(--q-ruim); --c-crit:var(--q-critico);
  --status-green:var(--q-bom); --status-yellow:var(--q-aceitavel); --status-red:var(--q-critico);
  --sev-critical:var(--q-critico); --sev-major:var(--q-ruim); --sev-info:var(--q-sem_leitura);
}
:root[data-face="v4"][data-mode="light"]{
  --green:var(--q-bom-fg); --yellow:var(--q-aceitavel-fg); --red:var(--q-critico-fg);
  --c-ok:var(--q-bom-fg); --c-warn:var(--q-aceitavel-fg); --c-attn:var(--q-ruim-fg); --c-crit:var(--q-critico-fg);
  --status-green:var(--q-bom-fg); --status-yellow:var(--q-aceitavel-fg); --status-red:var(--q-critico-fg);
  --sev-critical:var(--q-critico-fg); --sev-major:var(--q-ruim-fg); --sev-info:var(--q-sem_leitura-fg);
}

/* ── Tipografia: Archivo (texto e números) + IBM Plex Mono (IP, MAC) ── */
:root[data-face="v4"] body,
:root[data-face="v4"] input,
:root[data-face="v4"] select,
:root[data-face="v4"] textarea,
:root[data-face="v4"] button{font-family:'Archivo',system-ui,'Segoe UI',sans-serif}
:root[data-face="v4"] code,
:root[data-face="v4"] pre,
:root[data-face="v4"] kbd,
:root[data-face="v4"] .mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace}
:root[data-face="v4"] table td,
:root[data-face="v4"] .stat-big .val{font-variant-numeric:tabular-nums}

/* ── Sem os tiques de IA: nada de MAIÚSCULAS espaçadas nos rótulos fixos ── */
:root[data-face="v4"] :is(.panel-title,.g-table th,.stat-big .lbl,.sb-label,.sb-group-hdr,.td-label,
  .rdiag-kpi .lbl,.rdiag-table thead th,.svc-pp-h,.svc-tbl th,.section-title,.sec-hero-lbl,
  .svc-sectlbl,.svc-ring .pc span,.audit-ring-pc span,.bf-kpi__label,.ov-attention__header,
  .bf-issues-section__title,.bf-notif-group__title){text-transform:none;letter-spacing:0}
:root[data-face="v4"] .panel-title{font-size:13.5px;font-weight:700;color:var(--text)}
:root[data-face="v4"] .g-table th{font-size:12px;font-weight:500}
:root[data-face="v4"] .stat-big .lbl{font-size:12px;font-weight:500}
:root[data-face="v4"] .sb-group-hdr{font-size:11.5px;font-weight:500}

/* ── Superfícies sóbrias: canto discreto, sem brilho, sem degradê ── */
:root[data-face="v4"] .panel{border-radius:8px}
:root[data-face="v4"] .panel-hdr{border-radius:8px 8px 0 0}
:root[data-face="v4"] .g-table td{border-bottom-color:var(--v4-line)}
:root[data-face="v4"] .g-bar{background:var(--v4-surface-2)}
:root[data-face="v4"] .sb-item.active{background:color-mix(in srgb,var(--v4-data) 11%,transparent)}
:root[data-face="v4"] ::-webkit-scrollbar-thumb{background:var(--v4-line-2)}
:root[data-face="v4"] .psp-btn{border-color:var(--v4-line);color:var(--v4-ink-3)}
:root[data-face="v4"] .psp-btn:hover{background:var(--v4-surface-2);color:var(--v4-ink)}
:root[data-face="v4"] .psp-btn.psp-active{background:var(--v4-data);border-color:var(--v4-data);color:#fff}
:root[data-face="v4"] .bf-ai-fab{background:var(--v4-frame);border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
:root[data-face="v4"] .bf-ai-fab:hover{transform:none;filter:brightness(1.12)}
:root[data-face="v4"] .bf-ai-header{background:var(--v4-frame)}

/* ── Selo de qualidade (semáforo): bolinha na cor da régua + palavra ──
   Gerado por ispTheme.qualityChip(code, texto). Nunca só cor. */
:root[data-face="v4"] .q{display:inline-flex;align-items:center;gap:6px;padding:1px 9px 1px 8px;border-radius:10px;
  font-size:12px;font-weight:650;line-height:1.55;white-space:nowrap;vertical-align:middle}
:root[data-face="v4"] .q::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
:root[data-face="v4"] .q-otimo{color:var(--q-otimo-fg);background:color-mix(in srgb,var(--q-otimo) 15%,transparent)}
:root[data-face="v4"] .q-otimo::before{background:var(--q-otimo)}
:root[data-face="v4"] .q-bom{color:var(--q-bom-fg);background:color-mix(in srgb,var(--q-bom) 15%,transparent)}
:root[data-face="v4"] .q-bom::before{background:var(--q-bom)}
:root[data-face="v4"] .q-aceitavel{color:var(--q-aceitavel-fg);background:color-mix(in srgb,var(--q-aceitavel) 17%,transparent)}
:root[data-face="v4"] .q-aceitavel::before{background:var(--q-aceitavel)}
:root[data-face="v4"] .q-ruim{color:var(--q-ruim-fg);background:color-mix(in srgb,var(--q-ruim) 16%,transparent)}
:root[data-face="v4"] .q-ruim::before{background:var(--q-ruim)}
:root[data-face="v4"] .q-critico{color:var(--q-critico-fg);background:color-mix(in srgb,var(--q-critico) 15%,transparent)}
:root[data-face="v4"] .q-critico::before{background:var(--q-critico)}
:root[data-face="v4"] .q-saturado{color:var(--q-saturado-fg);background:color-mix(in srgb,var(--q-saturado) 16%,transparent)}
:root[data-face="v4"] .q-saturado::before{background:var(--q-saturado)}
:root[data-face="v4"] .q-sem_leitura{color:var(--q-sem_leitura-fg);background:color-mix(in srgb,var(--q-sem_leitura) 16%,transparent)}
:root[data-face="v4"] .q-sem_leitura::before{background:var(--q-sem_leitura)}

/* Ícones próprios (vendor/icons-isp.js): traço único, cor do texto. */
.isp-ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}

/* ════════════════════════════════════════════════════════════════════════════
 * F2 — A MOLDURA (js/shell-v4.js): menu e barra do topo na cor da marca, cada
 * item do menu com o estado da sua área, e a faixa de cabeçalho da tela com 3
 * estados (normal · queda · dados atrasados).
 * ══════════════════════════════════════════════════════════════════════════ */
.sb-st, .v4-band, .sb-v4-ic{display:none}
:root[data-face="v4"] #global-status-bar{display:none !important}   /* a faixa da tela assume esse papel */

/* ── Barra do topo ── */
:root[data-face="v4"] #topbar{background:var(--v4-frame);border-bottom:1px solid rgba(255,255,255,.14);color:#fff}
:root[data-face="v4"] #topbar .tb-brand{color:#fff;font-stretch:110%;font-weight:750}
:root[data-face="v4"] #topbar :is(.tb-btn,.tb-time-range,.tb-refresh,.noc-btn){background:transparent;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.9)}
:root[data-face="v4"] #topbar :is(.tb-btn,.tb-time-range,.tb-refresh,.noc-btn):hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
:root[data-face="v4"] #topbar :is(.tb-btn,.tb-time-range,.tb-refresh,.noc-btn):focus-visible{outline:2px solid #fff;outline-offset:2px}
:root[data-face="v4"] #topbar .tb-sep{background:rgba(255,255,255,.22)}
:root[data-face="v4"] #topbar #refreshCountdown{color:rgba(255,255,255,.7)}
:root[data-face="v4"] #topbar #themeBtn i{color:#fff !important}
:root[data-face="v4"] #tb-search{background:rgba(255,255,255,.13) !important;border-color:transparent !important;color:#fff !important}
:root[data-face="v4"] #tb-search:focus{background:rgba(255,255,255,.2) !important;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
:root[data-face="v4"] #tb-search::placeholder{color:rgba(255,255,255,.66)}
:root[data-face="v4"] .tb-search > i{color:rgba(255,255,255,.66) !important}

/* ── Menu ── */
:root[data-face="v4"] #sidebar{background:var(--v4-frame);border-right:1px solid rgba(255,255,255,.14)}
:root[data-face="v4"] #sidebar .sb-group-hdr{color:rgba(255,255,255,.62)}
:root[data-face="v4"] #sidebar .sb-group-hdr:hover{color:#fff}
:root[data-face="v4"] #sidebar .sb-item{color:rgba(255,255,255,.86);font-weight:500;margin:1px 8px;padding:6px 8px 6px 10px;border-left:0;border-radius:6px;gap:9px}
:root[data-face="v4"] #sidebar .sb-item:hover{background:rgba(255,255,255,.1);color:#fff}
:root[data-face="v4"] #sidebar .sb-item:focus-visible{outline:2px solid #fff;outline-offset:-2px}
:root[data-face="v4"] #sidebar .sb-item.active{background:#fff;color:var(--v4-frame);font-weight:650}
:root[data-face="v4"] #sidebar .sb-item.sb-sub{padding-left:26px;font-size:12px}
:root[data-face="v4"] #sidebar .sb-item[data-v4] > i.bi:first-of-type{display:none}
:root[data-face="v4"] #sidebar .sb-item .sb-v4-ic{display:inline-block;width:17px;height:17px;opacity:.88}
:root[data-face="v4"] #sidebar .sb-item.active .sb-v4-ic{opacity:1}
:root[data-face="v4"] #sbVersion{color:rgba(255,255,255,.6) !important}
:root[data-face="v4"] #sidebar .sb-toggle{color:rgba(255,255,255,.7);border-top-color:rgba(255,255,255,.14)}
:root[data-face="v4"] #sidebar .sb-toggle:hover{color:#fff}

/* Estado da área: bolinha da régua + valor (normal) ou pílula (pede ação) */
:root[data-face="v4"] .sb-st:not([hidden]){display:inline-flex;margin-left:auto;align-items:center;gap:6px;
  font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;color:rgba(255,255,255,.7)}
:root[data-face="v4"] .sb-st.is-val[data-q]:not([data-q=""])::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot)}
:root[data-face="v4"] .sb-st[data-q="bom"]{--dot:var(--q-bom-on)}
:root[data-face="v4"] .sb-st[data-q="aceitavel"]{--dot:var(--q-aceitavel-on)}
:root[data-face="v4"] .sb-st[data-q="critico"]{--dot:var(--q-critico-on)}
:root[data-face="v4"] .sb-st.is-pill{padding:1px 7px;border-radius:9px;font-size:11px;font-weight:700;line-height:16px}
:root[data-face="v4"] .sb-st.is-pill.q-critico{background:#c62828;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
:root[data-face="v4"] .sb-st.is-pill.q-aceitavel{background:var(--q-aceitavel-on);color:#3a2800}
:root[data-face="v4"] .sb-st.is-pill.q-ruim{background:var(--q-ruim-on);color:#3a1a00}
:root[data-face="v4"] .sb-item.active .sb-st.is-val{color:var(--v4-frame)}
:root[data-face="v4"] .sb-item.active .sb-st[data-q="bom"]{--dot:var(--q-bom)}
:root[data-face="v4"] .sb-item.active .sb-st[data-q="aceitavel"]{--dot:var(--q-aceitavel)}
:root[data-face="v4"] .sb-item.active .sb-st[data-q="critico"]{--dot:var(--q-critico)}
:root[data-face="v4"] #obMenuBadge{background:#fff !important;color:var(--v4-frame) !important}
:root[data-face="v4"] .sb-item.active #obMenuBadge{background:var(--v4-frame) !important;color:#fff !important}
:root[data-face="v4"] #sidebar.collapsed :is(.sb-st,#obMenuBadge){display:none !important}

/* ── Faixa de cabeçalho da tela ── */
:root[data-face="v4"] #content{padding-top:0}
:root[data-face="v4"] .v4-band{display:flex;position:relative;align-items:flex-end;justify-content:space-between;gap:24px;
  margin:0 -12px 14px;padding:18px 24px 16px;color:#fff;
  background:var(--v4-frame) url(/vendor/relevo.svg) center/cover no-repeat;transition:background-color .28s ease-out}
/* Queda e dado atrasado: a moldura NÃO muda de cor. Faixa vermelha ao lado da barra e do menu
 * roxos brigava ("tudo bagunçado", dono, 08/10, rompimento da V-SOL). O alarme fica contido num
 * cartão claro por cima da faixa, e o vermelho só no selo e no botão — onde ele significa algo. */
:root[data-face="v4"] .v4-band:is([data-state="incident"],[data-state="stale"]) :is(.v4-alert,.v4-hero-lead,.v4-band-main>p){
  display:block;width:fit-content;max-width:100%;justify-self:start;margin:0 0 12px;padding:9px 10px 9px 12px;
  border-radius:8px;background:var(--v4-surface);color:var(--v4-ink-2);font-size:14px;line-height:1.5;
  box-shadow:0 1px 2px rgba(0,0,0,.22),0 8px 24px rgba(0,0,0,.16)}
:root[data-face="v4"] .v4-band:is([data-state="incident"],[data-state="stale"]) :is(.v4-alert,.v4-hero-lead,.v4-band-main>p) b{color:var(--v4-ink)}
:root[data-face="v4"] .v4-band:is([data-state="incident"],[data-state="stale"]) :is(.v4-alert,.v4-hero-lead,.v4-band-main>p) .dim{color:var(--v4-ink-3)}
:root[data-face="v4"] .v4-band:is([data-state="incident"],[data-state="stale"]) :is(.v4-alert,.v4-hero-lead,.v4-band-main>p) a{color:var(--v4-data);text-decoration-color:currentColor}
:root[data-face="v4"] .v4-band[data-state="stale"] :is(.v4-alert,.v4-hero-lead,.v4-band-main>p)::before{content:"";display:inline-block;
  width:9px;height:9px;margin-right:9px;border-radius:2px;background:var(--q-aceitavel);vertical-align:0}
:root[data-face="v4"] .v4-band.is-hero:is([data-state="incident"],[data-state="stale"]) .v4-hero-lead{margin:20px 0 0;font-size:15px}
/* queda: selo · frase · botão numa linha; a frase quebra dentro do próprio espaço */
:root[data-face="v4"] .v4-band[data-state="incident"] :is(.v4-alert,.v4-hero-lead,.v4-band-main>p){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
:root[data-face="v4"] .v4-band[data-state="incident"] :is(.kick,.v4-bbtn){flex:none;margin:0}
:root[data-face="v4"] .v4-alert-txt{flex:0 1 auto;min-width:0}
:root[data-face="v4"] .v4-band:is([data-state="incident"],[data-state="stale"]) .v4-band-main>p{margin-top:12px}
:root[data-face="v4"] .v4-band h1{display:flex;align-items:center;gap:12px;margin:0;font-size:26px;font-weight:800;font-stretch:118%;letter-spacing:-.02em;line-height:1.05}
:root[data-face="v4"] .v4-band h1 .isp-ic{width:26px;height:26px;opacity:.9}
:root[data-face="v4"] .v4-band p{margin:9px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.86);max-width:110ch}
:root[data-face="v4"] .v4-band p b{color:#fff;font-weight:700}
:root[data-face="v4"] .v4-band .dim{color:rgba(255,255,255,.7)}
:root[data-face="v4"] .v4-band a{color:#fff;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
:root[data-face="v4"] .v4-band a:hover{text-decoration-color:#fff}
:root[data-face="v4"] .v4-band a.c{color:var(--q-critico-on);font-weight:700}
:root[data-face="v4"] .v4-band a.w{color:var(--q-aceitavel-on);font-weight:700}
:root[data-face="v4"] .v4-band a:focus-visible,:root[data-face="v4"] .v4-bbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
:root[data-face="v4"] .v4-band .kick{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  background:#c62828;color:#fff;padding:3px 10px 3px 9px;border-radius:5px;margin-right:6px;vertical-align:1px}
:root[data-face="v4"] .v4-band .kick::before{content:"";width:8px;height:8px;background:#fff;animation:v4blink 1.2s steps(2,start) infinite}
@keyframes v4blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){:root[data-face="v4"] .v4-band .kick::before{animation:none}}
:root[data-face="v4"] .v4-bbtn{margin-left:10px;height:30px;padding:0 12px;border:0;border-radius:6px;background:#c62828;
  color:#fff;font:650 13px/30px var(--font-sans);cursor:pointer;vertical-align:middle}
:root[data-face="v4"] .v4-bbtn:hover{background:#a61f1f}
:root[data-face="v4"] .v4-band .v4-bbtn:focus-visible{outline-color:var(--v4-ink)}
:root[data-face="v4"] .v4-band-meta{flex:none;text-align:right;font-size:12px;line-height:1.5;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
@media (max-width:900px){:root[data-face="v4"] .v4-band{flex-direction:column;align-items:flex-start} :root[data-face="v4"] .v4-band-meta{text-align:left}}

/* ════════════════════════════════════════════════════════════════════════════
 * F3 — VISÃO GERAL: cabeçalho grande + diagrama da rede (do cadastro) +
 * "Precisa de atenção" (os itens do sino, mesmo destino).
 * ══════════════════════════════════════════════════════════════════════════ */
.v4-sheet{display:none}
:root[data-face="v4"] .v4-band.is-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,700px);align-items:center;gap:32px;padding:26px 28px 92px}
:root[data-face="v4"] .v4-hero-txt h1{margin:0;font-size:clamp(38px,3.6vw,58px);font-weight:800;font-stretch:125%;letter-spacing:-.03em;line-height:.96;text-wrap:balance}
:root[data-face="v4"] .v4-hero-lead{margin:16px 0 0;font-size:18px;line-height:1.4;color:rgba(255,255,255,.88);max-width:44ch;text-wrap:pretty}
:root[data-face="v4"] .v4-hero-facts{margin:16px 0 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.74);font-variant-numeric:tabular-nums}
:root[data-face="v4"] .v4-hero-facts b{color:#fff}
:root[data-face="v4"] .v4-net-msg{font-size:13px;color:rgba(255,255,255,.7);text-align:center;padding:40px 0}
@media (max-width:1280px){:root[data-face="v4"] .v4-band.is-hero{grid-template-columns:minmax(0,1fr)}}

/* diagrama */
:root[data-face="v4"] .v4-net{width:100%;height:auto;display:block;overflow:visible}
:root[data-face="v4"] .v4-net .lk{fill:none;stroke:rgba(255,255,255,.24);stroke-linecap:round}
:root[data-face="v4"] .v4-net .lk.down{stroke:rgba(255,255,255,.7);stroke-width:1.6;stroke-dasharray:3 5}
:root[data-face="v4"] .v4-net .fl{fill:none;stroke:#fff;stroke-linecap:round;stroke-dasharray:1.5 21;opacity:.85;animation:v4flow var(--d) linear infinite}
@keyframes v4flow{to{stroke-dashoffset:-22.5}}
@media (prefers-reduced-motion:reduce){:root[data-face="v4"] .v4-net .fl{animation:none;stroke-dasharray:2 6;opacity:.45}}
:root[data-face="v4"] .v4-net .pill{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.45);stroke-width:1}
:root[data-face="v4"] .v4-net .pill.edge{fill:rgba(255,255,255,.95);stroke:none}
:root[data-face="v4"] .v4-net .pill.ok{stroke:var(--q-bom-on);stroke-width:1.5}
:root[data-face="v4"] .v4-net .pill.warn{stroke:var(--q-aceitavel-on);stroke-width:1.5;fill:rgba(255,255,255,.08)}
:root[data-face="v4"] .v4-net .pill.down{fill:#fff;stroke:none}
:root[data-face="v4"] .v4-net text{font-family:'Archivo',system-ui,sans-serif;fill:#fff}
:root[data-face="v4"] .v4-net .nm{font-size:12.5px;font-weight:650}
:root[data-face="v4"] .v4-net .nm.dk{fill:var(--v4-frame)}
:root[data-face="v4"] .v4-net .nm.dn{fill:var(--v4-alarm)}
:root[data-face="v4"] .v4-net .sb,:root[data-face="v4"] .v4-net .bw{font-size:11.5px;fill:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
:root[data-face="v4"] .v4-net .bd{font-size:11.5px;font-weight:700}
:root[data-face="v4"] .v4-net tspan.bd.c{fill:var(--q-critico-on)} :root[data-face="v4"] .v4-net tspan.bd.w{fill:var(--q-aceitavel-on)} :root[data-face="v4"] .v4-net tspan.bd.g{fill:var(--q-bom-on)}
:root[data-face="v4"] .v4-net .bd.c{fill:var(--q-critico-on)}
:root[data-face="v4"] .v4-net .bd.w{fill:var(--q-aceitavel-on)}
:root[data-face="v4"] .v4-net .bd.g{fill:var(--q-bom-on)}
:root[data-face="v4"] .v4-net .cap{font-size:11px;fill:rgba(255,255,255,.58)}

/* "Precisa de atenção": folha que sobe por cima do cabeçalho */
:root[data-face="v4"] #dash-overview #v4-attn{display:block;position:relative;z-index:2;margin:-92px 4px 16px;
  background:var(--v4-surface);border-radius:10px;box-shadow:0 1px 2px rgba(40,10,40,.08),0 18px 40px -18px rgba(40,10,40,.42)}
:root[data-face="v4"] .v4-sheet-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 22px 12px}
:root[data-face="v4"] .v4-sheet-h h2{margin:0;font-size:17px;font-weight:750;font-stretch:112%;letter-spacing:-.01em;color:var(--v4-ink)}
:root[data-face="v4"] .v4-sheet-h span{font-size:12.5px;color:var(--v4-ink-3)}
:root[data-face="v4"] .v4-ar{display:grid;grid-template-columns:100px 64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 22px;border-top:1px solid var(--v4-line)}
:root[data-face="v4"] .v4-ar .sev{font-size:12.5px;font-weight:650;display:flex;align-items:center;gap:9px}
:root[data-face="v4"] .v4-ar .sev::before{content:"";width:10px;height:10px;flex:none;background:currentColor}
:root[data-face="v4"] .v4-ar .sev.crit{color:var(--q-critico-fg)}
:root[data-face="v4"] .v4-ar .sev.warn{color:var(--q-aceitavel-fg)}
:root[data-face="v4"] .v4-ar .sev.warn::before{width:9px;height:9px;transform:rotate(45deg)}
:root[data-face="v4"] .v4-ar .sev.info{color:var(--v4-ink-2)}
:root[data-face="v4"] .v4-ar .sev.info::before{background:none;border:1.75px solid currentColor;border-radius:50%}
:root[data-face="v4"] .v4-ar .sev.ok{color:var(--q-bom-fg)}
:root[data-face="v4"] .v4-ar .sev.ok::before{border-radius:50%}
:root[data-face="v4"] .v4-ar .n{font-size:30px;font-weight:650;font-stretch:72%;font-variant-numeric:tabular-nums;text-align:right;line-height:1;color:var(--v4-ink-2)}
:root[data-face="v4"] .v4-ar .n.crit{color:var(--q-critico-fg)}
:root[data-face="v4"] .v4-ar .n.warn{color:var(--q-aceitavel-fg)}
:root[data-face="v4"] .v4-ar b{font-weight:650;font-size:14px;color:var(--v4-ink)}
:root[data-face="v4"] .v4-ar p{margin:2px 0 0;font-size:13px;color:var(--v4-ink-2)}
:root[data-face="v4"] .v4-delta.down{color:var(--q-bom-fg);font-weight:600}
:root[data-face="v4"] .v4-delta.up{color:var(--q-critico-fg);font-weight:600}
:root[data-face="v4"] .v4-go{border:0;background:none;cursor:pointer;font:650 13px var(--font-sans);color:var(--v4-data);white-space:nowrap;padding:6px 10px;margin-right:-10px;border-radius:6px}
:root[data-face="v4"] .v4-go:hover{background:color-mix(in srgb,var(--v4-data) 9%,transparent)}
:root[data-face="v4"] .v4-go:focus-visible{outline:2px solid var(--v4-data);outline-offset:1px}

/* Visão geral no v4: a faixa já diz o frescor das fontes; os números viram uma tira de
   instrumentos e só têm cor os que têm régua (os demais eram decoração). */
:root[data-face="v4"] #dash-overview #ovCollectors{display:none !important}
:root[data-face="v4"] #dash-overview .stats-row-6{gap:0 !important;background:var(--v4-surface);border:1px solid var(--v4-line);border-radius:10px;overflow:hidden}
:root[data-face="v4"] #dash-overview .stats-row-6 > .panel{border:0;border-radius:0;background:transparent;box-shadow:none}
:root[data-face="v4"] #dash-overview .stats-row-6 > .panel + .panel{border-left:1px solid var(--v4-line)}
:root[data-face="v4"] #dash-overview .stat-big .lbl i{display:none}
:root[data-face="v4"] #dash-overview .stat-big .val{font-size:30px;font-weight:600;font-stretch:80%;letter-spacing:-.01em}
:root[data-face="v4"] #dash-overview :is(#st-traffic,#st-flows,#st-pppoe,#st-latency) .val{color:var(--v4-ink) !important}

/* ════════════════════════════════════════════════════════════════════════════
 * F4 — FICHA DO CLIENTE (js/ficha-v4.js): folha lateral, cabeçalho na cor da
 * marca com o estado e o caminho da fibra, Resumo com diagnóstico e números.
 * O HTML da ficha tem estilo inline (tema antigo); por isso os !important.
 * ══════════════════════════════════════════════════════════════════════════ */
#cuV4Head, #cuV4Resumo{display:none}
:root[data-face="v4"] #clientUnifiedModal{background:rgba(30,10,30,.5) !important;backdrop-filter:none !important;overflow:hidden !important}
:root[data-face="v4"] #cuDialog{position:fixed;top:0;right:0;bottom:0;width:min(1140px,calc(100vw - 96px));max-width:none !important;
  margin:0 !important;border:0 !important;border-radius:0 !important;background:var(--v4-bg) !important;
  display:flex;flex-direction:column;box-shadow:-24px 0 60px -20px rgba(40,8,38,.55)}

/* cabeçalho */
:root[data-face="v4"] #cuHeader{flex:none;flex-wrap:wrap;align-items:flex-start !important;gap:0 12px;padding:20px 28px 20px !important;border-bottom:0 !important;color:#fff;
  background:var(--v4-frame) url(/vendor/relevo.svg) center/cover no-repeat !important;transition:background-color .28s ease-out}
/* cliente fora / baixado: o cabeçalho segue na cor da marca (mesma regra da faixa, 08/10);
 * quem diz o estado é o cartão .v4f-state logo abaixo do nome */
:root[data-face="v4"] #cuHeader > div:first-child > div:first-child > i.bi-person-bounding-box{display:none}
:root[data-face="v4"] #cuTitle{color:#fff !important;font-size:26px !important;font-weight:800 !important;font-stretch:118%;letter-spacing:-.02em;line-height:1.1}
:root[data-face="v4"] #cuTitle span{color:rgba(255,255,255,.76) !important;font-size:13px !important;font-stretch:100%;letter-spacing:0;font-family:'IBM Plex Mono',ui-monospace,monospace}
:root[data-face="v4"] #cuNameEdit i{color:rgba(255,255,255,.8) !important}
:root[data-face="v4"] #cuSubtitle{color:rgba(255,255,255,.8) !important;font-size:13px !important;margin-top:8px !important}
:root[data-face="v4"] #cuSubtitle span{color:#fff !important}
/* com o estado novo na tela, a linha antiga (IP · janela · online) só duplicava */
:root[data-face="v4"] #cuHeader[data-state] #cuSubtitle{display:none !important}
:root[data-face="v4"] #cuPlanBadge{background:rgba(255,255,255,.14) !important;border-color:transparent !important;color:#fff !important;border-radius:5px !important}
:root[data-face="v4"] #cuOnlineBadge{background:rgba(255,255,255,.14) !important;color:#fff !important}
/* selo de sinal: o tom da faixa calculado para a MOLDURA (--q-*-on) */
:root[data-face="v4"] #cuSignalBadge{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.3) !important;border-radius:5px !important;color:#fff !important}
:root[data-face="v4"] #cuSignalBadge[data-band="otimo"]{color:var(--q-otimo-on) !important}
:root[data-face="v4"] #cuSignalBadge[data-band="bom"]{color:var(--q-bom-on) !important}
:root[data-face="v4"] #cuSignalBadge[data-band="aceitavel"]{color:var(--q-aceitavel-on) !important}
:root[data-face="v4"] #cuSignalBadge[data-band="ruim"],:root[data-face="v4"] #cuSignalBadge[data-band="saturado"]{color:var(--q-ruim-on) !important}
:root[data-face="v4"] #cuSignalBadge[data-band="critico"]{color:var(--q-critico-on) !important}
:root[data-face="v4"] #cuLifecycleControls{margin-right:4px !important}
:root[data-face="v4"] #cuLifecycleControls button{background:transparent !important;border:1px solid rgba(255,255,255,.36) !important;color:#fff !important;
  border-radius:6px !important;min-height:32px;padding:0 12px !important;font-weight:650 !important;font-size:12.5px !important}
:root[data-face="v4"] #cuLifecycleControls button:hover{background:rgba(255,255,255,.12) !important}
:root[data-face="v4"] #cuLifecycleControls button i{color:inherit !important}
:root[data-face="v4"] #cuLifecycleControls button.v4f-pri{background:#fff !important;border-color:#fff !important;color:var(--v4-frame) !important}
:root[data-face="v4"] #cuHeader > button{color:rgba(255,255,255,.85) !important}
:root[data-face="v4"] #cuHeader :is(button,i[onclick],span[onclick]):focus-visible{outline:2px solid #fff;outline-offset:2px}

:root[data-face="v4"] #cuV4Head{display:block;flex:0 0 100%;margin-top:16px}
:root[data-face="v4"] #cuV4Head:empty{display:none}
:root[data-face="v4"] .v4f-state{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
:root[data-face="v4"] .v4f-state strong{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:750;font-stretch:110%;letter-spacing:-.01em}
:root[data-face="v4"] .v4f-state strong::before{content:"";width:11px;height:11px;border-radius:50%;flex:none;background:rgba(255,255,255,.5);transform:translateY(-1px)}
:root[data-face="v4"] .v4f-state[data-kind="on"] strong::before{background:var(--q-bom-on)}
:root[data-face="v4"] .v4f-state[data-kind="habit"] strong::before{background:var(--q-aceitavel-on)}
:root[data-face="v4"] .v4f-state:is([data-kind="down"],[data-kind="closed"]){display:inline-flex;padding:7px 14px 7px 12px;border-radius:8px;
  background:var(--v4-surface);box-shadow:0 1px 2px rgba(0,0,0,.22),0 8px 24px rgba(0,0,0,.16)}
:root[data-face="v4"] .v4f-state:is([data-kind="down"],[data-kind="closed"]) strong{color:var(--v4-ink)}
:root[data-face="v4"] .v4f-state:is([data-kind="down"],[data-kind="closed"]) span{color:var(--v4-ink-3)}
:root[data-face="v4"] .v4f-state[data-kind="down"] strong::before{background:#c62828;border-radius:2px;animation:v4blink 1.2s steps(2,start) infinite}
:root[data-face="v4"] .v4f-state[data-kind="closed"] strong::before{background:var(--q-sem_leitura);border-radius:2px}
@media (prefers-reduced-motion:reduce){:root[data-face="v4"] .v4f-state[data-kind="down"] strong::before{animation:none}}
:root[data-face="v4"] .v4f-state span{font-size:13.5px;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}

/* caminho da fibra */
:root[data-face="v4"] .v4f-path{display:block;width:100%;height:auto;margin-top:18px;overflow:visible}
:root[data-face="v4"] .v4f-path .ln{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2.5}
:root[data-face="v4"] .v4f-path .ln.cut{stroke:rgba(255,255,255,.75);stroke-dasharray:3 5}
:root[data-face="v4"] .v4f-path .ln.dim{stroke:rgba(255,255,255,.12)}
:root[data-face="v4"] .v4f-path .fl{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:1.5 19;opacity:.9;animation:v4flowf 1.6s linear infinite}
@keyframes v4flowf{to{stroke-dashoffset:-20.5}}
@media (prefers-reduced-motion:reduce){:root[data-face="v4"] .v4f-path .fl{animation:none;opacity:.4}}
:root[data-face="v4"] .v4f-path .nd{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.55);stroke-width:1.2}
:root[data-face="v4"] .v4f-path .nd.ok{stroke:var(--q-bom-on);stroke-width:2}
:root[data-face="v4"] .v4f-path .nd.warn{stroke:var(--q-aceitavel-on);stroke-width:2}
:root[data-face="v4"] .v4f-path .nd.ruim{stroke:var(--q-ruim-on);stroke-width:2}
:root[data-face="v4"] .v4f-path .nd.crit{fill:#fff;stroke:none}
:root[data-face="v4"] .v4f-path .nd.off{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.26);stroke-dasharray:3 3}
:root[data-face="v4"] .v4f-path .gl{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:root[data-face="v4"] .v4f-path .gl.crit{stroke:var(--v4-alarm)}
:root[data-face="v4"] .v4f-path .gl.off{stroke:rgba(255,255,255,.4)}
:root[data-face="v4"] .v4f-path text{font-family:'Archivo',system-ui,sans-serif;fill:#fff}
:root[data-face="v4"] .v4f-path .t{font-size:12.5px;font-weight:650}
:root[data-face="v4"] .v4f-path .s{font-size:11.5px;fill:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
:root[data-face="v4"] .v4f-path .s.q-ok{fill:var(--q-bom-on);font-weight:650}
:root[data-face="v4"] .v4f-path .s.q-warn{fill:var(--q-aceitavel-on);font-weight:650}
:root[data-face="v4"] .v4f-path .s.q-ruim{fill:var(--q-ruim-on);font-weight:650}
:root[data-face="v4"] .v4f-path .s.q-crit{fill:#fff;font-weight:700}
:root[data-face="v4"] .v4f-path .dimt{fill:rgba(255,255,255,.6)}
:root[data-face="v4"] .v4f-path .lk{font-size:11px;fill:rgba(255,255,255,.7)}

/* abas e corpo */
:root[data-face="v4"] #cuTabsBar{flex:none;background:var(--v4-surface) !important;border-bottom:1px solid var(--v4-line) !important;padding:0 28px !important;gap:4px !important}
:root[data-face="v4"] #cuTabsBar .cu-tab{color:var(--v4-ink-2) !important;border-bottom:2.5px solid transparent !important;font-size:13.5px !important;padding:13px 12px 11px !important}
:root[data-face="v4"] #cuTabsBar .cu-tab > i.bi{display:none}
:root[data-face="v4"] #cuTabsBar .cu-tab:hover{color:var(--v4-ink) !important}
:root[data-face="v4"] #cuTabsBar .cu-tab.cu-tab-active{color:var(--v4-ink) !important;border-bottom-color:var(--v4-data) !important;font-weight:650}
:root[data-face="v4"] #cuTabsBar .cu-tab:focus-visible{outline:2px solid var(--v4-data);outline-offset:-4px}
:root[data-face="v4"] #cuBody{flex:1;max-height:none !important;padding:22px 28px 40px !important}

/* Resumo: diagnóstico + números */
:root[data-face="v4"] #cuV4Resumo{display:block;margin-bottom:22px}
:root[data-face="v4"] .v4f-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:36px}
@media (max-width:1100px){:root[data-face="v4"] .v4f-grid{grid-template-columns:minmax(0,1fr)}}
:root[data-face="v4"] .v4f-grid h3{margin:0 0 12px;padding-bottom:9px;border-bottom:1.5px solid var(--v4-ink);font-size:16px;font-weight:750;font-stretch:112%;letter-spacing:-.01em;color:var(--v4-ink)}
:root[data-face="v4"] .v4f-verdict{margin:0 0 14px;font-size:17px;line-height:1.42;color:var(--v4-ink);text-wrap:pretty}
:root[data-face="v4"] .v4f-verdict b{font-weight:700}
:root[data-face="v4"] .v4f-verdict b.c{color:var(--q-critico-fg)}
:root[data-face="v4"] .v4f-items{border-top:1px solid var(--v4-line)}
:root[data-face="v4"] .v4f-ar{display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--v4-line);font-size:13.5px;color:var(--v4-ink)}
:root[data-face="v4"] .v4f-ar .sev{font-size:12.5px;font-weight:650;display:flex;align-items:center;gap:9px}
:root[data-face="v4"] .v4f-ar .sev::before{content:"";width:10px;height:10px;flex:none;background:currentColor}
:root[data-face="v4"] .v4f-ar .sev.crit{color:var(--q-critico-fg)}
:root[data-face="v4"] .v4f-ar .sev.warn{color:var(--q-aceitavel-fg)}
:root[data-face="v4"] .v4f-ar .sev.warn::before{width:9px;height:9px;transform:rotate(45deg)}
:root[data-face="v4"] .v4f-ar .sev.info{color:var(--v4-ink-2)}
:root[data-face="v4"] .v4f-ar .sev.info::before{background:none;border:1.75px solid currentColor;border-radius:50%}
:root[data-face="v4"] .v4f-ar .sev.ok{color:var(--q-bom-fg)}
:root[data-face="v4"] .v4f-ar .sev.ok::before{border-radius:50%}
:root[data-face="v4"] .v4f-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;margin:0}
:root[data-face="v4"] .v4f-kv dt{color:var(--v4-ink-3);font-size:13px;padding:9px 0;border-bottom:1px solid var(--v4-line);white-space:nowrap}
:root[data-face="v4"] .v4f-kv dd{margin:0;padding:9px 0;border-bottom:1px solid var(--v4-line);text-align:right;font-size:13.5px;color:var(--v4-ink);font-variant-numeric:tabular-nums}
:root[data-face="v4"] .v4f-kv dd b{font-weight:650}
:root[data-face="v4"] .v4f-kv dd small{color:var(--v4-ink-3);font-size:12.5px}

/* ════════════════════════════════════════════════════════════════════════════
 * F5 — CABEÇALHO PRÓPRIO POR TELA (js/screens-v4.js): frase da área, funções
 * principais e o desenho do assunto. As cores dos desenhos são as faixas da
 * régua calculadas para a moldura (--q-*-on); o veredito vem do backend.
 * ══════════════════════════════════════════════════════════════════════════ */
:root[data-face="v4"] .v4-band.is-screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px);align-items:center;gap:8px 32px;padding:20px 28px 22px}
@media (max-width:1280px){:root[data-face="v4"] .v4-band.is-screen{grid-template-columns:minmax(0,1fr)}}
:root[data-face="v4"] .v4-band.is-screen .v4-alert{grid-column:1/-1;margin:0 0 8px;font-size:14px;line-height:1.5;max-width:none;color:rgba(255,255,255,.9)}
:root[data-face="v4"] .v4-band.is-screen h1{font-size:30px}
:root[data-face="v4"] .v4-band.is-screen h1 .isp-ic{width:30px;height:30px}
:root[data-face="v4"] .v4-scr-lead{margin:12px 0 0;font-size:16.5px;line-height:1.42;color:rgba(255,255,255,.88);max-width:54ch;text-wrap:pretty}
:root[data-face="v4"] .v4-scr-lead b{color:#fff;font-weight:700}
:root[data-face="v4"] .v4-scr-lead .c{color:var(--q-critico-on);font-weight:700}
:root[data-face="v4"] .v4-scr-lead .w{color:var(--q-aceitavel-on);font-weight:700}
:root[data-face="v4"] .v4-scr-lead .dim{color:rgba(255,255,255,.7)}
:root[data-face="v4"] .v4-scr-vis{min-width:0}

/* funções principais */
:root[data-face="v4"] .v4-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
:root[data-face="v4"] .v4-act{height:32px;padding:0 13px;border-radius:6px;border:1px solid rgba(255,255,255,.36);background:transparent;color:#fff;
  font:650 13px 'Archivo',system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background-color .12s}
:root[data-face="v4"] .v4-act:hover{background:rgba(255,255,255,.12)}
:root[data-face="v4"] .v4-act.pri{background:#fff;border-color:#fff;color:var(--v4-frame)}
:root[data-face="v4"] .v4-act.pri:hover{background:rgba(255,255,255,.9)}
:root[data-face="v4"] .v4-act .n{font-weight:700;opacity:.75;font-variant-numeric:tabular-nums}
:root[data-face="v4"] .v4-act:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* cores de faixa usadas pelos desenhos */
:root[data-face="v4"] .v4-band .q-ok{--qc:var(--q-bom-on)}
:root[data-face="v4"] .v4-band .q-aceit{--qc:var(--q-aceitavel-on)}
:root[data-face="v4"] .v4-band .q-ruim{--qc:var(--q-ruim-on)}
:root[data-face="v4"] .v4-band .q-crit{--qc:var(--q-critico-on)}
:root[data-face="v4"] .v4-band .q-off{--qc:rgba(255,255,255,.24)}

/* legenda */
:root[data-face="v4"] .v4-cap{font-size:12px;color:rgba(255,255,255,.72);margin-bottom:10px}
:root[data-face="v4"] .v4-legend{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:12px;font-size:12px;color:rgba(255,255,255,.78)}
:root[data-face="v4"] .v4-legend span{display:inline-flex;align-items:center;gap:7px}
:root[data-face="v4"] .v4-legend b{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}
:root[data-face="v4"] .v4-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;background:var(--qc,rgba(255,255,255,.4))}
:root[data-face="v4"] .v4-legend i.ln{width:18px;height:0;border-top:2.5px solid #fff;border-radius:0;background:none}
:root[data-face="v4"] .v4-legend i.ln.thin{border-top:1.5px solid rgba(255,255,255,.6)}

/* Assinantes: barras por concentrador */
:root[data-face="v4"] .v4-bars{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:10px 12px;align-items:center;font-size:13px;color:#fff}
:root[data-face="v4"] .v4-bars .b{height:8px;background:rgba(255,255,255,.16);border-radius:4px;overflow:hidden}
:root[data-face="v4"] .v4-bars .b i{display:block;height:100%;background:rgba(255,255,255,.9);border-radius:4px}
:root[data-face="v4"] .v4-bars .q{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
:root[data-face="v4"] .v4-bars .b:is(.q-ok,.q-aceit,.q-ruim,.q-crit) i{background:var(--qc)}

/* OLT: um quadro por porta PON */
:root[data-face="v4"] .v4-pons{display:grid;gap:9px}
:root[data-face="v4"] .v4-pons .r{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center}
:root[data-face="v4"] .v4-pons .nm{font-size:12.5px;font-weight:650;line-height:1.2;color:#fff}
:root[data-face="v4"] .v4-pons .nm small{display:block;font-weight:400;color:rgba(255,255,255,.68);font-size:11.5px}
:root[data-face="v4"] .v4-pons .cells{display:flex;gap:6px;flex-wrap:wrap}
:root[data-face="v4"] .v4-pc{position:relative;width:54px;height:38px;border-radius:5px;background:rgba(255,255,255,.1);
  border:1.5px solid color-mix(in srgb,var(--qc,#fff) 60%,transparent);padding:4px 6px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#fff}
:root[data-face="v4"] .v4-pc i{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.72);line-height:1}
:root[data-face="v4"] .v4-pc b{font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1}
:root[data-face="v4"] .v4-pc::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--f);background:var(--qc,#fff);opacity:.9}
:root[data-face="v4"] .v4-pc:is(.q-aceit,.q-ruim,.q-crit){border-color:var(--qc)}
:root[data-face="v4"] .v4-pc.q-crit{background:rgba(255,255,255,.17)}

/* Roteadores: um quadrinho por aparelho */
:root[data-face="v4"] .v4-unit{display:grid;grid-template-columns:repeat(auto-fill,10px);gap:3px;max-width:560px}
:root[data-face="v4"] .v4-unit i{width:10px;height:10px;border-radius:2px;background:var(--qc)}

/* Segurança: linha do tempo de 24 h */
:root[data-face="v4"] .v4-tl{width:100%;height:auto;display:block}
:root[data-face="v4"] .v4-tl text{font-family:'Archivo',system-ui,sans-serif;fill:#fff}
:root[data-face="v4"] .v4-tl .who{font-size:12.5px;font-weight:650}
:root[data-face="v4"] .v4-tl .typ{font-size:11px;fill:rgba(255,255,255,.74)}
:root[data-face="v4"] .v4-tl .tk{font-size:11px;fill:rgba(255,255,255,.62)}
:root[data-face="v4"] .v4-tl .ax{stroke:rgba(255,255,255,.16)}
:root[data-face="v4"] .v4-tl rect.past{fill:rgba(255,255,255,.62)}
:root[data-face="v4"] .v4-tl rect.on{fill:var(--q-aceitavel-on)}

/* Tráfego: 24 h */
:root[data-face="v4"] .v4-spark{width:100%;height:auto;display:block}
:root[data-face="v4"] .v4-spark .ar{fill:rgba(255,255,255,.1)}
:root[data-face="v4"] .v4-spark .dl{fill:none;stroke:#fff;stroke-width:2}
:root[data-face="v4"] .v4-spark .up{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.3}
:root[data-face="v4"] .v4-spark circle{fill:#fff}
:root[data-face="v4"] .v4-spark text{font:11px 'Archivo',system-ui,sans-serif;fill:rgba(255,255,255,.64);font-variant-numeric:tabular-nums}

/* a faixa já diz o frescor das fontes: as tiras "Confiança das fontes" de cada aba saem */
:root[data-face="v4"] :is(#assinantesCollectors,#securityCollectors,#servicesCollectors,#cpeCollectors,#onboardingCollectors){display:none !important}

/* ── F5b: Concentradores, BGP, Latência, Serviços, Saúde da Rede ── */
/* Concentradores: uma linha por roteador, CPU/memória/temperatura pela régua de recurso */
:root[data-face="v4"] .v4-rt{display:grid;gap:8px}
:root[data-face="v4"] .v4-rt .r{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:14px;align-items:center}
:root[data-face="v4"] .v4-rt .nm{font-size:13px;font-weight:650;color:#fff;line-height:1.25;min-width:0}
:root[data-face="v4"] .v4-rt .nm small{display:block;font-weight:400;font-size:11.5px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
:root[data-face="v4"] .v4-rt .nm .cx{color:var(--q-critico-on);font-weight:700}
:root[data-face="v4"] .v4-rt .r.off .nm{opacity:.85}
:root[data-face="v4"] .v4-rt .m{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 6px;position:relative;padding-bottom:6px;min-height:30px}
:root[data-face="v4"] .v4-rt .m small{font-size:11px;color:rgba(255,255,255,.66)}
:root[data-face="v4"] .v4-rt .m b{font-size:14px;font-weight:650;color:var(--qc);text-align:right;font-variant-numeric:tabular-nums}
:root[data-face="v4"] .v4-rt .m i{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
:root[data-face="v4"] .v4-rt .m i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--f);border-radius:2px;background:var(--qc)}
:root[data-face="v4"] .v4-rt .m.q-off{min-height:30px}

/* BGP: uma linha por sessão */
:root[data-face="v4"] .v4-peers{display:grid;gap:8px}
:root[data-face="v4"] .v4-peers .r{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
:root[data-face="v4"] .v4-peers .r.q-crit{border-color:var(--qc);background:rgba(255,255,255,.14)}
:root[data-face="v4"] .v4-peers .st{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:var(--qc)}
:root[data-face="v4"] .v4-peers .st i{width:9px;height:9px;border-radius:50%;background:var(--qc)}
:root[data-face="v4"] .v4-peers .nm{font-size:13px;font-weight:650;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-face="v4"] .v4-peers small{display:block;font-weight:400;font-size:11.5px;color:rgba(255,255,255,.7)}
:root[data-face="v4"] .v4-peers .q{font-size:12.5px;color:#fff;text-align:right;font-variant-numeric:tabular-nums}

/* Latência: agora × habitual; a cor é a banda que o servidor entrega (v273) */
:root[data-face="v4"] .v4-lat{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:9px 12px;align-items:center;font-size:12.5px;color:#fff}
:root[data-face="v4"] .v4-lat .b{position:relative;height:8px;background:rgba(255,255,255,.14);border-radius:4px}
:root[data-face="v4"] .v4-lat .b i{display:block;height:100%;border-radius:4px;background:rgba(255,255,255,.9)}
:root[data-face="v4"] .v4-lat .b em{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:rgba(255,255,255,.55);border-radius:1px}
:root[data-face="v4"] .v4-lat .q{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
:root[data-face="v4"] .v4-lat .q small{font-weight:400;color:var(--q-aceitavel-on)}
:root[data-face="v4"] .v4-lat .b:is(.q-ok,.q-aceit,.q-ruim,.q-crit) i{background:var(--qc)}
:root[data-face="v4"] .v4-lat .q:is(.q-ok,.q-aceit,.q-ruim,.q-crit){color:var(--qc)}
:root[data-face="v4"] .v4-legend i.tk{width:2px;height:12px;border-radius:1px;background:rgba(255,255,255,.55)}

/* Serviços: um selo por provedor */
:root[data-face="v4"] .v4-chips{display:flex;flex-wrap:wrap;gap:6px}
:root[data-face="v4"] .v4-chips span{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:12px;font-size:12px;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
:root[data-face="v4"] .v4-chips span i{width:8px;height:8px;border-radius:50%;background:var(--qc)}
:root[data-face="v4"] .v4-chips span:is(.q-ruim,.q-crit){border-color:var(--qc);font-weight:650}

/* Saúde da Rede: a planta numa barra */
:root[data-face="v4"] .v4-stack{display:flex;height:22px;border-radius:5px;overflow:hidden;gap:2px}
:root[data-face="v4"] .v4-stack span{height:100%;background:var(--qc)}

/* ── Cores neutras que estavam CRAVADAS nas telas antigas (scripts/theme_tokens.py, 08/10) ──
   Cada `#0d1117`, `#30363d`, `#c9d1d9`… em estilo de página virou `var(--k-papel, cor-original)`.
   Estas variáveis só existem AQUI: no visual antigo o navegador usa a cor de reserva, que é
   a de sempre. Aqui elas seguem o modo claro/escuro e a cor da marca. */
:root[data-face="v4"]{
  --k-bg:var(--v4-surface-2);   /* fundo afundado dentro de um painel */
  --k-panel:var(--v4-surface);  /* fundo de cartão */
  --k-raise:var(--v4-line);     /* trilho de barra, selo neutro */
  --k-line:var(--v4-line);      /* borda e divisória */
  --k-ink:var(--v4-ink); --k-ink2:var(--v4-ink-2); --k-dim:var(--v4-ink-3);
}

/* ── Superfície SEMPRE escura (Modo Incidente: fundo rgba(0,0,0,.92) nos dois modos) ──
   No modo claro, as variáveis do tema chegavam aqui com os valores claros: a tabela
   ficava branca e a coluna Cliente, escrita em branco, sumia (medido em 08/10 com o
   incidente real aberto: 974 textos abaixo do contraste mínimo). Dentro dela, o tema
   volta a ser o escuro — os mesmos neutros do modo escuro do theme-engine. */
:root[data-face="v4"] #bf-incident-modal{
  --bg:#181618; --bg2:#2a262a; --panel:#221f22; --panel-head:#2a262a; --sidebar:#221f22; --topbar:#221f22;
  --border:#363236; --text:#f3f0f3; --muted:#a6a0a6; --text-dim:#a6a0a6; --input-bg:#1e1b1e;
  --bg-page:#181618; --bg-panel:#221f22; --bg-panel-2:#2a262a; --bg-elevated:#2a262a; --bg-hover:#2a262a;
  --border-soft:#363236; --border-strong:#4a454a; --text-strong:#f3f0f3; --text-muted:#a6a0a6;
  --k-bg:#181618; --k-panel:#221f22; --k-raise:#363236; --k-line:#363236;
  --k-ink:#f3f0f3; --k-ink2:#cec9ce; --k-dim:#a6a0a6;
  /* regras do visual novo que leem os tokens --v4-* direto (tabela, selos) */
  --v4-bg:#181618; --v4-surface:#221f22; --v4-surface-2:#2a262a; --v4-input:#1e1b1e;
  --v4-line:#363236; --v4-line-2:#4a454a; --v4-ink:#f3f0f3; --v4-ink-2:#cec9ce; --v4-ink-3:#a6a0a6;
  /* semáforo: o tom feito para fundo escuro (o mesmo da moldura) */
  --q-otimo-fg:var(--q-otimo-on); --q-bom-fg:var(--q-bom-on); --q-aceitavel-fg:var(--q-aceitavel-on);
  --q-ruim-fg:var(--q-ruim-on); --q-critico-fg:var(--q-critico-on); --q-saturado-fg:var(--q-saturado-on);
  --q-sem_leitura-fg:var(--q-sem_leitura-on);
  --red:var(--q-critico-on); --yellow:var(--q-aceitavel-on); --green:var(--q-bom-on); --c-attn:var(--q-ruim-on);
  --status-red:var(--q-critico-on);
  color-scheme:dark;
  color:#f3f0f3;   /* a cor herdada do body já vem resolvida (escura no modo claro) */
}

/* ── Menu "Aparência" no visual novo (F6): sem os 7 acentos nem o facelift antigo — a cor
   é a da marca. Fica só a chave do visual (para voltar ao antigo, se precisar). ── */
:root[data-face="v4"] #themeMenu > .theme-opt:not([data-key="face-v4"]),
:root[data-face="v4"] #themeMenu > div[style*="border-top"]{display:none}
/* sem os acentos sobra uma opção, e o menu (absoluto dentro do botão) encolhia até quebrar o texto em 4 linhas */
:root[data-face="v4"] #themeMenu{width:max-content}
:root[data-face="v4"] #themeMenu .theme-opt{white-space:nowrap}

/* Cor só onde é estado. Os 4 cartões do Tráfego tinham uma cor fixa cada (azul, verde, laranja,
 * roxo) — enfeite que o atendente lê como semáforo. A faixa de incidente antiga repete o
 * cabeçalho da tela, que já avisa a queda em qualquer aba. */
/*   Regra geral: cartão que declara uma das cores de ENFEITE do tema antigo (--col fixo) perde a
 *   cor no rótulo e no valor que repete a mesma cor fixa. Cor de semáforo posta pelo código
 *   (style.color) o navegador guarda como rgb(…) e não casa aqui. #ea580c (risco) fica. */
:root[data-face="v4"] .stat-big:is([style*="--col:#58a6ff"],[style*="--col:#3fb950"],[style*="--col:#d29922"],[style*="--col:#a371f7"],[style*="--col:#d2a8ff"]){--col:var(--v4-line-2) !important}
:root[data-face="v4"] .stat-big:is([style*="--col:#58a6ff"],[style*="--col:#3fb950"],[style*="--col:#d29922"],[style*="--col:#a371f7"],[style*="--col:#d2a8ff"]) > .lbl{color:var(--v4-ink-3) !important}
:root[data-face="v4"] .stat-big[style*="--col:#58a6ff"] > .val[style*="color:#58a6ff"],
:root[data-face="v4"] .stat-big[style*="--col:#3fb950"] > .val[style*="color:#3fb950"],
:root[data-face="v4"] .stat-big[style*="--col:#d29922"] > .val[style*="color:#d29922"],
:root[data-face="v4"] .stat-big[style*="--col:#a371f7"] > .val[style*="color:#a371f7"],
:root[data-face="v4"] .stat-big[style*="--col:#d2a8ff"] > .val[style*="color:#d2a8ff"]{color:var(--v4-ink) !important}
:root[data-face="v4"] #bf-incident-banner{display:none !important}