/* SPEC-PORTAL-CLIENTE-001 · Portal do Cliente.
   ETAPA 2 (portal-circuitos-e2) · BASE VISUAL E ACESSIBILIDADE.
   TOKENS: uma BASE única (tema claro) no primeiro :root; o noturno SÓ redefine valores (dois blocos idênticos: preferência
   do sistema e escolha manual — o teste portal-tema-browser.test.js guarda que os dois têm os mesmos tokens). Nada fora
   daqui tem cor própria nas zonas de Circuitos/Chamados/shell: tudo é var(--token).
   Fonte única: DM Sans. Faturas e Contratos (.fv-*, .fat-*, .ct-*) NÃO são tocados: o bloco "ILHA" (fim do arquivo)
   devolve a eles os valores da Etapa 1 para os tokens compartilhados. */
:root{
  color-scheme:light;
  /* superfície · linha · texto (todo texto ≥ 4,5:1 sobre --surface, --surface-2 e --bg; --control-border ≥ 3:1) */
  --bg:#F2F4F8;--surface:#FFFFFF;--surface-2:#F7F8FB;--surface-3:#EEF1F6;
  --border:#E2E6EE;--border-2:#D3D9E3;--control-border:#808AA0;--track:#E6E9F0;
  --text:#17162E;--text-muted:#45445E;--text-faint:#5C5B74;
  /* marca · ação · foco */
  --brand-primary:#1D1B4E;--brand-accent:#29A8E1;--accent:#17699B;--accent-soft:#E5F2FA;
  --primary-bg:#1D1B4E;--primary-fg:#FFFFFF;--primary-hover:#2B2870;--focus:#17699B;
  --sidebar:#14123A;--sidebar-text:#D3D0E8;--sidebar-muted:#9C98C0;--sidebar-active:#FFFFFF;--sidebar-focus:#72C8EF;--sidebar-hover:rgba(255,255,255,.07);--sidebar-on:rgba(41,168,225,.18);
  --scrim:rgba(20,18,58,.55);--shimmer:rgba(255,255,255,.65);
  /* status (texto ≥ 4,5:1 sobre o fundo suave do selo) */
  --status-online:#147A39;--status-online-soft:#E4F3E9;
  --status-degraded:#8A5A0B;--status-degraded-soft:#FBEFD8;
  --status-offline:#B42323;--status-offline-soft:#FBE7E7;
  --status-maintenance:#4C5565;--status-maintenance-soft:#ECEEF2;
  --status-nodata:#4D5D78;--status-nodata-soft:#E7ECF4;
  --status-implantacao:#33609A;--status-implantacao-soft:#E3ECF8;
  --layer-ok:var(--status-online);--layer-fail:var(--status-offline);
  --degraded-ink:#6F4708;--degraded-strong:#9B1C1C;
  --series-1:#17699B;--series-2:#B4531A;--grid:#E6E9F0;
  --terminal-bg:#14123A;--terminal-text:#C7E7F7;
  --ispx-brand:#f59e0b;--on-brand:#16181D; /* amarelo da marca ISPX + a tinta escura do par (amarelo com texto branco não passa) */
  /* mapa (TASK-017): a geometria é contexto — menos destaque que os pontos; o símbolo do ponto contrasta com a cor do status */
  --map-water:#E8EDF4;--map-land:#FFFFFF;--map-border:#A9B2C2;--map-label:#5C5B74;--map-selection:#17699B;--map-ring:#FFFFFF;--map-glyph:#FFFFFF;
  /* TASK-073 · Ferramentas do circuito (tokens da especificação de design; o resto mapeia nos tokens acima) */
  --device-body:#2A2C3A;--device-edge:#1C1D28;--device-ink:#ECEDF3;--device-sub:#B4B6C8;
  --port-link:#15803D;--port-nolink:#6B7280;--port-off:#C62828;--port-glyph:#FFFFFF;--port-skel:#4A4C5C;
  --chart-in:#1D1B4E;--chart-out:#1584C0;--danger-bg:#C62828;--danger-ink:#FFFFFF;--overlay:rgba(20,18,58,.42);--switch-off:#B8BCC8;
  --warn-border:#EED7A8;--err-border:#F3C9C9;--info-border:#BFE3F5;
  /* TASK-566 · Chamados v2 (.pcv): os tokens de Faturas v7 + Em atendimento; o noturno é o derivado do desenho "Portal — Chamados v2" */
  --cv-text:#1A1D23;--cv-text-2:#4B515C;--cv-text-3:#646A75;--cv-canvas:#FFFFFF;--cv-surface:#FFFFFF;--cv-hover:#F8F8F7;--cv-fill:#EEF0F2;--cv-line:#E4E6EA;--cv-line-strong:#C9CDD3;--cv-primary:#1F2A37;--cv-primary-ink:#FFFFFF;--cv-primary-hover:#0F172A;--cv-accent:#1F2A37;--cv-warn:#B7791F;--cv-warn-ink:#8A5A12;--cv-danger:#B42318;--cv-ok:#2F7D4F;--cv-info:#5B6B82;--cv-prog:#2E6AA8;--cv-shadow-pop:0 8px 24px rgba(16,24,40,.10);
  /* tipografia — DM Sans única */
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:ui-monospace,'SFMono-Regular','Cascadia Mono',Menlo,Consolas,monospace;
  --fs-2xs:12px;--fs-xs:13px;--fs-sm:14px;--fs-md:15px;--fs-lg:17px;--fs-xl:21px;--fs-2xl:25px;
  /* espaçamento · raio · sombra */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:30px;
  --radius-xs:8px;--radius-sm:11px;--radius-md:16px;--radius-pill:20px;
  --shadow-card:0 1px 2px rgba(29,27,78,.05);--shadow-lift:0 10px 30px rgba(20,18,58,.12);--shadow-modal:0 24px 70px rgba(20,18,58,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0D0C1F;--surface:#16153A;--surface-2:#1B1A42;--surface-3:#22214D;
    --border:#2B2A58;--border-2:#383769;--control-border:#7D7AAA;--track:#2A2955;
    --text:#EDECF8;--text-muted:#C3C1DC;--text-faint:#ABA9C9;
    --brand-primary:#C9C6F2;--brand-accent:#5BC3EE;--accent:#72C8EF;--accent-soft:#14304A;
    --primary-bg:#5BC0EC;--primary-fg:#081420;--primary-hover:#86D2F3;--focus:#72C8EF;
    --sidebar:#0A0918;--sidebar-text:#D3D0E8;--sidebar-muted:#9C98C0;--sidebar-active:#FFFFFF;--sidebar-focus:#72C8EF;--sidebar-hover:rgba(255,255,255,.07);--sidebar-on:rgba(91,195,238,.18);
    --scrim:rgba(0,0,0,.62);--shimmer:rgba(255,255,255,.07);
    --status-online:#6FD496;--status-online-soft:#123322;
    --status-degraded:#F2B957;--status-degraded-soft:#3A2A0C;
    --status-offline:#FF8A8A;--status-offline-soft:#3D1519;
    --status-maintenance:#BBC2CF;--status-maintenance-soft:#272B36;
    --status-nodata:#AFBBD0;--status-nodata-soft:#212A3A;
    --status-implantacao:#95B9EC;--status-implantacao-soft:#192A45;
    --degraded-ink:#F2B957;--degraded-strong:#FF8A8A;
    --series-1:#72C8EF;--series-2:#F4A066;--grid:#2A2955;
    --terminal-bg:#06050F;--terminal-text:#C7E7F7;
    --shadow-card:0 1px 2px rgba(0,0,0,.3);--shadow-lift:0 14px 36px rgba(0,0,0,.55);--shadow-modal:0 24px 70px rgba(0,0,0,.6);
    --map-water:#0B0A1D;--map-land:#1D1C47;--map-border:#4B4985;--map-label:#B3B1D0;--map-selection:#72C8EF;--map-ring:#0D0C1F;--map-glyph:#0D0C1F;
    --device-body:#0A0919;--device-edge:#3A3970;--device-ink:#ECEBF7;--device-sub:#A3A1C2;
    --port-link:#3CCB72;--port-nolink:#7B8094;--port-off:#F26B6B;--port-glyph:#0A0919;--port-skel:#2A2955;
    --chart-in:#5CC3F0;--chart-out:#C4B5FD;--danger-bg:#F26B6B;--danger-ink:#1A0B0B;--overlay:rgba(4,3,16,.66);--switch-off:#4A4980;
    --warn-border:rgba(232,169,60,.4);--err-border:rgba(242,107,107,.4);--info-border:rgba(92,195,240,.35);
    --cv-text:#ECEEF1;--cv-text-2:#B6BCC6;--cv-text-3:#959CA8;--cv-canvas:#121418;--cv-surface:#181B20;--cv-hover:#1C2026;--cv-fill:#23272E;--cv-line:#2A2F37;--cv-line-strong:#3E444E;--cv-primary:#ECEEF1;--cv-primary-ink:#121418;--cv-primary-hover:#FFFFFF;--cv-accent:#ECEEF1;--cv-warn:#E0A54A;--cv-warn-ink:#EDBB6A;--cv-danger:#F2867B;--cv-ok:#6CC28F;--cv-info:#9AA8BC;--cv-prog:#7FB0E6;--cv-shadow-pop:0 8px 24px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D0C1F;--surface:#16153A;--surface-2:#1B1A42;--surface-3:#22214D;
  --border:#2B2A58;--border-2:#383769;--control-border:#7D7AAA;--track:#2A2955;
  --text:#EDECF8;--text-muted:#C3C1DC;--text-faint:#ABA9C9;
  --brand-primary:#C9C6F2;--brand-accent:#5BC3EE;--accent:#72C8EF;--accent-soft:#14304A;
  --primary-bg:#5BC0EC;--primary-fg:#081420;--primary-hover:#86D2F3;--focus:#72C8EF;
  --sidebar:#0A0918;--sidebar-text:#D3D0E8;--sidebar-muted:#9C98C0;--sidebar-active:#FFFFFF;--sidebar-focus:#72C8EF;--sidebar-hover:rgba(255,255,255,.07);--sidebar-on:rgba(91,195,238,.18);
  --scrim:rgba(0,0,0,.62);--shimmer:rgba(255,255,255,.07);
  --status-online:#6FD496;--status-online-soft:#123322;
  --status-degraded:#F2B957;--status-degraded-soft:#3A2A0C;
  --status-offline:#FF8A8A;--status-offline-soft:#3D1519;
  --status-maintenance:#BBC2CF;--status-maintenance-soft:#272B36;
  --status-nodata:#AFBBD0;--status-nodata-soft:#212A3A;
  --status-implantacao:#95B9EC;--status-implantacao-soft:#192A45;
  --degraded-ink:#F2B957;--degraded-strong:#FF8A8A;
  --series-1:#72C8EF;--series-2:#F4A066;--grid:#2A2955;
  --terminal-bg:#06050F;--terminal-text:#C7E7F7;
  --shadow-card:0 1px 2px rgba(0,0,0,.3);--shadow-lift:0 14px 36px rgba(0,0,0,.55);--shadow-modal:0 24px 70px rgba(0,0,0,.6);
  --map-water:#0B0A1D;--map-land:#1D1C47;--map-border:#4B4985;--map-label:#B3B1D0;--map-selection:#72C8EF;--map-ring:#0D0C1F;--map-glyph:#0D0C1F;
  --device-body:#0A0919;--device-edge:#3A3970;--device-ink:#ECEBF7;--device-sub:#A3A1C2;
  --port-link:#3CCB72;--port-nolink:#7B8094;--port-off:#F26B6B;--port-glyph:#0A0919;--port-skel:#2A2955;
  --chart-in:#5CC3F0;--chart-out:#C4B5FD;--danger-bg:#F26B6B;--danger-ink:#1A0B0B;--overlay:rgba(4,3,16,.66);--switch-off:#4A4980;
  --warn-border:rgba(232,169,60,.4);--err-border:rgba(242,107,107,.4);--info-border:rgba(92,195,240,.35);
  --cv-text:#ECEEF1;--cv-text-2:#B6BCC6;--cv-text-3:#959CA8;--cv-canvas:#121418;--cv-surface:#181B20;--cv-hover:#1C2026;--cv-fill:#23272E;--cv-line:#2A2F37;--cv-line-strong:#3E444E;--cv-primary:#ECEEF1;--cv-primary-ink:#121418;--cv-primary-hover:#FFFFFF;--cv-accent:#ECEEF1;--cv-warn:#E0A54A;--cv-warn-ink:#EDBB6A;--cv-danger:#F2867B;--cv-ok:#6CC28F;--cv-info:#9AA8BC;--cv-prog:#7FB0E6;--cv-shadow-pop:0 8px 24px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);}
body{font-family:var(--font);color:var(--text);}
img{display:block;}
a{color:inherit;text-decoration:none;}

/* ---- shell (idêntico ao Design) ---- */
.app{display:flex;min-height:100vh;background:var(--bg);}
.sidebar{width:250px;flex-shrink:0;background:var(--sidebar);display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh;}
.side-cap{font-size:var(--fs-2xs);font-weight:800;letter-spacing:1.8px;color:var(--sidebar-muted);text-transform:uppercase;padding:6px 12px 10px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;color:var(--sidebar-text);background:transparent;transition:color .14s ease,background .14s ease;border:none;width:100%;text-align:left;font-family:inherit;}
.nav-item:hover{background:var(--sidebar-hover);}
.nav-item.on{background:var(--sidebar-on);color:var(--sidebar-active);box-shadow:inset 3px 0 0 var(--sidebar-focus);}
.nav-item.on:hover{background:var(--sidebar-on);}
.nav-soon{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--sidebar-muted);font-size:var(--fs-sm);font-weight:600;cursor:not-allowed;}
.badge-soon{margin-left:auto;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.5px;color:var(--brand-accent);background:rgba(41,168,225,.12);border-radius:20px;padding:2px 7px;text-transform:uppercase;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{height:74px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:20;}
.tb-title{font-size:18px;font-weight:800;letter-spacing:-.3px;}
.tb-sub{font-size:var(--fs-sm);color:var(--text-muted);margin-top:1px;line-height:1.25;}
.tb-sub b{color:var(--text);font-weight:700;}
.content{flex:1;padding:30px;overflow:auto;}
.wrap{max-width:1180px;margin:0 auto;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);}
.h{font-size:14px;font-weight:800;}
.row-hover{transition:background .12s ease;}
.row-hover:hover{background:var(--surface-2);}
.lift{transition:transform .18s ease,box-shadow .18s ease;}
.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-size:var(--fs-sm);font-weight:700;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color .14s ease;background:transparent;border:none;font-family:inherit;}
.fchip:hover{color:var(--brand-primary);}
.fchip.on{background:var(--brand-primary);color:var(--primary-fg);box-shadow:0 4px 12px rgba(29,27,78,.22);}
.fchip.on:hover{color:var(--primary-fg);}
.chip-n{font-size:var(--fs-2xs);font-weight:800;border-radius:20px;padding:1px 8px;min-width:20px;text-align:center;background:var(--surface-3);color:var(--text-muted);}
.fchip.on .chip-n{background:rgba(255,255,255,.18);color:var(--primary-fg);}
a:focus-visible,button:focus-visible,input:focus-visible,[role="link"]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px;border-radius:8px;}
.nav-item:focus-visible{outline:2px solid var(--brand-accent);outline-offset:-2px;}
[role="link"]{cursor:pointer;}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;margin-right:6px;border-radius:8px;align-items:center;justify-content:center;}
.nav-backdrop{display:none;position:fixed;inset:0;background:var(--scrim);z-index:40;}
.circ-table{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.circ-cards{display:none;grid-template-columns:repeat(3,1fr);gap:16px;}

/* ---- skeleton (Design) ---- */
.sk{position:relative;overflow:hidden;background:var(--surface-3);border-radius:8px;display:inline-block;}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--shimmer),transparent);animation:sh 1.4s infinite;}
@keyframes sh{100%{transform:translateX(100%);}}

/* ---- botões (Design) ---- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--primary-bg);border:none;color:var(--primary-fg);font-family:inherit;font-size:13.5px;font-weight:800;padding:11px 18px;border-radius:10px;cursor:pointer;}
.btn--ghost{background:var(--surface);border:1px solid var(--border);color:var(--brand-primary);}

/* ---- grids ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px;}
.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-bottom:18px;}

/* ---- pills/dots de status (espelham as cores inline do Design) ---- */
.pill{font-size:var(--fs-sm);font-weight:800;border-radius:20px;padding:4px 10px;white-space:nowrap;display:inline-block;}
.pill--online{color:var(--status-online);background:var(--status-online-soft);}
.pill--degraded{color:var(--status-degraded);background:var(--status-degraded-soft);}
.pill--offline{color:var(--status-offline);background:var(--status-offline-soft);}
.pill--maintenance{color:var(--status-maintenance);background:var(--status-maintenance-soft);}
.pill--implantacao{color:var(--status-implantacao);background:var(--status-implantacao-soft);}
.pill--unknown{color:var(--text-faint);background:var(--surface-3);}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;}

