/* ═══════════════════════════════════════════════════════════════════════════
   AV BRIDGE · design system  "sala de controle"
   Um arquivo. Sem framework, sem build.

   RESPONSIVIDADE É FUNDAÇÃO, NÃO ACABAMENTO.
   Três experiências, não uma que encolhe:
     ≥1024px  desktop  — sidebar fixa, densidade alta, hover
     768–1023 tablet   — sidebar vira gaveta, grids de 2, toque
     ≤767px   mobile   — gaveta + barra inferior, tabela vira cartão,
                         filtro vira folha, nada depende de hover
   Alvo principal: 1440px. Mobile validado em 360–430px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────────────────
   Escuro é o padrão (o operador trabalha de madrugada). O claro é redefinido
   em dois lugares: no @media, guardado contra a escolha explícita de escuro,
   e no [data-theme="light"], para o botão vencer o sistema. Nenhuma cor tem
   sua única definição dentro de um bloco de tema. */
:root{
  --bg:#0A0D12; --surface:#10141B; --surface-2:#161C25; --surface-3:#1D2430;
  --line:#222A36; --line-2:#2F3947;
  --text:#E9EDF3; --text-2:#A3ADBB; --text-3:#77828F;
  --accent:#FF7A2F; --accent-2:#FFA366; --accent-ink:#1A0A00; --accent-soft:rgba(255,122,47,.14);
  --meta:#4C8DFF; --meta-soft:rgba(76,141,255,.14);
  --ok:#3DDC97; --ok-soft:rgba(61,220,151,.13);
  --warn:#FFC53D; --warn-soft:rgba(255,197,61,.14);
  --bad:#FF5C7A; --bad-soft:rgba(255,92,122,.14);
  --info:#4C8DFF; --info-soft:rgba(76,141,255,.14);
  --roxo:#C084FC; --roxo-soft:rgba(192,132,252,.14);
  --ciano:#22D3EE; --ciano-soft:rgba(34,211,238,.14);
  --neutro:#3A4454;
  --sombra:0 16px 40px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.04) inset;
  --sombra-2:0 24px 60px rgba(0,0,0,.6);
  --r-s:6px; --r-m:10px; --r-l:14px;
  --ui:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --side-w:232px; --top-h:56px; --bottom-h:0px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#F4F5F8; --surface:#FFFFFF; --surface-2:#F2F4F7; --surface-3:#E8EBF0;
    --line:#E1E5EB; --line-2:#C9D0DA;
    --text:#12161D; --text-2:#4B5665; --text-3:#727D8C;
    --accent:#E05A0B; --accent-2:#C24E09; --accent-ink:#FFFFFF; --accent-soft:rgba(224,90,11,.11);
    --meta:#2F6FE0; --meta-soft:rgba(47,111,224,.11);
    --ok:#0F7A50; --ok-soft:rgba(15,122,80,.11);
    --warn:#96600B; --warn-soft:rgba(150,96,11,.13);
    --bad:#C92A5F; --bad-soft:rgba(201,42,95,.10);
    --info:#2F6FE0; --info-soft:rgba(47,111,224,.11);
    --roxo:#7C3AED; --roxo-soft:rgba(124,58,237,.11);
    --ciano:#0E7490; --ciano-soft:rgba(14,116,144,.11);
    --neutro:#AEB7C3;
    --sombra:0 12px 32px rgba(20,28,40,.14),0 1px 0 rgba(255,255,255,.7) inset;
    --sombra-2:0 22px 54px rgba(20,28,40,.18);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F4F5F8; --surface:#FFFFFF; --surface-2:#F2F4F7; --surface-3:#E8EBF0;
  --line:#E1E5EB; --line-2:#C9D0DA;
  --text:#12161D; --text-2:#4B5665; --text-3:#727D8C;
  --accent:#E05A0B; --accent-2:#C24E09; --accent-ink:#FFFFFF; --accent-soft:rgba(224,90,11,.11);
  --meta:#2F6FE0; --meta-soft:rgba(47,111,224,.11);
  --ok:#0F7A50; --ok-soft:rgba(15,122,80,.11);
  --warn:#96600B; --warn-soft:rgba(150,96,11,.13);
  --bad:#C92A5F; --bad-soft:rgba(201,42,95,.10);
  --info:#2F6FE0; --info-soft:rgba(47,111,224,.11);
  --roxo:#7C3AED; --roxo-soft:rgba(124,58,237,.11);
  --ciano:#0E7490; --ciano-soft:rgba(14,116,144,.11);
  --neutro:#AEB7C3;
  --sombra:0 12px 32px rgba(20,28,40,.14),0 1px 0 rgba(255,255,255,.7) inset;
  --sombra-2:0 22px 54px rgba(20,28,40,.18);
  color-scheme:light;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--ui);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0}
button{font-family:inherit}
code,kbd{font-family:var(--mono);font-size:.92em;background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;color:var(--text)}
svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;
  animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.dim{color:var(--text-3)}
.t2{color:var(--text-2)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}.info{color:var(--info)}.acc{color:var(--accent)}
.nowrap{white-space:nowrap}
.so-desktop{display:initial}
.so-mobile{display:none}

/* ── marca ────────────────────────────────────────────────────────────────── */
.ponte{display:inline-flex;align-items:center;flex:none}
.ponte i{width:9px;height:9px;border-radius:50%;display:block}
.ponte i:first-child{background:var(--meta);box-shadow:0 0 0 3px var(--meta-soft)}
.ponte i:last-child{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ponte s{display:block;width:20px;height:2px;text-decoration:none;
  background:linear-gradient(90deg,var(--meta),var(--accent))}

/* ═══ SHELL ════════════════════════════════════════════════════════════════ */
.app{min-height:100vh;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr)}

/* ── sidebar ──────────────────────────────────────────────────────────────── */
.side{background:var(--surface);border-right:1px solid var(--line);padding:14px 12px 16px;
  display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:40}
/* marca: ícone + nome na primeira linha, domínio na segunda, ocupando a largura
   toda. Em uma linha só, "afiliado.actionviral.com" não cabia ao lado do ícone e
   encostava na borda da barra (ajuste de 22/09/2026). */
.side .brand{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 10px;
  padding:6px 8px 16px;font:600 14.5px var(--ui);color:var(--text)}
.side .brand b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .brand small{grid-column:1/-1;margin-top:4px;font:500 9.5px/1.3 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .grp{font:600 10px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);padding:16px 10px 7px}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text-2);
  font:500 13px/1.2 var(--ui);min-height:38px}
.side a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.side a.on{background:var(--accent-soft);color:var(--text);font-weight:600}
.side a.on .ic{color:var(--accent)}
.side a.soon{opacity:.42;cursor:not-allowed;pointer-events:none}
.side a .cnt{margin-left:auto;font:600 10.5px var(--ui);background:var(--surface-3);color:var(--text-2);
  padding:2px 6px;border-radius:999px;font-variant-numeric:tabular-nums}