/* ---- responsivo (Design @1024 / @767) — toggle por classe (SPA, sem :target) ---- */
@media(max-width:1024px){
  .grid-2{grid-template-columns:1fr !important;}
  .kpis{grid-template-columns:repeat(2,1fr) !important;}
  .cards-grid{grid-template-columns:repeat(2,1fr) !important;}
  .sidebar{position:fixed;left:0;top:0;z-index:50;height:100vh;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.3);}
  .app.nav-open .sidebar{transform:translateX(0);}
  .app.nav-open .nav-backdrop{display:block;}
  .hamburger{display:inline-flex;}
  .report-scroll{overflow-x:auto;}
  .report-scroll > .report-inner{min-width:900px;}
}
@media(max-width:767px){
  .kpis{grid-template-columns:1fr !important;}
  .cards-grid{grid-template-columns:1fr !important;}
  .content{padding:16px !important;}
  .topbar{padding:0 16px !important;}
  .tb-user-role{display:none;}
  .fbar{flex-direction:column;align-items:stretch !important;}
  .fbar-right{width:100%;}
  .search-box{flex:1;min-width:0 !important;}
  .fchips{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .view-toggle{display:none !important;}
  .circ-table .circ-row, .circ-table .circ-head{display:none !important;}
  .circ-cards{display:grid !important;grid-template-columns:1fr !important;}
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONSOLE DO CIRCUITO v2 (SPEC-PORTAL-CLIENTE-002) — portado do handoff Design.
   Classes .cc-* + tokens novos. Ver /home/sunotel/portal-design/handoff_console_circuito_v2
   ═══════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════════
   portal-v2.css  —  Console do Circuito (SPEC-PORTAL-CLIENTE-002)
   ENTREGÁVEL. Só estilos NOVOS/alterados sobre o ISPXCore. Reusa os tokens
   existentes (--brand-*, --status-*, --layer-*, --surface*, --border, --text*,
   --radius-*, --spacing-*, --shadow-*) e o shell (.app/.sidebar/.main/.topbar/
   .content/.wrap/.card/.fchip/.chip-n/.sk/.hamburger/.nav-backdrop).
   Prefixo de todas as classes novas: .cc-  (console do circuito).
   IDs/valores técnicos em fonte mono (--mono). Zero hex solto fora do bloco de
   TOKENS NOVOS abaixo.

   ── TOKENS NOVOS (adicionar ao :root do ISPXCore; não existem hoje) ──────────
   Estão declarados aqui em @property-free :root para não travar o portal caso
   o Code ainda não os tenha migrado. Migre-os para o :root global e remova daqui.
   ════════════════════════════════════════════════════════════════════════════ */


/* ══ CABEÇALHO PERSISTENTE DO CONSOLE ════════════════════════════════════════
   Fica acima da barra de abas, sempre visível: voltar · TAG · pill de status ·
   ações (atualizar / reiniciar). Abaixo, a linha de sub-meta e o aviso de stale. */
.cc-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.cc-back{display:inline-flex;align-items:center;gap:7px;color:var(--text-muted);font-size:var(--fs-sm);font-weight:700;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 14px;}
.cc-tag{font-size:24px;font-weight:800;font-family:var(--mono);letter-spacing:-.5px;}
.cc-head__spacer{margin-left:auto;display:flex;align-items:center;gap:10px;}

/* pill de status consolidado (grande, no cabeçalho) */
.cc-pill{display:inline-flex;align-items:center;font-size:14px;font-weight:800;border-radius:var(--radius-pill);padding:8px 18px;white-space:nowrap;}
.cc-pill--online{color:var(--status-online);background:var(--status-online-soft);}
.cc-pill--degraded{color:var(--status-degraded);background:var(--status-degraded-soft);}
.cc-pill--offline{color:var(--status-offline);background:var(--status-offline-soft);}
.cc-pill--maintenance{color:var(--status-maintenance);background:var(--status-maintenance-soft);}
.cc-pill--implantacao{color:var(--status-implantacao);background:var(--status-implantacao-soft);}

/* variação pequena da pill para linhas/tabelas */
.cc-pill--sm{font-size:var(--fs-sm);font-weight:800;padding:4px 11px;}
/* ══ TASK-073 · FERRAMENTAS DO CIRCUITO — layout "SUNO - Ferramentas do Circuito" (Claude Design) ═══════════════════
   Medidas, raios e pesos da especificação (spec.md §2): card 16, cartão de ferramenta 14, botão/campo 10, pílula 999;
   títulos de card 17/800; rótulos 11/700 caixa alta +.4; métricas 17/800 tabular; valor ao vivo 36/800; alvo ≥ 44 px.
   Cores: SÓ tokens (os novos da especificação ficam no :root e nos dois blocos noturnos; o resto mapeia nos do portal:
   --st-* → --status-*, --info-* → --accent/--accent-soft, --border-strong → --border-2, --shadow-pop → --shadow-lift). */
@keyframes fc-gira{to{transform:rotate(360deg);}}
@keyframes fc-pulsa{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes fc-surge{from{opacity:0;}to{opacity:1;}}
@keyframes fc-desliza{from{transform:translateX(28px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes fc-sobe{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}}
.fc{display:flex;flex-direction:column;gap:18px;font-size:14px;color:var(--text);}
.fc :focus-visible,.fc-pn :focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.fc-mono{font-family:var(--mono);}
.fc-muted{color:var(--text-muted);}
.fc-gira{display:inline-block;flex-shrink:0;width:14px;height:14px;border:2px solid var(--border-2);border-top-color:var(--text);border-radius:50%;animation:fc-gira .8s linear infinite;}
.fc-gira--p{width:12px;height:12px;}
.fc-gira--g{width:22px;height:22px;border-width:3px;}
.fc-pulso{display:inline-block;flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--status-online);animation:fc-pulsa 1.2s ease-in-out infinite;}
.fc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* botões */
.fc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;border:1px solid var(--border-2);background:var(--surface);color:var(--text);text-decoration:none;}
.fc-btn--pri{border:none;background:var(--primary-bg);color:var(--primary-fg);}
.fc-btn--perigo{border:none;background:var(--danger-bg);color:var(--danger-ink);}
.fc-btn--contorno-perigo{border:1.5px solid var(--status-offline);background:transparent;color:var(--status-offline);flex-shrink:0;}
.fc-btn--tracejado{border:1px dashed var(--border-2);background:transparent;align-self:flex-start;}
.fc-btn--p{min-height:40px;padding:0 14px;font-size:13px;border-radius:9px;}
.fc-btn--ico{width:44px;padding:0;flex-shrink:0;}
.fc-btn:disabled{opacity:.45;cursor:not-allowed;}
.fc-btn__sub{font-weight:600;color:var(--text-muted);}
/* cabeçalho */
.fc-head{display:flex;flex-direction:column;gap:14px;}
.fc-trilha{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);}
.fc-trilha button{background:none;border:none;padding:0;font:inherit;color:var(--text-muted);cursor:pointer;min-height:24px;}
.fc-trilha button:hover{color:var(--text);text-decoration:underline;}
.fc-trilha [aria-current]{color:var(--text);font-weight:700;}
.fc-head__linha{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.fc-head__txt{min-width:0;flex:1 1 300px;}
.fc-h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.3px;}
.fc-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:5px;font-size:13px;color:var(--text-muted);}
.fc-head__meta b{color:var(--text);font-weight:700;overflow-wrap:anywhere;}
.fc-head__meta .fc-mono{font-size:12.5px;}
.fc-pilula{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;font-size:12px;font-weight:800;background:var(--surface-3);color:var(--text-muted);white-space:nowrap;}
.fc-pilula::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;}
.fc-pilula--online{background:var(--status-online-soft);color:var(--status-online);}
.fc-pilula--degradado{background:var(--status-degraded-soft);color:var(--status-degraded);}
.fc-pilula--offline{background:var(--status-offline-soft);color:var(--status-offline);}
.fc-pilula--neutro{background:var(--surface-3);color:var(--text-muted);}
/* avisos globais */
.fc-aviso{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:14px 16px;border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--text);}
.fc-aviso svg{flex-shrink:0;margin-top:1px;}
.fc-aviso__txt{flex:1 1 240px;min-width:0;}
.fc-aviso--erro{background:var(--status-offline-soft);border:1px solid var(--err-border);}
.fc-aviso--parcial{background:var(--status-degraded-soft);border:1px solid var(--warn-border);align-items:center;}
.fc-aviso--info{background:var(--accent-soft);border:1px solid var(--info-border);align-items:center;}
/* card padrão */
.fc-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0;}
.fc-card__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.fc-card__tit{display:flex;gap:12px;align-items:flex-start;min-width:0;flex:1 1 280px;}
.fc-card__tit h2{margin:0;font-size:17px;font-weight:800;}
.fc-card__sub{font-size:13px;color:var(--text-muted);margin-top:3px;line-height:1.45;}
.fc-ico{width:38px;height:38px;border-radius:11px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fc-ico--perigo{background:var(--status-offline-soft);}
.fc-ico--p{width:36px;height:36px;border-radius:10px;}
.fc-p{margin:0;font-size:13px;color:var(--text-muted);line-height:1.5;max-width:760px;}
.fc-rot{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.fc-num{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px;}
/* qualidade do link */
.fc-abas{display:flex;background:var(--surface-3);border-radius:12px;padding:3px;gap:3px;}
.fc-aba{min-height:42px;padding:0 16px;border:none;border-radius:9px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;background:transparent;color:var(--text-muted);}
.fc-aba[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(20,18,58,.14);}
.fc-barra{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;}
.fc-barra__nota{font-size:13px;color:var(--text-muted);flex:1 1 220px;}
.fc-dests{display:flex;flex-direction:column;}
.fc-dest{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:13px 2px;border-top:1px solid var(--border);}
.fc-dest__id{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0;}
.fc-dest__nome{font-size:14px;font-weight:700;}
.fc-dest__host{font-family:var(--mono);font-size:12.5px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;}
.fc-dest__estado{flex:0 1 256px;min-width:0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;line-height:1.35;color:var(--text-muted);}
.fc-dest__spark{flex:1 1 150px;min-width:130px;}
.fc-dest__spark svg{display:block;width:100%;height:34px;}
.fc-dest__acao{width:44px;flex:0 0 44px;}
.fc-logo{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface-3);}
.fc-logo--google{background:#FFFFFF;}
.fc-logo--google span{font-size:19px;font-weight:800;color:#4285F4;}
.fc-logo--cloudflare{background:#F38020;}
.fc-logo--youtube{background:#FF0000;}
.fc-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:none;border:none;padding:0;cursor:pointer;color:var(--text);font-family:inherit;font-size:13.5px;font-weight:800;}
.fc-switch__trilho{width:42px;height:24px;border-radius:12px;background:var(--switch-off);position:relative;flex-shrink:0;}
.fc-switch__trilho::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.fc-switch:disabled{opacity:.45;cursor:not-allowed;}
.fc-seg{display:flex;background:var(--surface-3);border-radius:10px;padding:3px;gap:3px;}
.fc-seg button{min-height:38px;padding:0 12px;border:none;border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;background:transparent;color:var(--text-muted);}
.fc-seg button[aria-checked="true"]{background:var(--surface);color:var(--text);}
.fc-seg button:disabled{cursor:not-allowed;}
/* TASK-073 · F2 — Qualidade do link com medição de verdade */
.fc-switch[aria-checked="true"] .fc-switch__trilho{background:var(--status-online);}
.fc-switch[aria-checked="true"] .fc-switch__trilho::after{left:21px;}
.fc-chip{display:inline-block;font-size:11px;font-weight:800;color:var(--text-muted);background:var(--surface-3);border-radius:20px;padding:2px 8px;vertical-align:1px;}
.fc-dest__met{display:flex;gap:16px;flex:0 0 auto;}
.fc-num--warn{color:var(--status-degraded);}
.fc-num--err{color:var(--status-offline);}
.fc-dest__estado--warn{color:var(--status-degraded);}
.fc-dest__estado--err{color:var(--status-offline);}
.fc-vivo-rot{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;}
.fc-restante{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;}
.fc-q-add{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px;border:1px dashed var(--border-2);border-radius:12px;background:var(--surface-2);}
.fc-q-add__campo{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--text-muted);}
.fc-dest--hist{padding:14px 2px;}
.fc-hist__graf{flex:2 1 280px;min-width:220px;}
.fc-hist__svg{display:block;width:100%;height:56px;}
.fc-hist__eixo{display:flex;justify-content:space-between;font-size:11px;color:var(--text-faint);margin-top:2px;}
.fc-hist__picos{font-size:12px;color:var(--text-muted);margin-top:4px;}
.fc-hist__nd{flex:2 1 300px;font-size:13px;font-weight:700;color:var(--text-muted);}
.fc-hist__legenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--text-muted);}
.fc-hist__legenda > span{display:inline-flex;align-items:center;gap:6px;}
.fc-hist__pico{width:9px;height:9px;border-radius:50%;background:var(--status-degraded);}
.fc-hist__falha{width:4px;height:11px;background:var(--status-offline);}
.fc-btn[aria-disabled="true"]{opacity:.7;cursor:progress;}
.fc-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 20px;border:1px dashed var(--border-2);border-radius:12px;}
.fc-vazio b{font-size:15px;font-weight:800;}
.fc-vazio span{font-size:13px;color:var(--text-muted);max-width:420px;line-height:1.5;}
/* grade (Portas ½ + cartões) */
.fc-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:18px;align-items:start;}
/* a CPE */
.fc-cpe-area{display:flex;flex-direction:column;gap:8px;max-width:100%;}
.fc-cpe-up{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--text);padding-left:6px;}
/* TASK-082 · o painel frontal ocupa a largura do cartão (antes: fit-content, espremido) */
.fc-cpe{position:relative;width:100%;box-sizing:border-box;background:linear-gradient(180deg,color-mix(in srgb,var(--device-body) 86%,#ffffff 14%) 0%,transparent 40%),var(--device-body);border:1px solid var(--device-edge);border-radius:14px;padding:12px 26px 12px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 0 rgba(0,0,0,.25),0 10px 22px -14px rgba(0,0,0,.55);}
.fc-cpe::before,.fc-cpe::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--device-sub) 80%,#fff 20%),var(--device-edge) 70%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);}
.fc-cpe::before{left:9px;}
.fc-cpe::after{right:9px;}
.fc-cpe__topo{display:flex;align-items:center;gap:12px;padding:0 2px;}
.fc-cpe__modelo{font-size:12.5px;font-weight:800;color:var(--device-ink);letter-spacing:.4px;}
.fc-cpe__respiro{flex:1 1 auto;height:8px;min-width:24px;max-width:140px;margin-left:auto;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0 3px,transparent 3px 7px);opacity:.75;}
.fc-cpe__led{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--device-sub);font-weight:700;}
.fc-cpe__led::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--port-link);box-shadow:0 0 6px var(--port-link);}
.fc-cpe__led[data-led="lendo"]::before{background:#E8A93C;box-shadow:0 0 6px #E8A93C;}
.fc-cpe__led[data-led="fora"]::before{background:var(--port-off);box-shadow:none;}
.fc-portas{display:flex;flex-wrap:wrap;gap:10px clamp(4px,1.2vw,12px);align-items:flex-start;justify-content:center;padding:8px 6px 4px;border-radius:10px;background:rgba(0,0,0,.16);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);}
.fc-portas[data-fora="1"]{opacity:.55;}
.fc-porta-slot{position:relative;flex:1 1 0;min-width:30px;max-width:68px;}
.fc-cpe[data-muitas="1"] .fc-porta-slot{max-width:56px;}
.fc-porta{width:100%;min-height:76px;background:transparent;border:none;padding:4px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;border-radius:10px;font-family:inherit;transition:background-color .15s ease;}
.fc-porta:not(:disabled):hover{background:rgba(255,255,255,.08);}
.fc-porta[aria-expanded="true"]{background:rgba(255,255,255,.14);}
.fc-porta:disabled{cursor:default;}
.fc-porta:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.fc-porta__leds{display:flex;gap:6px;justify-content:center;height:6px;}
.fc-porta__leds i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.14);}
.fc-porta[data-estado="link"] .fc-porta__leds i[data-led="link"]{background:var(--port-link);box-shadow:0 0 5px var(--port-link);}
.fc-porta[data-estado="link"] .fc-porta__leds i[data-led="act"]{background:#E8A93C;box-shadow:0 0 4px #E8A93C;animation:fc-pisca 1.6s steps(2,start) infinite;}
.fc-porta[data-estado="off"] .fc-porta__leds i[data-led="link"]{background:var(--port-off);}
.fc-porta__rj{position:relative;width:100%;max-width:56px;aspect-ratio:56/44;height:auto;display:flex;align-items:center;justify-content:center;padding-top:8%;border-radius:4px;background:var(--port-nolink);clip-path:polygon(0 20%,22% 20%,22% 0,78% 0,78% 20%,100% 20%,100% 100%,0 100%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);transition:transform .15s ease,filter .15s ease;}
.fc-porta__rj::before{content:"";position:absolute;left:30%;right:30%;top:6%;height:12%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1.5px,transparent 1.5px 4px);opacity:.55;}
.fc-porta__rj[data-sfp="1"]{clip-path:none;padding-top:0;aspect-ratio:56/30;border-radius:3px;}
.fc-porta__rj[data-sfp="1"]::before{display:none;}
.fc-porta:not(:disabled):hover .fc-porta__rj{transform:translateY(-3px);filter:brightness(1.12) drop-shadow(0 5px 6px rgba(0,0,0,.45));}
.fc-porta:focus-visible .fc-porta__rj{transform:translateY(-3px);filter:brightness(1.12);}
.fc-porta[data-estado="link"] .fc-porta__rj{background:var(--port-link);}
.fc-porta[data-estado="nolink"] .fc-porta__rj{background:var(--port-nolink);}
.fc-porta[data-estado="off"] .fc-porta__rj{background:var(--port-off);}
.fc-porta[data-estado="unknown"] .fc-porta__rj{background:repeating-linear-gradient(45deg,var(--port-nolink) 0 3px,transparent 3px 7px);}
.fc-porta[data-estado="reading"] .fc-porta__rj{background:var(--port-skel);animation:fc-pulsa 1.1s ease-in-out infinite;}
.fc-porta__rj svg{display:block;width:44%;height:auto;max-width:20px;}
.fc-porta__rj b{font-size:15px;font-weight:800;color:var(--device-ink);}
.fc-porta__num{font-size:13px;font-weight:800;color:var(--device-ink);line-height:1;white-space:nowrap;}
.fc-porta__up{width:22px;height:3px;border-radius:2px;background:transparent;}
.fc-porta__up[data-up="1"]{background:var(--brand-accent);}
@keyframes fc-pisca{0%,100%{opacity:1;}50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){
  .fc-porta,.fc-porta__rj{transition:none;}
  .fc-porta:not(:disabled):hover .fc-porta__rj,.fc-porta:focus-visible .fc-porta__rj{transform:none;}
  .fc-porta[data-estado="link"] .fc-porta__leds i[data-led="act"]{animation:none;}
}
@media (max-width:639px){
  .fc-cpe{padding:10px 18px;}
  .fc-cpe::before{left:5px;} .fc-cpe::after{right:5px;}
  .fc-porta-slot{min-width:34px;}
}
.fc-cpe-legenda{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);padding-left:4px;min-height:22px;}
.fc-legenda{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--text-muted);border-top:1px solid var(--border);padding-top:12px;}
/* TASK-121: a consulta das portas LAN mora na ficha; aqui só o atalho para ela */
.fc-portas-consulta{margin:12px 0 0;}
.fc-legenda span{display:inline-flex;align-items:center;gap:7px;}
.fc-legenda i{width:18px;height:16px;border-radius:3px;display:flex;align-items:center;justify-content:center;}
.fc-legenda i.fc-legenda__up{width:18px;height:3px;border-radius:2px;background:var(--brand-accent);}
/* menu da porta (âncora na porta, 268 px) */
.fc-menu{position:absolute;top:calc(100% + 6px);z-index:41;width:268px;max-width:calc(100vw - 32px);background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:12px;box-shadow:var(--shadow-lift);padding:6px;animation:fc-sobe .14s ease-out;text-align:left;}
.fc-menu[data-alinha="l"]{left:0;}
.fc-menu[data-alinha="r"]{right:0;}
.fc-menu[data-alinha="c"]{left:50%;transform:translateX(-50%);}
.fc-menu__cab{padding:9px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.fc-menu__t{font-size:14px;font-weight:800;}
.fc-menu__s{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.fc-menu__item{width:100%;display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:11px 10px;border:none;border-radius:8px;background:transparent;color:var(--text);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-align:left;}
.fc-menu__item svg{flex-shrink:0;margin-top:1px;}
.fc-menu__item:hover:not(:disabled),.fc-menu__item:focus-visible{background:var(--surface-3);}
.fc-menu__item:disabled{opacity:.55;cursor:not-allowed;}
.fc-menu__item small{display:block;font-size:12px;color:var(--text-muted);font-weight:500;margin-top:2px;}
.fc-menu__item--perigo{color:var(--status-offline);font-weight:800;align-items:center;}
.fc-menu__item--alterna{font-weight:800;align-items:center;}
.fc-menu__div{height:1px;background:var(--border);margin:4px 6px;}
.fc-menu__nota{display:flex;gap:9px;padding:10px;font-size:12.5px;color:var(--text-muted);line-height:1.45;border-top:1px solid var(--border);margin-top:4px;}
.fc-menu__nota svg{flex-shrink:0;margin-top:1px;}
/* cartões das ferramentas */
.fc-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;}
.fc-cartao{text-align:left;display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;cursor:pointer;color:var(--text);min-height:132px;font-family:inherit;}
.fc-cartao:hover{border-color:var(--border-2);box-shadow:var(--shadow-lift);}
.fc-cartao__topo{display:flex;align-items:center;justify-content:space-between;width:100%;}
.fc-cartao__t{font-size:15px;font-weight:800;}
.fc-cartao__d{font-size:12.5px;color:var(--text-muted);line-height:1.4;}
/* zona de ações com impacto */
.fc-perigo{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.fc-perigo__cab{display:flex;align-items:center;gap:12px;}
.fc-perigo__cab h2{margin:0;font-size:12px;font-weight:800;color:var(--status-offline);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;}
.fc-perigo__cab span{flex:1;height:1px;background:var(--err-border);}
.fc-reinicio{background:var(--surface);border:1px solid var(--err-border);border-radius:16px;padding:20px 22px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.fc-reinicio__txt{flex:1 1 220px;min-width:0;}
.fc-reinicio__t{font-size:16px;font-weight:800;}
.fc-reinicio__d{font-size:13px;color:var(--text-muted);line-height:1.5;margin-top:4px;}
.fc-log{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 22px;}
.fc-log__t{font-size:12px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;}
.fc-log ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.fc-log li{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.4;}
.fc-log li span{flex:1;min-width:0;}
.fc-log li time{color:var(--text-muted);white-space:nowrap;font-size:12.5px;}
/* janelas: painel lateral (600), modal de ferramenta (800), alertdialog — sobre o helper `abrirModal` do portal */
.pc-modal.pc-modal--fc{background:var(--overlay);animation:fc-surge .15s;}
.pc-modal--lateral{justify-content:flex-end;align-items:stretch;padding:0;}
.pc-modal--lateral .pc-modal__card{max-width:none;width:min(600px,100%);height:100%;max-height:100%;padding:0;border-radius:0;border:none;box-shadow:var(--shadow-lift);overflow:hidden;animation:fc-desliza .2s ease-out;}
.pc-modal--ferramenta{padding:24px;}
.pc-modal--ferramenta .pc-modal__card{max-width:800px;padding:0;max-height:100%;animation:fc-sobe .18s ease-out;}
.pc-modal--alerta{padding:16px;}
.pc-modal--alerta .pc-modal__card{max-width:460px;padding:22px;gap:14px;animation:fc-sobe .18s ease-out;}
.pc-modal--reinicio{padding:24px;}
.pc-modal--reinicio .pc-modal__card{max-width:520px;padding:0;max-height:100%;animation:fc-sobe .18s ease-out;}
@media (max-width:639px){
  .pc-modal--ferramenta,.pc-modal--reinicio{padding:0;}
  .pc-modal--ferramenta .pc-modal__card,.pc-modal--reinicio .pc-modal__card{height:100%;max-height:100%;border-radius:0;border:none;}
}
.fc-pn{display:flex;flex-direction:column;min-height:0;height:100%;}
.fc-pn__cab{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);}
.fc-pn__cab > div{flex:1;min-width:0;}
.fc-pn__cab h2{margin:0;font-size:18px;font-weight:800;}
.fc-pn__st{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);margin-top:4px;}
.fc-pn__corpo{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:16px;}
.fc-fechar{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;flex-shrink:0;}
.fc-caixa{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;font-size:13.5px;line-height:1.5;}
.fc-caixa svg{flex-shrink:0;}
.fc-caixa--neutra{background:var(--surface-2);border:1px solid var(--border);}
.fc-caixa--ok{background:var(--status-online-soft);}
.fc-caixa--aviso{background:var(--status-degraded-soft);border:1px solid var(--warn-border);}
.fc-caixa--erro{background:var(--status-offline-soft);border:1px solid var(--err-border);}
.fc-caixa--tracejada{justify-content:center;text-align:center;padding:26px 18px;border:1px dashed var(--border-2);color:var(--text-muted);}
.fc-erro{font-size:13px;font-weight:700;color:var(--status-offline);}
.fc-acoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.fc-campo{min-height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--control-border);background:var(--surface);color:var(--text);font-family:inherit;font-size:14.5px;}
.fc-campo--mono{font-family:var(--mono);}
.fc-campo[aria-invalid="true"]{border-color:var(--status-offline);}
.fc-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;font-weight:700;cursor:pointer;}
.fc-check input{width:20px;height:20px;accent-color:var(--danger-bg);flex-shrink:0;}
.fc-check--perigo{padding:6px 12px;border-radius:10px;background:var(--status-offline-soft);}
/* tráfego ao vivo */
.fc-tr__nums{display:flex;gap:16px 32px;flex-wrap:wrap;align-items:flex-end;}
.fc-tr__rot{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.fc-tr__val{font-size:36px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:4px;}
.fc-tr__val small{font-size:15px;color:var(--text-muted);font-weight:700;letter-spacing:0;}
.fc-tr__pico{margin-left:auto;font-size:12.5px;color:var(--text-muted);line-height:1.5;}
.fc-tr__pico b{display:block;font-size:14px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.fc-tr__graf{position:relative;min-height:220px;}
.fc-tr__graf svg{display:block;width:100%;height:auto;}
.fc-tr__medindo{height:240px;border:1px dashed var(--border-2);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-muted);font-size:14px;font-weight:700;}
.fc-tr__nota{font-size:12.5px;color:var(--text-muted);margin-top:auto;}
/* ping */
.fc-ping-form{display:flex;flex-direction:column;gap:10px;}
.fc-ping-form label{font-size:12.5px;font-weight:800;}
.fc-ping-linha{display:flex;gap:8px;flex-wrap:wrap;}
.fc-ping-linha .fc-campo{flex:1 1 220px;}
.fc-sugs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.fc-sug{min-height:44px;padding:0 12px;border-radius:22px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--mono);}
.fc-sug:disabled{opacity:.45;cursor:not-allowed;}
.fc-resps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.fc-resps li{display:grid;grid-template-columns:44px minmax(0,1fr) 112px;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--border);font-size:13.5px;animation:fc-sobe .2s ease-out;}
.fc-resps li:first-child{border-top:none;}
.fc-resps li.fc-resps__espera{display:flex;color:var(--text-muted);font-size:13px;}
.fc-resps__seq{font-family:var(--mono);font-size:12.5px;color:var(--text-muted);}
.fc-resps__barra{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden;}
.fc-resps__barra i{display:block;height:100%;border-radius:4px;background:var(--chart-in);}
.fc-resps__barra i[data-lento="1"]{background:var(--status-degraded);}
/* TASK-082 · traceroute salto a salto: nº · host/IP · barra do tempo · tempo */
.fc-trace li{grid-template-columns:34px minmax(0,1.3fr) minmax(40px,1fr) 84px;}
.fc-trace__host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.fc-trace li[data-mudo="1"] .fc-trace__host{color:var(--text-muted);font-style:italic;}
/* TASK-082 · escolha da ferramenta (Ping / Traceroute) no topo do painel */
.fc-seg--g{align-self:flex-start;}
.fc-seg--g button{min-height:44px;padding:0 18px;font-size:13.5px;}
/* TASK-082 · tráfego do circuito: um cartão por interface com link */
.fc-trc-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;}
.fc-trc{border:1px solid var(--border);border-radius:12px;padding:12px 12px 8px;display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--surface);}
.fc-trc[data-up="1"]{border-color:color-mix(in srgb,var(--brand-accent) 55%,var(--border));}
.fc-trc__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;}
.fc-trc__cab > b{font-size:13.5px;font-weight:800;min-width:0;overflow-wrap:anywhere;}
.fc-trc__vals{display:inline-flex;align-items:baseline;gap:10px;font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.fc-trc__vals b{font-size:17px;font-weight:800;color:var(--text);}
.fc-trc__vals small{font-size:11.5px;}
.fc-trc__graf svg{display:block;width:100%;height:auto;}
.fc-trc__pico{font-size:12px;color:var(--text-muted);min-height:16px;font-variant-numeric:tabular-nums;}
.fc-tr__medindo--p{height:110px;font-size:13px;}
.fc-trc-leg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--text-muted);}
.fc-trc-leg span{display:inline-flex;align-items:center;gap:6px;}
/* rótulos sobre o gráfico (pico e último valor): contorno da cor do fundo para ler em cima da linha */
.fc-tr__rotulo{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;font-variant-numeric:tabular-nums;}
.fc-resps__barra i[data-perdido="1"]{background:repeating-linear-gradient(45deg,var(--status-offline) 0 4px,transparent 4px 8px);}
.fc-resps__ms{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;}
.fc-resps__ms[data-perdido="1"]{color:var(--status-offline);}
.fc-resumo{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);}
.fc-veredito{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 9px;border-radius:999px;font-size:13.5px;font-weight:800;white-space:nowrap;}
.fc-veredito::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;}
.fc-veredito--ok{background:var(--status-online-soft);color:var(--status-online);}
.fc-veredito--warn{background:var(--status-degraded-soft);color:var(--status-degraded);}
.fc-veredito--err{background:var(--status-offline-soft);color:var(--status-offline);}
.fc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;}
.fc-detalhes{border-top:1px solid var(--border);padding-top:10px;}
.fc-detalhes summary{cursor:pointer;font-size:13px;font-weight:800;min-height:32px;display:flex;align-items:center;}
.fc-detalhes pre{margin:8px 0 0;padding:12px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.fc-avancado{border:1px solid var(--border);border-radius:12px;padding:0 14px;}
.fc-avancado > summary{cursor:pointer;font-size:13px;font-weight:800;min-height:44px;display:flex;align-items:center;}
.fc-avancado__corpo{display:flex;flex-direction:column;gap:10px;padding-bottom:14px;font-size:13px;}
.fc-avancado__corpo label{display:inline-flex;gap:8px;align-items:center;font-weight:700;}
/* banda */
.fc-bd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.fc-bd-card{padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);}
.fc-bd-card__rot{font-size:12px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.fc-bd-card__val{font-size:26px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;}
.fc-bd-card__nota{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-top:2px;color:var(--text-muted);}
.fc-bd-card__nota[data-tom="ok"]{color:var(--status-online);}
.fc-bd-pico{padding:16px;border-radius:14px;border:1px solid var(--border);}
.fc-bd-pico__l{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;}
.fc-bd-pico__barra{height:10px;border-radius:5px;background:var(--surface-3);margin-top:10px;overflow:hidden;}
.fc-bd-pico__barra i{display:block;height:100%;background:var(--chart-in);border-radius:5px;}
.fc-opcoes{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.fc-opcoes legend{font-size:14px;font-weight:800;margin-bottom:8px;padding:0;}
.fc-opcao{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px;border-radius:12px;border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;font-size:14px;}
.fc-opcao:has(input:checked){border-color:var(--focus);background:var(--accent-soft);}
.fc-opcao input{width:18px;height:18px;accent-color:var(--focus);}
.fc-opcao b{font-variant-numeric:tabular-nums;}
.fc-opcao span{color:var(--text-muted);font-size:13px;}
.fc-revisao{padding:16px;border-radius:14px;border:1.5px solid var(--focus);display:flex;flex-direction:column;gap:8px;}
.fc-revisao__de{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;}
/* dispositivos */
.fc-busca{display:flex;align-items:center;gap:9px;min-height:46px;padding:0 12px;border-radius:10px;border:1px solid var(--control-border);background:var(--surface);}
.fc-busca input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text);font-family:inherit;font-size:14px;min-height:44px;}
.fc-busca:focus-within{outline:2px solid var(--focus);outline-offset:2px;}
.fc-disp{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.fc-disp__item{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:11px 14px;border-top:1px solid var(--border);}
.fc-disp__item:first-child{border-top:none;}
.fc-disp__nome{flex:1 1 170px;min-width:0;}
.fc-disp__nome b{display:block;font-size:14px;font-weight:700;overflow-wrap:anywhere;}
.fc-disp__nome span{font-size:12px;color:var(--text-muted);}
.fc-disp__end{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:12.5px;}
.fc-disp__st{flex:0 0 140px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.fc-disp__lease{font-size:12px;color:var(--text-muted);text-align:right;line-height:1.35;}
.fc-disp__pil{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:2px 9px 2px 7px;border-radius:999px;background:var(--surface-3);color:var(--text-muted);}
.fc-disp__pil::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.fc-disp__pil[data-st="conectado"]{background:var(--status-online-soft);color:var(--status-online);}
.fc-disp__pil[data-st="conflito"]{background:var(--status-offline-soft);color:var(--status-offline);}
.fc-disp__vazio{padding:22px;text-align:center;font-size:13.5px;color:var(--text-muted);}
/* TASK-082 · F2 · remover lease / limpar ARP */
.fc-disp__acao{flex:1 0 100%;display:flex;justify-content:flex-end;}
.fc-disp__res{font-size:12px;font-weight:700;color:var(--text-muted);}
.fc-disp__gerir{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,var(--surface));font-size:13px;color:var(--text-muted);line-height:1.45;}
.fc-disp__gerir span{flex:1 1 220px;min-width:0;}
.fc-cmd{display:flex;flex-direction:column;gap:6px;}
.fc-cmd__t{font-size:12px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.fc-cmd pre{margin:0;padding:10px 12px;border-radius:9px;background:var(--surface-3);color:var(--text);font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;}
/* reinício: cronômetro e etapas */
.fc-rb-cron{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.fc-rb-cron__val{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.1;}
.fc-etapas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;}
.fc-etapa{display:flex;gap:12px;align-items:flex-start;min-height:48px;}
.fc-etapa__marca{display:flex;flex-direction:column;align-items:center;align-self:stretch;}
.fc-etapa__ponto{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--border-2);}
.fc-etapa__linha{width:2px;flex:1;min-height:14px;background:var(--border-2);}
.fc-etapa__txt{padding-top:2px;padding-bottom:12px;}
.fc-etapa__txt b{display:block;font-size:14px;font-weight:600;color:var(--text-muted);}
.fc-etapa__txt span{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.fc-etapa[data-st="feita"] .fc-etapa__ponto{background:var(--status-online);border-color:var(--status-online);}
.fc-etapa[data-st="feita"] .fc-etapa__linha{background:var(--status-online);}
.fc-etapa[data-st="feita"] .fc-etapa__txt b{color:var(--text);}
.fc-etapa[data-st="ativa"] .fc-etapa__ponto{border-color:var(--text);}
.fc-etapa[data-st="ativa"] .fc-etapa__txt b,.fc-etapa[data-st="falha"] .fc-etapa__txt b{font-weight:800;color:var(--text);}
.fc-etapa[data-st="falha"] .fc-etapa__ponto{background:var(--status-offline);border-color:var(--status-offline);color:var(--surface);font-size:13px;font-weight:800;}
.fc-otp{font-size:20px;letter-spacing:8px;text-align:center;font-family:var(--mono);}
@media (prefers-reduced-motion:reduce){
  .fc *,.fc-pn *,.pc-modal--fc,.pc-modal--fc *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
@media (max-width:639px){
  .fc-card{padding:16px;}
  .fc-tr__pico{margin-left:0;}
  .fc-tr__val{font-size:30px;}
}

/* botões do cabeçalho */
.cc-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:var(--fs-sm);font-weight:800;padding:10px 16px;border-radius:10px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--brand-primary);}
.cc-btn--danger{background:var(--status-offline);border:none;color:var(--primary-fg);box-shadow:0 4px 12px rgba(220,38,38,.24);}
.cc-btn--primary{background:var(--brand-primary);border:none;color:var(--primary-fg);}
.cc-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}

/* linha de metadados do circuito (cidade · POP · plano · entrega · atualizado) */
.cc-submeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-faint);margin:0 0 16px 2px;}
.cc-submeta .cc-sep{opacity:.5;}
.cc-submeta__right{margin-left:auto;}

/* ══ AVISO "DADOS DESATUALIZADOS" (stale) ════════════════════════════════════
   Aparece quando EquipamentoSaude.dados_desatualizados = true (last_seen além
   do limiar). Nunca fingir online: mostra a barra âmbar. */
.cc-stale{display:flex;align-items:center;gap:10px;background:var(--status-degraded-soft);border:1px solid color-mix(in srgb,var(--status-degraded) 30%,transparent);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:var(--fs-sm);color:var(--degraded-ink);font-weight:600;}
.cc-stale__badge{width:20px;height:20px;border-radius:50%;background:var(--status-degraded);color:var(--primary-fg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-sm);flex-shrink:0;}

/* aviso de circuito em implantação (oculta métricas) */
.cc-implnote{background:var(--status-implantacao-soft);border:1px solid color-mix(in srgb,var(--status-implantacao) 30%,transparent);border-radius:var(--radius-md);padding:22px;margin-bottom:16px;color:var(--brand-primary);font-weight:700;font-size:14px;}

/* ══ BARRA DE ABAS (tablist segmentado) ══════════════════════════════════════
   5 abas: Visão geral · Desempenho · Qualidade · Equipamento · Diagnóstico.
   Segmento ativo em --brand-primary. Rola horizontalmente no mobile. */
.cc-tabs{display:inline-flex;gap:5px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:5px;margin-bottom:22px;max-width:100%;overflow-x:auto;box-shadow:var(--shadow-card);}
.cc-tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;font-size:var(--fs-sm);font-weight:700;color:var(--text-muted);cursor:pointer;border:none;background:transparent;font-family:var(--font);white-space:nowrap;border-radius:10px;transition:background .14s ease,color .14s ease;}
.cc-tab svg{flex-shrink:0;opacity:.85;}
.cc-tab:hover{color:var(--brand-primary);background:var(--surface-3);}
.cc-tab[aria-selected="true"]{color:var(--primary-fg);background:var(--brand-primary);box-shadow:0 4px 12px rgba(29,27,78,.24);}
.cc-tab[aria-selected="true"] svg{opacity:1;}

/* ══ GRIDS DE PAINEL ═════════════════════════════════════════════════════════ */
.cc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
.cc-grid-2{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;margin-bottom:16px;}
.cc-grid-2--even{grid-template-columns:1fr 1fr;}
.cc-grid-2--diag{grid-template-columns:1.45fr 1fr;}
.cc-cards{display:grid;gap:16px;margin-bottom:16px;}
.cc-panel-pad{padding:22px;}

/* card de KPI */
.cc-kpi{padding:18px 20px;}
.cc-kpi__top{display:flex;align-items:center;justify-content:space-between;}
.cc-kpi__label{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600;}
.cc-kpi__value{font-size:32px;font-weight:800;letter-spacing:-.5px;margin-top:8px;line-height:1;}
.cc-kpi__sub{font-size:var(--fs-sm);color:var(--text-faint);margin-top:5px;}

/* ponto de status (dot) reutilizável — cor por variável inline ou modificador */
.cc-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;}
.cc-dot--ok{background:var(--status-online);}
.cc-dot--warn{background:var(--status-degraded);}
.cc-dot--fail{background:var(--status-offline);}
.cc-dot--maint{background:var(--status-maintenance);}
.cc-dot--idle{background:var(--status-nodata);}
.cc-dot--sm{width:7px;height:7px;}

/* legenda de séries (download/upload etc.) */
.cc-legend{display:flex;gap:16px;font-size:var(--fs-sm);flex-wrap:wrap;}
.cc-legend span{display:flex;align-items:center;gap:6px;color:var(--text-muted);}
.cc-legend .cc-swatch{width:10px;height:3px;border-radius:2px;display:inline-block;}
.cc-legend .cc-swatch--rx{background:var(--series-1);}
.cc-legend .cc-swatch--tx{background:var(--series-2);}

/* cabeçalho interno de card (título + controles à direita) */
.cc-cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.cc-cardhead__title{font-size:var(--fs-sm);font-weight:800;}
.cc-muted{font-size:var(--fs-sm);color:var(--text-faint);}

/* ══ SAÚDE EM 3 CAMADAS ══════════════════════════════════════════════════════
   Acesso · Túnel · Serviço. NUNCA só cor: ícone + rótulo textual (daltônicos). */
.cc-layer{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--border);border-radius:12px;}
.cc-layer + .cc-layer{margin-top:10px;}
.cc-layer__icon{width:22px;height:22px;border-radius:50%;font-weight:800;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cc-layer__body{flex:1;min-width:0;}
.cc-layer__name{font-size:var(--fs-sm);font-weight:800;}
.cc-layer__hint{font-size:var(--fs-sm);color:var(--text-faint);}
.cc-layer__state{font-size:var(--fs-sm);font-weight:800;border-radius:var(--radius-pill);padding:4px 12px;}
/* mapeamento de cor por estado da camada (aplicar a __icon e __state) */
.cc-ly--ok{color:var(--layer-ok);background:var(--status-online-soft);}
.cc-ly--warn{color:var(--status-degraded);background:var(--status-degraded-soft);}
.cc-ly--fail{color:var(--layer-fail);background:var(--status-offline-soft);}
.cc-ly--maint{color:var(--status-maintenance);background:var(--status-maintenance-soft);}
.cc-ly--idle{color:var(--status-maintenance);background:var(--status-implantacao-soft);}

/* mini-3-camadas (3 pontinhos) para linhas de lista/tabela */
.cc-dots3{display:inline-flex;gap:3px;}

/* ══ MEDIDORES (CPU / RAM / Temperatura) ═════════════════════════════════════ */
.cc-meter + .cc-meter{margin-top:16px;}
.cc-meter__head{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:6px;}
.cc-meter__head span{color:var(--text-muted);font-weight:600;}
.cc-meter__track{height:8px;background:var(--track);border-radius:var(--radius-pill);overflow:hidden;}
.cc-meter__fill{height:100%;border-radius:var(--radius-pill);}
/* cor do medidor por carga: aplicar .cc-load--ok/warn/crit ao __fill e ao valor */
.cc-load--ok{color:var(--status-online);}    .cc-load--ok.cc-meter__fill{background:var(--status-online);}
.cc-load--warn{color:var(--status-degraded);} .cc-load--warn.cc-meter__fill{background:var(--status-degraded);}
.cc-load--crit{color:var(--status-offline);}  .cc-load--crit.cc-meter__fill{background:var(--status-offline);}

/* medidor compacto (grade 3 col no card de equipamento) */
.cc-metergrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:20px;}
.cc-metercol__cap{font-size:var(--fs-2xs);color:var(--text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px;}
.cc-metercol__val{font-size:20px;font-weight:800;line-height:1;}
.cc-metercol__track{height:6px;background:var(--track);border-radius:var(--radius-pill);overflow:hidden;margin-top:8px;}
.cc-metercol__na{font-size:var(--fs-sm);font-weight:700;color:var(--text-faint);line-height:1.35;margin-top:2px;}

/* ══ SD-WAN / UNDERLAYS ══════════════════════════════════════════════════════ */
.cc-path{display:flex;align-items:center;gap:16px;padding:15px 16px;border:1px solid var(--border);background:var(--surface);border-radius:13px;flex-wrap:wrap;}
.cc-path + .cc-path{margin-top:12px;}
.cc-path--active{border-color:color-mix(in srgb,var(--status-online) 30%,transparent);background:var(--status-online-soft);}
.cc-path__icon{width:34px;height:34px;border-radius:9px;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cc-path__body{flex:1;min-width:120px;}
.cc-path__name{font-size:14px;font-weight:800;}
.cc-path__role{font-size:var(--fs-2xs);font-weight:800;border-radius:var(--radius-pill);padding:2px 9px;text-transform:uppercase;letter-spacing:.4px;margin-left:8px;}
.cc-path__underlay{font-size:var(--fs-sm);color:var(--text-faint);margin-top:3px;}
.cc-path__metric{text-align:right;}
.cc-path__metric small{display:block;font-size:var(--fs-sm);color:var(--text-faint);}
.cc-path__metric b{font-size:var(--fs-sm);font-weight:800;}

/* ══ TABELA DE PORTAS ════════════════════════════════════════════════════════
   Colunas: Porta · Status · Velocidade · MAC(s) · Tráfego rx/tx. Rola no mobile. */
.cc-ports{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;}
.cc-ports__scroll{overflow-x:auto;}
.cc-ports__head,.cc-ports__row{display:grid;grid-template-columns:1.4fr 120px 110px 1.7fr 150px;gap:12px;padding:14px 22px;align-items:center;}
.cc-ports__head{background:var(--surface-2);border-bottom:1px solid var(--border);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.3px;color:var(--text-faint);text-transform:uppercase;}
.cc-ports__row{border-bottom:1px solid var(--border);}
.cc-ports__row:last-child{border-bottom:none;}
.cc-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.cc-ports__macs{display:flex;flex-direction:column;gap:2px;}

/* ══ CONTROLES SEGMENTADOS (período / destino da sonda / ferramenta) ═════════ */
.cc-seg{display:inline-flex;background:var(--surface-3);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px;}
.cc-seg__btn{background:transparent;color:var(--text-muted);border:none;font-family:var(--font);font-size:var(--fs-sm);font-weight:700;padding:6px 12px;border-radius:7px;cursor:pointer;white-space:nowrap;}
.cc-seg__btn[aria-pressed="true"]{background:var(--surface);color:var(--brand-primary);box-shadow:0 1px 2px rgba(29,27,78,.12);}
/* período tipo pill sólido (aba desempenho) */
.cc-period{display:flex;gap:6px;}
.cc-period__btn{background:var(--surface-3);color:var(--text-muted);border:none;font-family:var(--font);font-size:var(--fs-sm);font-weight:700;padding:7px 16px;border-radius:8px;cursor:pointer;}
.cc-period__btn[aria-pressed="true"]{background:var(--brand-primary);color:var(--primary-fg);}

/* ══ LOOKING GLASS ═══════════════════════════════════════════════════════════
   Estados: ocioso · executando · resultado (saída sanitizada monoespaçada) ·
   bloqueado (rate-limit) · erro. Um bloco de estado visível por vez. */
.cc-lg__controls{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.cc-lg__tools{display:inline-flex;background:var(--surface-3);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;}
.cc-lg__tool{background:transparent;color:var(--text-muted);border:none;font-family:var(--font);font-size:var(--fs-sm);font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer;}
.cc-lg__tool[aria-pressed="true"]{background:var(--brand-primary);color:var(--primary-fg);}
.cc-lg__dest{flex:1;min-width:160px;border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--text);outline:none;}
.cc-lg__run{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:104px;background:var(--brand-primary);border:none;color:var(--primary-fg);font-family:var(--font);font-size:var(--fs-sm);font-weight:800;padding:10px 18px;border-radius:10px;cursor:pointer;}
.cc-lg__run:disabled{opacity:.6;cursor:not-allowed;}
/* estado ocioso */
.cc-lg__idle{border:1px dashed var(--border);border-radius:12px;padding:26px;text-align:center;font-size:var(--fs-sm);color:var(--text-faint);}
/* estado executando */
.cc-lg__running{border:1px solid var(--border);border-radius:12px;padding:26px;text-align:center;color:var(--text-muted);font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;gap:10px;}
/* saída — terminal sanitizado */
.cc-lg__out{background:var(--terminal-bg);border-radius:12px;padding:18px 20px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--terminal-text);line-height:1.7;white-space:pre;overflow-x:auto;}
.cc-lg__stamp{font-size:var(--fs-sm);color:var(--text-faint);margin-top:8px;}
.cc-lg__hint{font-size:var(--fs-sm);color:var(--brand-primary);line-height:1.6;background:var(--status-implantacao-soft);border:1px solid color-mix(in srgb,var(--status-implantacao) 30%,transparent);border-radius:14px;padding:16px 18px;}

/* alerta de erro / bloqueio (reuso em looking glass e cabeçalhos) */
.cc-alert{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:16px 18px;}
.cc-alert--error{background:var(--status-offline-soft);border:1px solid color-mix(in srgb,var(--status-offline) 30%,transparent);}
.cc-alert--block{background:var(--status-degraded-soft);border:1px solid color-mix(in srgb,var(--status-degraded) 30%,transparent);}
.cc-alert__badge{width:22px;height:22px;border-radius:50%;color:var(--primary-fg);font-weight:800;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cc-alert--error .cc-alert__badge{background:var(--status-offline);}
.cc-alert--block .cc-alert__badge{background:var(--status-degraded);}
.cc-alert__title{font-size:var(--fs-sm);font-weight:800;}
.cc-alert--error .cc-alert__title{color:var(--degraded-strong);}
.cc-alert__body{font-size:var(--fs-sm);color:var(--text-muted);margin-top:3px;}

/* botão de ação secundária grande (Reiniciar CPE / Forçar coleta na coluna) */
.cc-action{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;font-family:var(--font);}
.cc-action + .cc-action{margin-top:10px;}
.cc-action--danger{border-color:color-mix(in srgb,var(--status-offline) 30%,transparent);}
.cc-action__icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cc-action__icon--danger{background:var(--status-offline-soft);color:var(--status-offline);}
.cc-action__icon--info{background:var(--status-implantacao-soft);color:var(--accent);}
.cc-action__t{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--text);}
.cc-action__d{display:block;font-size:var(--fs-sm);color:var(--text-faint);margin-top:2px;}

/* ══ MODAL DE REINÍCIO DA CPE ════════════════════════════════════════════════
   Máquina de estados: intenção → aguardando → validando → sucesso/erro.
   role=dialog aria-modal, foco preso, fecha no Esc (ver interacoes.md/a11y.md). */
.cc-modal{position:fixed;inset:0;background:var(--scrim);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;}
.cc-modal__card{width:452px;max-width:100%;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-modal);overflow:hidden;}
.cc-modal__head{padding:20px 22px 0;display:flex;align-items:center;gap:12px;}
.cc-modal__icon{width:38px;height:38px;border-radius:10px;background:var(--status-offline-soft);color:var(--status-offline);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cc-modal__title{font-size:15px;font-weight:800;}
.cc-modal__tag{font-size:var(--fs-xs);color:var(--text-faint);font-family:var(--mono);}
.cc-modal__x{margin-left:auto;background:none;border:none;cursor:pointer;padding:6px;color:var(--text-faint);display:flex;}
.cc-modal__rule{height:1px;background:var(--surface-3);margin:18px 0 0;}
.cc-modal__body{padding:22px;}
.cc-modal__lead{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:14px;}
.cc-modal__sub{font-size:var(--fs-sm);color:var(--text-faint);margin-bottom:16px;}
.cc-modal__warn{background:var(--status-degraded-soft);border:1px solid color-mix(in srgb,var(--status-degraded) 30%,transparent);border-radius:10px;padding:11px 14px;font-size:var(--fs-sm);color:var(--degraded-ink);font-weight:600;margin-bottom:16px;display:flex;gap:9px;align-items:flex-start;line-height:1.5;}

/* input da TAG + input do código OTP */
.cc-input{width:100%;border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:var(--fs-sm);outline:none;letter-spacing:.5px;}
.cc-input--err{border-color:color-mix(in srgb,var(--status-offline) 30%,transparent);}
.cc-otp{width:100%;border:1px solid var(--border);border-radius:10px;padding:14px;font-family:var(--mono);font-size:24px;letter-spacing:12px;text-align:center;outline:none;color:var(--text);}
.cc-otp--err{border-color:color-mix(in srgb,var(--status-offline) 30%,transparent);}
.cc-fielderr{font-size:var(--fs-sm);color:var(--status-offline);font-weight:600;margin-top:7px;}

/* linha reenviar + expiração */
.cc-resend-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0;font-size:var(--fs-sm);}
.cc-resend{background:none;border:none;font-family:var(--font);font-size:var(--fs-sm);font-weight:700;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;}
.cc-resend:disabled{color:var(--text-faint);cursor:not-allowed;text-decoration:none;}
.cc-expiry{font-weight:700;color:var(--text-faint);}
.cc-expiry--soon{color:var(--status-offline);}

/* botões do rodapé do modal */
.cc-modal__foot{display:flex;gap:10px;margin-top:16px;}
.cc-modal__foot .cc-btn{flex:1;justify-content:center;}
.cc-modal__foot .cc-btn--wide{flex:1.5;}

/* estados de resultado do modal (validando/sucesso/erro) */
.cc-modal__spin{padding:30px 0;text-align:center;}
.cc-modal__spin div{margin-top:16px;font-size:var(--fs-sm);color:var(--text-muted);font-weight:600;}
.cc-result{text-align:center;padding:8px 0 4px;}
.cc-result__badge{width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;}
.cc-result__badge--ok{background:var(--status-online-soft);color:var(--status-online);}
.cc-result__badge--err{background:var(--status-offline-soft);color:var(--status-offline);}
.cc-result__title{font-size:16px;font-weight:800;margin-top:14px;}
.cc-result__msg{font-size:var(--fs-sm);color:var(--text-muted);margin:8px auto 0;line-height:1.6;max-width:330px;}

/* ══ ESTADOS: ERRO / VAZIO (reuso em qualquer aba/widget) ════════════════════ */
.cc-error{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--status-offline-soft);border:1px solid color-mix(in srgb,var(--status-offline) 30%,transparent);border-radius:var(--radius-md);padding:18px 22px;}
.cc-error__t{font-size:14px;font-weight:800;color:var(--degraded-strong);}
.cc-error__d{font-size:var(--fs-sm);color:var(--degraded-strong);margin-top:3px;}
.cc-empty{padding:60px 22px;text-align:center;color:var(--text-faint);font-size:14px;}
.cc-empty__title{font-size:15px;font-weight:800;color:var(--text-muted);margin-bottom:6px;}

/* animações */
.cc-spin{animation:cc-spin .75s linear infinite;transform-origin:center;}
@keyframes cc-spin{to{transform:rotate(360deg);}}

/* ── RESPONSIVO ──────────────────────────────────────────────────────────────
   1024px: grids de painel empilham. 767px: KPIs 1 col, tabela de portas rola. */
@media(max-width:1024px){
  .cc-kpis{grid-template-columns:repeat(2,1fr);}
  .cc-grid-2,.cc-grid-2--even,.cc-grid-2--diag{grid-template-columns:1fr;}
  .cc-cards--2{grid-template-columns:1fr;}
}
@media(max-width:767px){
  .cc-kpis{grid-template-columns:1fr;}
  .cc-head__spacer{margin-left:0;width:100%;}
  .cc-ports__head,.cc-ports__row{min-width:760px;}
  .cc-submeta__right{margin-left:0;}
}

/* ══════════════════════════════════════════════════════════════════════════
   Patch P2 — Lista & Cards (classes .cl-). Portado de lista_cards_v2/circuitos-v2.css.
   Só estilos NOVOS da tela de lista; reusa tokens/shell existentes. */
.cl-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ════════════════════════════════════════════════════════════════════════════
   LISTA ÚNICA EXPANSÍVEL (SPEC-PORTAL-CLIENTE consolidado v3, §12.1) — classes .clx-.
   Substitui o toggle Lista/Cards por uma lista só: chevron expande no lugar;
   "Gerenciar" abre o console. A linha NÃO é 100% clicável (só chevron/copiar/gerenciar).
   ════════════════════════════════════════════════════════════════════════════ */
.clx-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;}
.clx-head,.clx-row{display:grid;grid-template-columns:30px 1.35fr minmax(170px,1fr) 150px 0.9fr 116px;gap:14px 16px;align-items:center;}
.clx-head{background:var(--surface-2);border-bottom:1px solid var(--border);padding:12px 22px;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.4px;color:var(--text-faint);text-transform:uppercase;}
.clx-sortbtn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;}
.clx-sortbtn__arrow{opacity:.6;}
.clx-sortbtn[aria-sort] .clx-sortbtn__arrow{opacity:1;color:var(--brand-primary);}

.clx-item{border-bottom:1px solid var(--border);border-left:3px solid var(--cl-accent,transparent);}
.clx-item:last-child{border-bottom:none;}
.clx-row{padding:15px 22px;transition:background .12s ease;}
.clx-row:hover{background:var(--surface-2);}

.clx-chev{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:8px;transition:transform .18s ease,background .12s ease,color .12s ease;}
.clx-chev:hover{background:var(--surface-3);color:var(--brand-primary);}
.clx-chev[aria-expanded="true"]{transform:rotate(90deg);color:var(--brand-primary);}

.clx-cell{min-width:0;}
.clx-cell--none{color:var(--text-faint);font-style:italic;}
.clx-cell--cidade{font-size:var(--fs-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Linha flex: o TEXTO trunca, o selo "novo" nunca encolhe. Antes o ellipsis era no proprio
   .clx-circ__name — um selo dentro dele sumia junto com o fim de um nome longo. */
.clx-circ__name{font-size:15px;font-weight:600;line-height:1.2;display:flex;align-items:center;gap:6px;min-width:0;}
.clx-circ__nametxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* amarelo da marca ISPX (--ispx-brand #f59e0b). O portal tem paleta propria e nao carrega
   os tokens do ERP, entao o valor entra aqui como token do portal. Texto escuro: o mesmo par
   dos botoes primarios do ISPX (var(--text) sobre amarelo) — amarelo com texto branco nao passa
   contraste. */
/* TASK-070 · nome do circuito inteiro em até 2 linhas (lista e cards); o completo fica no title. Quebra dentro da coluna. */
.pc-nome2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word;min-width:0;line-height:1.3;}
.clx-novo{flex-shrink:0;display:inline-block;padding:1px 6px;border-radius:999px;font-size:var(--fs-2xs);font-weight:400;letter-spacing:.4px;text-transform:uppercase;line-height:1.6;color:var(--on-brand);background:var(--ispx-brand);}
.clx-circ__name--tag{font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.clx-circ__tag{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-family:var(--mono);color:var(--text-muted);margin-top:2px;overflow:hidden;}
.clx-circ__sub{font-size:var(--fs-sm);color:var(--text-faint);font-style:italic;margin-top:2px;}
.clx-copy{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;color:var(--text-faint);cursor:pointer;border-radius:6px;flex-shrink:0;}
.clx-copy:hover{background:var(--surface-3);color:var(--brand-primary);}
.clx-copy--ok{color:var(--status-online);}
.clx-cell--ip{display:flex;align-items:center;gap:6px;}
.clx-ip{font-size:var(--fs-sm);color:var(--text);}
.clx-ip--none{color:var(--text-faint);}
.clx-cell--status{}
.clx-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.clx-status__suf{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600;}
.clx-cabochip{font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--status-degraded);background:var(--status-degraded-soft);border-radius:20px;padding:2px 8px;}
.clx-cell--act{justify-self:end;}
.clx-manage{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);color:var(--brand-primary);font-family:var(--font);font-size:var(--fs-sm);font-weight:700;padding:8px 13px;border-radius:9px;cursor:pointer;white-space:nowrap;}
.clx-manage:hover{background:var(--surface-3);border-color:var(--border-2);}

/* painel expandido: 3 mini-cards + saúde em 3 camadas full-width */
.clx-panel{background:var(--surface-2);border-top:1px dashed var(--border);padding:20px 22px 22px 59px;animation:clxIn .18s ease;}
@keyframes clxIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.clx-panel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;}
.clx-mini{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:13px 15px;}
.clx-mini__cap{font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-faint);margin-bottom:10px;}
.clx-mini__na{font-size:var(--fs-sm);color:var(--text-faint);font-style:italic;}
.clx-mini__live{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-sm);font-weight:700;margin-top:8px;}
.clx-mini__foot{font-size:var(--fs-sm);color:var(--text-faint);margin-top:9px;}
.clx-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-sm);padding:6px 0;}
.clx-kv + .clx-kv{border-top:1px solid var(--track);}
.clx-kv span{color:var(--text-muted);}
.clx-kv b{font-weight:700;color:var(--text);}
.clx-kv small{color:var(--text-faint);font-weight:600;font-size:var(--fs-sm);}
.clx-ok{color:var(--status-online);}
.clx-bad{color:var(--status-offline);}
.clx-warn{color:var(--status-degraded);}
.clx-muted{color:var(--text-faint);}
.clx-meter + .clx-meter{margin-top:11px;}
.clx-meter__head{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:5px;}
.clx-meter__head span{color:var(--text-muted);}
.clx-meter__track{height:7px;background:var(--track);border-radius:var(--radius-pill);overflow:hidden;}
.clx-meter__fill{height:100%;border-radius:var(--radius-pill);background:var(--status-online);}
.clx-meter__fill.clx-warn{background:var(--status-degraded);}
.clx-meter__fill.clx-bad{background:var(--status-offline);}
.clx-full{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:13px 15px;}
.clx-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.clx-layer{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--border);border-radius:11px;}
.clx-layer__ico{width:20px;height:20px;border-radius:50%;font-weight:800;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.clx-layer__body{flex:1;min-width:0;}
.clx-layer__name{font-size:var(--fs-sm);font-weight:800;}
.clx-layer__hint{font-size:var(--fs-sm);color:var(--text-faint);}
.clx-layer__state{font-size:var(--fs-sm);font-weight:800;border-radius:var(--radius-pill);padding:3px 10px;}
.clx-ly--ok .clx-layer__ico,.clx-ly--ok .clx-layer__state{color:var(--layer-ok);background:var(--status-online-soft);}
.clx-ly--warn .clx-layer__ico,.clx-ly--warn .clx-layer__state{color:var(--status-degraded);background:var(--status-degraded-soft);}
.clx-ly--fail .clx-layer__ico,.clx-ly--fail .clx-layer__state{color:var(--layer-fail);background:var(--status-offline-soft);}
.clx-ly--none .clx-layer__ico,.clx-ly--none .clx-layer__state{color:var(--status-nodata);background:var(--status-nodata-soft);}
.clx-ly--fail{border-color:color-mix(in srgb,var(--status-offline) 30%,transparent);background:var(--status-offline-soft);}
.clx-ly--warn{border-color:color-mix(in srgb,var(--status-degraded) 30%,transparent);background:var(--status-degraded-soft);}

@media(max-width:1024px){
  .clx-panel__grid{grid-template-columns:1fr;}
  .clx-layers{grid-template-columns:1fr;}
}
@media(max-width:767px){
  .clx-head{display:none;}
  .clx-row{grid-template-columns:30px 1fr;gap:6px 12px;padding:14px 16px;align-items:start;}
  .clx-chev{grid-row:1;}
  .clx-cell--circ,.clx-cell--cidade,.clx-cell--ip,.clx-cell--status,.clx-cell--act{grid-column:2;}
  .clx-cell--act{justify-self:stretch;margin-top:4px;}
  .clx-manage{width:100%;justify-content:center;}
  .clx-panel{padding:16px;}
}

/* ── Ferramentas (§12.3): cabeçalho da tela reserva ── */
.cc-headnome{font-size:19px;font-weight:800;letter-spacing:-.2px;color:var(--text);}
/* refresh da lista: gira o ícone enquanto verifica */
.pc-refresh.is-spin svg{animation:pc-spin .9s linear infinite;transform-origin:50% 50%;}
.pc-refresh[disabled]{opacity:.7;cursor:default;}
@keyframes pc-spin{to{transform:rotate(360deg);}}

/* ════════════════════════════════════════════════════════════════════════════
   RE-SKIN FIEL — tela Circuitos do Portal do Cliente (mockup Claude Design
   /home/sunotel/portal-design/SUNO-Monitoramento-Circuitos.dc.html). Tipografia
   DM Sans + classes/cores/espaçamentos do mockup. TUDO escopado em .pc-monitor
   para não afetar as outras telas do portal (que seguem em Sora / tokens :root).
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes pcmSpin{to{transform:rotate(360deg);}}
@keyframes pcmPanelIn{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}
.pc-monitor{color:var(--text);}
.pc-monitor .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}

/* filtros segmentados */
.pc-monitor .seg{display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 11px;border-radius:9px;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;border:1px solid transparent;transition:background .12s ease,color .12s ease;}
.pc-monitor .seg:hover{background:var(--surface-3);color:var(--brand-primary);}
.pc-monitor .seg.on{background:var(--surface);color:var(--brand-primary);border-color:var(--border);box-shadow:0 1px 3px rgba(29,27,78,.08);font-weight:700;}
.pc-monitor .seg .cnt{font-size:var(--fs-2xs);font-weight:700;color:var(--text-faint);background:var(--surface-3);border-radius:20px;padding:1px 8px;min-width:20px;text-align:center;transition:background .12s ease,color .12s ease;}
.pc-monitor .seg.on .cnt{background:var(--primary-bg);color:var(--primary-fg);}

/* TASK-020 · modo de exibição (Lista · Cards · Mapa) no cabeçalho: abas alinhadas à grade (o 1º ícone na mesma coluna do
   título), linha fina de base, a ativa com sublinhado e texto da marca. Alvo ≥ 44 px em qualquer largura. */
/* TASK-026 · a linha das abas leva, à direita, o link discreto do guia ("Como usar esta tela") */
.pc-monitor .pc-modos-linha{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0 20px;margin:0 0 18px;border-bottom:1px solid var(--border);}
.pc-monitor .pc-modos{display:flex;flex-wrap:wrap;gap:0 26px;}
.pc-monitor .pc-guia-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;border:0;background:none;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);cursor:pointer;}
.pc-monitor .pc-guia-link:hover{color:var(--brand-primary);text-decoration:underline;}
.pc-monitor .pc-guia-link:focus{outline:none;}
.pc-monitor .pc-guia-link:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:6px;}
.pc-monitor .pc-modo{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 2px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font-family:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--text-muted);cursor:pointer;transition:color .12s ease,border-color .12s ease;}
.pc-monitor .pc-modo:hover{color:var(--brand-primary);}
.pc-monitor .pc-modo.on{color:var(--brand-primary);border-bottom-color:var(--brand-primary);}
.pc-monitor .pc-modo:focus{outline:none;}
.pc-monitor .pc-modo:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:6px 6px 0 0;}

/* botão Atualizar */
.pc-monitor .refresh{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);color:var(--brand-primary);font-family:inherit;font-size:var(--fs-sm);font-weight:600;padding:9px 14px;border-radius:9px;cursor:pointer;transition:background .12s ease;}
.pc-monitor .refresh:hover{background:var(--primary-bg);color:var(--primary-fg);}
.pc-monitor .refresh:hover svg *{stroke:var(--primary-fg);}
.pc-monitor .refresh.is-spin svg{animation:pcmSpin .8s linear infinite;transform-origin:50% 50%;}
.pc-monitor .refresh[disabled]{opacity:.7;cursor:default;}

/* busca */
.pc-monitor .searchbox{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 13px;min-width:0;flex:1 1 300px;transition:border-color .12s ease,box-shadow .12s ease;}
.pc-monitor .searchbox:focus-within{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:1px;}
.pc-monitor .searchbox input{border:none;outline:none;font-family:inherit;font-size:var(--fs-sm);color:var(--text);width:100%;background:transparent;}

/* cabeçalho de coluna clicável (ordenação) — visual idêntico ao rótulo do mock */
.pc-monitor .mhead-sort{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}

/* chevron da linha */
.pc-monitor .chevbtn{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-faint);transition:background .12s ease,color .12s ease,border-color .12s ease;padding:0;}
.pc-monitor .chevbtn:hover{background:var(--surface-3);color:var(--brand-primary);border-color:var(--border-2);}
.pc-monitor .chevbtn svg{transition:transform .2s ease;}
.pc-monitor .chevbtn.open svg{transform:rotate(90deg);}

/* LISTA */
.pc-monitor .mlist{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(29,27,78,.04);}
.pc-monitor .mhead{display:grid;grid-template-columns:28px minmax(0,1.5fr) minmax(0,1fr) 168px 200px 118px;gap:0 22px;align-items:center;padding:13px 22px;background:var(--surface-2);border-bottom:1px solid var(--border);}
.pc-monitor .mhead > span{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.7px;color:var(--text-faint);text-transform:uppercase;}
.pc-monitor .mrow{display:grid;grid-template-columns:28px minmax(0,1.5fr) minmax(0,1fr) 168px 200px 118px;gap:0 22px;align-items:center;padding:14px 22px;transition:background .12s ease;}
.pc-monitor .mrow:hover{background:var(--surface-2);}
.pc-monitor .rowwrap{border-bottom:1px solid var(--border);}
.pc-monitor .rowwrap:last-child{border-bottom:none;}
.pc-monitor .rowwrap.bad .mrow{background:color-mix(in srgb,var(--status-offline-soft) 45%,var(--surface));}
.pc-monitor .rowwrap.bad .mrow:hover{background:color-mix(in srgb,var(--status-offline-soft) 75%,var(--surface));}
.pc-monitor .rowwrap.warn .mrow{background:color-mix(in srgb,var(--status-degraded-soft) 45%,var(--surface));}
.pc-monitor .rowwrap.warn .mrow:hover{background:color-mix(in srgb,var(--status-degraded-soft) 75%,var(--surface));}

/* faixa de grupo por status */
.pc-monitor .mgroup{display:flex;align-items:center;gap:9px;padding:11px 22px;background:var(--surface-2);border-bottom:1px solid var(--border);}
.pc-monitor .mgroup .glabel{font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);}
.pc-monitor .mgroup .gcnt{font-size:var(--fs-2xs);font-weight:700;color:var(--text-faint);background:var(--surface-3);border-radius:20px;padding:1px 8px;}
.pc-monitor .cgroup{display:flex;align-items:center;gap:9px;margin:18px 2px 11px;}

/* copiar TAG/IP */
.pc-monitor .copybtn{width:24px;height:24px;border-radius:6px;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-faint);flex-shrink:0;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease;padding:0;}
.pc-monitor .mrow:hover .copybtn,.pc-monitor .ccard:hover .copybtn{opacity:1;}
.pc-monitor .copybtn:hover{background:var(--status-implantacao-soft);color:var(--accent);}
.pc-monitor .copybtn.copied{color:var(--status-online);opacity:1;}

/* botão Gerenciar (lista) */
.pc-monitor .act{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:var(--fs-sm);font-weight:700;padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .12s ease,border-color .12s ease;}
.pc-monitor .act:hover{background:var(--surface-2);border-color:var(--border-2);}