.side a .cnt.bad{background:var(--bad-soft);color:var(--bad)}
.side a .cnt.warn{background:var(--warn-soft);color:var(--warn)}
.side a .cnt.ok{background:var(--ok-soft);color:var(--ok)}
/* azul = "tem coisa para ver", não "tem problema" — o caso da venda orgânica */
.side a .cnt.info{background:var(--info-soft);color:var(--info)}
.side .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:2px}
.side .user{display:flex;align-items:center;gap:9px;padding:8px 10px;font-size:12.5px;color:var(--text-2)}
.side .user i{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--meta),var(--accent));color:#fff;font:600 11px var(--ui)}
.side .user form{margin:0 0 0 auto}
.side .user button{background:none;border:0;color:var(--text-3);font:500 12px var(--ui);cursor:pointer;padding:4px}
.side .user button:hover{color:var(--bad)}
.backdrop{display:none}

/* ── topbar ───────────────────────────────────────────────────────────────── */
.topbar{height:var(--top-h);display:flex;align-items:center;gap:10px;padding:0 20px;
  border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:30}
.topbar .crumb{font:500 13px var(--ui);color:var(--text-3);display:flex;align-items:center;gap:6px;min-width:0}
.topbar .crumb b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumb .sep{color:var(--line-2)}
.topbar .sp{flex:1;min-width:0}
.burger{display:none}

/* ── página ───────────────────────────────────────────────────────────────── */
.main{min-width:0;display:flex;flex-direction:column}
.page{padding:20px;display:grid;gap:16px;align-content:start;
  padding-bottom:calc(28px + var(--bottom-h) + env(safe-area-inset-bottom,0px))}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-h h1{font:600 25px/1.12 var(--display);letter-spacing:-.02em}
.page-h .sub{color:var(--text-2);font-size:13px;margin-top:5px;max-width:86ch}
.page-h .acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.strip{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sec-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 -4px;flex-wrap:wrap}
.sec-t h2{font:600 13px/1 var(--ui);letter-spacing:.02em;color:var(--text-2);display:flex;align-items:center;gap:8px}
.sec-t h2::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
.sec-t .lado{font-size:12px;color:var(--text-3);display:flex;gap:10px;align-items:center}

/* ── grades ───────────────────────────────────────────────────────────────── */
.g{display:grid;gap:14px;min-width:0}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g84{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
.g48{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}
.col{display:grid;gap:14px;align-content:start;min-width:0}

/* ═══ COMPONENTES ══════════════════════════════════════════════════════════ */

/* ── card ─────────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);min-width:0;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h h3{font:600 14px/1.2 var(--ui);display:flex;align-items:center;gap:8px;min-width:0}
.card-h .sub{font:12px/1.4 var(--ui);color:var(--text-3);margin-top:3px}
.card-h .dir{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card-b{padding:16px}
.card-b.tight{padding:0}
.card-b.lista{padding:4px 16px}
.card-f{padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12px;color:var(--text-3)}

/* ── KPI ──────────────────────────────────────────────────────────────────── */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 15px 13px;display:flex;flex-direction:column;gap:6px;position:relative;
  min-height:116px;min-width:0;overflow:hidden}
.kpi .l{display:flex;align-items:center;gap:6px;font:600 10.5px/1.3 var(--ui);letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3);min-height:14px}
.kpi .v{font:600 26px/1.05 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v small{font:500 13px var(--ui);color:var(--text-3);letter-spacing:0;margin-left:4px}
.kpi .s{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:12px/1.4 var(--ui);
  color:var(--text-3);margin-top:auto}
/* A sparkline mora na linha do RÓTULO, não perto do valor nem do rodapé.
   Duas tentativas antes desta falharam: encostada no valor ela cortava o
   número; no rodapé, espremia o texto em três linhas. O rótulo é curto e
   pequeno — é o único lugar do cartão onde sobra largura de verdade. */
.kpi .spark{position:absolute;right:13px;top:11px;opacity:.9;pointer-events:none;line-height:0}
.kpi:has(.spark) .l{padding-right:86px;min-height:26px}
.kpi.hero{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface) 72%)}
.kpi.hero .v{font-size:34px;color:var(--accent)}
.kpi.mini{min-height:0;padding:12px 14px}
.kpi.mini .v{font-size:19px}
.delta{display:inline-flex;align-items:center;gap:3px;font:600 11.5px var(--ui);padding:2px 6px;
  border-radius:5px;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.delta.up{color:var(--ok);background:var(--ok-soft)}
.delta.down{color:var(--bad);background:var(--bad-soft)}
.delta.flat{color:var(--text-3)}

/* ── chips e badges ───────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 10px;border-radius:999px;
  font:500 12px/1.3 var(--ui);border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-2)}
.chip i.p{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.chip.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.chip.bad{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.chip.info{color:var(--info);background:var(--info-soft);border-color:transparent}
.chip.acc{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.chip.pulse i.p{animation:pulso 2.4s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}
  70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
a.chip:hover{text-decoration:none;border-color:var(--text-3)}
.badge{display:inline-flex;align-items:center;gap:4px;font:600 10.5px/1.3 var(--ui);letter-spacing:.04em;
  text-transform:uppercase;padding:3px 6px;border-radius:4px;background:var(--surface-3);color:var(--text-2);
  white-space:nowrap}
.badge.est{color:var(--warn);background:var(--warn-soft)}
.badge.conf{color:var(--ok);background:var(--ok-soft)}
.badge.val{color:var(--info);background:var(--info-soft)}
.badge.par{color:var(--text-2);background:transparent;border:1px dashed var(--line-2)}
.badge.exact{color:var(--ok);background:var(--ok-soft)}
.badge.fallback{color:var(--info);background:var(--info-soft)}
.badge.amb{color:var(--warn);background:var(--warn-soft)}
.badge.org{color:var(--ciano);background:var(--ciano-soft)}
.badge.lost{color:var(--bad);background:var(--bad-soft)}
.badge.dir{color:var(--accent);background:var(--accent-soft)}
.badge.ind{color:var(--roxo);background:var(--roxo-soft)}
.badge.meta{color:var(--meta);background:var(--meta-soft)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:var(--text-3)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.dot.info{background:var(--info)}.dot.off{background:var(--text-3)}

/* ── botões ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;
  border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);
  font:600 13px/1 var(--ui);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-3);text-decoration:none}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:var(--bad-soft)}
.btn.sm{min-height:30px;padding:0 10px;font-size:12px;border-radius:7px}
.btn.icon{width:36px;padding:0}
.btn.icon.sm{width:30px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.feito{background:var(--ok);border-color:var(--ok);color:var(--bg)}

/* ── segmentado (período) ─────────────────────────────────────────────────── */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg a,.seg button{border:0;background:transparent;color:var(--text-2);font:500 12.5px/1 var(--ui);
  padding:8px 11px;border-radius:6px;cursor:pointer;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px}
.seg a.on,.seg button.on{background:var(--surface-3);color:var(--text);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.22)}
.seg a:hover,.seg button:hover{color:var(--text);text-decoration:none}