/* expansão da linha: 3 qcards */
.pc-monitor .expand{animation:pcmPanelIn .18s ease;padding:4px 22px 20px 58px;}
.pc-monitor .qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.pc-monitor .qcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.pc-monitor .qt{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.6px;color:var(--text-faint);text-transform:uppercase;margin-bottom:9px;}

/* CARDS */
.pc-monitor .cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch;}
@media(max-width:1120px){.pc-monitor .cgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:840px){.pc-monitor .cgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:540px){.pc-monitor .cgrid{grid-template-columns:1fr;}}
.pc-monitor .ccard{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 2px rgba(29,27,78,.04);transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;position:relative;display:flex;flex-direction:column;min-width:0;}
.pc-monitor .ccard:hover{box-shadow:0 6px 16px rgba(29,27,78,.06);transform:translateY(-1px);border-color:var(--border-2);}
.pc-monitor .ccard-head{padding:13px 14px;cursor:pointer;}
.pc-monitor .ccard-head:focus-visible{outline:2px solid var(--brand-accent);outline-offset:-2px;border-radius:8px;}
.pc-monitor .ccard.bad{background:color-mix(in srgb,var(--status-offline-soft) 45%,var(--surface));border-color:color-mix(in srgb,var(--status-offline) 30%,transparent);}
.pc-monitor .ccard.warn{background:color-mix(in srgb,var(--status-degraded-soft) 45%,var(--surface));border-color:color-mix(in srgb,var(--status-degraded) 30%,transparent);}
.pc-monitor .ccard.ok{background:var(--surface);}
.pc-monitor .ccard-body{padding:0 16px 4px;animation:pcmPanelIn .18s ease;}
.pc-monitor .cact{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;background:transparent;border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:var(--fs-sm);font-weight:700;padding:9px;border-radius:8px;cursor:pointer;transition:background .12s ease,border-color .12s ease;}
.pc-monitor .cact:hover{background:var(--surface-2);border-color:var(--border-2);}
/* TASK-126 · CARDS ALINHADOS (pedido do dono, 10/10: "os botões não estão alinhados, precisa organizá-los pra ficar na mesma
   posição"). Os cards de uma linha da grade têm a MESMA altura (stretch) e cada card é uma coluna: o "Gerenciar" vai ao RODAPÉ
   (margin-top:auto) — botões na mesma linha horizontal. O status fica SEMPRE no canto superior direito (a linha do topo não
   quebra); o nome quebra à esquerda dele, em até 2 linhas com reticências (o nome inteiro no title), e reserva as 2 linhas:
   cidade, separador e IP caem na mesma altura em todo card. O motivo do status (ex.: aguardando ativação do monitoramento) é a
   dica "i" junto ao status, não uma linha a mais. Selo de leitura antiga e etiqueta "Mudou" vêm DEPOIS do IP. */
.pc-monitor .ccard:hover,.pc-monitor .ccard:focus-within{z-index:2;}
.pc-monitor .ccard-head{flex:0 0 auto;}
.pc-monitor .ccard-top{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0;}
.pc-monitor .ccard-nome{display:flex;align-items:flex-start;gap:7px;flex:1 1 auto;min-width:0;font-size:15px;line-height:1.3;min-height:2.6em;}
.pc-monitor .ccard-nome .pc-nome2{font-size:15px;font-weight:800;color:var(--text);line-height:1.3;}
.pc-monitor .ccard .c-status{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;margin-left:auto;min-height:20px;}
.pc-monitor .ccard-cidade{font-size:var(--fs-sm);font-weight:400;color:var(--text);margin-top:7px;min-height:1.45em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc-monitor .ccard-cidade.is-na{color:var(--text-muted);font-style:italic;}
.pc-monitor .ccard-ip{display:flex;align-items:center;gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border);min-width:0;min-height:26px;}
.pc-monitor .ccard-extra{margin-top:8px;min-width:0;}
.pc-monitor .ccard-manage{margin-top:auto;padding:0 14px 14px;}
.pc-monitor .ccard .c-status .pc-dica{margin-left:-2px;}

/* rodapé de contagem */
.pc-monitor .mfoot{font-size:var(--fs-sm);color:var(--text-faint);margin-top:14px;text-align:right;}
.pc-monitor .sortnote{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-faint);margin:0 2px 14px;}

/* rótulo de status longo × curto (ex.: "Monitoramento em ativação" × "Em ativação"): o curto só
   no layout estreito, onde o longo alargava a coluna do status e espremia a TAG do circuito. */
.pc-monitor .st-curto{display:none;}

/* estado vazio */
.pc-monitor .mempty{padding:56px 24px;text-align:center;color:var(--text-faint);font-size:14px;}

@media(max-width:820px){
  .pc-monitor .mhead{display:none;}
  .pc-monitor .mrow{grid-template-columns:28px 1fr auto;gap:6px 12px;grid-template-areas:"chev name act" "chev city city" "chev ip status";padding:14px 14px;}
  .pc-monitor .m-chev{grid-area:chev;} .pc-monitor .m-name{grid-area:name;} .pc-monitor .m-city{grid-area:city;}
  .pc-monitor .m-ip{grid-area:ip;} .pc-monitor .m-status{grid-area:status;} .pc-monitor .m-act{grid-area:act;justify-self:end;}
  .pc-monitor .st-longo{display:none;} .pc-monitor .st-curto{display:inline;}
  .pc-monitor .act{background:var(--surface-3);color:var(--brand-primary);border-color:transparent;}
  .pc-monitor .expand{padding:4px 14px 18px;}
  .pc-monitor .qgrid{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULO FATURAS (SPEC-FINANCEIRO-001 §8) — identidade visual da FATURA.
   RE-SKIN puro: só apresentação. Reusa o shell/cards/tokens do portal e adota
   a linguagem do modelo de fatura (fonte Sora, neutros quentes, âmbar de marca,
   papel A4-like, cabeçalho com a marca ISPX, bloco de pagamento escuro).
   Ver /home/sunotel/portal-design (ISPX-fatura/fatura-modelo). SÓ PELE.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --fat-ink:#16181D;        /* texto principal (neutro quente) */
  --fat-ink-2:#6B6A60;      /* secundário */
  --fat-ink-3:#9A958A;      /* faint */
  --fat-amber:#F59E0B;      /* acento de marca */
  --fat-amber-ink:#B45309;  /* âmbar legível sobre claro */
  --fat-paper:#E7E5DF;      /* fundo "mesa" atrás do papel */
  --fat-seal-bg:#FEF3E2;    /* selo mês de referência */
  --fat-seal-bd:#F5D9A6;    /* borda do selo */
  --fat-line:#ECEAE3;       /* divisórias quentes */
  --fat-dark:#16181D;       /* card de pagamento escuro */
}
.fat-wrap{max-width:940px;} /* fatura respira num papel mais estreito que o resto */

/* ---- LISTA: KPIs ---- */
.fat-kpi{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 20px;}
.fat-kpi__top{display:flex;align-items:center;justify-content:space-between;}
.fat-kpi__lbl{font-size:12.5px;color:var(--fat-ink-2);font-weight:600;}
.fat-kpi__val{font-size:25px;font-weight:800;margin-top:8px;color:var(--fat-ink);line-height:1.05;letter-spacing:-.4px;}
.fat-kpi__sub{font-size:12px;color:var(--fat-ink-3);margin-top:4px;}

/* ---- Badges de situação (cor + rótulo) — neutros quentes ---- */
.fat-badge{font-size:11.5px;font-weight:800;border-radius:20px;padding:4px 11px;white-space:nowrap;display:inline-block;letter-spacing:.1px;}
.fat-badge--aberto{color:var(--fat-amber-ink);background:var(--fat-seal-bg);}
.fat-badge--vencido{color:#B42318;background:#FEF0EE;}
.fat-badge--pago{color:#15803D;background:#ECFDF3;}
.fat-badge--cancelado{color:var(--fat-ink-2);background:#F1F0EC;}
.fat-badge--unknown{color:var(--fat-ink-2);background:#F1F0EC;}

/* ---- LISTA: tabela (desktop) + cards (mobile) ---- */
.fat-tablewrap{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.fat-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.fat-table thead tr{text-align:left;color:var(--fat-ink-2);font-size:12px;background:#FAFAF8;}
.fat-table th{padding:12px 18px;font-weight:700;}
.fat-table td{padding:14px 18px;}
.fat-table tbody tr{border-top:1px solid var(--fat-line);cursor:pointer;transition:background .12s ease;}
.fat-table tbody tr:hover{background:#FBFAF7;}
.fat-td-compet{font-weight:800;color:var(--fat-ink);}
.fat-td-venc{color:var(--fat-ink-2);}
.fat-td-valor{font-weight:800;color:var(--fat-ink);letter-spacing:-.2px;}
.fat-td-valor small{font-size:11px;color:var(--fat-ink-3);font-weight:600;letter-spacing:0;}
.fat-cards{display:none;flex-direction:column;gap:12px;}
.fat-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 16px 14px;cursor:pointer;transition:box-shadow .16s ease,transform .16s ease;}
.fat-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);}
.fat-card__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.fat-card__compet{font-size:15px;font-weight:800;color:var(--fat-ink);}
.fat-card__venc{font-size:12.5px;color:var(--fat-ink-2);margin-top:2px;}
.fat-card__valor{font-size:22px;font-weight:800;color:var(--fat-ink);letter-spacing:-.4px;margin-top:12px;}
.fat-card__valor small{font-size:11.5px;color:var(--fat-ink-3);font-weight:600;letter-spacing:0;}

/* ---- Botões de ação (copiar linha / PIX / 2ª via) ---- */
.fat-actions{display:flex;flex-wrap:wrap;gap:8px;}
.fat-btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;line-height:1;transition:background .14s ease,border-color .14s ease;}
.fat-btn--soft{background:#F5F4F0;border:1px solid var(--fat-line);color:var(--fat-ink);}
.fat-btn--soft:hover{background:#EFEDE7;border-color:#E0DDD3;}
.fat-btn--pix{background:#FBFAF7;border:1px solid var(--fat-seal-bd);color:var(--fat-amber-ink);}
.fat-btn--pix:hover{background:var(--fat-seal-bg);}
.fat-btn--2via{background:var(--fat-ink);border:1px solid var(--fat-ink);color:#fff;text-decoration:none;}
.fat-btn--2via:hover{background:#000;}

/* ---- DETALHE: papel A4-like sobre "mesa" quente ---- */
.fat-desk{background:var(--fat-paper);border-radius:18px;padding:26px;}
.fat-paper{background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(22,24,29,.10),0 2px 6px rgba(22,24,29,.05);overflow:hidden;}
.fat-paper__body{padding:34px 38px 38px;}
@media(max-width:600px){.fat-desk{padding:14px;border-radius:14px;}.fat-paper__body{padding:22px 20px 26px;}}

/* header da fatura: marca ISPX à esquerda + "FATURA · Nº" à direita */
.fat-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.fat-brand{display:flex;align-items:center;gap:11px;}
.fat-brand__name{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--fat-ink);line-height:1;}
.fat-brand__tag{font-size:11px;font-weight:600;color:var(--fat-ink-3);margin-top:3px;letter-spacing:.2px;}
.fat-hd__right{text-align:right;}
.fat-hd__doc{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--fat-ink-2);text-transform:uppercase;}
.fat-hd__num{font-size:16px;font-weight:800;color:var(--fat-ink);margin-top:2px;}
.fat-seal{display:inline-flex;align-items:center;gap:7px;margin-top:10px;background:var(--fat-seal-bg);border:1px solid var(--fat-seal-bd);border-radius:20px;padding:5px 12px;}
.fat-seal__lbl{font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--fat-amber-ink);text-transform:uppercase;}
.fat-seal__val{font-size:12.5px;font-weight:800;color:var(--fat-ink);}

.fat-rule{height:1px;background:var(--fat-line);margin:26px 0;}

/* grid Cliente / Vencimento + Total */
.fat-meta{display:grid;grid-template-columns:1.3fr 1fr;gap:26px;}
@media(max-width:600px){.fat-meta{grid-template-columns:1fr;gap:20px;}}
.fat-meta__k{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--fat-ink-3);}
.fat-meta__v{font-size:15px;font-weight:700;color:var(--fat-ink);margin-top:5px;}
.fat-meta__right{text-align:right;}
@media(max-width:600px){.fat-meta__right{text-align:left;}}
.fat-total{font-size:38px;font-weight:800;color:var(--fat-ink);letter-spacing:-.5px;line-height:1;margin-top:5px;}
.fat-mini{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap;}
.fat-mini__item .fat-meta__v{font-size:14px;}

/* bloco Descrição dos serviços */
.fat-items__h{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--fat-ink-3);margin-bottom:12px;}
.fat-items__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--fat-line);}
.fat-items__row:first-of-type{border-top:none;}
.fat-items__desc{font-size:13.5px;color:var(--fat-ink);line-height:1.5;white-space:pre-wrap;}
.fat-items__val{font-size:13.5px;font-weight:700;color:var(--fat-ink);white-space:nowrap;}
.fat-items__total{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px;padding-top:14px;border-top:2.5px solid var(--fat-ink);}
.fat-items__total-k{font-size:13px;font-weight:800;color:var(--fat-ink);text-transform:uppercase;letter-spacing:.5px;}
.fat-items__total-v{font-size:20px;font-weight:800;color:var(--fat-ink);letter-spacing:-.3px;}

/* bloco de PAGAMENTO — card escuro */
.fat-pay{background:var(--fat-dark);border-radius:14px;padding:24px 26px;margin-top:26px;color:#EDEBE4;}
.fat-pay__grid{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;}
@media(max-width:600px){.fat-pay{padding:20px;}.fat-pay__grid{grid-template-columns:1fr;gap:20px;}}
.fat-pix__badge{display:inline-flex;align-items:center;gap:6px;}
.fat-pix__lbl{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--fat-amber);}
.fat-pix__hint{font-size:12px;color:#9A958A;margin-top:2px;}
.fat-qr{width:132px;height:132px;background:#fff;border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center;}
.fat-qr svg{width:100%;height:100%;display:block;}
.fat-pix__code{margin-top:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:11px 12px;font-family:var(--mono);font-size:11.5px;color:#CFCCC3;word-break:break-all;line-height:1.5;max-height:66px;overflow:auto;}
.fat-pay__copy{display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:var(--fat-amber);border:none;border-radius:10px;padding:10px 16px;font:inherit;font-size:13px;font-weight:800;color:#1B1206;cursor:pointer;transition:filter .14s ease;}
.fat-pay__copy:hover{filter:brightness(1.06);}
.fat-pay__copy--ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:#EDEBE4;}
.fat-pay__copy--ghost:hover{background:rgba(255,255,255,.08);filter:none;}

/* linha digitável + código de barras (motivo visual da identidade) */
.fat-boleto{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);}
.fat-boleto__k{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#9A958A;}
.fat-barcode{display:flex;align-items:flex-end;gap:1.5px;height:46px;margin:12px 0 12px;}
.fat-barcode span{display:block;width:2px;background:#EDEBE4;border-radius:1px;}
.fat-line{font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:.4px;color:#EDEBE4;word-break:break-all;line-height:1.5;}
.fat-note{font-size:11.5px;color:#8C877C;margin-top:16px;line-height:1.5;display:flex;gap:7px;}
.fat-note svg{flex-shrink:0;margin-top:1px;}

/* histórico de pagamentos (dentro do papel) */
.fat-hist__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--fat-line);}
.fat-hist__row:first-child{border-top:none;}
.fat-hist__when{font-size:13.5px;color:var(--fat-ink);font-weight:700;}
.fat-hist__when small{font-weight:500;color:var(--fat-ink-3);}
.fat-hist__val{font-size:13.5px;font-weight:800;color:#15803D;}

.fat-back{display:inline-flex;align-items:center;gap:7px;color:var(--fat-ink-2);font-size:13px;font-weight:700;cursor:pointer;background:none;border:none;padding:0;margin-bottom:16px;}
.fat-back:hover{color:var(--fat-ink);}

@media(max-width:640px){
  .fat-table{display:none;}
  .fat-cards{display:flex;}
}

/* ── FATURAS (fonte ISPX) e CONTRATOS — abas, busca, modal de pagamento, cartões de TAS ─────────
   Mesmo idioma visual do módulo Faturas acima (--fat-*). Foco visível em tudo que é clicável. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.fat-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.fat-tabs{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:4px;}
.fat-tab{background:none;border:none;font:inherit;font-size:13px;font-weight:700;color:var(--fat-ink-2);padding:8px 14px;border-radius:9px;cursor:pointer;}
.fat-tab.on{background:var(--fat-ink);color:#fff;}
.fat-tab__n{font-weight:800;opacity:.7;margin-left:3px;}
.fat-filters{display:flex;gap:8px;flex-wrap:wrap;}
.fat-search,.fat-select{border:1px solid var(--border);background:#fff;border-radius:10px;padding:9px 12px;font:inherit;font-size:13px;color:var(--fat-ink);min-width:0;}
.fat-search{width:230px;max-width:100%;}
.fat-tab:focus-visible,.fat-search:focus-visible,.fat-select:focus-visible,.fat-btn:focus-visible,.fat-modal__x:focus-visible,.fat-modal a:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px;}
.fat-doc{display:block;font-size:11px;color:var(--fat-ink-3);font-weight:600;}
.fat-pago{font-size:11.5px;color:#15803D;font-weight:700;margin-top:4px;}
.fat-nada{color:var(--fat-ink-3);font-size:12px;}
.fat-vazio{padding:44px 22px;text-align:center;border-radius:14px;}
.fat-vazio__t{font-size:15px;font-weight:800;color:var(--fat-ink);}
.fat-vazio__m{font-size:13px;color:var(--fat-ink-3);margin-top:6px;}
.fat-msg{min-height:18px;margin-top:12px;font-size:12.5px;color:var(--fat-ink-2);}
.fat-btn--pagar{background:var(--fat-amber);border:1px solid var(--fat-amber);color:#1B1206;}
.fat-btn--pagar:hover{filter:brightness(1.06);}
.fat-btn[disabled]{opacity:.6;cursor:progress;}
.fat-actions--det{gap:10px;}
@media(max-width:640px){.fat-toolbar{flex-direction:column;align-items:stretch;}.fat-search{width:100%;}.fat-tabs{width:100%;}.fat-tab{flex:1;padding:8px 6px;}}

/* modal Pagar */
.fat-modal-ov{position:fixed;inset:0;background:rgba(22,24,29,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:400;}
.fat-modal{background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(22,24,29,.35);width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;padding:22px 24px;outline:none;}
.fat-modal__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.fat-modal__t{font-size:17px;font-weight:800;color:var(--fat-ink);margin:0;}
.fat-modal__x{background:none;border:none;font-size:26px;line-height:1;color:var(--fat-ink-2);cursor:pointer;border-radius:8px;padding:2px 8px;}
.fat-modal__resumo{display:flex;gap:28px;margin:16px 0 4px;}
.fat-modal__valor{font-size:26px;font-weight:800;color:var(--fat-ink);letter-spacing:-.4px;margin-top:4px;}
.fat-modal__corpo{margin-top:14px;display:flex;flex-direction:column;gap:16px;}
.fat-modal__pix{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;}
.fat-modal .fat-qr{background:#fff;border:1px solid var(--fat-line);width:auto;height:auto;padding:8px;}
.fat-modal .fat-qr img{display:block;width:180px;height:180px;}
.fat-modal__pixcol{min-width:0;}
.fat-modal .fat-pix__lbl{color:var(--fat-amber-ink);}
.fat-modal__hint{font-size:12.5px;color:var(--fat-ink-2);margin:2px 0 10px;line-height:1.45;}
.fat-modal__bloco{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0;}
.fat-modal__cod{width:100%;background:#FAFAF8;border:1px solid var(--fat-line);border-radius:10px;padding:10px 12px;font-size:12px;word-break:break-all;line-height:1.5;max-height:92px;overflow:auto;}
.fat-modal__cod--mono{font-family:var(--mono);}
.fat-modal__aviso{background:var(--fat-seal-bg);border:1px solid var(--fat-seal-bd);border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--fat-ink);line-height:1.5;}
.fat-modal__aviso--alerta{background:#FEF0EE;border-color:#F5C6C0;color:#7A1A10;}
.fat-modal__contato{font-size:13.5px;color:var(--fat-ink);}
.fat-modal__contato a{color:#1a66cc;font-weight:700;}
.fat-modal__nota{font-size:11.5px;color:var(--fat-ink-3);line-height:1.5;}
.fat-modal__ft{display:flex;justify-content:flex-end;margin-top:18px;}
@media(max-width:520px){.fat-modal{padding:18px 16px;}.fat-modal__pix{grid-template-columns:1fr;justify-items:center;}.fat-modal__pixcol{width:100%;}}

/* contratos (TAS) */
.ct-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;}
.ct-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px;}
.ct-card__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.ct-card__num{font-size:15px;font-weight:800;color:var(--fat-ink);font-family:var(--mono);word-break:break-all;}
.ct-card__srv{font-size:12.5px;color:var(--fat-ink-2);margin-top:3px;}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.ct-par__v{font-size:13.5px;font-weight:600;color:var(--fat-ink);margin-top:4px;line-height:1.4;}
.ct-par:nth-child(1),.ct-par:nth-last-child(1){grid-column:1 / -1;}
.ct-fid__t{font-weight:700;}
.ct-fid__p,.ct-fid__r{font-size:12px;color:var(--fat-ink-2);font-weight:500;margin-top:3px;}
.ct-card__ft{border-top:1px solid var(--fat-line);padding-top:12px;}
.ct-regra{font-size:12px;color:var(--fat-ink-3);margin-top:16px;line-height:1.5;}
@media(max-width:640px){.ct-lista{grid-template-columns:1fr;}.ct-grid{grid-template-columns:1fr;}}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   FATURAS v7 — "ISPX - Faturas v7 (Estados e mobile)" (lista sem caixas + modal único Pagar ⇄ Detalhes).
   Tokens --ispx-* DO DESIGN, escopados em .fv/.fv-ov (não vazam para Circuitos/Contratos). Mobile =
   breakpoint de 640px (o do design), um DOM só: a linha vira cartão por CSS. Contratos e o ramo SGP
   legado seguem no idioma .fat-* acima.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.fv,.fv-ov{
  --ispx-font:'IBM Plex Sans',system-ui,sans-serif;--ispx-font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --ispx-text:#1A1D23;--ispx-text-2:#4B515C;--ispx-text-3:#646A75;
  --ispx-canvas:#FFFFFF;--ispx-surface:#FFFFFF;--ispx-hover:#F8F8F7;
  --ispx-line:#E4E6EA;--ispx-line-strong:#C9CDD3;
  --ispx-primary:#1F2A37;--ispx-primary-ink:#FFFFFF;--ispx-primary-hover:#0F172A;--ispx-accent:#1F2A37;--ispx-marker:#1F2A37;
  --ispx-warn:#B7791F;--ispx-warn-ink:#8A5A12;--ispx-danger:#B42318;--ispx-ok:#2F7D4F;--ispx-info:#5B6B82;
  --ispx-radius:4px;--ispx-radius-lg:8px;--ispx-row-h:64px;--ispx-row-inset:12px;--ispx-gutter-status:32px;
  --ispx-title-size:26px;--ispx-title-weight:600;--ispx-label-size:11px;--ispx-label-track:0.07em;
  --ispx-num-size:24px;--ispx-num-weight:500;--ispx-scrim:rgba(0,0,0,0.30);
  --ispx-shadow-pop:0 8px 24px rgba(16,24,40,0.10);--ispx-shadow-modal:0 16px 48px rgba(16,24,40,0.18);
  --ispx-page-max:1040px;--ispx-fill:#EEF0F2;
  font-family:var(--ispx-font);color:var(--ispx-text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
.fv *,.fv-ov *{box-sizing:border-box;}
.fv button,.fv input,.fv select,.fv-ov button,.fv-ov input,.fv-ov select{font-family:inherit;font-variant-numeric:tabular-nums;}
.fv :focus-visible,.fv-ov :focus-visible{outline:2px solid var(--ispx-accent);outline-offset:2px;border-radius:2px;}
.fv-ov a{color:var(--ispx-text);text-underline-offset:3px;}
.fv-ov a:hover{text-decoration:underline;}
.content:has(> .fv){--ispx-canvas:#FFFFFF;padding:0 !important;background:var(--ispx-canvas);}
.fv{max-width:var(--ispx-page-max);margin:0 auto;padding:44px 32px 56px;display:flex;flex-direction:column;gap:32px;background:var(--ispx-canvas);min-height:100%;}
.fv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.fv-only-m{display:none;}
@keyframes fvPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fvIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fvSkel{0%,100%{opacity:1}50%{opacity:.5}}
.fv-w5{font-weight:500;}

/* cabeçalho */
.fv-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;}
.fv-hd__t{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0;}
.fv-h1{margin:0;font-size:var(--ispx-title-size);font-weight:var(--ispx-title-weight);letter-spacing:-0.015em;line-height:1.2;}
.fv-sub0{margin:0;font-size:14px;color:var(--ispx-text-2);}
.fv-upd{font-size:12px;color:var(--ispx-text-3);}
.fv-exp{position:relative;flex-shrink:0;margin-right:-8px;}
.fv-expbtn{height:34px;padding:0 8px;border-radius:var(--ispx-radius);border:1px solid transparent;background:transparent;color:var(--ispx-text-2);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:color .12s,border-color .12s;}
.fv-expbtn:hover{color:var(--ispx-text);border-color:var(--ispx-line);}
.fv-menu{position:absolute;right:8px;top:calc(100% + 6px);z-index:31;width:300px;background:var(--ispx-surface);border:1px solid var(--ispx-line);border-radius:var(--ispx-radius);box-shadow:var(--ispx-shadow-pop);padding:6px;animation:fvIn .12s ease-out;text-align:left;cursor:default;}
.fv-menu--row{right:-6px;top:calc(100% + 4px);width:270px;}
.fv-mi{width:100%;min-height:38px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:0;background:transparent;border-radius:3px;cursor:pointer;text-align:left;font-size:14px;color:var(--ispx-text);}
.fv-mi:hover,.fv-mi:focus-visible{background:var(--ispx-hover);}
.fv-meta{font-size:12px;color:var(--ispx-text-3);white-space:nowrap;}
a.fv-mi,a.fv-doc{text-decoration:none;color:var(--ispx-text);}
.fv-sep{height:1px;background:var(--ispx-line);margin:6px 4px;}

/* resumo: 2 colunas, sem caixas */
.fv-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border-top:1px solid var(--ispx-line);border-bottom:1px solid var(--ispx-line);}
.fv-sum__c{padding:20px 0;display:flex;flex-direction:column;gap:6px;min-width:0;}
.fv-sum__c:nth-child(2){padding:20px 0 20px 32px;border-left:1px solid var(--ispx-line);}
.fv-sum__c--sk{gap:10px;}
.fv-sum__k{font-size:13px;color:var(--ispx-text-2);}
.fv-sum__v{font-size:var(--ispx-num-size);font-weight:var(--ispx-num-weight);letter-spacing:-0.01em;line-height:1.2;display:inline-flex;align-items:center;gap:10px;}
.fv-sum__s{font-size:13px;color:var(--ispx-text-2);}
.fv-ic-ok{color:var(--ispx-ok);flex-shrink:0;}

/* lista */
.fv-sec{display:flex;flex-direction:column;gap:12px;}
.fv-tabs{display:flex;flex-wrap:wrap;gap:4px 24px;}
.fv-tab{min-height:32px;white-space:nowrap;border:0;background:none;padding:6px 0;font-size:14px;font-weight:400;color:var(--ispx-text-2);cursor:pointer;transition:color .12s;}
.fv-tab:hover{color:var(--ispx-text);}
.fv-tab.on{font-weight:600;color:var(--ispx-text);text-decoration:underline;text-decoration-color:var(--ispx-accent);text-decoration-thickness:2px;text-underline-offset:8px;}
.fv-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.fv-search__f{position:relative;flex:1 1 240px;max-width:320px;}
.fv-search__f svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ispx-text-3);pointer-events:none;}
.fv-search__f input{width:100%;height:40px;padding:0 12px 0 34px;border:1px solid var(--ispx-line-strong);border-radius:var(--ispx-radius);background:var(--ispx-surface);color:var(--ispx-text);font-size:14px;}
.fv-per-sel{height:40px;padding:0 12px;border:1px solid var(--ispx-line-strong);border-radius:var(--ispx-radius);background:var(--ispx-surface);color:var(--ispx-text);font-size:14px;cursor:pointer;}
.fv-tbl{margin:0 calc(var(--ispx-row-inset) * -1);}
.fv-thead,.fv-row{display:grid;grid-template-columns:minmax(110px,1.5fr) minmax(100px,0.9fr) minmax(112px,0.9fr) minmax(140px,1.2fr) 176px;align-items:center;gap:16px;}
.fv-thead{height:40px;padding:0 var(--ispx-row-inset);border-bottom:1px solid var(--ispx-line);font-size:var(--ispx-label-size);font-weight:500;text-transform:uppercase;letter-spacing:var(--ispx-label-track);color:var(--ispx-text-3);}
.fv-r{text-align:right;}
.fv-th-st{padding-left:calc(var(--ispx-gutter-status) - 16px);}
.fv-grp{padding:20px var(--ispx-row-inset) 8px;border-top:1px solid var(--ispx-line);font-size:16px;}
.fv-grp > span{font-size:13px;font-weight:600;color:var(--ispx-text-2);}
.fv-grp.fv-nb,.fv-row.fv-nb{border-top-color:transparent;}
.fv-row{min-height:var(--ispx-row-h);padding:10px var(--ispx-row-inset);border-top:1px solid var(--ispx-line);position:relative;cursor:pointer;transition:background .12s ease;}
.fv-row:hover{background:var(--ispx-hover);}
.fv-row:focus-visible{outline-offset:-2px;}
.fv-mark{position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--ispx-marker);}
.fv-c{min-width:0;}
.fv-c-id{display:flex;flex-direction:column;gap:3px;}
.fv-id{font-size:15px;font-weight:500;}
.fv-per{font-size:13px;color:var(--ispx-text-3);}
.fv-c-venc{display:flex;flex-direction:column;gap:3px;font-size:14px;}
.fv-sub{font-size:13px;color:var(--ispx-text-3);}
.fv-c-val{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.fv-val{font-size:15px;font-weight:400;white-space:nowrap;}
.fv-valsub{font-size:12px;color:var(--ispx-text-3);white-space:nowrap;}
.fv-row.is-hl .fv-id,.fv-row.is-hl .fv-val{font-weight:600;}
.fv-row.is-canc .fv-id,.fv-row.is-canc .fv-val,.fv-row.is-canc .fv-c-venc{color:var(--ispx-text-3);}
.fv-c-st{display:flex;align-items:center;gap:8px;padding-left:calc(var(--ispx-gutter-status) - 16px);font-size:14px;}
.fv-st--danger{color:var(--ispx-danger);font-weight:500;}.fv-st--text{color:var(--ispx-text);}.fv-st--muted{color:var(--ispx-text-2);}.fv-st--faint{color:var(--ispx-text-3);}
.fv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fv-dot--danger{background:var(--ispx-danger);}.fv-dot--warn{background:var(--ispx-warn);}.fv-dot--info{background:var(--ispx-info);}
.fv-dot--canc{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ispx-line-strong);}
.fv-check{color:var(--ispx-text-3);flex-shrink:0;}
.fv-c-ac{display:flex;justify-content:flex-end;align-items:center;gap:6px;position:relative;}
.fv-btn{height:40px;padding:0 20px;border-radius:var(--ispx-radius);border:1px solid transparent;font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background .12s;}
.fv-btn--p{background:var(--ispx-primary);color:var(--ispx-primary-ink);}
.fv-btn--p:hover{background:var(--ispx-primary-hover);}
.fv-ov a.fv-btn--p,.fv-ov a.fv-btn--p:hover{color:var(--ispx-primary-ink);text-decoration:none;}
.fv-btn--s{background:var(--ispx-surface);color:var(--ispx-text);border-color:var(--ispx-line-strong);padding:0 16px;}
.fv-btn--s:hover{background:var(--ispx-hover);}
.fv-btn[disabled]{opacity:.6;cursor:progress;}
.fv-pay{height:32px;padding:0 16px;font-size:13px;}
.fv-docs{display:contents;}
.fv-docsbtn{height:32px;padding:0 6px 0 10px;margin-right:-6px;border-radius:var(--ispx-radius);border:1px solid transparent;background:transparent;color:var(--ispx-text-3);font-size:13px;display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s;}
.fv-row:hover .fv-docsbtn,.fv-row.is-hl .fv-docsbtn,.fv-docsbtn[aria-expanded="true"]{color:var(--ispx-text);}
.fv-row.is-hl .fv-docsbtn{font-weight:500;}
.fv-docsbtn:hover{border-color:var(--ispx-line-strong);color:var(--ispx-text);}
.fv-msg{padding:24px 0;border-top:1px solid var(--ispx-line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:14px;color:var(--ispx-text-2);}
#fv-corpo{display:flex;flex-direction:column;gap:12px;}
.fv-canc{display:flex;justify-content:flex-end;}
.fv-canc .fv-lnk{padding:6px 0;}
.fv-lnk{border:0;background:none;padding:4px 0;font-size:14px;color:var(--ispx-text);cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.fv-lnk:hover{text-decoration:underline;}
.fv-lnk--2{color:var(--ispx-text-2);font-size:13px;}
.fv-lnk--2:hover{color:var(--ispx-text);}
.fv-ft{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:20px;border-top:1px solid var(--ispx-line);font-size:14px;color:var(--ispx-text-2);}
.fv-ft__q{color:var(--ispx-text);font-weight:500;}

/* estados: carregando · erro · vazio */
.fv-loading{display:flex;flex-direction:column;gap:32px;}
.fv-skel{display:block;border-radius:3px;background:var(--ispx-fill);animation:fvSkel 1.6s ease-in-out infinite;}
.fv-skel-tabs{display:flex;gap:24px;padding:8px 0 16px;}
.fv-skel-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--ispx-row-h);border-top:1px solid var(--ispx-line);}
.fv-skel-id{display:flex;flex-direction:column;gap:8px;}
.fv-state{padding:32px 0;border-top:1px solid var(--ispx-line);border-bottom:1px solid var(--ispx-line);display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.fv-state__t{margin:0;font-size:16px;font-weight:600;}
.fv-state__ac{display:flex;flex-wrap:wrap;gap:8px;}
.fv-state__p{margin:0;font-size:15px;color:var(--ispx-text);text-wrap:pretty;}
.fv-state__c{margin:0;font-size:14px;color:var(--ispx-text-2);}
.fv-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:500;pointer-events:none;width:max-content;max-width:calc(100% - 32px);}
.fv-toast.on{padding:11px 16px;border-radius:var(--ispx-radius);background:var(--ispx-text);color:var(--ispx-canvas);font-size:14px;box-shadow:var(--ispx-shadow-pop);animation:fvIn .16s ease-out;}

/* modal único */
.fv-ov{position:fixed;inset:0;z-index:400;}
.fv-scrim{position:fixed;inset:0;background:var(--ispx-scrim);opacity:0;transition:opacity .16s ease-out;}
.fv-ovw{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px 0;pointer-events:none;}
.fv-dlg{pointer-events:auto;position:relative;width:min(600px,100% - 32px);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--ispx-surface);border-radius:var(--ispx-radius-lg);box-shadow:var(--ispx-shadow-modal);outline:none;opacity:0;transform:translateY(8px);transition:opacity .16s ease-out,transform .16s ease-out,height .16s ease-out;}
.fv-ov.is-in .fv-scrim{opacity:1;}
.fv-ov.is-in .fv-dlg{opacity:1;transform:none;}
.fv-x{position:absolute;top:22px;right:24px;z-index:1;width:36px;height:36px;border-radius:var(--ispx-radius);border:0;background:transparent;color:var(--ispx-text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;}
.fv-x:hover{background:var(--ispx-hover);color:var(--ispx-text);}
.fv-mh{flex-shrink:0;margin:0 32px;padding:28px 48px 16px 0;border-bottom:1px solid var(--ispx-line);}
.fv-mh__t{margin:0;font-size:20px;font-weight:600;letter-spacing:-0.01em;line-height:1.3;}
.fv-mh__s{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--ispx-text-2);}
.fv-mh__st{margin-top:4px;display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;}
.fv-mb{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 32px 28px;}
.fv-pv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:baseline;gap:4px 24px;padding:10px 0;border-bottom:1px solid var(--ispx-line);}
.fv-pv__k{font-size:13px;color:var(--ispx-text-2);}
.fv-pv__n{font-size:var(--ispx-num-size);font-weight:var(--ispx-num-weight);letter-spacing:-0.01em;line-height:1.25;}
.fv-pv__d{font-size:15px;color:var(--ispx-text);}
.fv-pv__rel{color:var(--ispx-text-2);}
.fv-pv__brk{grid-column:1 / -1;margin-top:4px;font-size:13px;color:var(--ispx-text-2);}
/* PAGAR · PIX e Boleto com o MESMO destaque. Abaixo de 1000px (celular e tablet): duas abas grandes no topo, UM painel por vez.
   A partir de 1000px (computador): sem abas, os dois lado a lado e à vista (.fv-dlg--duo alarga o modal; QR à esquerda, boleto à direita). */
.fv-tabs.fv-tabs--pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;overflow:visible;padding:12px 0 0;border-bottom:1px solid var(--ispx-line);}
.fv-tabs.fv-tabs--pay .fv-tab{min-height:52px;padding:0 12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--ispx-text-2);border-bottom:3px solid transparent;margin-bottom:-1px;text-decoration:none;}
.fv-tabs--pay .fv-tab.on{color:var(--ispx-text);border-bottom-color:var(--ispx-accent);text-decoration:none;}
.fv-tabs--pay .fv-tab.is-nd{color:var(--ispx-text-3);font-weight:500;}
.fv-pm.is-off{display:none;}
.fv-pm__t{display:none;margin:0;font-size:16px;font-weight:600;line-height:1.3;}
.fv-nd{margin:0;padding:12px 0 4px;font-size:14px;line-height:1.5;color:var(--ispx-text-2);text-wrap:pretty;}
.fv-nd strong{color:var(--ispx-text);font-weight:600;}
.fv-nd--bar{padding:0 0 12px;}
.fv-bar{background:#fff;border:1px solid var(--ispx-line);border-radius:var(--ispx-radius);padding:10px 10px;} /* 10px de cada lado = zona de silêncio de ≥ 10 módulos (1 px por módulo no computador) */
.fv-bar img{display:block;width:100%;max-width:405px;height:auto;margin:0 auto;}
.fv-bol__dica{margin:0;font-size:13px;line-height:1.45;color:var(--ispx-text-2);}
.fv-pp{padding:12px 0 14px;border-bottom:1px solid var(--ispx-line);}
.fv-pix{display:grid;grid-template-columns:176px minmax(0,1fr);gap:28px;align-items:start;min-height:200px;}
.fv-pix--nq{grid-template-columns:minmax(0,1fr);min-height:0;}
.fv-pix__qr figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;}
.fv-pix__qr img{display:block;width:176px;height:176px;background:#fff;}
.fv-pix__qr figcaption{font-size:12px;color:var(--ispx-text-2);}
.fv-pix__c{display:flex;flex-direction:column;gap:12px;min-width:0;}
.fv-btn--copy{height:44px;}
.fv-btn--sm{height:36px;padding:0 14px;font-size:13px;flex-shrink:0;}
.fv-code{display:flex;align-items:stretch;border:1px solid var(--ispx-line);border-radius:var(--ispx-radius);}
.fv-code input{flex:1;min-width:0;height:38px;padding:0 10px;border:0;background:transparent;font-family:var(--ispx-font-mono);font-size:12px;color:var(--ispx-text-2);text-overflow:ellipsis;outline-offset:-2px;}
.fv-code__b{width:40px;border:0;border-left:1px solid var(--ispx-line);background:transparent;color:var(--ispx-text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s;}
.fv-code__b:hover{background:var(--ispx-hover);color:var(--ispx-text);}
.fv-qrtoggle{display:none;}
.fv-steps{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ispx-text-2);line-height:1.45;}
.fv-bol{display:flex;flex-direction:column;gap:12px;}
.fv-bol__l{display:flex;flex-direction:column;gap:6px;}
.fv-bol__k{font-size:13px;color:var(--ispx-text-2);}
.fv-bol__box{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--ispx-line);border-radius:var(--ispx-radius);}
.fv-bol__box{align-items:center;}
.fv-bol__box code{flex:1;min-width:0;font-family:var(--ispx-font-mono);font-size:13px;line-height:1.55;overflow-wrap:anywhere;color:var(--ispx-text);}
.fv-lnk--b{flex-shrink:0;font-size:13px;font-weight:500;padding:2px 0;min-height:24px;gap:5px;}
.fv-bol__ac{display:flex;flex-wrap:wrap;gap:8px;}
.fv-ben{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:10px 0;border-bottom:1px solid var(--ispx-line);}
.fv-ben__n{font-size:13px;color:var(--ispx-text-2);flex:1 1 260px;}
.fv-wait{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ispx-warn-ink);white-space:nowrap;}
.fv-wait__d{width:8px;height:8px;border-radius:50%;background:var(--ispx-warn);animation:fvPulse 1.8s ease-in-out infinite;}
.fv-nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;padding-top:4px;}
.fv-nav .fv-lnk,.fv-duv .fv-lnk,.fv-state .fv-lnk{min-height:32px;}
.fv-back svg{margin-left:-4px;}
.fv-verif{display:flex;align-items:center;min-height:32px;padding-top:8px;font-size:14px;color:var(--ispx-text-2);}
.fv-skel-pay{padding:12px 0 14px;border-bottom:1px solid var(--ispx-line);display:grid;grid-template-columns:176px minmax(0,1fr);gap:28px;align-items:start;min-height:200px;}
.fv-skel--qr{width:176px;height:176px;border-radius:4px;}
.fv-skel-pay__c{display:flex;flex-direction:column;gap:12px;}
.fv-fail{padding:20px 0 24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;border-bottom:1px solid var(--ispx-line);}
.fv-fail p{margin:0;font-size:14px;line-height:1.5;}
.fv-fail__ac{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;}
.fv-aviso{padding:16px 0 12px;font-size:14px;line-height:1.5;color:var(--ispx-text);text-wrap:pretty;}
.fv-aviso--alerta{color:var(--ispx-danger);}
.fv-contato{margin:0;padding:0 0 16px;font-size:14px;color:var(--ispx-text-2);border-bottom:1px solid var(--ispx-line);}
.fv-contato a{text-decoration:underline;}
.fv-done{padding:24px 0 0;display:flex;flex-direction:column;gap:24px;animation:fvIn .2s ease-out;}
.fv-done__r{display:flex;align-items:flex-start;gap:12px;}
.fv-done__t{display:flex;flex-direction:column;gap:4px;min-width:0;}
.fv-done__h{font-size:16px;font-weight:600;line-height:22px;}
.fv-done__s{font-size:14px;color:var(--ispx-text-2);}
.fv-done__ac{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px;}
.fv-dl{margin:0;padding:16px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;border-bottom:1px solid var(--ispx-line);}
.fv-dl dt{font-size:13px;color:var(--ispx-text-2);}
.fv-dl dd{margin:2px 0 0;font-size:14px;}
.fv-vals{padding:16px 0 20px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--ispx-line);}
.fv-h3{margin:0 0 2px;font-size:var(--ispx-label-size);font-weight:500;text-transform:uppercase;letter-spacing:var(--ispx-label-track);color:var(--ispx-text-3);}
.fv-docsec .fv-h3{margin-bottom:4px;}
.fv-ln{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ispx-text-2);}
.fv-ln span:first-child{min-width:0;overflow-wrap:anywhere;}
.fv-ln-sk{display:flex;flex-direction:column;gap:10px;}
.fv-note-s{margin:0;font-size:13px;color:var(--ispx-text-2);}
.fv-tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.fv-tot.has-ln{padding-top:10px;border-top:1px solid var(--ispx-line);}
.fv-tot__k{font-size:14px;font-weight:500;}
.fv-tot__v{font-size:20px;font-weight:600;}
.fv-tot--none{padding-top:10px;border-top:1px solid var(--ispx-line);font-size:14px;color:var(--ispx-text-2);}
.fv-btn--w{margin-top:6px;height:44px;width:100%;}
.fv-paidtxt{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ispx-text-2);}
.fv-docsec{padding:16px 0 4px;display:flex;flex-direction:column;border-bottom:1px solid var(--ispx-line);}
.fv-doc{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:0;border:0;border-bottom:1px solid var(--ispx-line);background:none;cursor:pointer;text-align:left;font-size:14px;color:var(--ispx-text);}
.fv-doc:last-child{border-bottom-color:transparent;}
.fv-doc:hover{text-decoration:underline;}
.fv-doc__m{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ispx-text-3);}
.fv-duv{padding-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--ispx-text-2);}