/* ── tabs ─────────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{background:none;border:0;padding:11px 13px;color:var(--text-2);font:500 13px var(--ui);
  border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;display:inline-flex;gap:7px;
  align-items:center;white-space:nowrap;text-decoration:none;min-height:42px}
.tabs a.on,.tabs button.on{color:var(--text);border-color:var(--accent);font-weight:600}
.tabs a:hover,.tabs button:hover{color:var(--text);text-decoration:none}
.tabs .cnt{font:600 11px var(--ui);background:var(--surface-3);color:var(--text-2);padding:2px 6px;border-radius:999px}
.tabs a.on .cnt,.tabs button.on .cnt{background:var(--accent-soft);color:var(--accent)}

/* ── filtros ──────────────────────────────────────────────────────────────── */
.filtros{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.filtros .sp{flex:1;min-width:0}
.busca{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 11px;border:1px solid var(--line-2);
  border-radius:8px;background:var(--bg);color:var(--text-3);font:13px var(--ui);min-width:200px;flex:1;max-width:320px}
.busca input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:13px var(--ui)}
.busca input::placeholder{color:var(--text-3)}
.busca kbd{font-size:11px;padding:1px 5px}

/* ── tabela ───────────────────────────────────────────────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl th{position:sticky;top:0;z-index:2;background:var(--surface);color:var(--text-3);
  font:600 10.5px/1.2 var(--ui);letter-spacing:.07em;text-transform:uppercase;padding:11px 12px;
  border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th.n,.tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
.tbl th.ord{cursor:pointer;user-select:none}
.tbl th.ord:hover{color:var(--text)}
.tbl th.ord::after{content:"⇅";margin-left:5px;opacity:.35;font-size:10px}
.tbl th.ord.asc::after{content:"↑";opacity:1;color:var(--accent)}
.tbl th.ord.desc::after{content:"↓";opacity:1;color:var(--accent)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl td>.cv{display:contents}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl td.frozen,.tbl th.frozen{position:sticky;left:0;background:var(--surface);z-index:3;min-width:190px}
.tbl tbody tr:hover td.frozen{background:var(--surface-2)}
.tbl th.frozen{z-index:4}
.tbl .nome{font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;min-width:0}
.tbl .nome small{font-weight:400;color:var(--text-3)}
.tbl .sub{display:block;font-size:11.5px;color:var(--text-3);font-weight:400;margin-top:2px}
.tbl tr.grp>td{background:var(--surface-2);font-weight:600}
.tbl tr.grp .abrir{background:none;border:0;color:inherit;font:inherit;cursor:pointer;display:flex;
  align-items:center;gap:8px;padding:0;text-align:left;width:100%}
.tbl tr.grp .abrir .ic{transition:transform .15s;color:var(--text-3)}
.tbl tr.grp.aberto .abrir .ic{transform:rotate(90deg)}
.tbl tr.filho td:first-child{padding-left:32px;color:var(--text-2)}
.tbl tr.neto td:first-child{padding-left:52px;color:var(--text-2)}
.tbl tr[hidden]{display:none}
.tbl tr.tot td{border-top:2px solid var(--line-2);font-weight:600;background:var(--surface-2)}
.tbl tr.nota td{background:var(--warn-soft);font-size:12px;color:var(--text-2);white-space:normal}
.tbl .vazio td{padding:26px 14px;text-align:center;color:var(--text-3)}
.tbl.compacta td{padding:7px 12px}

/* barra dentro da célula */
.ibar{display:flex;align-items:center;gap:8px;min-width:104px;justify-content:flex-end}
.ibar em{flex:1;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;font-style:normal;min-width:34px}
.ibar em i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.ibar.ok em i{background:var(--ok)}.ibar.bad em i{background:var(--bad)}
.ibar.warn em i{background:var(--warn)}.ibar.info em i{background:var(--info)}
.ibar.neutro em i{background:var(--neutro)}
.ibar span{font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-2);min-width:38px;text-align:right}
.ibar.larga{min-width:160px}

/* ── alerta ───────────────────────────────────────────────────────────────── */
.al{display:flex;gap:11px;padding:12px 14px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface);align-items:flex-start}
.al .ic{margin-top:1px}
/* Só o <b> do TÍTULO vira bloco. Sem o seletor de filho direto, qualquer
   negrito dentro do texto do alerta virava bloco e quebrava a frase em
   pedaços — "identifica uma / pessoa / ; o nosso". */
.al>div>b{display:block;font-weight:600;margin-bottom:2px}
.al span{color:var(--text-2);font-size:12.5px;line-height:1.5}
.al .act{margin-left:auto;align-self:center;display:flex;gap:6px;flex-wrap:wrap}
.al.bad{border-color:color-mix(in srgb,var(--bad) 38%,transparent);background:var(--bad-soft)}.al.bad>.ic{color:var(--bad)}
.al.warn{border-color:color-mix(in srgb,var(--warn) 38%,transparent);background:var(--warn-soft)}.al.warn>.ic{color:var(--warn)}
.al.info{border-color:color-mix(in srgb,var(--info) 38%,transparent);background:var(--info-soft)}.al.info>.ic{color:var(--info)}
.al.ok{border-color:color-mix(in srgb,var(--ok) 38%,transparent);background:var(--ok-soft)}.al.ok>.ic{color:var(--ok)}

/* ── cartão "pede atenção" ────────────────────────────────────────────────── */
.att{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:14px 16px 13px;
  display:grid;gap:8px;position:relative;overflow:hidden;align-content:start}
.att::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--warn)}
.att.bad::before{background:var(--bad)}
.att.info::before{background:var(--info)}
.att.ok::before{background:var(--ok)}
.att .t{display:flex;align-items:center;gap:8px;font:600 13.5px/1.35 var(--ui);flex-wrap:wrap}
.att .t .badge{margin-left:auto}
.att p{margin:0;font-size:12.5px;color:var(--text-2);line-height:1.5}
.att .act{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}

/* ── tooltip ──────────────────────────────────────────────────────────────── */
.tip{position:relative;display:inline-flex;align-items:center;gap:4px;cursor:help;
  border-bottom:1px dotted var(--text-3);background:none;border-left:0;border-right:0;border-top:0;
  color:inherit;font:inherit;padding:0;text-align:left;letter-spacing:inherit;text-transform:inherit}
.tip .q{width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);color:var(--text-3);
  font:600 9px/13px var(--ui);text-align:center;letter-spacing:0;flex:none;text-transform:none}
.tip .pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:60;width:max-content;max-width:270px;
  padding:10px 12px;border-radius:9px;background:var(--surface-3);color:var(--text);border:1px solid var(--line-2);
  box-shadow:var(--sombra);font:400 12.5px/1.5 var(--ui);text-transform:none;letter-spacing:0;
  white-space:normal;display:none;text-align:left}
.tip .pop b{display:block;margin-bottom:3px}
.tip:hover .pop,.tip:focus-visible .pop,.tip.aberto .pop{display:block}
.tip.dir .pop{left:auto;right:0}

/* ── estado vazio ─────────────────────────────────────────────────────────── */
.empty{display:grid;place-items:center;text-align:center;padding:30px 18px;color:var(--text-3);
  border:1px dashed var(--line-2);border-radius:var(--r-m);gap:7px}
.empty b{color:var(--text-2);font-weight:600;font-size:13.5px}
.empty span{font-size:12.5px;max-width:52ch;line-height:1.5}
.empty .ic{width:26px;height:26px;color:var(--text-3)}