/* LISTA no celular/tablet em pé (até 780px — o design pede 640px, mas a tabela de 5 colunas precisa de ~702px de área útil, e o shell do portal só esconde a barra lateral até 1024px; entre 641 e ~750px as colunas se sobrepunham): cartão por linha, controles de 44px */
@media(max-width:780px){
  .fv{padding:24px 16px 40px;gap:24px;}
  .fv-loading{gap:24px;}
  .fv-hd{flex-wrap:nowrap;}
  .fv-exp{margin-right:0;}
  .fv-expbtn{width:44px;height:44px;padding:0;justify-content:center;border-color:var(--ispx-line);}
  .fv-only-d{display:none !important;}
  .fv-only-m{display:inline;}
  .fv-sum__c{padding:16px 0;}
  .fv-sum__c:nth-child(2){padding:16px 0;border-left:0;border-top:1px solid var(--ispx-line);}
  .fv-tabs{flex-wrap:nowrap;overflow-x:auto;gap:0 4px;margin-left:-10px;}
  .fv-tab{min-height:44px;padding:6px 10px;}
  .fv-menu--exp .fv-mi{min-height:44px;}
  .fv-search__f{max-width:100%;}
  .fv-search__f input,.fv-per-sel{height:44px;}
  .fv-per-sel{flex:1 1 100%;}
  .fv-tbl{margin:0;}
  .fv-thead{display:none;}
  .fv-grp{padding:20px 0 8px;}
  .fv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id val" "per st" "pay pay" "doc doc";column-gap:12px;row-gap:4px;align-items:baseline;min-height:0;padding:14px 0 2px;cursor:default;}
  .fv-row:hover{background:transparent;}
  .fv-mark{display:none;}
  .fv-c-id,.fv-c-ac{display:contents;}
  .fv-c-venc{display:none;}
  .fv-id{grid-area:id;}
  .fv-per{grid-area:per;white-space:nowrap;}
  .fv-c-val{grid-area:val;display:block;}
  .fv-valsub{display:none;}
  .fv-c-st{grid-area:st;justify-content:flex-end;padding-left:0;font-size:13px;gap:6px;min-width:0;text-align:right;}
  .fv-pay{grid-area:pay;height:44px;font-size:14px;width:100%;margin:4px 0;}
  .fv-docs{grid-area:doc;display:flex;position:relative;}
  .fv-docsbtn{min-height:44px;padding:0;margin:0;border:0;font-size:14px;color:var(--ispx-text-2) !important;font-weight:400 !important;}
  .fv-menu--row{left:0;right:auto;top:calc(100% + 2px);width:min(300px,100%);}
  .fv-menu--row .fv-mi{min-height:44px;padding:0 10px;}
  .fv-canc .fv-lnk{min-height:44px;}
  .fv-toast{bottom:16px;}
}
/* MODAL no celular (breakpoint de 640px do design): tela cheia com 12px de folga, controles de 44px */
@media(max-width:640px){
  .fv-btn{height:44px;}
  .fv-lnk,.fv-nav .fv-lnk,.fv-duv .fv-lnk,.fv-state .fv-lnk{min-height:44px;}
  .fv-lnk--b{min-height:44px;}
  .fv-ovw{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
  .fv-dlg{width:100%;max-height:100%;}
  .fv-x{top:8px;right:8px;width:44px;height:44px;}
  .fv-mh{margin:0 20px;padding:18px 48px 14px 0;}
  .fv-mb{padding:0 20px 20px;}
  .fv-pv__rel{display:block;}
  .fv-pix{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-height:0;}
  .fv-pix__c{display:contents;}
  .fv-pix .fv-btn--copy{order:1;height:48px;}
  .fv-pix .fv-code{order:2;}
  .fv-pix .fv-code input{height:44px;}
  .fv-pix .fv-code__b{width:44px;}
  .fv-qrtoggle{display:inline-flex;order:3;align-self:flex-start;}
  .fv-pix__qr{display:none;order:4;}
  .fv-pix__qr.is-open{display:flex;justify-content:center;}
  .fv-steps{order:5;}
  .fv-bol__ac{flex-direction:column;}
  .fv-ben{flex-direction:column;align-items:flex-start;}
  .fv-ben__n{flex:0 0 auto;}
  .fv-skel-pay{grid-template-columns:minmax(0,1fr);gap:12px;min-height:0;}
  .fv-skel--qr{display:none;}
  .fv-bar{margin:0 -20px;border-left:0;border-right:0;border-radius:0;padding:10px;} /* sangra até a borda do modal: cada módulo ganha ~12% */
  .fv-dl{grid-template-columns:minmax(0,1fr);}
  .fv-doc{min-height:46px;}
  }
/* PAGAR no computador (≥ 1000px): o modal alarga (só quando há PIX/boleto para pagar), as abas somem e os dois meios ficam à vista:
   PIX (QR + código) à esquerda, Boleto (código de barras 1 px por módulo ≈ 107 mm, o tamanho da ficha de compensação, + linha digitável) à direita. */
@media(min-width:1000px){
  .fv-dlg.fv-dlg--duo{width:min(980px,100% - 32px);}
  .fv-tabs.fv-tabs--pay{display:none;}
  .fv-duo{display:grid;grid-template-columns:minmax(0,1fr) 466px;align-items:start;}
  .fv-pm.is-off{display:block;}
  .fv-pm__t{display:block;padding-bottom:12px;}
  .fv-pm--pix{padding-right:32px;}
  .fv-pm--boleto{padding-left:32px;border-left:1px solid var(--ispx-line);}
  .fv-duo .fv-pix{grid-template-columns:176px minmax(0,1fr);gap:20px;min-height:0;}
  .fv-duo .fv-pix--nq{grid-template-columns:minmax(0,1fr);}
  .fv-duo .fv-bol{min-height:0;}
  .fv-duo .fv-nd{padding-top:0;}
}
/* utilitárias de tom: DEPOIS dos componentes (mesma especificidade — antes, .fv-pv__rel/.fv-sum__s apagavam o vermelho de 'Vencida há N dias' e do subtítulo do resumo) */
.fv-tom--danger{color:var(--ispx-danger);}.fv-tom--ok{color:var(--ispx-text);}.fv-tom--muted{color:var(--ispx-text-2);}
@media(prefers-reduced-motion:reduce){.fv *,.fv-ov *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}}

/* ══ ETAPA 1 · HONESTIDADE (portal-circuitos-e1) ═════════════════════════════
   Só tokens existentes (sem hex novo, sem !important). Classes pc-* novas, escopadas ao que a etapa tocou:
   carimbos (coleta × tela), snapshot "último registro", sino e página de vantagens. (A ficha do circuito tem o bloco .fx-* próprio, TASK-121.) */
.pc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-sm);color:var(--text-muted);}
/* legenda de dado SEM horário próprio (snapshot) ou antigo: texto discreto, nunca parece medição ao vivo */
.pc-snap{font-size:var(--fs-sm);line-height:1.4;color:var(--text-muted);margin-top:4px;}
/* página de vantagens (SD-WAN "Conheça"): comercial, discreto */
.pc-sdw__aviso{background:var(--status-maintenance-soft);border-radius:12px;padding:14px 16px;font-size:var(--fs-sm);line-height:1.55;color:var(--text);}
/* sino: contador indisponível ("?") é neutro e NUNCA parece zero */
#pc-bell-badge.pc-badge-na{background:var(--status-maintenance);}
.pc-alerta{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px 0;border:0;border-top:1px solid var(--track);background:none;font:inherit;text-align:left;cursor:pointer;}
.pc-alerta__dot{width:9px;height:9px;border-radius:50%;background:var(--status-degraded);margin-top:5px;flex-shrink:0;}
.pc-alerta__n{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--text);}
.pc-alerta__d{display:block;font-size:var(--fs-sm);color:var(--text-muted);}
.pc-inc-erro{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 12px;text-align:center;font-size:var(--fs-sm);font-weight:700;color:var(--degraded-strong);}
/* menu da conta */
.pc-menu-nota{padding:6px 11px 10px;font-size:var(--fs-sm);line-height:1.45;color:var(--text-muted);}
.pc-menu-nota[hidden]{display:none;}
#pc-menu-senha{cursor:pointer;}
#pc-menu-senha[aria-disabled="true"]{opacity:.55;cursor:not-allowed;}
.pc-linkbtn{background:none;border:0;padding:12px 0;min-height:44px;display:inline-flex;align-items:center;font:inherit;font-weight:700;color:var(--brand-primary);text-decoration:underline;cursor:pointer;}


/* ══ ETAPA 2 · BASE VISUAL E ACESSIBILIDADE (portal-circuitos-e2) ═════════════════════════════
   Só tokens (nenhum hex aqui fora do bloco :root do topo e da ILHA no fim). Escopo: shell, Circuitos, Chamados, modais.
   Faturas/Contratos não entram: a ILHA devolve a eles os valores da Etapa 1. */
.content{font-family:var(--font);color:var(--text);background:var(--bg);}
/* botões e campos herdam a DM Sans (o padrão do navegador é Arial); :where zera a especificidade — qualquer classe ainda manda */
:where(.topbar,.pc-modal,#pc-sidebar,.content:not([data-area="financeiro"])) :is(button,input,select,textarea){font-family:inherit;}
/* foco visível: anel de 2 px com contraste ≥ 3:1 nos dois temas (a cor do foco é --focus; na gaveta escura, --sidebar-focus) */
a:focus-visible,button:focus-visible,input:focus-visible,[role="link"]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs);}
select:focus-visible:not(#pc-content[data-area="financeiro"] *),textarea:focus-visible:not(#pc-content[data-area="financeiro"] *),summary:focus-visible:not(#pc-content[data-area="financeiro"] *),[role="button"]:focus-visible:not(#pc-content[data-area="financeiro"] *){outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs);}
.nav-item:focus-visible{outline:2px solid var(--sidebar-focus);outline-offset:-2px;}
.pc-h1:focus,main:focus{outline:none;}
/* skip-link: 1º foco da página; só aparece com o foco */
.pc-skip{position:fixed;left:var(--sp-3);top:-72px;z-index:10000;display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-xs);background:var(--primary-bg);color:var(--primary-fg);font-weight:700;font-size:var(--fs-sm);text-decoration:none;}
.pc-skip:focus{top:var(--sp-3);}
.pc-sr,.pc-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* título da rota (h1 único): o foco vem para ele ao navegar */
.pc-h1{margin:0;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.3px;line-height:1.2;color:var(--text);}
.pc-pagehead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-4);}
.pc-pagehead__sub{font-size:var(--fs-sm);color:var(--text-muted);}
/* shell */
.topbar{background:var(--surface);border-bottom-color:var(--border);}
.tb-title{color:var(--text);}
.tb-chip{display:flex;align-items:center;gap:var(--sp-2);background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px 12px 5px 6px;}
.tb-avatar{width:28px;height:28px;border-radius:50%;background:var(--primary-bg);color:var(--primary-fg);font-size:var(--fs-sm);font-weight:800;display:flex;align-items:center;justify-content:center;}
.tb-chip__nome{font-size:var(--fs-sm);font-weight:700;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-right{display:flex;align-items:center;gap:14px;min-width:0;}
.tb-chip{min-width:0;}
.tb-link{background:none;border:0;color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;padding:0 var(--sp-1);text-decoration:underline;min-height:44px;}
.tb-bell{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;border-radius:var(--radius-xs);color:var(--text-muted);cursor:pointer;padding:0;}
.tb-bell:hover{background:var(--surface-3);color:var(--text);}
.tb-badge{display:none;position:absolute;top:3px;right:1px;background:var(--status-offline);color:var(--primary-fg);font-size:var(--fs-2xs);font-weight:800;border-radius:var(--radius-pill);min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 4px;}
.tb-sep{width:1px;height:26px;background:var(--border);}
.tb-user{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:0;font:inherit;padding:0;min-height:44px;color:var(--text);}
.tb-user__av{width:36px;height:36px;border-radius:50%;background:var(--primary-bg);color:var(--primary-fg);display:flex;align-items:center;justify-content:center;}
.tb-user__papel{font-size:var(--fs-sm);font-weight:700;color:var(--text);}
.tb-user__sub{font-size:var(--fs-sm);color:var(--text-muted);}
.pc-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lift);padding:6px;z-index:200;}
.pc-menu__item{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;text-align:left;background:none;border:0;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text);padding:10px 11px;border-radius:8px;cursor:pointer;}
.pc-menu__item:hover{background:var(--surface-3);}
.pc-menu[hidden]{display:none;}
.pc-menu__item--sair{color:var(--status-offline);}
.pc-menu__cap{padding:8px 11px 4px;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.pc-tema{display:flex;gap:3px;margin:0 6px 6px;padding:3px;background:var(--surface-3);border-radius:10px;}
.pc-tema button{flex:1;min-height:44px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;}
.pc-tema button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-card);}
.hamburger{color:var(--text);}
.hamburger svg path{stroke:currentColor;}
/* corpo de formulário/botão com tokens (modais e Chamados) */
.pc-field{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--control-border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-md);}
.pc-field::placeholder{color:var(--text-faint);}
textarea.pc-field{min-height:112px;resize:vertical;}
.pc-label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--text-muted);margin:var(--sp-3) 0 var(--sp-1);}
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;padding:10px 18px;border:1px solid var(--control-border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;}
.pc-btn:hover{background:var(--surface-3);}
.pc-btn--primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-fg);font-weight:800;}
.pc-btn--primary:hover{background:var(--primary-hover);}
.pc-btn[disabled]{opacity:.6;cursor:not-allowed;}
.pc-msg{min-height:20px;margin-top:var(--sp-2);font-size:var(--fs-sm);}
.pc-msg--erro{color:var(--status-offline);font-weight:600;}
.pc-msg--ok{color:var(--status-online);font-weight:600;}
.pc-aviso{padding:13px 15px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;background:var(--status-degraded-soft);color:var(--degraded-ink);border:1px solid color-mix(in srgb,var(--status-degraded) 30%,transparent);}
.pc-aviso--ok{background:var(--status-online-soft);color:var(--status-online);border-color:color-mix(in srgb,var(--status-online) 30%,transparent);}
.pc-aviso--erro{background:var(--status-offline-soft);color:var(--status-offline);border-color:color-mix(in srgb,var(--status-offline) 30%,transparent);}
/* MODAL (helper único abrirModal em portal.js): role=dialog, aria-modal, foco contido, Esc, devolução de foco */
.pc-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);background:var(--scrim);}
.pc-modal--topo{align-items:flex-start;padding-top:60px;}
.pc-modal__card{position:relative;display:flex;flex-direction:column;width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow:auto;padding:var(--sp-6);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-modal);}
.pc-modal__card--lg{max-width:520px;}
.pc-modal__card--xl{max-width:560px;}
.pc-modal__t{margin:0 44px var(--sp-2) 0;font-size:var(--fs-lg);font-weight:800;color:var(--text);}
.pc-modal__s{margin:0 0 var(--sp-3);font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted);}
.pc-modal__x{position:absolute;top:var(--sp-2);right:var(--sp-2);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--radius-xs);background:none;color:var(--text-muted);font-size:26px;line-height:1;cursor:pointer;}
.pc-modal__x:hover{background:var(--surface-3);color:var(--text);}
.pc-modal__foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4);}
.pc-cli-row{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;min-height:44px;text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:11px;padding:11px 13px;margin-bottom:8px;cursor:pointer;font:inherit;}
.pc-cli-row:hover{background:var(--surface-3);}
.pc-cli-row__n{display:block;font-weight:700;font-size:var(--fs-sm);color:var(--text);}
.pc-cli-row__d{display:block;font-size:var(--fs-sm);color:var(--text-muted);}
.pc-cli-row__q{flex-shrink:0;font-size:var(--fs-sm);color:var(--text-muted);}
/* controles de borda legível (≥ 3:1) nas zonas de Circuitos */
.pc-monitor .refresh,.pc-monitor .searchbox,.pc-monitor .act,.pc-monitor .cact,.pc-monitor .chevbtn,.cc-btn,.cc-input,.cc-otp,.cc-lg__dest,.cc-seg,.cc-period__btn,.cc-back,.cc-action,.clx-manage{border-color:var(--control-border);}
.cc-btn--primary,.cc-btn--danger{border-color:transparent;}
.pc-monitor .searchbox input{color:var(--text);}
.pc-monitor .searchbox input::placeholder{color:var(--text-faint);}
.pc-monitor .refresh:hover,.pc-monitor .refresh:hover svg *{color:var(--primary-fg);}
.cc-input,.cc-otp,.cc-lg__dest,.pc-monitor .searchbox{background:var(--surface);color:var(--text);}
.pc-back-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;margin-bottom:var(--sp-3);background:none;border:0;color:var(--text-muted);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;}
#pc-os-fotos-btn:focus-within{outline:2px solid var(--focus);outline-offset:2px;}
.copybtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--border-2);border-radius:6px;background:var(--surface-3);color:var(--text-muted);cursor:pointer;flex-shrink:0;}
.copybtn:hover{color:var(--text);}
.copybtn.copied{color:var(--status-online);}
/* cópia sem hover: o botão aparece com foco e em tela de toque */
.pc-monitor .copybtn:focus-visible,.pc-monitor .mrow:focus-within .copybtn,.pc-monitor .ccard:focus-within .copybtn{opacity:1;}
@media (hover:none){.pc-monitor .copybtn{opacity:1;}}
/* gaveta mobile: fechada = fora da ordem de foco e da árvore de acessibilidade */
@media (max-width:1024px){
  .sidebar{visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;}
  .app.nav-open .sidebar{visibility:visible;transition:transform .22s ease,visibility 0s;}
  .hamburger{width:44px;height:44px;margin-right:6px;padding:0;}
  /* alvos de toque ≥ 44 px */
  .nav-item,.tb-link,.pc-linkbtn,.cc-btn,.cc-seg__btn,.cc-period__btn,.cc-lg__tool,.cc-lg__run,.cc-tab,.cc-resend,.cc-action,.clx-manage,.clx-chev,.clx-copy{min-height:44px;}
  .cc-seg__btn,.cc-period__btn,.cc-lg__tool,.clx-chev,.clx-copy{min-width:44px;}
  .pc-monitor .seg,.pc-monitor .refresh,.pc-monitor .act,.pc-monitor .cact,.pc-monitor .mhead-sort,.pc-monitor .ccard-head{min-height:44px;}
  .pc-monitor .chevbtn{width:44px;height:44px;}
  .content:not([data-area="financeiro"]) :is(button,[role="button"],select,summary){min-height:44px;}
  .content:not([data-area="financeiro"]) label:has(> input[type="checkbox"]){min-height:44px;display:inline-flex;align-items:center;gap:8px;}
  .content:not([data-area="financeiro"]) input[type="checkbox"]{width:22px;height:22px;}
  /* alvo de 44 px sem aumentar a linha nem cobrir o texto: caixa transparente que cresce só para a direita, cima e baixo */
  .copybtn,.pc-monitor .copybtn{width:44px;height:44px;margin:-9px -9px -9px 0;background:transparent;border-color:transparent;}
  .pc-monitor .searchbox{min-height:44px;padding-top:0;padding-bottom:0;}
  .pc-monitor .searchbox input{min-height:44px;}
  .cc-input,.cc-otp,.cc-lg__dest,.pc-field,select.pc-field{min-height:44px;}
  input[type="range"].pc-range{min-height:44px;}
}
@media (max-width:820px){
  .pc-monitor .mrow{grid-template-columns:44px 1fr auto;}
}
@media (max-width:767px){
  .tb-right{gap:4px;}
  .tb-sep{display:none;}
}
/* movimento reduzido: sem animação nem transição nas zonas de Circuitos, no shell e nos modais */
@media (prefers-reduced-motion:reduce){
  .topbar *,.sidebar,.sidebar *,.content:not([data-area="financeiro"]) *,.content:not([data-area="financeiro"]) *::before,.content:not([data-area="financeiro"]) *::after,.pc-modal,.pc-modal *,.pc-skip{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .sidebar{transition-duration:.001ms !important;}
}

/* ══ ETAPA 3 · Lista e Cards ═══════════════════════════════════════════════════════════════════════════════════
   Chips = o resumo único (quebram linha: nada de rolagem horizontal no celular); ordenar por em qualquer largura e modo;
   selo "dados desatualizados" (complementar, nunca um status); nota e andamento reais do Atualizar; estados de bloco. */
.pc-monitor .pc-barra{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:14px;}
.pc-monitor .pc-barra .searchbox{flex:1 1 280px;}
.pc-monitor .pc-ordem{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);}
.pc-monitor .pc-ordem select.pc-field{width:auto;min-width:176px;min-height:40px;padding:8px 12px;font-size:var(--fs-sm);border-color:var(--control-border);}
.pc-monitor .pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.pc-monitor .pc-chips:empty{display:none;}
.pc-monitor .pc-chips .seg{font-family:inherit;line-height:1.2;background:var(--surface);border:1px solid var(--control-border);color:var(--text);box-shadow:none;font-weight:600;}
.pc-monitor .pc-chips .seg:hover{background:var(--surface-3);color:var(--text);}
.pc-monitor .pc-chips .seg.on{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-bg);font-weight:700;box-shadow:none;}
.pc-monitor .pc-chips .seg .cnt{background:var(--surface-3);color:var(--text);}
.pc-monitor .pc-chips .seg.on .cnt{background:var(--primary-fg);color:var(--primary-bg);}
.pc-monitor .pc-chips .seg .sub{font-size:var(--fs-xs);font-weight:700;color:var(--degraded-ink);}
.pc-monitor .pc-chips .seg.on .sub{color:inherit;}
.pc-monitor h2.mgroup,.pc-monitor h2.cgroup{font:inherit;}
.pc-monitor h2.mgroup{margin:0;}
/* status da linha: situação + (abaixo) o selo de desatualizado */
.pc-monitor .m-statuscell{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;}
.pc-monitor .m-stale{min-width:0;max-width:100%;}
.pc-monitor .m-status .dot{margin-top:7px;}
.pc-monitor .m-status > span:not(.dot){line-height:1.45;}
.pc-stale-badge{display:inline-flex;align-items:center;flex-wrap:wrap;gap:3px 5px;font-size:var(--fs-xs);font-weight:700;line-height:1.3;color:var(--degraded-ink);background:var(--status-degraded-soft);border:1px dashed color-mix(in srgb,var(--status-degraded) 60%,transparent);border-radius:999px;padding:3px 10px;max-width:100%;}
.pc-stale-badge svg{flex-shrink:0;}
.pc-stale-badge__t{white-space:nowrap;}
/* busca em andamento: a lista anterior fica, esmaecida, até a resposta (o Atualizar NÃO esmaece linha nenhuma — TASK-074) */
.pc-monitor .is-busy{opacity:.62;}
.pc-monitor .refresh[aria-disabled="true"]{opacity:.7;cursor:default;}
.pc-monitor .refresh[aria-disabled="true"]:hover{background:var(--surface);color:var(--brand-primary);}
/* ── TASK-074 · atualização da Lista e dos Cards ───────────────────────────────────────────────────────────────────
   Andamento num indicador só (carimbo + barra fina + botão girando); por linha, só o pulso do ponto da situação. Linha de estado
   com ALTURA FIXA e barra FORA DO FLUXO: nada do que aparece/some empurra a lista (a linha sob o ponteiro não se move). */
.pc-monitor .pc-cab-acoes{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;}
/* TASK-083 · FAIXA DE ATUALIZAÇÃO no topo da lista (acima dos grupos e dos cards): última atualização · linha de estado · chave da
   automática + contador regressivo · "Atualizar agora". Altura FIXA em cada largura (linhas de grade fixas, textos sem quebra):
   o que muda dentro dela nunca empurra a lista. */
.pc-monitor .pc-faixa{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"quando estado auto acao";grid-template-rows:52px;align-items:center;column-gap:16px;padding:0 6px 0 14px;margin:0 0 12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(29,27,78,.04);overflow:hidden;}
.pc-monitor .pc-faixa__quando{grid-area:quando;display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:var(--fs-sm);font-weight:600;color:var(--text);white-space:nowrap;}
.pc-monitor .pc-faixa__quando svg{flex-shrink:0;color:var(--text-muted);}
.pc-monitor #pc-last-update{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pc-monitor .pc-faixa__auto{grid-area:auto;display:inline-flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;}
.pc-monitor .pc-proxima{min-width:7.5em;font-size:var(--fs-sm);color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.pc-monitor .pc-faixa .refresh{grid-area:acao;justify-self:end;}
.pc-monitor .pc-faixa .pc-progresso{grid-area:estado;}
@media(max-width:1024px){
  .pc-monitor .pc-faixa{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"quando auto" "estado acao";grid-template-rows:44px 44px;row-gap:2px;padding:4px 6px 4px 12px;}
}
@media(max-width:640px){
  .pc-monitor .pc-faixa{grid-template-areas:"quando quando" "auto auto" "estado acao";grid-template-rows:32px 44px 44px;}
}
.pc-monitor .pc-auto{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:6px 2px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);cursor:pointer;}
.pc-monitor .pc-auto__trilho{position:relative;width:30px;height:18px;border-radius:999px;background:var(--surface-3);border:1px solid var(--control-border);flex-shrink:0;transition:background .15s ease,border-color .15s ease;}
.pc-monitor .pc-auto__pino{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(29,27,78,.3);transition:transform .15s ease;}
.pc-monitor .pc-auto[aria-checked="true"]{color:var(--text);}
.pc-monitor .pc-auto[aria-checked="true"] .pc-auto__trilho{background:var(--primary-bg);border-color:var(--primary-bg);}
.pc-monitor .pc-auto[aria-checked="true"] .pc-auto__pino{transform:translateX(12px);}
.pc-monitor .pc-auto:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px;border-radius:8px;}
.pc-monitor .pc-progresso{display:flex;align-items:center;height:100%;min-width:0;margin:0;overflow:hidden;}
.pc-monitor .pc-progresso__linha{display:flex;align-items:center;flex-wrap:nowrap;gap:6px 16px;min-width:0;max-width:100%;font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;}
.pc-monitor .pc-progresso__linha > *{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.pc-monitor .pc-progresso__linha > button{flex-shrink:0;}
.pc-monitor .pc-progresso .pc-linkbtn{min-height:0;padding:3px 2px;}
.pc-monitor .pc-progresso__erro{color:var(--status-offline);font-weight:700;}
.pc-monitor .pc-progresso__reorg{color:var(--text);font-weight:600;}
.pc-monitor .pc-mudancas{text-decoration:none;border-bottom:1px dashed currentColor;}
/* barra fina de andamento: sob o cabeçalho da tabela (Lista) ou no topo dos cards; altura 0 no fluxo */
.pc-monitor .pc-prog{position:relative;height:0;z-index:2;}
.pc-monitor .pc-prog__barra{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--brand-accent);border-radius:0 2px 2px 0;opacity:0;transition:width .25s ease,opacity .35s ease;}
.pc-monitor .pc-prog--cards .pc-prog__barra{top:0;border-radius:2px;}
.pc-monitor .pc-prog.is-on .pc-prog__barra{opacity:1;}
.pc-monitor .pc-prog.is-indef .pc-prog__barra{width:30%;animation:pcProgIndef 1.1s ease-in-out infinite;}
@keyframes pcProgIndef{0%{left:-30%;}100%{left:100%;}}
/* a linha EM LEITURA: só o ponto da situação pulsa (a linha segue normal e clicável) */
.pc-monitor [data-situacao].is-lendo .dot{animation:pcLendo 1s ease-in-out infinite;}
@keyframes pcLendo{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.55);}}
/* leitura sem resposta: ícone discreto na própria célula (mesma linha, mesma altura); o alvo de toque cresce por fora */
.pc-monitor .pc-falha{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;padding:0;margin:1px 0 0 2px;border:0;border-radius:50%;background:none;cursor:pointer;}
.pc-monitor .pc-falha__i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--status-offline-soft);color:var(--status-offline);}
.pc-monitor .pc-falha:hover .pc-falha__i{background:var(--status-offline);color:var(--primary-fg);}
.pc-monitor .pc-falha:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px;}
/* mudança de situação: destaque suave + etiqueta temporária "Mudou: A → B · HH:MM" */
.pc-monitor .rowwrap.is-mudou .mrow,.pc-monitor .ccard.is-mudou{background:color-mix(in srgb,var(--brand-accent) 10%,var(--surface));box-shadow:inset 3px 0 0 var(--brand-accent);}
.pc-monitor .pc-mudou-et{max-width:100%;font-size:var(--fs-xs);font-weight:700;line-height:1.35;color:var(--text);background:var(--surface-3);border-radius:999px;padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc-monitor .rowwrap.is-realce .mrow,.pc-monitor .ccard.is-realce{animation:pcRealce 2.2s ease;}
@keyframes pcRealce{0%,55%{background:color-mix(in srgb,var(--brand-accent) 24%,var(--surface));}}
/* reposição animada (FLIP): o item sai do lugar antigo e desliza até o novo; quem entra aparece */
.pc-monitor [data-item].is-flip{transition:transform .32s cubic-bezier(.2,.7,.2,1);position:relative;z-index:1;}
.pc-monitor [data-item].is-entra{animation:pcEntra .3s ease both;}
@keyframes pcEntra{from{opacity:0;}to{opacity:1;}}
@media(max-width:1024px){
  .pc-monitor .pc-progresso .pc-linkbtn{min-height:44px;}
  .pc-monitor .pc-auto{min-height:44px;}
  /* alvo de toque de 44 px sem mudar a altura da linha: a margem negativa devolve o que o botão cresce (o círculo continua 18 px) */
  .pc-monitor .pc-falha{width:44px;height:44px;margin:-13px -13px -13px -11px;}
}
@media (prefers-reduced-motion:reduce){
  /* sem pulso nem deslizamento: o ponto em leitura ganha um anel fixo; a troca de lugar é instantânea, com o mesmo destaque */
  .pc-monitor [data-situacao].is-lendo .dot{animation:none;outline:2px solid var(--text-faint);outline-offset:2px;}
  .pc-monitor .pc-prog.is-indef .pc-prog__barra{animation:none;left:0;}
  .pc-monitor [data-item].is-flip{transition:none;}
  .pc-monitor [data-item].is-entra,.pc-monitor .rowwrap.is-realce .mrow,.pc-monitor .ccard.is-realce{animation:none;}
  .pc-monitor .rowwrap.is-realce .mrow,.pc-monitor .ccard.is-realce{background:color-mix(in srgb,var(--brand-accent) 18%,var(--surface));}
}
/* erro do bloco (com nova tentativa) */
.pc-monitor .pc-bloco-erro{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:32px 20px;border-radius:14px;background:var(--status-offline-soft);border:1px dashed color-mix(in srgb,var(--status-offline) 40%,transparent);}
.pc-monitor .pc-bloco-erro b{color:var(--status-offline);font-size:var(--fs-md);}
.pc-monitor .pc-bloco-erro span{color:var(--text-muted);font-size:var(--fs-sm);}
/* expansão mais compacta (mesmos dados) */
.pc-monitor .expand{padding:2px 22px 14px 58px;}
.pc-monitor .qgrid{gap:12px;}
.pc-monitor .qcard{padding:12px 14px;}
.pc-monitor .qt{margin-bottom:6px;}
@media(max-width:1024px){.pc-monitor .pc-ordem select.pc-field{min-height:44px;}}
@media(max-width:820px){
  .pc-monitor .m-statuscell{display:contents;}
  /* celular: a situação ganha a linha toda (ao lado do IP ela se sobrepunha ao botão de copiar) */
  .pc-monitor .mrow{grid-template-areas:"chev name act" "chev city city" "chev ip ip" "chev status status";}
  .pc-monitor .mrow--velho{grid-template-areas:"chev name act" "chev city city" "chev ip ip" "chev status status" "chev stale stale";}
  .pc-monitor .m-stale{grid-area:stale;}
  /* TASK-074: a célula de status vira `display:contents` aqui — a etiqueta "Mudou" ganha a própria linha da grade (sob nome, IP e situação) */
  .pc-monitor .mrow .pc-mudou-et{grid-column:2 / -1;justify-self:start;}
  .pc-monitor .expand{padding:2px 14px 14px;}
  .pc-monitor .pc-ordem{flex:1 1 100%;}
  .pc-monitor .pc-ordem select.pc-field{flex:1 1 auto;}
}

/* ══ TASK-017 · MODO MAPA (Lista · Cards · Mapa) ═══════════════════════════════════════════════════════════════════
   Mesmos tokens, tipografia e componentes do portal (cards de 16 px, botões com --control-border, DM Sans). Cores só por token:
   a malha usa --map-*, os pontos os tokens de status. Sem brilho, pulsação ou animação. Controles e avisos FORA do palco. */
.pm{display:flex;flex-direction:column;gap:12px;}
.pm [hidden]{display:none;}
.pm-resumo{margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5;}
.pm-resumo strong{color:var(--text);font-weight:700;}
.pm-aviso{margin:0;padding:10px 14px;border-radius:10px;background:var(--status-degraded-soft);color:var(--degraded-ink);font-size:var(--fs-sm);font-weight:600;border:1px solid color-mix(in srgb,var(--status-degraded) 30%,transparent);}
.pm-btn[aria-disabled="true"],.pm .pc-btn[aria-disabled="true"]{opacity:.55;cursor:default;}
.pm-corpo{display:flex;flex-direction:column;gap:14px;}
.pm-corpo--lado.pm-corpo--com-painel{flex-direction:row;align-items:flex-start;}
.pm-palco{position:relative;flex:1 1 auto;min-width:0;height:clamp(420px,62vh,640px);background:var(--map-water);border:1px solid var(--border);border-radius:16px;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none;}
.pm-palco.is-arrastando{cursor:grabbing;}
.pm-palco:focus{outline:none;}
.pm-palco:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
/* TASK-026 · controles discretos DENTRO do mapa (canto superior direito): só ícone, nome acessível e dica (title). 32 px com mouse;
   44 px no toque/celular (alvo mínimo). Ficam acima dos marcadores. */
.pm-ctrl{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;gap:8px;}
.pm-ctrl__g{display:flex;flex-direction:column;border-radius:9px;box-shadow:var(--shadow-card),0 0 0 1px var(--border-2);background:var(--surface);overflow:hidden;}
.pm-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;}
.pm-ctrl__g .pm-btn + .pm-btn{border-top:1px solid var(--border);}
.pm-btn:hover{background:var(--surface-3);color:var(--brand-primary);}
.pm-btn:focus{outline:none;}
.pm-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
@media (pointer:coarse),(max-width:820px){.pm-btn{width:44px;height:44px;}}
/* TASK-026 · crédito mínimo da fonte (IBGE) no canto inferior esquerdo do mapa */
.pm-credito{position:absolute;left:8px;bottom:6px;z-index:2;padding:1px 6px;border-radius:6px;background:var(--surface);color:var(--text-muted);font-size:var(--fs-xs);font-weight:600;line-height:1.5;opacity:.92;}
.pm-svg{position:absolute;left:0;top:0;display:block;}
.pm-ufs path{fill:var(--map-land);stroke:var(--map-border);stroke-width:1;stroke-linejoin:round;}
.pm-sigla{fill:var(--map-label);font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.5px;pointer-events:none;}
/* marcadores numa camada própria (z-index local): a ordem por gravidade não vaza para o resto da página */
.pm-marcadores{position:absolute;inset:0;z-index:1;pointer-events:none;}
/* TASK-020/TASK-026 · marcador = UM município: uma bolinha com o nº de circuitos, na cor da SITUAÇÃO do conjunto (verde = todos
   online, amarela = parcial, vermelha = todos offline, cinza = sem monitoramento) — o JS põe a cor do CHIP; aqui só forma e tamanho.
   O botão (alvo de 44 px) centraliza o desenho na âncora; com mouse só o DESENHO recebe o ponteiro (municípios vizinhos não
   roubam o clique um do outro); no toque, o alvo inteiro. Sobreposição: o mais grave fica por cima. */
.pm-m{position:absolute;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:22px;background:transparent;color:var(--text);transform:translate(-50%,-50%);cursor:pointer;pointer-events:none;font:inherit;z-index:1;}
.pm-m > .pm-v{pointer-events:auto;}
@media (pointer:coarse),(max-width:820px){.pm-m{pointer-events:auto;}}
.pm-m[data-pm-sit="SEM_MONITORAMENTO"]{z-index:2;}
.pm-m[data-pm-sit="TODOS_ONLINE"]{z-index:3;}
.pm-m[data-pm-sit="PARCIAL"]{z-index:5;}
.pm-m[data-pm-sit="TODOS_OFFLINE"]{z-index:6;}
.pm-m.pm-m--sel{z-index:8;}
.pm-m:hover,.pm-m:focus-visible{z-index:9;}
.pm-m:focus{outline:none;}
.pm-m:focus-visible .pm-v{outline:3px solid var(--focus);outline-offset:3px;}
.pm-v{position:relative;display:inline-flex;align-items:center;justify-content:center;height:28px;border-radius:14px;font-size:13px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 0 0 2px var(--map-ring),0 1px 4px rgba(20,18,58,.28);}
/* a bolinha: círculo de 28 px até 2 dígitos; com 3 ou mais o número alarga o desenho (nunca é cortado) */
.pm-v--bola{min-width:28px;padding:0 6px;color:var(--map-glyph);}
.pm-ponto{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.pm-m--sel .pm-v{box-shadow:0 0 0 2px var(--map-ring),0 0 0 5px var(--map-selection);}
/* dados desatualizados: relógio discreto no canto do marcador (o status recebido continua o mesmo) */
.pm-relogio{position:absolute;top:-7px;right:-8px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--degraded-ink);box-shadow:0 0 0 1.5px var(--status-degraded);}
.pm-relogio--leg{position:relative;top:auto;right:auto;}
/* TASK-057 · marcador de 2+ circuitos = ANEL: um arco por status (proporcional, cor do CHIP — o JS pinta), o total num disco no centro
   (fundo da superfície, texto do tema), o selo no canto superior direito (✕ offline / ! alerta) e o relógio no inferior direito.
   O diâmetro cresce com os dígitos do total: o número nunca é cortado e nunca fica abaixo de 13 px. */