/* ── formulário ───────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font:600 10.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.field input,.field select,.field textarea{min-height:40px;border:1px solid var(--line-2);background:var(--bg);
  color:var(--text);border-radius:8px;padding:9px 11px;font:14px var(--ui);outline:none;width:100%}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input[readonly]{color:var(--text-2);font-family:var(--mono);font-size:12px}
.field .help{font-size:12px;color:var(--text-3);line-height:1.5}
.field .copy{display:flex;gap:6px;align-items:stretch}
.field .copy input{flex:1;min-width:0}
.form-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.previa{background:var(--bg);border:1px dashed var(--line-2);border-radius:8px;padding:11px 13px;font-size:12.5px}
.previa b{font-family:var(--mono);color:var(--accent);word-break:break-all}

/* ── modal / folha ────────────────────────────────────────────────────────── */
dialog.modal{border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface);color:var(--text);
  padding:0;width:min(560px,calc(100vw - 32px));box-shadow:var(--sombra-2);max-height:calc(100vh - 60px);overflow:auto}
dialog.modal::backdrop{background:rgba(4,7,11,.62);backdrop-filter:blur(3px)}
.modal .mh{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--surface);z-index:2}
.modal .mh h3{font:600 16px var(--display);letter-spacing:-.01em}
.modal .mb{padding:18px;display:grid;gap:14px}
.modal .mf{padding:13px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;
  background:var(--surface-2);flex-wrap:wrap}

/* ── toast ────────────────────────────────────────────────────────────────── */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--bottom-h));z-index:90;
  display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;border-radius:10px;
  background:var(--surface-3);border:1px solid var(--line-2);box-shadow:var(--sombra);font:500 13px var(--ui);
  animation:sobe .2s ease-out}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── skeleton ─────────────────────────────────────────────────────────────── */
.skel{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%;animation:sk 1.6s infinite;border-radius:6px;height:12px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── funil ────────────────────────────────────────────────────────────────── */
.fstep{display:grid;gap:5px;padding:10px 0;border-bottom:1px dashed var(--line)}
.fstep:last-child{border-bottom:0}
.fstep .fl{display:flex;justify-content:space-between;gap:12px;font-size:13px;align-items:baseline}
.fstep .fl b{font-variant-numeric:tabular-nums;white-space:nowrap}
.fstep .fbar{height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.fstep .fbar i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.fstep .fd{font-size:11.5px;color:var(--text-3);line-height:1.5}

/* ── lista compacta ───────────────────────────────────────────────────────── */
.mini{display:grid}
.mini .r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px}
.mini .r:last-child{border-bottom:0}
.mini .r .nm{display:flex;align-items:center;gap:8px;min-width:0;font-weight:500}
.mini .r .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .r .nm small{color:var(--text-3);font-weight:400;white-space:nowrap}
.mini .r .v{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.mini a.r:hover{text-decoration:none}
.mini a.r:hover .nm{color:var(--accent)}

/* ── saúde ────────────────────────────────────────────────────────────────── */
.health{display:grid}
.health .h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:13px}
.health .h:last-child{border-bottom:0}
.health .h b{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.health .h span{color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.health .h .val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-2);font-size:12px;white-space:nowrap}

/* ── linha do tempo ───────────────────────────────────────────────────────── */
.tl{display:grid;position:relative}
.tl .e{display:grid;grid-template-columns:58px 14px minmax(0,1fr);gap:10px;align-items:start;padding:8px 0}
.tl .e time{font:12px var(--mono);color:var(--text-3);padding-top:2px;white-space:nowrap}
.tl .e i{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--text-3);
  box-shadow:0 0 0 3px var(--surface);z-index:1}
.tl .e i.ok{background:var(--ok)}.tl .e i.bad{background:var(--bad)}
.tl .e i.warn{background:var(--warn)}.tl .e i.info{background:var(--info)}
.tl .e div{font-size:13px;min-width:0}
.tl .e div small{display:block;color:var(--text-3);font-size:12px;overflow-wrap:anywhere}
.tl::before{content:"";position:absolute;left:73px;top:14px;bottom:14px;width:1px;background:var(--line)}

/* ── donut / legenda ──────────────────────────────────────────────────────── */
.donut{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut .lg{display:grid;gap:8px;font-size:12.5px;min-width:150px;flex:1}
.donut .lg div{display:flex;align-items:center;gap:8px}
.donut .lg i{width:10px;height:10px;border-radius:3px;flex:none}
.donut .lg b{font-variant-numeric:tabular-nums;margin-left:auto;padding-left:10px;white-space:nowrap}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* ── mapa de calor ────────────────────────────────────────────────────────── */
.heat{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}
.heat i{height:20px;border-radius:3px;background:var(--accent);display:block;min-width:0}
.heat-l{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3);margin-top:5px}

/* ── log ──────────────────────────────────────────────────────────────────── */
.log{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font:11.5px/1.7 var(--mono);color:var(--text-2);overflow-x:auto;white-space:pre;max-height:320px;margin:0}
.log .b{color:var(--bad)}.log .w{color:var(--warn)}.log .d{color:var(--text-3)}

/* ── oferta ───────────────────────────────────────────────────────────────── */
.offer{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:15px 16px;
  display:grid;gap:12px;align-content:start;min-width:0}
.offer .oh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.offer .oh b{font-weight:600;font-size:14.5px}
.offer .oh .chip{margin-left:auto}
.offer .om{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.offer .om div{font-size:11.5px;color:var(--text-3);min-width:0}
.offer .om div b{display:block;font:600 17px/1.2 var(--display);color:var(--text);
  font-variant-numeric:tabular-nums;margin-bottom:1px}
.offer .ol{display:flex;gap:6px;align-items:center;min-width:0}
.offer .ol code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.offer .pe{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--text-3);flex-wrap:wrap}

/* ── reservado (módulo futuro) ────────────────────────────────────────────── */
.wire{border:1px dashed var(--line-2);border-radius:var(--r-m);display:grid;place-items:center;gap:6px;
  color:var(--text-3);font:500 12px/1.5 var(--ui);text-align:center;padding:20px 16px;min-height:90px;
  background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--text-3) 7%,transparent) 9px 10px)}
.wire b{color:var(--text-2);font-size:13px}

/* ── gráficos ─────────────────────────────────────────────────────────────── */
/* Altura AUTOMÁTICA: o SVG tem viewBox, então largura 100% já define a altura
   pela proporção. Com altura fixa, a tela estreita ganhava uma faixa vazia
   acima e abaixo do desenho — o gráfico "flutuava" dentro do cartão. */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--ui)}
.spark svg{display:block}

/* ═══ RESPONSIVO ═══════════════════════════════════════════════════════════
   Cada faixa é uma experiência, não um encolhimento. */

/* ── ≤1360: grid de 6 KPIs vira 3 (o 6 fica ilegível antes de quebrar) ────── */
@media (max-width:1360px){
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1200px){
  .g5,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g84,.g48{grid-template-columns:minmax(0,1fr)}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── ≤1023: TABLET — a sidebar vira gaveta ────────────────────────────────── */
@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(84vw,290px);transform:translateX(-102%);
    transition:transform .22s ease;box-shadow:var(--sombra-2);z-index:70;height:100dvh}
  body.menu .side{transform:none}
  body.menu .backdrop{display:block;position:fixed;inset:0;background:rgba(4,7,11,.55);z-index:60;
    animation:aparece .18s ease-out}
  @keyframes aparece{from{opacity:0}to{opacity:1}}
  body.menu{overflow:hidden}
  .burger{display:inline-flex}
  .topbar{padding:0 14px;gap:8px}
  .page{padding:16px 14px}
  .page-h h1{font-size:22px}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── ≤767: MOBILE — barra inferior, cartões, folhas ───────────────────────── */