.pm-v--anel{width:34px;height:34px;padding:0;border-radius:50%;background:var(--surface);color:var(--text);}
.pm-v--anel[data-pm-dig="3"]{width:40px;height:40px;}
.pm-v--anel[data-pm-dig="4"]{width:50px;height:50px;}
.pm-anel{display:block;overflow:visible;}
.pm-v--anel > .pm-anel{position:absolute;inset:0;width:100%;height:100%;}
.pm-v--anel > .pm-c{position:relative;}
.pm-selo{position:absolute;top:-6px;right:-7px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--map-glyph);box-shadow:0 0 0 1.5px var(--map-ring);}
.pm-selo--leg{position:relative;top:auto;right:auto;flex-shrink:0;}
.pm-relogio--anel{top:auto;bottom:-6px;right:-8px;}
/* resumo (hover/foco): sem botões, sem rede */
.pm-dica{position:absolute;z-index:4;width:max-content;max-width:min(300px,calc(100% - 12px));padding:10px 12px;background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:12px;box-shadow:var(--shadow-lift);font-size:var(--fs-sm);line-height:1.4;}
.pm-dica__t{font-weight:800;overflow-wrap:anywhere;}
.pm-dica__l{color:var(--text-muted);overflow-wrap:anywhere;}
.pm-dica__st{display:flex;align-items:center;gap:7px;margin-top:4px;font-weight:700;}
.pm-dist{list-style:none;display:flex;flex-direction:column;gap:3px;margin:4px 0 0;padding:0;}
.pm-dist li{display:flex;align-items:center;gap:7px;}
.pm-dica__dist{font-weight:700;}
.pm-dica__v{margin-top:2px;color:var(--degraded-ink);font-weight:700;}
/* avisos sobre o palco (só quando não há ponto a cobrir) */
.pm-fora,.pm-estado{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:min(440px,calc(100% - 32px));padding:18px 20px;background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow-lift);text-align:center;font-size:var(--fs-sm);}
.pm-estado__t{font-size:var(--fs-md);}
.pm-estado__acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
/* painel do circuito/grupo: ao lado (largura útil ≥ 880 px), abaixo (menor) ou folha inferior (celular) */
.pm-painel{flex:0 0 340px;width:340px;max-height:clamp(420px,62vh,640px);overflow:auto;padding:12px 18px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;}
.pm-corpo:not(.pm-corpo--lado) .pm-painel{flex:none;width:auto;max-height:none;}
.pm-p__topo{display:flex;align-items:center;gap:8px;margin:0 -10px 2px;}
.pm-p__x{margin-left:auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-xs);background:none;color:var(--text-muted);cursor:pointer;}
.pm-p__x:hover{background:var(--surface-3);color:var(--text);}
.pm-p__voltar{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;border:0;border-radius:var(--radius-xs);background:none;color:var(--brand-primary);font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;}
.pm-p__t{margin:0 0 6px;font-size:var(--fs-lg);font-weight:800;line-height:1.25;color:var(--text);overflow-wrap:anywhere;}
.pm-p__t:focus{outline:none;}
.pm-p__t:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.pm-p__tag{display:flex;align-items:center;gap:6px;margin-bottom:12px;font-size:var(--fs-sm);color:var(--text-muted);overflow-wrap:anywhere;}
.pm-mono{font-family:var(--mono);}
.pm-p__dl{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px 14px;margin:0 0 10px;font-size:var(--fs-sm);}
.pm-p__dl dt{font-weight:700;color:var(--text-muted);}
.pm-p__dl dd{margin:0;min-width:0;color:var(--text);overflow-wrap:anywhere;}
.pm-p__sit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.pm-pill{display:inline-flex;align-items:center;gap:7px;font-weight:700;}
.pm-p__nota{margin:0 0 12px;font-size:var(--fs-sm);color:var(--text-muted);}
.pm-p__acoes{display:flex;flex-wrap:wrap;gap:8px;}
.pm-p__inc{font-size:var(--fs-sm);font-weight:600;color:var(--degraded-ink);}
.pm-p__erro{margin-right:6px;font-weight:600;color:var(--status-offline);}
.pm-p__carr,.pm-p__vazio{font-style:italic;color:var(--text-muted);}
.pm-p__sub{display:block;font-size:var(--fs-sm);color:var(--text-muted);overflow-wrap:anywhere;}
.pm-p__dist{margin:6px 0 8px;font-size:var(--fs-sm);font-weight:700;color:var(--text);}
.pm-p__dv{margin:0 0 8px;font-size:var(--fs-sm);font-weight:600;color:var(--degraded-ink);}
.pm-p__lista{list-style:none;display:flex;flex-direction:column;gap:6px;margin:12px 0 0;padding:0;}
.pm-p__item{display:flex;align-items:baseline;gap:10px;width:100%;min-height:44px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.pm-p__item:hover{background:var(--surface-2);}
.pm-p__item--inerte{cursor:default;}
.pm-p__in{display:flex;flex-direction:column;min-width:0;}
.pm-p__nm{font-size:var(--fs-sm);font-weight:700;overflow-wrap:anywhere;}
.pc-monitor .pm .copybtn{opacity:1;}
/* TASK-026 · guia da primeira visita: balão pequeno NÃO modal, ancorado no elemento explicado (abaixo ou acima, nunca por cima) */
.pc-guia{position:absolute;z-index:60;width:min(320px,calc(100vw - 24px));padding:12px 14px 12px;background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow-lift);font-size:var(--fs-sm);line-height:1.45;}
/* o foco vai ao balão (o próprio balão é o indicador); os botões dentro dele têm o anel de foco de sempre */
.pc-guia:focus{outline:none;}
.pc-guia__topo{display:flex;align-items:center;justify-content:space-between;margin:-4px -6px 2px 0;}
.pc-guia__n{font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);letter-spacing:.2px;}
.pc-guia__x{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--text-muted);cursor:pointer;}
.pc-guia__x:hover{background:var(--surface-3);color:var(--text);}
.pc-guia__t{margin:0 0 4px;font-size:var(--fs-md);font-weight:800;color:var(--text);}
.pc-guia__d p{margin:0;color:var(--text);}
.pc-guia__cores{list-style:none;display:grid;gap:5px;margin:8px 0 0;padding:0;}
.pc-guia__cores li{display:flex;align-items:center;gap:8px;}
.pc-guia__bola{display:inline-block;width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1.5px var(--surface),0 0 0 2.5px var(--border-2);}
.pc-guia__acoes{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;}
.pc-guia__nav{display:inline-flex;gap:8px;}
.pc-guia__pular{min-height:36px;padding:0 4px;border:0;background:none;font:inherit;font-weight:700;color:var(--text-muted);text-decoration:underline;cursor:pointer;}
.pc-guia__pular:hover{color:var(--text);}
.pc-guia .pc-btn{min-height:36px;}
.pc-guia__seta{position:absolute;left:var(--pc-guia-seta,50%);width:12px;height:12px;margin-left:-6px;background:var(--surface);border:1px solid var(--border-2);transform:rotate(45deg);}
.pc-guia--abaixo .pc-guia__seta{top:-7px;border-right:0;border-bottom:0;}
.pc-guia--acima .pc-guia__seta{bottom:-7px;border-left:0;border-top:0;}
.pc-guia__alvo{position:absolute;z-index:59;border-radius:12px;box-shadow:0 0 0 2px var(--focus);pointer-events:none;}
@media (prefers-reduced-motion:no-preference){.pc-guia--anima{animation:pc-guia-entra 160ms ease-out both;}}
@keyframes pc-guia-entra{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (pointer:coarse),(max-width:820px){.pc-guia__x,.pc-guia .pc-btn,.pc-guia__pular{min-height:44px;min-width:44px;}}
/* rodapé: as duas relações (TASK-026: saíram a frase de aproximação e a legenda; a cor se explica no resumo/painel) */
.pm-rodape{display:flex;flex-direction:column;gap:10px;}
/* TASK-026 · "Bolinha amarela: parcial (nem todos online)": o que a cor do marcador quer dizer (resumo e painel) */
.pm-sit{display:flex;align-items:center;gap:7px;color:var(--text-muted);font-size:var(--fs-sm);font-weight:600;}
.pm-ponto--sit{width:12px;height:12px;box-shadow:0 0 0 1.5px var(--map-ring),0 0 0 2.5px var(--border-2);}
/* TASK-057 · a explicação do anel: um anel em miniatura (o mesmo desenho) + o selo, quando há */
.pm-sit-g{display:flex;flex-direction:column;gap:5px;}
.pm-sit__anel{display:inline-flex;flex-shrink:0;width:16px;height:16px;border-radius:50%;background:var(--surface);}
.pm-sit__anel > .pm-anel{width:16px;height:16px;}
.pm-dica__sit{margin-top:7px;padding-top:7px;border-top:1px solid var(--border);}
.pm-p__cor{margin:2px 0 10px;}
/* TASK-026 · entrada (só a 1ª, ≤ 900 ms): a malha se monta (estados entrando) e as bolinhas encaixam no lugar. A classe sai sozinha e
   o estado final é o padrão (sem animação nada fica invisível); com prefers-reduced-motion nenhuma regra abaixo vale. */
@media (prefers-reduced-motion:no-preference){
  .pm-palco--entrada .pm-ufs path{transform-box:fill-box;transform-origin:center;animation:pm-uf-entra 360ms cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--pm-i,0) * 12ms);}
  .pm-palco--entrada .pm-siglas{animation:pm-surge 260ms ease-out 320ms both;}
  .pm-palco--entrada .pm-m > .pm-v{animation:pm-encaixa 300ms cubic-bezier(.3,1.45,.55,1) both;animation-delay:calc(320ms + var(--pm-i,0) * 16ms);}
}
@keyframes pm-uf-entra{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
@keyframes pm-surge{from{opacity:0;}to{opacity:1;}}
@keyframes pm-encaixa{from{opacity:0;transform:translateY(-14px) scale(.5);}to{opacity:1;transform:none;}}
.pm-acoes{display:flex;flex-wrap:wrap;gap:8px;}
.pm-sec{padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;}
.pm-sec__t{margin:0 0 4px;font-size:var(--fs-md);font-weight:800;color:var(--text);}
.pm-sec__s{margin:0 0 10px;font-size:var(--fs-sm);color:var(--text-muted);}
.pm-rel{list-style:none;margin:0 0 8px;padding:0;}
.pm-rel__g{margin:14px 0 6px;font-size:var(--fs-sm);font-weight:800;color:var(--text);}
.pm-rel__i{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;padding:8px 0;border-top:1px solid var(--border);}
.pm-rel__tx{display:flex;flex:1 1 220px;flex-direction:column;min-width:0;}
.pm-rel__n{font-size:var(--fs-sm);font-weight:700;color:var(--text);overflow-wrap:anywhere;}
.pm-rel__s{font-size:var(--fs-sm);color:var(--text-muted);overflow-wrap:anywhere;}
.pm-rel__a{display:flex;flex-wrap:wrap;gap:6px;}
.pm-rel__a .pc-btn{min-height:36px;padding:6px 12px;}
.pm-vazio{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 20px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;color:var(--text);font-size:var(--fs-md);}
/* folha inferior do celular: o modal do portal (foco contido, Esc, devolução do foco) ancorado embaixo */
.pc-modal:has(> .pc-modal__card--folha){align-items:flex-end;padding:0;}
.pc-modal__card--folha{max-width:none;width:100%;max-height:82vh;padding:8px 18px 22px;border-radius:18px 18px 0 0;}
@media (max-width:1024px){
  .pm-rel__a .pc-btn{min-height:44px;}
}
@media (max-width:820px){
  .pm-palco{height:clamp(300px,56vh,440px);}
}

/* ══ DICA · TASK-126 — o "i" (informação) / "!" (ressalva) colado ao rótulo e a dica flutuante ════════════════════════════
   Um componente para o portal inteiro (portal.js `dicaHtml`). O ícone tem 16 px e fica a 4 px do rótulo; o alvo de toque de 44 px
   é o ::before INVISÍVEL do botão (não afasta o ícone nem mexe no layout). A dica é ABSOLUTA (sobre o conteúdo, nunca no fluxo),
   abre ABAIXO do ícone (o portal.js a põe acima quando falta espaço e a desliza para dentro da tela) e é pequena. Abre no hover,
   no foco do teclado e no toque; `hidden` = fechada. Cores do :root (claro e noturno invertem juntos). */
.pc-dica{position:relative;display:inline-flex;align-items:center;vertical-align:-3px;margin-left:4px;line-height:1;flex:0 0 auto;}
.pc-dica__b{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:var(--text-muted);cursor:help;font:inherit;line-height:1;-webkit-tap-highlight-color:transparent;}
.pc-dica__b::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
.pc-dica__b svg{display:block;width:16px;height:16px;}
.pc-dica__b:hover,.pc-dica.is-aberta .pc-dica__b{color:var(--text);}
.pc-dica__b:focus{outline:none;}
.pc-dica__b:focus-visible{outline:2px solid var(--focus);outline-offset:1px;}
.pc-dica__t{--pc-dica-dx:0px;position:absolute;z-index:60;left:50%;top:calc(100% + 8px);transform:translateX(calc(-50% + var(--pc-dica-dx)));width:max-content;max-width:min(300px,calc(100vw - 32px));padding:8px 11px;border-radius:8px;background:var(--text);color:var(--surface);font:500 13px/1.45 var(--font);letter-spacing:0;text-align:left;text-transform:none;white-space:normal;overflow-wrap:break-word;box-shadow:var(--shadow-lift);}
.pc-dica__t--acima{top:auto;bottom:calc(100% + 8px);}
.pc-dica__t[hidden]{display:none;}
/* em tela estreita todo botão do conteúdo ganha min-height 44 px (regra de alvo de toque, ≤ 1024 px): o "i" continua com 18 px —
   o alvo de 44 px dele é o ::before, que não mexe na linha nem afasta o ícone do rótulo */
.content .pc-dica > button.pc-dica__b.pc-dica__b{min-height:0;min-width:0;}
/* título + dica: o ícone fica colado ao texto do título (o título encolhe ao conteúdo) */
.fx-tit,.fc-tit{display:flex;flex-wrap:wrap;align-items:center;min-width:0;}
.fx-tit--sub{margin:18px 0 10px;}
.fx-tit--sub .fx-sub{margin:0;}
.fx-valor{display:flex;flex-wrap:wrap;align-items:center;color:var(--text);}

/* ══ FICHA DO CIRCUITO v2 · TASK-121 (ADENDO-FICHA-FERRAMENTAS-20261010) ═══════════════════════════════════════════
   Prefixo PRÓPRIO .fx-* (o .fc-* é de Ferramentas). Só tokens do :root (claro e noturno saem dos mesmos nomes); as medidas
   da ficha moram em propriedades ESCOPADAS em .fx (nenhum token global novo). Breakpoints pela largura da FICHA (container
   query), não da janela: ≤ 560 px uma coluna compacta; ≥ 1000 px Equipamento e Serviço lado a lado. */
.fx-wrap{max-width:1120px;}
.fx,.pc-modal--fx{--fx-gap:16px;--fx-pad:22px;--fx-raio:14px;--fx-fs-titulo:26px;--fx-fs-zona:18px;--fx-fs-corpo:15px;--fx-fs-meta:13.5px;--fx-fs-fig:30px;
  --fx-rx:var(--series-1);--fx-tx:var(--series-2);--fx-link:var(--accent);}
.fx{container-type:inline-size;container-name:ficha;display:flex;flex-direction:column;gap:var(--fx-gap);font-size:var(--fx-fs-corpo);line-height:1.45;color:var(--text);font-variant-numeric:tabular-nums;}
.fx :where(h1,h2,h3,p,dl,dd,ul){margin:0;padding:0;}
.fx ul,.pc-modal--fx ul{list-style:none;margin:0;padding:0;}
.fx :focus-visible,.pc-modal--fx :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px;}
.fx-mono{font-family:var(--mono);font-size:.94em;overflow-wrap:anywhere;}
.fx-meta{font-size:var(--fx-fs-meta);color:var(--text-muted);}
.fx-ajuda{margin-top:8px;font-size:var(--fx-fs-meta);color:var(--text-muted);max-width:70ch;}
.fx-vazio{font-size:14px;color:var(--text-muted);padding:6px 0;}
.fx-ico{flex-shrink:0;}
.fx-skel{display:block;margin:6px 0;border-radius:6px;background:var(--surface-3);}
@media (prefers-reduced-motion:no-preference){.fx-skel{background:linear-gradient(90deg,var(--surface-3) 0,var(--surface-2) 50%,var(--surface-3) 100%);background-size:200% 100%;animation:fx-brilho 1.3s ease-in-out infinite;}}
@keyframes fx-brilho{from{background-position:100% 0;}to{background-position:-100% 0;}}
/* botões */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--control-border);background:var(--surface);color:var(--text);font:600 14.5px/1.1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;}
.fx-btn:hover{background:var(--surface-3);}
.fx-btn--pri{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-fg);}
.fx-btn--pri:hover{background:var(--primary-hover);border-color:var(--primary-hover);}
.fx-btn--p{min-height:40px;padding:0 12px;font-size:14px;}
.fx-btn--link{border-color:transparent;background:transparent;color:var(--fx-link);padding:0 8px;text-decoration:underline;text-underline-offset:2px;}
.fx-btn--link:hover{background:var(--surface-3);}
.fx-btn[aria-disabled="true"]{opacity:.65;cursor:default;}
.fx-btn.is-girando .fx-ico{animation:fx-gira .9s linear infinite;}
@keyframes fx-gira{to{transform:rotate(360deg);}}
.fx-iconbtn{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text-muted);border-radius:10px;cursor:pointer;padding:0;}
.fx-iconbtn:hover{background:var(--surface-3);color:var(--text);}
/* meta do prompt (owner): alvo de toque 44×44 também no (i) da camada e no Copiar — o mockup propunha 36 px (decisão pendente §9.7) */
.fx-iconbtn--p{width:44px;height:44px;}
.fx-copiar{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 8px;border:0;background:transparent;color:var(--text-muted);border-radius:8px;font:600 13px var(--font);cursor:pointer;vertical-align:middle;}
.fx-copiar:hover{background:var(--surface-3);color:var(--text);}
.fx-copiar.is-feito{color:var(--status-online);}
.fx-link{display:inline-flex;align-items:center;min-height:44px;color:var(--fx-link);font-weight:600;font-size:14.5px;text-decoration:underline;text-underline-offset:2px;}
/* avisos */
.fx-nota{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;padding:10px 14px;border-radius:10px;font-size:14px;line-height:1.45;border:1px solid var(--border);background:var(--surface-2);color:var(--text);}
.fx-nota--aviso{background:var(--status-degraded-soft);border-color:var(--warn-border);color:var(--degraded-ink);}
.fx-nota--erro{background:var(--status-offline-soft);border-color:var(--err-border);color:var(--status-offline);}
.fx-nota--ok{background:var(--status-online-soft);border-color:transparent;color:var(--status-online);}
.fx-nota--info{margin-top:0;background:var(--status-nodata-soft);}
.fx-nota .fx-btn--link{min-height:36px;margin-left:auto;color:inherit;}
.fx-nota > .pc-dica{margin-left:-6px;}
.fx-nota > .pc-dica .pc-dica__b{color:inherit;}
/* zona genérica */
.fx-zona{background:var(--surface);border:1px solid var(--border);border-radius:var(--fx-raio);padding:var(--fx-pad) calc(var(--fx-pad) + 2px);min-width:0;}
.fx-zona__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-bottom:14px;}
.fx-zona__cab h2{font-size:var(--fx-fs-zona);font-weight:700;letter-spacing:-.2px;}
.fx-zona--erro p{margin-bottom:14px;}
.fx-sub{font-size:14px;font-weight:700;color:var(--text);margin:18px 0 10px;}
/* Zona 1 · cabeçalho (direto no fundo da página) */
.fx-cab{display:flex;flex-direction:column;gap:4px;padding:0 2px;}
.fx-voltar{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px;margin-left:-6px;background:none;border:0;border-radius:8px;color:var(--text-muted);font:600 14px var(--font);cursor:pointer;}
.fx-voltar:hover{color:var(--text);}
.fx-cab__linha{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px;}
.fx-cab__id{min-width:0;flex:1 1 420px;display:flex;flex-direction:column;gap:6px;}
.fx-nome{display:flex;align-items:flex-start;gap:4px;min-width:0;}
.fx-h1{font-size:var(--fx-fs-titulo);line-height:1.2;font-weight:700;letter-spacing:-.4px;color:var(--text);overflow-wrap:anywhere;padding-top:6px;}
.fx-cab__meta .fx-refs{min-width:0;max-width:100%;}
.fx-cab__meta .fx-refs .pc-ref,.fx-cab__meta .fx-refs .pc-bloco{font-size:14.5px;white-space:normal;overflow-wrap:anywhere;}
.fx-cab__meta .fx-refs .pc-ref b{color:var(--text);font-weight:600;}
.fx-cab__meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;color:var(--text-muted);font-size:14.5px;}
.fx-tag{display:inline-flex;align-items:center;gap:2px;color:var(--text);font-weight:600;}
.fx-loc{display:inline-flex;align-items:flex-start;gap:6px;min-width:0;}
.fx-loc .fx-ico{margin-top:3px;color:var(--text-muted);}
.fx-loc b{color:var(--text);font-weight:600;}
.fx-loc__end{overflow-wrap:anywhere;}
.fx-acoes{display:flex;flex-wrap:wrap;gap:10px;}
.fx-edit{display:flex;flex-direction:column;gap:6px;max-width:640px;}
.fx-edit__rot{font-size:13.5px;font-weight:600;color:var(--text-muted);}
.fx-edit__linha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.fx-edit__in{flex:1 1 280px;min-width:0;min-height:46px;font-size:19px;font-weight:600;}
.fx-edit__in[aria-invalid="true"]{border-color:var(--status-offline);}
.fx-edit__ajuda{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--text-muted);}
.fx-edit__erro{color:var(--status-offline);font-weight:600;font-size:14px;}
/* status (ícone + texto + cor — nunca só cor) */
.fx-status{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;border-radius:999px;font-weight:700;font-size:16px;line-height:1.2;background:var(--surface-3);color:var(--text);}
.fx-status__ic{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--fx-st,var(--text-muted));color:var(--surface);}
.fx-status.is-oco .fx-status__ic{background:transparent;border:2px solid currentColor;color:inherit;}
.fx-st--online{--fx-st:var(--status-online);background:var(--status-online-soft);color:var(--status-online);}
.fx-st--alerta{--fx-st:var(--status-degraded);background:var(--status-degraded-soft);color:var(--degraded-ink);}
.fx-st--offline{--fx-st:var(--status-offline);background:var(--status-offline-soft);color:var(--status-offline);}
.fx-st--manut{--fx-st:var(--status-maintenance);background:var(--status-maintenance-soft);color:var(--status-maintenance);}
.fx-st--ativacao{background:var(--status-implantacao-soft);color:var(--status-implantacao);}
.fx-st--semdados,.fx-st--desconhecido,.fx-st--velho{background:var(--status-nodata-soft);color:var(--status-nodata);}
/* Zona 2 · situação */
.fx-sit__topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;}
.fx-sit__estado{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;}
.fx-sit__dur{font-size:15px;font-weight:600;color:var(--text);}
.fx-sit__ver{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--fx-fs-meta);color:var(--text-muted);}
.fx-sit__ver b{color:var(--text);}
.fx-sit__msg{margin-top:10px;font-size:15px;color:var(--text);max-width:75ch;}
.fx-sit__msg:empty{display:none;}
.fx-camadas{margin-top:14px;padding-top:10px;border-top:1px solid var(--border);}
.fx-camadas__t{font-size:13.5px;font-weight:700;color:var(--text-muted);margin-bottom:4px;}
.fx-camadas__s{font-weight:600;}
.fx-camadas__l{display:flex;flex-wrap:wrap;}
.fx-camada{--fx-ly:var(--text-faint);position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:52px;padding:4px 18px 4px 0;margin-right:18px;}
.fx-camada+.fx-camada{padding-left:18px;margin-left:-18px;border-left:1px solid var(--border);}
.fx-camada__ponto{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--fx-ly);color:var(--surface);}
.fx-ly--na .fx-camada__ponto,.fx-ly--velho .fx-camada__ponto{background:transparent;border:2px solid var(--fx-ly);color:var(--fx-ly);}
.fx-camada__n{font-weight:600;}
.fx-camada__s{font-weight:700;color:var(--fx-ly);}
.fx-ly--na .fx-camada__s,.fx-ly--velho .fx-camada__s{color:var(--text-muted);}
.fx-ly--aviso .fx-camada__s{color:var(--degraded-ink);}
.fx-camada__nome{display:inline-flex;align-items:center;min-width:0;} /* TASK-126: o "i" colado ao nome da camada (dica, sem cartão) */
/* Zona 3 · desempenho */
.fx-perf__linha{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;}
.fx-figs{display:flex;flex-wrap:wrap;gap:12px 40px;}
.fx-fig{display:flex;flex-direction:column;gap:2px;min-width:140px;}
.fx-fig__l{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--text-muted);}
.fx-sw{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--text-muted);}
.fx-sw--rx{background:var(--fx-rx);} .fx-sw--tx{background:var(--fx-tx);}
.fx-sw--lacuna{width:16px;height:12px;background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 2px,var(--border-2) 2px,var(--border-2) 3px);}
.fx-fig__v{font-size:var(--fx-fs-fig);font-weight:700;letter-spacing:-.6px;line-height:1.15;}
.fx-fig__v small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--text-muted);}
.fx-fig__v--na{font-size:17px;font-weight:600;letter-spacing:0;color:var(--text-muted);padding:6px 0;}
[data-fx-figs-nota]>.fx-meta{margin-top:8px;}
.fx-disc .fx-chev{transition:transform .15s ease;}
.fx-disc[aria-expanded="true"] .fx-chev{transform:rotate(180deg);}
.fx-perf__painel{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.fx-perf__ferr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:10px;}
.fx-seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--surface-3);gap:2px;}
.fx-seg button{min-width:64px;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font:600 14px var(--font);cursor:pointer;}
.fx-seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-card);}
.fx-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--text-muted);}
.fx-legenda span{display:inline-flex;align-items:center;gap:7px;}
.fx-legenda .pc-dica{margin-left:-3px;}
.fx-grafico{position:relative;width:100%;min-width:0;}
.fx-grafico__estado{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:200px;border:1px dashed var(--border-2);border-radius:10px;color:var(--text-muted);font-size:14.5px;text-align:center;padding:16px;}
.fx-grafico__estado .fx-skel{margin:0;border-radius:10px;}
.fx-grafico__caixa{position:relative;border-radius:8px;touch-action:pan-y;cursor:crosshair;}
.fx-grafico__caixa:focus-visible{outline:2px solid var(--focus);outline-offset:4px;}
.fx-grafico svg{display:block;max-width:100%;height:auto;overflow:visible;}
.fx-g__grade{stroke:var(--grid);stroke-width:1;}
.fx-g__base{stroke:var(--text-muted);stroke-width:1;opacity:.5;}
.fx-g__eixo{fill:var(--text-muted);font:500 12px var(--font);}
.fx-g__un{font-weight:700;}
.fx-g__lacuna-f{fill:var(--surface-3);} .fx-g__lacuna-l{stroke:var(--border-2);stroke-width:1.2;}
.fx-g__lacuna-t{fill:var(--text-muted);font:600 12px var(--font);}
.fx-g__linha{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;}
.fx-g__linha--rx{stroke:var(--fx-rx);} .fx-g__linha--tx{stroke:var(--fx-tx);}
.fx-g__iso,.fx-g__ponto{fill:var(--surface);stroke-width:2.5;}
.fx-g__cur{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 3;}
.fx-grafico__dica{position:absolute;top:24px;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:2px;min-width:170px;padding:8px 11px;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;box-shadow:var(--shadow-lift);font-size:13.5px;color:var(--text);white-space:nowrap;}
.fx-grafico__dica span{display:flex;align-items:center;gap:7px;}
[data-fx-cobertura] .fx-meta{margin-top:8px;}
.fx-tabela{max-height:320px;overflow:auto;margin-top:8px;border:1px solid var(--border);border-radius:10px;}
.fx-tabela table{width:100%;border-collapse:collapse;font-size:14px;}
.fx-tabela th,.fx-tabela td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--border);}
.fx-tabela th:first-child{text-align:left;font-weight:500;}
.fx-tabela thead th{position:sticky;top:0;background:var(--surface-2);font-weight:700;color:var(--text);}
.fx-tabela td.is-na{color:var(--text-muted);font-style:italic;}
/* Zonas 4 e 5 lado a lado só quando a FICHA comporta */
.fx-par{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fx-gap);}
@container ficha (min-width:1000px){.fx-par{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;}}
/* Zona 4 · equipamento e portas */
.fx-modelo{display:flex;flex-wrap:wrap;gap:6px 28px;}
.fx-modelo>div,.fx-f>div{display:flex;flex-direction:column;gap:1px;min-width:0;}
.fx-modelo dt,.fx-f dt{font-size:13.5px;color:var(--text-muted);font-weight:500;}
.fx-modelo dd,.fx-f dd{font-weight:600;overflow-wrap:anywhere;}
.fx-modelo dd.is-na,.fx-f dd.is-na,.fx-tec dd.is-na{font-weight:500;color:var(--text-muted);font-style:italic;}
.fx-portas{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px;}
.fx-porta{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border-2);border-radius:12px;background:var(--surface);min-width:0;}
.fx-porta__g{width:34px;height:30px;flex-shrink:0;border-radius:6px;display:flex;align-items:center;justify-content:center;border:2px solid currentColor;color:var(--port-nolink);}
.fx-porta__t{display:flex;flex-direction:column;min-width:0;}
.fx-porta__n{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--text);overflow-wrap:anywhere;}
.fx-porta__s{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;}
.fx-porta__v{font-size:13.5px;color:var(--text-muted);}
.fx-pt--on .fx-porta__g{color:var(--port-link);background:var(--status-online-soft);}
.fx-pt--on .fx-porta__s{color:var(--status-online);}
.fx-pt--off .fx-porta__s{color:var(--text);}
.fx-pt--na{border-style:dashed;} .fx-pt--na .fx-porta__g{border-style:dashed;} .fx-pt--na .fx-porta__s{color:var(--text-muted);}
.fx-portas__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:2px 16px;margin-top:6px;}
.fx-tec{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;margin-top:18px;padding:11px 14px;border-radius:10px;background:var(--surface-2);font-size:14.5px;}
.fx-tec>div{display:flex;gap:6px;align-items:baseline;padding-right:16px;margin-right:16px;border-right:1px solid var(--border-2);}
.fx-tec>div:last-child{border-right:0;}
.fx-tec dt{color:var(--text-muted);}
.fx-tec dd{font-weight:700;}
/* Zona 5 · serviço e endereçamento */
.fx-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 24px;}
.fx-f .fx-f__w{grid-column:1/-1;}
.fx-f dd{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;}
.fx-macs{display:flex;flex-direction:column;gap:2px;}
/* Zona 6 · soluções */
.fx-promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:16px 22px;border-radius:var(--fx-raio);background:var(--surface-2);border:1px solid var(--border);}
.fx-promo__txt{flex:1 1 300px;}
.fx-promo h2{font-size:15.5px;font-weight:700;}
.fx-promo p{font-size:14px;color:var(--text-muted);}
.fx-promo__l{display:flex;flex-wrap:wrap;gap:0 22px;min-width:0;}
/* painel "Portas LAN" (diálogo lateral do abrirModal; 560 px; tela cheia no celular pelo .pc-modal--lateral) */
.pc-modal--fx{background:var(--overlay);}
.pc-modal--fx .pc-modal__card{width:min(560px,100%);}
html.fx-sem-rolagem,html.fx-sem-rolagem body{overflow:hidden;}
.fx-pn{display:flex;flex-direction:column;height:100%;background:var(--surface);color:var(--text);font-size:var(--fx-fs-corpo);line-height:1.45;font-variant-numeric:tabular-nums;}
.fx-pn :where(h2,p,dl,dd){margin:0;padding:0;}
.fx-pn__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--border);}
.fx-pn__cab h2{font-size:var(--fx-fs-zona);font-weight:700;}
.fx-pn__corpo{flex:1;overflow:auto;padding:16px 20px;}
.fx-pn__reg{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px;margin-bottom:12px;}
.fx-pn__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0;padding:8px 20px;border-top:1px solid var(--border);background:var(--surface-2);font-size:14px;color:var(--text-muted);}
.fx-pdet{display:flex;flex-direction:column;gap:10px;}
.fx-pdet__i{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--border-2);border-radius:12px;}
.fx-pdet__i.fx-pt--na{border-style:dashed;}
.fx-pdet__i.fx-pt--on .fx-porta__s{color:var(--status-online);}
.fx-pdet__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;}
.fx-f--p{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 20px;}
/* ficha estreita (celular, ou janela média com o menu aberto) */
@container ficha (max-width:560px){
  .fx{--fx-pad:16px;--fx-fs-fig:26px;}
  .fx-acoes{width:100%;}
  .fx-acoes .fx-btn{flex:1 1 140px;}
  .fx-camadas__l{flex-direction:column;}
  .fx-camada{margin-right:0;padding-right:0;}
  .fx-camada+.fx-camada{padding-left:0;margin-left:0;border-left:0;border-top:1px solid var(--border);}
  .fx-sit__ver{width:100%;justify-content:space-between;}
  .fx-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;}
  .fx-fig{min-width:0;}
  .fx-disc{width:100%;}
  .fx-porta{padding:10px;gap:10px;}
  .fx-f{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;}
  .fx-f--ip{grid-template-columns:minmax(0,1fr);}
  .fx-tec{flex-direction:column;align-items:stretch;gap:6px;}
  .fx-tec>div{border-right:0;margin-right:0;padding-right:0;justify-content:space-between;}
  .fx-promo{padding:16px;}
}
@media (prefers-reduced-motion:reduce){.fx-btn.is-girando .fx-ico,.fx-skel{animation:none;}.fx-disc .fx-chev{transition:none;}}

/* ══ ILHA · Faturas e Contratos ═════════════════════════════════════════════════════════════
   Estas telas NÃO fazem parte da Etapa 2 (nem do tema noturno): o portal.js põe data-area="financeiro" em #pc-content nas
   rotas /financeiro e /contratos, e este bloco devolve aos tokens compartilhados os valores da Etapa 1 — assim .card, .btn,
   .sk, .fat-*, .ct-* ficam IDÊNTICOS (a fonte volta a ser a Sora). Os tokens --ispx-* de .fv/.fv-ov nunca mudaram.
   Quando Faturas/Contratos entrarem no tema, apague este bloco. */
#pc-content[data-area="financeiro"]{
  color-scheme:light;
  --bg:#F4F6FA;--surface:#ffffff;--surface-2:#F4F6FA;--surface-3:#EEF2F8;
  --border:#E9EDF3;--border-2:#E9EDF3;--control-border:#DDE6F0;--track:#EEF2F8;
  --text:#17162E;--text-muted:#6A6A82;--text-faint:#9795A6;
  --brand-primary:#1D1B4E;--brand-accent:#29A8E1;--accent:#1584C0;--accent-soft:#EAF6FD;
  --primary-bg:#1D1B4E;--primary-fg:#ffffff;--primary-hover:#1D1B4E;--focus:#29A8E1;--shimmer:rgba(255,255,255,.65);
  --status-online:#16A34A;--status-online-soft:#E7F6EC;
  --status-degraded:#B7791F;--status-degraded-soft:#FBF3E2;
  --status-offline:#DC2626;--status-offline-soft:#FBE9E9;
  --status-maintenance:#5B6472;--status-maintenance-soft:#EEF0F3;
  --status-nodata:#98A0AE;--status-nodata-soft:#EFF1F5;
  --status-implantacao:#3E6DA8;--status-implantacao-soft:#EAF6FD;
  --layer-ok:#16A34A;--layer-fail:#DC2626;--degraded-ink:#8A5A00;--degraded-strong:#B91C1C;
  --font:'Sora',system-ui,sans-serif;--mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  --shadow-card:0 1px 2px rgba(29,27,78,.04);--shadow-lift:0 10px 30px rgba(20,18,58,.10);
}

/* TASK-283 · renomear no lugar (Lista e Cards) + referência do cliente e bloco de IP. O lápis fica SEMPRE visível (toque não
   tem hover) e tem alvo de 28 px; o editor ocupa a largura da célula e quebra a mensagem de erro embaixo. */
.pc-monitor .pc-lapis{width:28px;height:28px;margin:-4px 0;border-radius:6px;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-faint);flex-shrink:0;padding:0;}
.pc-monitor .pc-lapis:hover,.pc-monitor .pc-lapis:focus-visible{color:var(--text);background:var(--surface-3);border-color:var(--border-2);}
.pc-monitor .pc-lapis:focus-visible,.pc-monitor .pc-ren__ok:focus-visible,.pc-monitor .pc-ren__x:focus-visible{outline:2px solid var(--focus);outline-offset:1px;}
.pc-monitor .pc-ren{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;width:100%;}
.pc-monitor .pc-ren__in{flex:1 1 140px;min-width:0;max-width:100%;height:32px;padding:4px 8px;border:1px solid var(--border-2);border-radius:6px;background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:700;}
.pc-monitor .pc-ren__in:focus{outline:2px solid var(--focus);outline-offset:0;}
.pc-monitor .pc-ren__in[aria-invalid="true"]{border-color:var(--status-offline);}
.pc-monitor .pc-ren__ok,.pc-monitor .pc-ren__x{width:32px;height:32px;border-radius:6px;border:1px solid var(--border-2);background:var(--surface-3);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;}
.pc-monitor .pc-ren__err{flex-basis:100%;font-size:var(--fs-xs);color:var(--status-offline);}
.pc-monitor .pc-ref,.pc-monitor .pc-bloco{display:inline-block;max-width:100%;font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
.pc-monitor .pc-bloco{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.pc-monitor .pc-ref-linha{display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0;}
@media (max-width: 820px){
  .pc-monitor .pc-lapis{width:44px;height:44px;margin:-10px -6px;}
  .pc-monitor .pc-ren__in{height:44px;}
  .pc-monitor .pc-ren__ok,.pc-monitor .pc-ren__x{width:44px;height:44px;}
}
/* TASK-283 r2 (S1) · o nome do card é o botão nativo que abre/fecha (o cabeçalho deixou de ser role="button") */
.pc-monitor .ccard-toggle{all:unset;box-sizing:border-box;display:block;min-width:0;max-width:100%;cursor:pointer;border-radius:6px;color:inherit;font:inherit;text-align:left;}
.pc-monitor .ccard-toggle:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px;}
@media (max-width: 820px){ .pc-monitor .ccard-toggle{min-height:44px;display:flex;align-items:center;} }

/* ── TASK-546 · endereço de instalação na lista e nos cards de Circuitos ── */
.pc-end-linha{display:block;font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.pc-monitor .ccard-end{min-width:0;}

/* ══ TASK-566 · CHAMADOS v2 — Claude Design "Portal — Chamados v2" (1 Lista · 2b Detalhe · 3 Abrir chamado · 4 Estados) ══════════
   A linguagem de Faturas v7 (.fv): IBM Plex Sans, neutros, raio 4 px, lista sem caixas, rótulos de 11 px em caixa alta, abas
   sublinhadas, situação = ponto + texto. Tokens --ispx-* COPIADOS do .fv e escopados em .pcv (não vazam); --ispx-prog (Em
   atendimento) é novo; o ESCURO é derivado (desenho, cv2.css) e segue o tema do portal (preferência do sistema ou data-theme).
   Celular/tablet em pé (até 780 px, o mesmo corte de Faturas): a linha vira cartão, mesmo DOM. ═══════════════════════════════════ */
.pcv,.content:has(> .pcv){
  --ispx-font:'IBM Plex Sans',system-ui,sans-serif;--ispx-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--ispx-radius:4px;
  --ispx-text:var(--cv-text);--ispx-text-2:var(--cv-text-2);--ispx-text-3:var(--cv-text-3);--ispx-canvas:var(--cv-canvas);--ispx-surface:var(--cv-surface);--ispx-hover:var(--cv-hover);--ispx-fill:var(--cv-fill);--ispx-line:var(--cv-line);--ispx-line-strong:var(--cv-line-strong);--ispx-primary:var(--cv-primary);--ispx-primary-ink:var(--cv-primary-ink);--ispx-primary-hover:var(--cv-primary-hover);--ispx-accent:var(--cv-accent);--ispx-warn:var(--cv-warn);--ispx-warn-ink:var(--cv-warn-ink);--ispx-danger:var(--cv-danger);--ispx-ok:var(--cv-ok);--ispx-info:var(--cv-info);--ispx-prog:var(--cv-prog);--ispx-shadow-pop:var(--cv-shadow-pop);
}
.content:has(> .pcv){padding:0 !important;background:var(--ispx-canvas);}
.pcv{font-family:var(--ispx-font);color:var(--ispx-text);background:var(--ispx-canvas);font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;min-height:100%;}
.pcv *{box-sizing:border-box;}
.pcv button,.pcv input,.pcv select,.pcv textarea{font-family:inherit;font-variant-numeric:tabular-nums;}
.pcv :focus-visible{outline:2px solid var(--ispx-accent);outline-offset:2px;border-radius:2px;}
.pcv-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.pcv-only-m{display:none !important;}
.pcv-pg{max-width:1040px;margin:0 auto;padding:44px 32px 56px;display:flex;flex-direction:column;gap:32px;}
.pcv-pg--det{gap:24px;}
.pcv-det{display:flex;flex-direction:column;gap:24px;min-width:0;}
.pcv-pg--narrow{max-width:760px;gap:24px;}
.pcv-area{display:flex;flex-direction:column;gap:32px;}
.pcv-mono{font-family:var(--ispx-mono);font-size:13px;}
.pcv-faint{color:var(--ispx-text-3);}
.pcv-w6{font-weight:600;}

/* cabeçalho, botões, links */
.pcv-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;}
.pcv-hd-t{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0;}
.pcv-h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ispx-text);}
.pcv-h1:focus{outline:none;}
.pcv-sub0{margin:0;font-size:14px;color:var(--ispx-text-2);}
.pcv-upd{font-size:12px;color:var(--ispx-text-3);}
.pcv-btn{height:40px;padding:0 20px;border-radius:var(--ispx-radius);border:1px solid transparent;font-size:14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer;position:relative;}
.pcv-btn--p{background:var(--ispx-primary);color:var(--ispx-primary-ink);}
.pcv-btn--p:hover{background:var(--ispx-primary-hover);}
.pcv-btn--s{background:var(--ispx-surface);color:var(--ispx-text);border-color:var(--ispx-line-strong);padding:0 16px;}
.pcv-btn--s:hover{background:var(--ispx-hover);}
.pcv-btn:disabled{opacity:.45;cursor:not-allowed;}
.pcv-btn--w{width:100%;height:44px;}
.pcv-lnk{border:0;background:none;padding:4px 0;font-size:14px;color:var(--ispx-text);display:inline-flex;align-items:center;gap:4px;cursor:pointer;}
.pcv-lnk--u{text-decoration:underline;text-underline-offset:3px;}
.pcv-back{font-size:14px;color:var(--ispx-text-2);display:inline-flex;align-items:center;gap:4px;margin-left:-4px;align-self:flex-start;min-height:32px;text-decoration:none;}
.pcv-back:hover{color:var(--ispx-text);text-decoration:underline;text-underline-offset:3px;}
.pcv-h3{margin:0;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--ispx-text-3);}
.pcv-aviso{display:flex;align-items:center;gap:8px;padding:12px 0;border-top:1px solid var(--ispx-line);border-bottom:1px solid var(--ispx-line);font-size:14px;color:var(--ispx-text);}
.pcv-aviso .pcv-chk{color:var(--ispx-ok);}

/* resumo: 2 colunas entre fios */
.pcv-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ispx-line);border-bottom:1px solid var(--ispx-line);}
.pcv-sum-c{padding:20px 0;display:flex;flex-direction:column;gap:6px;min-width:0;}
.pcv-sum-c + .pcv-sum-c{padding-left:32px;border-left:1px solid var(--ispx-line);}
.pcv-sum-c--sk{gap:10px;}
.pcv-sum-k{font-size:13px;color:var(--ispx-text-2);}
.pcv-sum-v{font-size:24px;font-weight:500;letter-spacing:-.01em;line-height:1.2;}
.pcv-sum-s{font-size:13px;color:var(--ispx-text-2);}
.pcv-t-warn{color:var(--ispx-warn-ink);}

/* abas sublinhadas + busca + cidade */
.pcv-sec{display:flex;flex-direction:column;gap:12px;}
.pcv-tabs{display:flex;flex-wrap:wrap;gap:4px 24px;}
.pcv-tab{min-height:32px;white-space:nowrap;border:0;background:none;padding:6px 0;font-size:14px;color:var(--ispx-text-2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.pcv-tab:hover{color:var(--ispx-text);}
.pcv-tab.on{font-weight:600;color:var(--ispx-text);text-decoration:underline;text-decoration-color:var(--ispx-accent);text-decoration-thickness:2px;text-underline-offset:8px;}
.pcv-tab-n{font-size:12px;color:var(--ispx-text-3);font-weight:400;}
.pcv-tab-n--w{color:var(--ispx-warn-ink);font-weight:500;}
.pcv-srch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.pcv-srch-f{position:relative;flex:1 1 240px;max-width:400px;height:40px;display:flex;align-items:center;}
.pcv-srch-f svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ispx-text-3);pointer-events:none;}
.pcv-srch-f input{width:100%;height:100%;padding:0 12px 0 36px;border:1px solid var(--ispx-line-strong);border-radius:var(--ispx-radius);background:var(--ispx-surface);color:var(--ispx-text);font-size:14px;}
.pcv-srch-f input::placeholder{color:var(--ispx-text-3);}
.pcv-srch-f--lg{flex:none;max-width:none;width:100%;height:44px;}
.pcv-srch-f--lg input{font-size:15px;}
.pcv-sel{height:40px;padding:0 12px;border:1px solid var(--ispx-line-strong);border-radius:var(--ispx-radius);background:var(--ispx-surface);color:var(--ispx-text);font-size:14px;cursor:pointer;max-width:100%;}

/* tabela sem caixas (mesma grade do desenho) */
.pcv-tbl{margin:0 -12px;}
.pcv-thead,.pcv-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1.25fr) 176px 116px;gap:24px;align-items:center;}
.pcv-thead{height:40px;padding:0 12px;border-bottom:1px solid var(--ispx-line);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--ispx-text-3);}
.pcv-r{text-align:right;}
.pcv-grupo{margin:0;}
.pcv-grp{margin:0;padding:20px 12px 8px;border-top:1px solid var(--ispx-line);font-size:13px;font-weight:600;color:var(--ispx-text-2);display:flex;gap:8px;}
.pcv-grp.pcv-nb{border-top-color:transparent;}
.pcv-grp-n{font-weight:400;color:var(--ispx-text-3);}
.pcv-ul{list-style:none;margin:0;padding:0;}
.pcv-li{margin:0;}
.pcv-row{min-height:84px;padding:14px 12px;border-top:1px solid var(--ispx-line);position:relative;cursor:pointer;color:var(--ispx-text);text-decoration:none;transition:background .12s ease;}
.pcv-li:first-child .pcv-row{border-top-color:transparent;}
.pcv-row:hover{background:var(--ispx-hover);}
.pcv-row:focus-visible{outline-offset:-2px;}
.pcv-mark{position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--ispx-warn);}
.pcv-c{min-width:0;display:flex;flex-direction:column;gap:3px;}
.pcv-ref{font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ispx-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcv-ref--tag{font-family:var(--ispx-mono);font-size:14px;font-weight:500;}
.pcv-ref--sem{font-weight:500;color:var(--ispx-text-2);}
.pcv-cid{font-size:13px;font-weight:500;color:var(--ispx-text-2);}
.pcv-end{font-size:13px;color:var(--ispx-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcv-end--quebra{white-space:normal;overflow:visible;overflow-wrap:anywhere;}
.pcv-desc{font-size:14px;color:var(--ispx-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;overflow-wrap:anywhere;}
.pcv-num{font-family:var(--ispx-mono);font-size:12px;color:var(--ispx-text-3);}
.pcv-c-st{flex-direction:row;align-items:center;gap:8px;font-size:14px;}
.pcv-c-up{align-items:flex-end;font-size:14px;white-space:nowrap;}
.pcv-s{font-size:13px;color:var(--ispx-text-3);}
.is-done .pcv-ref,.is-done .pcv-desc{color:var(--ispx-text-2);}
.is-done .pcv-ref{font-weight:500;}
.pcv-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;}
.pcv-dot--aberto{background:var(--ispx-info);}
.pcv-dot--prog{background:var(--ispx-prog);}
.pcv-dot--warn{background:var(--ispx-warn);}
.pcv-st-warn{color:var(--ispx-warn-ink);font-weight:500;}
.pcv-st-muted{color:var(--ispx-text-2);}
.pcv-st-faint{color:var(--ispx-text-3);}
.pcv-chk{color:var(--ispx-text-3);flex:none;}
.pcv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding-top:16px;border-top:1px solid var(--ispx-line);font-size:13px;color:var(--ispx-text-2);}

/* estados (fv-state / fv-msg / fv-skel) */
.pcv-state{padding:32px 0;border-top:1px solid var(--ispx-line);border-bottom:1px solid var(--ispx-line);display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.pcv-state-t{margin:0;font-size:16px;font-weight:600;}
.pcv-state-t:focus{outline:none;}
.pcv-state-p{margin:0;font-size:15px;color:var(--ispx-text);}
.pcv-state-c{margin:0;font-size:14px;color:var(--ispx-text-2);}
.pcv-state-ac{display:flex;flex-wrap:wrap;gap:8px;}
.pcv-msgl{padding:24px 0;border-top:1px solid var(--ispx-line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:14px;color:var(--ispx-text-2);}
.pcv-sk{display:block;border-radius:3px;background:var(--ispx-fill);max-width:100%;}
.pcv-sk-tabs{display:flex;gap:24px;padding:8px 0 4px;}
.pcv-sk-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1.25fr) 176px 116px;gap:24px;align-items:center;min-height:84px;border-top:1px solid var(--ispx-line);padding:0 12px;margin:0 -12px;}
.pcv-sk-c{display:flex;flex-direction:column;gap:8px;min-width:0;}
.pcv-sk-r{align-items:flex-end;}

/* andamento (3 etapas) */
.pcv-stp{list-style:none;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:20px 0;border-top:1px solid var(--ispx-line);border-bottom:1px solid var(--ispx-line);}
.pcv-stp--sk{gap:16px;}
.pcv-st{display:flex;flex-direction:column;gap:6px;position:relative;padding-right:16px;min-width:0;}
.pcv-st-h{display:flex;align-items:center;gap:10px;}
.pcv-st-n{width:18px;height:18px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ispx-line-strong);background:var(--ispx-canvas);position:relative;z-index:1;}
.pcv-st--done .pcv-st-n{background:var(--ispx-text);border-color:var(--ispx-text);color:var(--ispx-canvas);}
.pcv-st--cur .pcv-st-n{border-color:var(--ispx-prog);}
.pcv-st--cur .pcv-st-n::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ispx-prog);}
.pcv-st--cur.pcv-st--w .pcv-st-n{border-color:var(--ispx-warn);}
.pcv-st--cur.pcv-st--w .pcv-st-n::after{background:var(--ispx-warn);}
.pcv-st-ln{flex:1;height:1.5px;background:var(--ispx-line-strong);}
.pcv-st--done .pcv-st-ln{background:var(--ispx-text);}
.pcv-st:last-child .pcv-st-ln{display:none;}
.pcv-st-l{font-size:14px;font-weight:500;color:var(--ispx-text);}
.pcv-st--pend .pcv-st-l{color:var(--ispx-text-3);font-weight:400;}
.pcv-st-s{font-size:13px;color:var(--ispx-text-3);}
.pcv-st-s--w{color:var(--ispx-warn-ink);}

/* detalhe (2b) */
.pcv-dh{display:flex;flex-direction:column;gap:8px;min-width:0;}
.pcv-dh .pcv-ref{white-space:normal;overflow-wrap:anywhere;}
.pcv-dh .pcv-h1.pcv-ref{font-size:26px;}
.pcv-dh .pcv-h1.pcv-ref--tag{font-size:24px;font-weight:500;}
.pcv-dh-num{font-family:var(--ispx-mono);font-size:13px;color:var(--ispx-text-3);}
.pcv-dh-sub{font-size:14px;color:var(--ispx-text-2);overflow-wrap:anywhere;}
.pcv-dh-st{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;margin-top:2px;}
.pcv-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;}
.pcv-main{display:flex;flex-direction:column;gap:28px;min-width:0;}
.pcv-aside{display:flex;flex-direction:column;min-width:0;}
.pcv-blk{display:flex;flex-direction:column;gap:10px;margin:0;}
.pcv-aside .pcv-blk{padding:16px 0;border-top:1px solid var(--ispx-line);}
.pcv-aside .pcv-blk:first-child{border-top:0;padding-top:0;}
.pcv-ocor{margin:0;font-size:15px;line-height:1.55;color:var(--ispx-text);overflow-wrap:anywhere;white-space:pre-line;}
.pcv-dl{margin:0;display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px 12px;font-size:14px;}
.pcv-dl dt{color:var(--ispx-text-2);display:flex;align-items:center;}
.pcv-dl dd{margin:0;min-width:0;color:var(--ispx-text);overflow-wrap:anywhere;}
.pcv-adr{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.45;min-width:0;}
.pcv-a1{color:var(--ispx-text);overflow-wrap:anywhere;}
.pcv-a2{color:var(--ispx-text-2);overflow-wrap:anywhere;}
.pcv .pc-dica__b{color:var(--ispx-text-3);}
.pcv .pc-dica__t{background:var(--ispx-text);color:var(--ispx-canvas);font-family:var(--ispx-font);font-weight:400;font-size:12.5px;border-radius:4px;}
.pcv-wait{display:inline-flex;align-items:center;gap:8px;color:var(--ispx-warn-ink);font-weight:500;}

/* histórico (registro de atividades) */
.pcv-feed{display:flex;flex-direction:column;position:relative;}
.pcv-feed::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:1px;background:var(--ispx-line);}
.pcv-fd-day{padding:6px 0 10px 40px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--ispx-text-3);position:relative;}
.pcv-fd-ev{display:flex;align-items:center;gap:14px;padding:6px 0;font-size:13.5px;color:var(--ispx-text-2);position:relative;}
.pcv-fd-ev b{color:var(--ispx-text);font-weight:500;}
.pcv-fd-ev time,.pcv-fd-h time{margin-left:auto;color:var(--ispx-text-3);font-size:12.5px;white-space:nowrap;}
.pcv-nd{width:27px;display:flex;justify-content:center;flex:none;}
.pcv-nd i{width:9px;height:9px;border-radius:50%;background:var(--ispx-canvas);border:1.5px solid var(--ispx-line-strong);display:block;position:relative;z-index:1;}
.pcv-nd i.prog{border-color:var(--ispx-prog);background:var(--ispx-prog);}
.pcv-nd i.warn{border-color:var(--ispx-warn);background:var(--ispx-warn);}
.pcv-nd i.ok{border-color:var(--ispx-ok);background:var(--ispx-ok);}
.pcv-fd-msg{display:flex;gap:13px;padding:10px 0 14px;position:relative;}
.pcv-av{width:27px;height:27px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;position:relative;z-index:1;}
.pcv-av--eq{background:var(--ispx-primary);color:var(--ispx-primary-ink);}
.pcv-av--cli{background:var(--ispx-fill);color:var(--ispx-text);box-shadow:0 0 0 1px var(--ispx-line-strong) inset;}
.pcv-fd-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.pcv-fd-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-size:13.5px;}
.pcv-fd-h b{font-weight:600;}
.pcv-fd-h span{color:var(--ispx-text-3);}
.pcv-fd-t{border:1px solid var(--ispx-line);border-radius:var(--ispx-radius);padding:12px 14px;font-size:14px;line-height:1.55;background:var(--ispx-surface);overflow-wrap:anywhere;white-space:pre-line;}
.pcv-fd-att{display:flex;gap:8px;flex-wrap:wrap;}
.pcv-att{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--ispx-line);border-radius:var(--ispx-radius);font-size:12.5px;color:var(--ispx-text-2);}

/* abrir chamado (3) */
.pcv-form{display:flex;flex-direction:column;gap:24px;}
.pcv-fsec{display:flex;flex-direction:column;gap:14px;padding-top:20px;border-top:1px solid var(--ispx-line);margin:0;}
.pcv-fsec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.pcv-fsec-t{margin:0;font-size:16px;font-weight:600;}
.pcv-fsec-s{font-size:13px;color:var(--ispx-text-3);}
.pcv-opcs{display:flex;flex-direction:column;}
.pcv-res{display:flex;flex-direction:column;}
.pcv-opt{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:14px;align-items:start;padding:12px;border-top:1px solid var(--ispx-line);margin:0 -12px;cursor:pointer;flex:none;}
.pcv-opt:first-child{border-top:0;}
.pcv-opt:hover{background:var(--ispx-hover);}
.pcv-opt.is-on{background:var(--ispx-hover);}
.pcv-rad{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ispx-line-strong);margin:2px 0 0;background:var(--ispx-surface);cursor:pointer;}
.pcv-rad:checked{border:5.5px solid var(--ispx-primary);}
.pcv-opt-b{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pcv-opt-b .pcv-ref{white-space:normal;overflow-wrap:anywhere;}
.pcv-opt-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:13px;color:var(--ispx-text-2);white-space:nowrap;}
.pcv-hl{text-decoration:underline;text-decoration-color:var(--ispx-warn);text-decoration-thickness:2px;text-underline-offset:3px;}
.pcv-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--ispx-line-strong);border-radius:var(--ispx-radius);}
.pcv-pick{position:relative;background:var(--ispx-hover);}
.pcv-pick:focus-visible{outline:2px solid var(--ispx-primary);outline-offset:2px;}
.pcv-pick .pcv-opt-b{gap:3px;}
.pcv-kick{font-size:12px;color:var(--ispx-text-3);letter-spacing:.02em;}
.pcv-pick-m{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:13px;color:var(--ispx-text-2);margin-top:2px;}
.pcv-pick-m .pcv-num{color:var(--ispx-text-3);}
#pc-ch-circ-busca-w[hidden]{display:none;}
.pcv-ferr{display:block;font-size:13px;color:var(--ispx-danger);margin-top:6px;}
.pcv-ferr:empty{display:none;}
.pcv-fld[aria-invalid="true"]{border-color:var(--ispx-danger);}
.pcv-hint{padding:20px 0 4px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ispx-text-2);border-top:1px solid var(--ispx-line);}
.pcv-hint b{color:var(--ispx-text);font-weight:500;}
.pcv-mais{padding:10px 0 0;font-size:13px;color:var(--ispx-text-3);}
.pcv-dup{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:12px 0 0;font-size:14px;color:var(--ispx-text);}
.pcv-g3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:16px;}
.pcv-campo{display:block;min-width:0;}
.pcv-lbl{display:block;font-size:13px;color:var(--ispx-text-2);margin:0 0 6px;}
.pcv-fld{width:100%;height:40px;padding:0 12px;border:1px solid var(--ispx-line-strong);border-radius:var(--ispx-radius);background:var(--ispx-surface);color:var(--ispx-text);font-size:14px;}
.pcv-fld::placeholder{color:var(--ispx-text-3);}
.pcv-fld--ta{height:auto;min-height:112px;padding:10px 12px;line-height:1.5;resize:vertical;}
.pcv-anx{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.pcv-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.pcv-fotos{display:flex;flex-direction:column;gap:6px;}
.pcv-fotos:empty{display:none;}
.pcv-foto{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 0;border-top:1px solid var(--ispx-line);min-width:0;}
.pcv-foto-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcv-msg{font-size:14px;}
.pcv-msg:empty{display:none;}
.pcv-msg--erro{color:var(--ispx-danger);}
.pcv-acts{display:flex;justify-content:flex-end;gap:8px;padding-top:20px;border-top:1px solid var(--ispx-line);}

/* computador estreito: o detalhe empilha antes da lista virar cartão */
@media(max-width:1100px){
  .pcv-cols{grid-template-columns:minmax(0,1fr);gap:28px;}
  .pcv-aside{border-top:1px solid var(--ispx-line);padding-top:16px;}
}
/* celular/tablet em pé (o corte de Faturas): a linha vira cartão, controles de 44 px */
@media(max-width:780px){
  .pcv-pg{padding:24px 16px 32px;gap:24px;}
  .pcv-pg--det,.pcv-det{gap:20px;}
  .pcv-area{gap:24px;}
  .pcv-h1{font-size:22px;}
  .pcv-dh .pcv-h1.pcv-ref{font-size:22px;}
  .pcv-dh .pcv-h1.pcv-ref--tag{font-size:20px;}
  .pcv-only-d{display:none !important;}
  .pcv-only-m{display:flex !important;}
  .pcv-btn{height:44px;}
  .pcv-back{min-height:44px;}
  .pcv-sum{grid-template-columns:minmax(0,1fr);}
  .pcv-sum-c{padding:16px 0;}
  .pcv-sum-c + .pcv-sum-c{padding-left:0;border-left:0;border-top:1px solid var(--ispx-line);}
  .pcv-tabs{flex-wrap:nowrap;overflow-x:auto;gap:0 4px;margin-left:-10px;scrollbar-width:none;}
  .pcv-tab{min-height:44px;padding:6px 10px;}
  .pcv-srch-f{max-width:100%;height:44px;flex-basis:100%;}
  .pcv-sel{height:44px;flex:1 1 100%;}
  .pcv-tbl{margin:0;}
  .pcv-thead{display:none;}
  .pcv-grp{padding:20px 0 8px;}
  .pcv-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ref st" "cid up" "end end" "desc desc" "num num";gap:3px 12px;min-height:0;padding:14px 0;align-items:baseline;}
  .pcv-row:hover{background:transparent;}
  .pcv-c{display:contents;}
  .pcv-c-circ .pcv-ref{grid-area:ref;}
  .pcv-cid{grid-area:cid;}
  .pcv-end{grid-area:end;}
  .pcv-desc{grid-area:desc;margin-top:6px;}
  .pcv-num{grid-area:num;margin-top:2px;}
  .pcv-c-st{grid-area:st;display:flex;justify-content:flex-end;font-size:13px;gap:6px;}
  .pcv-c-up{grid-area:up;display:block;text-align:right;font-size:13px;color:var(--ispx-text-3);}
  .pcv-c-up .pcv-s{display:none;}
  .pcv-mark{display:none;}
  .pcv-sk-row{grid-template-columns:minmax(0,1fr) auto;margin:0;padding:0;min-height:96px;}
  .pcv-sk-row > .pcv-sk-c:nth-child(2),.pcv-sk-row > .pcv-sk-c:nth-child(3){display:none;}
  .pcv-st{padding-right:8px;}
  .pcv-st-l{font-size:13px;}
  .pcv-st-s{font-size:12px;}
  .pcv-dl{grid-template-columns:120px minmax(0,1fr);}
  .pcv-fd-h b{white-space:nowrap;}
  .pcv-g3{grid-template-columns:minmax(0,1fr);}
  .pcv-fld{height:44px;}
  .pcv-fld--ta{height:auto;min-height:120px;}
  .pcv-opt{min-height:44px;}
  .pcv-acts{flex-direction:column-reverse;}
  .pcv-acts .pcv-btn{width:100%;}
}