@media (max-width:767px){
  :root{--top-h:52px;--bottom-h:60px}
  .so-desktop{display:none!important}
  .so-mobile{display:initial}

  /* barra inferior fixa: as 4 áreas que o operador usa todo dia + menu */
  .bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .bottom a,.bottom button{display:grid;justify-items:center;align-content:center;gap:3px;padding:8px 2px;
    min-height:56px;color:var(--text-3);font:500 10px/1.2 var(--ui);border:0;background:none;cursor:pointer;
    text-decoration:none;position:relative}
  .bottom a.on{color:var(--accent)}
  .bottom a.on::before{content:"";position:absolute;top:0;left:26%;right:26%;height:2px;border-radius:0 0 3px 3px;
    background:var(--accent)}
  .bottom .ic{width:20px;height:20px}
  .bottom .pt{position:absolute;top:6px;right:calc(50% - 18px);width:7px;height:7px;border-radius:50%;
    background:var(--bad);box-shadow:0 0 0 2px var(--surface)}

  .topbar .crumb{display:none}
  .page{padding:14px 12px;gap:14px}
  .page-h{align-items:flex-start;flex-direction:column;gap:10px}
  .page-h h1{font-size:21px}
  .page-h .acoes{width:100%}
  .page-h .acoes .btn{flex:1}

  /* KPI: 2 colunas, o herói ocupa a linha inteira e vem primeiro */
  .g6,.g5,.g4,.g3,.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{min-height:98px;padding:12px 13px}
  .kpi .v{font-size:22px}
  .kpi.hero{grid-column:1/-1;order:-1}
  .kpi.hero .v{font-size:32px}
  .kpi .spark{top:10px;right:11px}
  .kpi:has(.spark) .l{padding-right:78px}
  .kpi[data-ord="1"]{order:-2}

  /* uma coluna onde 2 não cabem */
  .g.um-mobile{grid-template-columns:minmax(0,1fr)}
  .form-g{grid-template-columns:minmax(0,1fr)}
  .offer .om{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* TABELA VIRA CARTÃO — sem rolagem horizontal nas tabelas que decidem.
     Cada linha é um bloco: nome em cima, métricas em grade de 2 com rótulo. */
  .tbl.cards{display:block;font-size:13.5px}
  .tbl.cards thead{display:none}
  .tbl.cards tbody,.tbl.cards tr{display:block}
  .tbl.cards tr{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
    padding:12px 13px;margin-bottom:9px;position:relative}
  .tbl.cards tr[hidden]{display:none}
  .tbl.cards tr:hover td{background:none}
  .tbl.cards td{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:10px;
    align-items:baseline;padding:5px 0;border:0;text-align:left!important;white-space:normal}
  .tbl.cards td::before{content:attr(data-l);font:600 10.5px/1.3 var(--ui);letter-spacing:.06em;
    text-transform:uppercase;color:var(--text-3)}
  .tbl.cards td>.cv{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;
    flex-wrap:wrap;text-align:right;min-width:0}
  .tbl.cards td.frozen>.cv,.tbl.cards td.cabeca>.cv{justify-content:flex-start;text-align:left}
  .tbl.cards td:empty{display:none}
  .tbl.cards td[data-l=""]{grid-template-columns:1fr}
  .tbl.cards td[data-l=""]::before{display:none}
  /* a primeira célula é o cabeçalho do cartão */
  .tbl.cards td.frozen,.tbl.cards td.cabeca{position:static;grid-template-columns:1fr;padding:0 0 9px;
    margin-bottom:6px;border-bottom:1px solid var(--line);font-weight:600;min-width:0}
  .tbl.cards td.frozen::before,.tbl.cards td.cabeca::before{display:none}
  .tbl.cards tr.filho,.tbl.cards tr.neto{margin-left:12px;border-left:2px solid var(--line-2)}
  .tbl.cards tr.filho td:first-child,.tbl.cards tr.neto td:first-child{padding-left:0}
  .tbl.cards tr.tot{background:var(--surface-2);border-color:var(--line-2)}
  .tbl.cards tr.vazio,.tbl.cards tr.nota{display:block}
  .tbl.cards tr.vazio td{text-align:center!important;grid-template-columns:1fr}
  .tbl.cards tr.vazio td::before,.tbl.cards tr.nota td::before{display:none}
  .tbl.cards tr.nota td{grid-template-columns:1fr}
  .tbl.cards .ibar{justify-content:flex-end;min-width:120px}

  /* tabelas de auditoria continuam rolando — ali a comparação linha a linha
     é o ponto, e o cartão atrapalharia */
  .tbl.rola th,.tbl.rola td{white-space:nowrap}

  .card-h{padding:12px 13px}
  .card-b{padding:13px}
  .card-b.lista{padding:2px 13px}
  .tl .e{grid-template-columns:50px 12px minmax(0,1fr);gap:8px}
  .tl::before{left:63px}
  .heat i{height:26px}
  .busca{max-width:none;width:100%}
  .filtros{gap:8px}
  .filtros .seg{width:100%}
  .filtros .seg a,.filtros .seg button{flex:1;justify-content:center}

  /* modal vira folha por baixo */
  dialog.modal{width:100vw;max-width:100vw;max-height:88dvh;border-radius:var(--r-l) var(--r-l) 0 0;
    margin:auto auto 0;border-bottom:0;animation:folha .24s ease-out}
  @keyframes folha{from{transform:translateY(100%)}to{transform:none}}
  .modal .mf{position:sticky;bottom:0;padding-bottom:calc(13px + env(safe-area-inset-bottom,0px))}
  .modal .mf .btn{flex:1}

  .tip .pop{position:fixed;left:12px;right:12px;bottom:calc(var(--bottom-h) + 14px);top:auto;max-width:none;
    width:auto}
  .toasts{bottom:calc(var(--bottom-h) + 16px)}
  .att .t .badge{margin-left:0}
  .log{font-size:11px;max-height:240px}
  .empty{padding:24px 14px}
}

/* ── ≤359: telas realmente estreitas (iPhone SE e afins) ─────────────────── */
@media (max-width:359px){
  .kpi .spark{display:none}
  .kpi:has(.spark) .l{padding-right:0;min-height:0}
  .g6,.g5,.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}
  .kpi.hero{order:-1}
  .offer .om{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-h h1{font-size:20px}
  .bottom a,.bottom button{font-size:9px}
}

/* ── toque: nada depende de hover ─────────────────────────────────────────── */
@media (hover:none){
  .tbl tbody tr:hover td{background:inherit}
  .btn:hover{background:var(--surface-2)}
  .btn.pri:hover{background:var(--accent)}
  .tip:hover .pop{display:none}
  .tip.aberto .pop{display:block}
}

/* ── impressão ────────────────────────────────────────────────────────────── */
@media print{
  .side,.topbar,.bottom,.backdrop,.toasts,.btn,.seg{display:none!important}
  .app{grid-template-columns:1fr}
  .card,.kpi,.att{break-inside:avoid}
  body{background:#fff;color:#000}
}

/* ── texto dentro de gráfico ────────────────────────────────────────────────
   O SVG escala com a largura; um font-size fixo vira 6px no celular. Como o
   tamanho aqui está em unidades do viewBox, aumentá-lo nas telas pequenas
   COMPENSA a redução de escala e o rótulo continua legível. É o que permite
   um único SVG servir desktop e mobile. */
.chart .rt{font-size:12px}
.chart .rt.pq{font-size:10px}
.chart .rt.gr{font-size:21px}
@media (max-width:1023px){
  .chart .rt{font-size:15px}
  .chart .rt.pq{font-size:13px}
}
@media (max-width:767px){
  .chart .rt{font-size:21px}
  .chart .rt.pq{font-size:18px}
  .chart .rt.gr{font-size:22px}
}
@media (max-width:430px){
  .chart .rt{font-size:26px}
  .chart .rt.pq{font-size:22px}
}

/* ── Product Intelligence · vigia de comissão (D-035) ─────────────────────── */
.pi-prod{display:flex;align-items:center;gap:10px;min-width:220px;max-width:360px}
.pi-txt{display:flex;flex-direction:column;min-width:0}
.pi-nome{font-weight:600;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pi-img{width:36px;height:36px;border-radius:7px;object-fit:cover;background:var(--surface-3);flex:none;display:inline-block}
.pi-inline{display:inline;margin:0}
.pi-seta{font-variant-numeric:tabular-nums;white-space:nowrap}
.pi-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.pi-add .btn{margin-top:22px}
@media (max-width:640px){.pi-add{grid-template-columns:1fr}.pi-add .btn{margin-top:0;width:100%}}

/* ── Product Intelligence · cartão de produto (Fase B) ────────────────────── */
.pi-grade{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
/* Front 2.1: a face do cartão mostra só o que decide (foto, nome, preço, taxa,
   esperada, diferença para o empate, selo); o resto fica em "Ver detalhes". */
.pi-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px 12px;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);min-width:0;align-content:start}
.pi-card-img{width:64px;height:64px;border-radius:9px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center}
.pi-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.pi-sem-img{font-size:10.5px;color:var(--text-3);text-align:center;padding:4px}
.pi-card-b{display:grid;gap:4px;min-width:0;align-content:start}
.pi-selos{display:flex;flex-wrap:wrap;gap:4px}
.pi-card-t{margin:0;font:600 13.5px/1.3 var(--ui);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.pi-card-s{font-size:12px;color:var(--text-3);min-width:0;overflow-wrap:anywhere}
.pi-card-s a{color:var(--text-2)}
.pi-card-s .ic{width:11px;height:11px;vertical-align:-1px}
.pi-card-s .pi-p{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.pi-num{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:9px 10px;
  background:var(--surface-2);border-radius:9px}
.pi-num>div{min-width:0}
.pi-num dt{font:600 10px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.pi-num dt small{font:500 10px var(--ui);text-transform:none;letter-spacing:0}
.pi-num dd{margin:3px 0 0;font:600 16px/1.1 var(--display);font-variant-numeric:tabular-nums;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-num dd.ok{color:var(--ok)}.pi-num dd.bad{color:var(--bad)}.pi-num dd.dim{color:var(--text-3)}
.pi-num .pi-robusto{display:inline-block;margin-top:3px;font:600 9.5px/1.4 var(--ui);letter-spacing:.07em;text-transform:uppercase}
.pi-num.pi-sem{display:block;font-size:12px}
.pi-nossos{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--text-3)}
.pi-nossos b{color:var(--text);font-variant-numeric:tabular-nums}
.pi-nossos b.ok{color:var(--ok)}.pi-nossos b.bad{color:var(--bad)}
.pi-det{grid-column:1/-1;min-width:0}
.pi-det>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--ui);
  color:var(--text-2);padding:2px 0;border-radius:4px}
.pi-det>summary::-webkit-details-marker{display:none}
.pi-det>summary::after{content:"→";color:var(--accent)}
.pi-det[open]>summary::after{content:"↑"}
.pi-det>summary:hover{color:var(--text)}
.pi-det-b{display:grid;gap:10px;padding-top:8px;min-width:0}
.pi-det-linha{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pi-det-linha a{color:var(--text-2)}
.pi-det-topo{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start}
.pi-det-topo>div{display:grid;gap:6px;min-width:0}
.pi-det-img{width:120px;height:120px;border-radius:10px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center}
.pi-det-img img{width:100%;height:100%;object-fit:cover;display:block}
.pi-card .pi-det-topo{grid-template-columns:minmax(0,1fr)}
.pi-card .pi-det-img{display:none}
.pi-card-completo{grid-template-columns:96px minmax(0,1fr);gap:12px}
.pi-card-completo .pi-card-img{width:96px;height:96px}
.pi-card-completo .pi-card-b{gap:6px}
.pi-preco{font-size:13px;font-variant-numeric:tabular-nums}
.pi-com{display:grid;gap:6px;background:var(--surface-2);border-radius:9px;padding:8px 10px}
.pi-taxa{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pi-taxa b{font:600 20px/1 var(--display);color:var(--ok);font-variant-numeric:tabular-nums}
.pi-taxa span{font-size:11.5px;color:var(--text-3)}
.pi-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.pi-vals div{min-width:0}
.pi-vals dt{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;display:flex;gap:4px;
  align-items:center;flex-wrap:wrap}
.pi-vals dd{margin:2px 0 0;font:600 13px var(--ui);font-variant-numeric:tabular-nums;color:var(--text)}
.pi-empate{font-size:12px;font-weight:600;line-height:1.5}
.pi-empate .tip{margin-left:4px;vertical-align:middle}
.pi-est{display:block;margin-top:3px}
.pi-empate.ok{color:var(--ok)}
.pi-empate.bad{color:var(--bad)}
.pi-empate.dim{color:var(--text-3);font-weight:400}
.pi-robusto{font-size:11.5px;color:var(--ok);line-height:1.4}
.pi-base{font-size:11px;color:var(--text-3);line-height:1.4}
.pi-motivos{margin:0;padding-left:16px;font-size:12px;color:var(--text-2);display:grid;gap:2px}
.pi-av{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--text-3);border-top:1px dashed var(--line-2);padding-top:6px}
.pi-av b{color:var(--text);margin-left:4px;font-variant-numeric:tabular-nums}
.pi-meta{font-size:11.5px;color:var(--text-3)}
.pi-meta code{font-size:10.5px}
.pi-acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pi-confirma{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pi-form-criar{display:grid;gap:12px;margin-top:12px}
.pi-add-inline{grid-template-columns:minmax(0,1fr) auto;min-width:260px}
.pi-add-inline .btn{margin-top:18px}
@media (max-width:640px){
  .pi-card-completo{grid-template-columns:72px minmax(0,1fr)}
  .pi-card-completo .pi-card-img{width:72px;height:72px}
  .pi-add-inline{min-width:0}
}

/* ── Product Intelligence · descobrir (Fase C) ─────────────────────────────── */
.pi-busca{display:grid;gap:12px}
.pi-busca-l{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.pi-filtros{border:1px dashed var(--line-2);border-radius:9px;padding:8px 12px}
.pi-filtros summary{cursor:pointer;font-size:12.5px;color:var(--text-2);padding:2px 0}
.pi-filtros[open] summary{margin-bottom:10px}
.pi-chips{display:flex;flex-wrap:wrap;gap:6px}
.pi-chips .chip{text-decoration:none}
.pi-res-h{font-size:13px;color:var(--text-2);margin:4px 0 12px;line-height:1.5}
.pi-res-h b{color:var(--text)}
.pi-pag{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 4px}

/* ── Product Intelligence · já testados (Fase D) ───────────────────────────── */
#tb-testados td.n,#tb-ofertas-sem-produto td.n,#tb-vigia-produtos td.n{white-space:nowrap}
#tb-testados td:nth-child(2){min-width:210px}
#tb-testados .sub,#tb-ofertas-sem-produto .sub{max-width:280px}

/* ── Product Intelligence · oportunidades de hoje (Fase E) ─────────────────── */
.pi-lista{margin:0;padding-left:0;list-style:none;display:grid;gap:8px;font-size:13px;line-height:1.5}
.pi-lista li{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.pi-abaixo{margin-top:12px}
.pi-espec{gap:6px;font-size:12.5px;color:var(--text-2)}
.pi-espec li b{font-weight:600;color:var(--text)}

/* ═══ FRONT 2.1 · consolidação (19/09/2026) ═══════════════════════════════
   NÚMERO PRIMEIRO, EXPLICAÇÃO DEPOIS. As peças abaixo tiram o texto da
   superfície sem apagar nada: a linha de aviso substitui o banner, a gaveta
   guarda a metodologia e os detalhes do produto, e as listas longas vêm em
   páginas de 24. Regra: no máximo UM banner grande (.al) por página. */

/* ── linha de aviso: problema · impacto · ação ────────────────────────────── */
.lins{display:grid;gap:6px}
.lin{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);font-size:13px;line-height:1.4;min-width:0}
.lin>.ic{flex:none;color:var(--text-3)}
.lin .lin-t{flex:1;min-width:0;color:var(--text-2)}
.lin .lin-t b{color:var(--text);font-weight:600}
.lin .lin-v{flex:none}
.lin .lin-a{flex:none;display:flex;gap:14px;align-items:center;font:600 12.5px var(--ui);white-space:nowrap}
.lin.bad{border-color:color-mix(in srgb,var(--bad) 32%,var(--line));background:linear-gradient(90deg,var(--bad-soft),transparent 70%),var(--surface)}
.lin.bad>.ic{color:var(--bad)}
.lin.warn{border-color:color-mix(in srgb,var(--warn) 30%,var(--line));background:linear-gradient(90deg,var(--warn-soft),transparent 70%),var(--surface)}
.lin.warn>.ic{color:var(--warn)}
.lin.info>.ic{color:var(--info)}
.lin.ok>.ic{color:var(--ok)}
.lin-det{border-radius:var(--r-m);border:1px solid var(--line);background:var(--surface);min-width:0}
.lin-det>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;cursor:pointer;font-size:13px;line-height:1.4}
.lin-det>summary::-webkit-details-marker{display:none}
.lin-det>summary .lin-t{flex:1;min-width:0;color:var(--text-2)}
.lin-det>summary .lin-t b{color:var(--text)}
.lin-det>summary .lin-a{font:600 12.5px var(--ui);color:var(--accent);white-space:nowrap}
.lin-det .lin-abre::after{content:" ↓"}
.lin-det[open] .lin-abre::after{content:" ↑"}
.lin-det.bad{border-color:color-mix(in srgb,var(--bad) 32%,var(--line));background:linear-gradient(90deg,var(--bad-soft),transparent 70%),var(--surface)}
.lin-det.bad>summary>.ic{color:var(--bad)}
.lin-det.warn{border-color:color-mix(in srgb,var(--warn) 30%,var(--line));background:linear-gradient(90deg,var(--warn-soft),transparent 70%),var(--surface)}
.lin-det.warn>summary>.ic{color:var(--warn)}
.lin-det[open]>summary{border-bottom:1px solid var(--line)}
.lin-det .pi-lista{padding:10px 14px}
.lin-det .lin-rodape{padding:0 14px 12px;font:600 12.5px var(--ui)}
.nota-num{font-size:12px;color:var(--text-3);margin-top:10px;line-height:1.5;font-variant-numeric:tabular-nums}
.nota-num b{color:var(--text-2)}
.nota-num.warn,.nota-num.warn b{color:var(--warn)}

/* ── avisos: o que o selo do menu está contando (23/09/2026) ───────────────
 * Fica entre o cabeçalho e o conteúdo, em qualquer tela com aviso aberto. Não
 * é banner: são as mesmas linhas curtas do resto do painel, com duas saídas
 * (Ver · Dispensar) para o contador nunca virar enfeite. */
.avisos{display:grid;gap:8px;margin:0 0 18px}
.avisos .av-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 13px var(--ui);color:var(--text)}
.avisos .av-h .dim{font-weight:400;font-size:12.5px}
.avisos .av-h .sp{flex:1}
.avisos .lin .lin-a{gap:8px}
.avisos .av-f{display:inline}
.av-mais{font-size:12.5px;color:var(--text-3);padding:2px 12px}
.av-d{font-size:12.5px}
.av-d>summary{list-style:none;cursor:pointer;color:var(--text-3);padding:2px 0}
.av-d>summary::-webkit-details-marker{display:none}
.av-d>summary::before{content:"▸ ";color:var(--text-3)}
.av-d[open]>summary::before{content:"▾ "}
.av-d>summary:hover{color:var(--text-2)}
.av-l{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.av-l li{display:flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--surface-2);color:var(--text-2)}
.av-l li>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* no celular a linha já quebra sozinha (regra de .lin em 767px, com recuo de
 * 26px): aqui só não se briga com ela — largura fixa somada ao recuo era o que
 * empurrava o botão "Dispensar" para fora do cartão */
@media (max-width:767px){
  .avisos .lin .lin-a{gap:6px 16px}
  .av-l li{flex-wrap:wrap;gap:4px 10px}
  .av-l li>span:first-child{flex-basis:100%;white-space:normal}
}

/* ── ajuda: link, gaveta e página ─────────────────────────────────────────── */
a.aj{display:inline-flex;align-items:center;gap:5px;font:500 12.5px var(--ui);color:var(--text-2);white-space:nowrap}
a.aj .ic{width:14px;height:14px;color:var(--info)}
a.aj:hover{color:var(--text);text-decoration:none}
a.aj:hover .ic{color:var(--accent)}
.card-h a.aj,.sub a.aj{font-size:12px}
/* só o ícone (cabeçalho de cartão estreito): área de toque maior sem crescer o desenho */
a.aj[aria-label]{padding:7px;margin:-7px;border-radius:8px}
a.aj[aria-label] .ic{width:16px;height:16px}
.aj-topo .ic{color:var(--info)}
.tip .pop a.pop-mais{display:block;margin-top:7px;font:600 12px var(--ui);color:var(--accent)}
dialog.gaveta{position:fixed;inset:0 0 0 auto;margin:0;width:min(560px,94vw);max-width:none;height:100dvh;max-height:100dvh;
  border:0;border-left:1px solid var(--line-2);border-radius:0;background:var(--surface);color:var(--text);padding:0;
  box-shadow:var(--sombra-2);overflow:hidden}
dialog.gaveta[open]{display:flex;flex-direction:column;animation:gaveta .2s ease-out}
@keyframes gaveta{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
dialog.gaveta::backdrop{background:rgba(4,7,11,.55);backdrop-filter:blur(2px)}
.gv-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px 13px 18px;border-bottom:1px solid var(--line);flex:none}
.gv-h h3{font:600 16px/1.25 var(--display);letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gv-b{padding:16px 18px 28px;overflow-y:auto;flex:1;overscroll-behavior:contain;display:grid;gap:12px;align-content:start}
.gv-b>.pi-det-b{padding-top:0}
.gv-foto{width:120px;height:120px;border-radius:10px;overflow:hidden;background:var(--surface-3);flex:none}
.gv-foto img{width:100%;height:100%;object-fit:cover;display:block}
.gv-rodape{font-size:12.5px;padding-top:4px;border-top:1px dashed var(--line);display:flex;gap:14px;flex-wrap:wrap}
.gv-carregando{display:grid;gap:10px}
.aj{display:grid;gap:18px;min-width:0}
.aj-nav{display:flex;flex-wrap:wrap;gap:12px 20px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-m);font-size:12.5px}
.aj-nav-g{display:flex;flex-wrap:wrap;gap:3px 12px;align-items:baseline;min-width:0}
.aj-nav-g b{font:600 10.5px/1.7 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);width:100%}
.aj-nav a{color:var(--text-2)}
.aj-nav a:hover{color:var(--accent);text-decoration:none}
.aj-g{display:grid;gap:10px;min-width:0}
.aj-g h2{font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:6px 0 2px}
.aj-sec{border:1px solid var(--line);border-radius:var(--r-m);padding:13px 15px;background:var(--surface);scroll-margin-top:14px;
  min-width:0;transition:border-color .3s,box-shadow .3s}
.aj-sec h3{font:600 14.5px/1.3 var(--ui);margin-bottom:6px}
.aj-sec p,.aj-sec li{font-size:13px;line-height:1.6;color:var(--text-2);max-width:74ch}
.aj-sec p{margin:6px 0}
.aj-sec ul{margin:6px 0;padding-left:18px;display:grid;gap:4px}
.aj-sec b{color:var(--text)}
.aj-f{font:500 12px/1.55 var(--mono);color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;
  padding:7px 10px;margin:6px 0;overflow-x:auto;white-space:nowrap}
.aj-hoje{font-size:12.5px;color:var(--text-2);background:var(--ok-soft);border-radius:7px;padding:6px 10px;margin:6px 0;
  font-variant-numeric:tabular-nums}
.aj-hoje b{color:var(--ok)}
.aj-sec.alvo{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.aj-pagina{grid-template-columns:250px minmax(0,1fr);align-items:start}
.aj-pagina .aj-nav{position:sticky;top:calc(var(--top-h) + 16px);flex-direction:column;flex-wrap:nowrap;
  max-height:calc(100vh - var(--top-h) - 32px);overflow-y:auto}
.aj-conteudo{display:grid;gap:18px;min-width:0}

/* ── Product Intelligence · barra do radar, especulativas, carregar mais ─── */
.pi-barra{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2);min-width:0}
.pi-barra b{color:var(--text)}
.pi-barra .sp{flex:1}
.pi-espec li{display:block}
.pi-esp-d>summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  padding:7px 10px;border-radius:8px;min-width:0}
.pi-esp-d>summary::-webkit-details-marker{display:none}
.pi-esp-d>summary:hover,.pi-esp-d[open]>summary{background:var(--surface-2)}
.pi-esp-n{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:500}
.pi-esp-v{display:flex;gap:12px;flex:none;font-variant-numeric:tabular-nums;color:var(--text-2);font-size:12.5px;align-items:baseline}
.pi-esp-v .pi-robusto{font:600 9.5px var(--ui);text-transform:uppercase;letter-spacing:.07em}
.pi-esp-b{padding:8px 10px 12px;font-size:12.5px;color:var(--text-2);display:grid;gap:8px;line-height:1.55}
.pi-mais-w{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.pi-mais-w:empty{display:none}
.pi-mais[aria-busy="true"]{opacity:.6;pointer-events:none}
.pi-carregando{display:grid;gap:10px;padding:18px;border:1px dashed var(--line-2);border-radius:var(--r-m)}
.pi-carregando p{margin:0;font-size:13px;color:var(--text-2)}
.pi-add-d .pi-add{margin-top:10px}

/* ── tabela no celular: só o essencial, o resto num toque ─────────────────── */
.ver-tudo{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ver-tudo-l{display:none}

@media (max-width:1023px){
  .aj-pagina{grid-template-columns:minmax(0,1fr)}
  .aj-pagina .aj-nav{position:static;flex-direction:row;flex-wrap:wrap;max-height:none}
}
@media (max-width:767px){
  .tbl.cards td.sec{display:none}
  .ver-tudo:checked~.tw .tbl.cards td.sec{display:grid}
  .ver-tudo-l{display:inline-flex;align-items:center;min-height:32px;margin:2px 0 6px;font:600 12.5px var(--ui);color:var(--accent);cursor:pointer}
  .card-b.tight>.ver-tudo-l,.pi-filtros>.ver-tudo-l{margin:10px 13px 2px}
  .ver-tudo-l::after{content:"ver todas as colunas ↓"}
  .ver-tudo:checked+.ver-tudo-l::after{content:"só o essencial ↑"}
  .ver-tudo:focus-visible+.ver-tudo-l{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
  .lin{flex-wrap:wrap;align-items:flex-start;padding:9px 11px}
  .lin>.ic{margin-top:1px}
  .lin .lin-t{flex-basis:calc(100% - 26px)}
  .lin .lin-v{margin-left:26px}
  .lin .lin-a{margin-left:26px;flex-wrap:wrap;white-space:normal}
  .lin-det>summary{flex-wrap:wrap;align-items:flex-start}
  .lin-det>summary .lin-t{flex-basis:calc(100% - 26px)}
  .lin-det>summary .lin-a{margin-left:26px}
  dialog.gaveta{inset:auto 0 0 0;width:100vw;height:auto;max-height:88dvh;border-left:0;border-top:1px solid var(--line-2);
    border-radius:var(--r-l) var(--r-l) 0 0}
  dialog.gaveta[open]{animation:folha .24s ease-out}
  .gv-b{padding:14px 14px calc(24px + env(safe-area-inset-bottom,0px))}
  .pi-det-topo{grid-template-columns:88px minmax(0,1fr)}
  .pi-det-img{width:88px;height:88px}
  .pi-grade{grid-template-columns:minmax(0,1fr)}
  .pi-num dd{font-size:15px}
  .pi-esp-d>summary{flex-direction:column;gap:3px}
  .pi-esp-n{white-space:normal}
  .pi-esp-v{flex-wrap:wrap;gap:3px 12px}
  .pi-barra{font-size:12px}
}
@media print{ dialog.gaveta,.ver-tudo-l{display:none!important} }