/* NUTRIX Contingencia - sistema visual
   Tema unico escuro. A "placa" (apelido da caixa em monoespacada, com barra de farol) e a assinatura
   do painel: e por ela que a equipe acha uma conta. */
:root {
  --bg: #0e1116;
  --surface: #151920;
  --surface-2: #1c2129;
  --line: #262d38;
  --line-strong: #364050;
  --ink: #e8ecf2;
  --ink-2: #b6bfcc;
  --muted: #8b95a5;
  --accent: #8fb0ff;
  --accent-ink: #0b1220;
  --accent-soft: rgba(143, 176, 255, .14);
  --danger: #ff6161;
  --ok: #3ddc8a;

  --st-suspensa: #ff5c5c;
  --st-cancelada: #8a93a3;
  --st-verificacao: #ffa53d;
  --st-reprovados: #ff8a3d;
  --st-pausada: #f2d054;
  --st-sem_gasto: #f2d054;
  --st-aviso: #f2d054;
  --st-ativa: #3ddc8a;
  --st-desconhecido: #5b6472;

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --nav-h: 60px; --bottom-nav-h: 64px;
  --t: 160ms ease-out;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 15px; line-height: 1.5; font-feature-settings: "tnum" 1, "cv11" 1;
  min-height: 100dvh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
p { margin: 0 0 var(--s3); }
code, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-soft); }

/* ---------- cabecalho ---------- */
.top {
  position: sticky; top: 0; z-index: 40; height: var(--nav-h);
  background: rgba(14, 17, 22, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: 1280px; margin: 0 auto; height: 100%; padding: 0 var(--s4);
  display: flex; align-items: center; gap: var(--s4);
}
.brand { display: flex; align-items: baseline; gap: 6px; color: var(--ink); font-weight: 700; letter-spacing: .06em; font-size: 14px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand b { color: var(--accent); font-weight: 700; }
.brand small { font-weight: 500; color: var(--muted); letter-spacing: .12em; font-size: 10px; }
.nav { display: flex; gap: 2px; margin-left: var(--s2); }
.nav a {
  color: var(--ink-2); font-weight: 500; font-size: 14px; padding: 8px 12px; border-radius: var(--r-sm);
  transition: background var(--t), color var(--t);
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.nav a .n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; font-family: var(--mono); }

.search { margin-left: auto; position: relative; flex: 0 1 320px; }
.search input {
  width: 100%; height: 40px; padding: 0 12px 0 40px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 14px;
  transition: border-color var(--t), box-shadow var(--t);
}
.search input::placeholder { color: var(--muted); font-family: var(--font); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.search svg { position: absolute; left: 14px; top: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search kbd { position: absolute; right: 12px; top: 11px; font: 11px var(--mono); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; }

/* ---------- indicador ao vivo ---------- */
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 220, 138, .18); animation: pulse 2s ease-in-out infinite; }
.live.off .live-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(255, 97, 97, .18); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 899px) { .live span:last-child { display: none; } }

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid transparent; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: filter var(--t), transform 80ms ease-out, background var(--t);
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sec { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.btn.sec:hover { background: #242a34; }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(255, 97, 97, .4); }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }
form.inline { display: inline; }

/* ---------- layout ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: var(--s5) var(--s4) calc(var(--s8) + var(--bottom-nav-h)); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.section { margin-top: var(--s6); }
.section > h3 { margin-bottom: var(--s3); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.card + .card { margin-top: var(--s4); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.muted { color: var(--muted); font-size: 13px; }
.flash { border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s4); font-weight: 500; border: 1px solid; }
.flash.ok { color: var(--ok); border-color: rgba(61, 220, 138, .35); background: rgba(61, 220, 138, .08); }
.flash.bad { color: var(--danger); border-color: rgba(255, 97, 97, .35); background: rgba(255, 97, 97, .08); }
.empty { padding: var(--s8) var(--s4); text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty b { display: block; color: var(--ink-2); margin-bottom: 4px; font-weight: 600; }

/* ---------- placa (assinatura) ---------- */
.plate {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600;
  font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 3px 10px 3px 8px; line-height: 1.4; white-space: nowrap; box-shadow: inset 3px 0 0 var(--st, var(--st-desconhecido));
}
.plate:hover { text-decoration: none; border-color: var(--accent); }
.plate.lg { font-size: 28px; padding: 6px 18px 6px 14px; border-radius: var(--r); box-shadow: inset 6px 0 0 var(--st, var(--st-desconhecido)); }
.plate.dim { color: var(--muted); }

/* farol */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--st, var(--st-desconhecido)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st, #5b6472) 22%, transparent); flex: none; }
.st { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.st-suspensa { --st: var(--st-suspensa); } .st-cancelada { --st: var(--st-cancelada); }
.st-verificacao { --st: var(--st-verificacao); } .st-reprovados { --st: var(--st-reprovados); }
.st-pausada { --st: var(--st-pausada); } .st-sem_gasto { --st: var(--st-sem_gasto); } .st-aviso { --st: var(--st-aviso); }
.st-ativa { --st: var(--st-ativa); } .st-desconhecido { --st: var(--st-desconhecido); }

/* status de caso */
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tag.novo { color: #ffb4b4; border-color: rgba(255, 92, 92, .45); background: rgba(255, 92, 92, .12); }
.tag.rascunho { color: #ffd98a; border-color: rgba(255, 165, 61, .45); background: rgba(255, 165, 61, .12); }
.tag.aprovado { color: #9fe8c3; border-color: rgba(61, 220, 138, .45); background: rgba(61, 220, 138, .12); }
.tag.enviado { color: #bcd0ff; border-color: rgba(143, 176, 255, .45); background: rgba(143, 176, 255, .12); }
.tag.reativado { color: #3ddc8a; border-color: rgba(61, 220, 138, .6); background: rgba(61, 220, 138, .16); }
.tag.negado { color: #ff8a8a; border-color: rgba(255, 92, 92, .6); background: rgba(255, 92, 92, .18); }
.tag.encerrado { color: var(--muted); }

/* ---------- faixa de contadores ---------- */
.strip { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 500; white-space: nowrap; transition: border-color var(--t), background var(--t);
}
.chip b { font-family: var(--mono); font-size: 16px; color: var(--ink); font-weight: 600; }
.chip:hover { border-color: var(--line-strong); background: var(--surface-2); text-decoration: none; }
.chip[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.chip.zero { opacity: .55; }

/* ---------- filtros ---------- */
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin: var(--s4) 0 var(--s3); }
.filters select, .filters input {
  height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); min-width: 0;
}
.filters input { flex: 1 1 160px; }
.filters select { flex: 0 1 auto; }
.filters .count { color: var(--muted); font-size: 13px; margin-left: auto; }

/* ---------- lista responsiva (tabela no desktop, cartoes no celular) ---------- */
.list { display: flex; flex-direction: column; gap: var(--s2); }
.list .hd { display: none; }
.row {
  display: grid; grid-template-columns: var(--cols); gap: var(--s3); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4);
  color: var(--ink); transition: border-color var(--t), background var(--t);
}
a.row:hover { border-color: var(--line-strong); background: var(--surface-2); text-decoration: none; }
.row .c { min-width: 0; }
.row .c.main { font-weight: 600; }
.row .c .lbl { display: none; }
.row .c.num { font-family: var(--mono); font-size: 13px; }
.row .c.dim { color: var(--muted); font-size: 13px; }
.row .c.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list.tight .row { padding: var(--s2) var(--s4); }

@media (min-width: 900px) {
  .list { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
  .list .hd { display: grid; grid-template-columns: var(--cols); gap: var(--s3); padding: 10px var(--s4); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
  .row { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px var(--s4); background: transparent; }
  a.row:hover { background: var(--surface-2); }
}
@media (max-width: 899px) {
  .row { grid-template-columns: 1fr 1fr; }
  .row .c { font-size: 14px; }
  .row .c.main { grid-column: 1 / -1; font-size: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .row .c.wide { grid-column: 1 / -1; }
  .row .c .lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 1px; }
  .row .c.hide-m { display: none; }
}

/* ---------- prazo ---------- */
.due { font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line-strong); white-space: nowrap; }
.due.soon { color: #ffb347; border-color: rgba(255, 165, 61, .5); }
.due.late { color: var(--danger); border-color: rgba(255, 97, 97, .5); }

/* ---------- pagina da conta / caso ---------- */
.hero { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.hero .title { min-width: 0; }
.hero .title h1 { font-size: 22px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.fact .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fact .v { font-size: 16px; font-weight: 600; margin-top: 2px; font-family: var(--mono); }
.fact .v.txt { font-family: var(--font); font-size: 15px; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 110px 1fr; gap: var(--s3); padding: 8px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline .t { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.timeline .k { font-weight: 600; margin-right: 6px; }
textarea.appeal { width: 100%; min-height: 320px; padding: 12px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); line-height: 1.6; resize: vertical; }
pre.mail { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); font-size: 13px; line-height: 1.55; max-height: 480px; overflow: auto; }
.risk-alto { color: var(--danger); font-weight: 700; } .risk-medio { color: var(--st-verificacao); font-weight: 700; } .risk-baixo { color: var(--ok); font-weight: 700; }
.analysis ul { margin: 4px 0 10px; padding-left: 20px; }
.analysis li { margin: 3px 0; }
.form-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.form-row input { height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); flex: 1 1 180px; min-width: 0; }
.note-form input { flex: 1 1 240px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; }
.kv .k { color: var(--muted); }
.ok { color: var(--ok); font-weight: 600; } .bad { color: var(--danger); font-weight: 600; }

/* ---------- menu inferior (celular) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: rgba(14, 17, 22, .94); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 500; position: relative; }
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a[aria-current="page"] { color: var(--accent); }
.bottom-nav a:hover { text-decoration: none; }
.bottom-nav .n { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font: 700 10px/16px var(--mono); text-align: center; }

@media (min-width: 900px) {
  .bottom-nav { display: none; }
  .hide-d { display: none !important; }
  .page { padding-bottom: var(--s10); }
}
@media (max-width: 899px) {
  .nav { display: none; }
  .hide-m-inline { display: none; }
  .top-in { gap: var(--s3); }
  .search { flex: 1 1 auto; }
  .search kbd { display: none; }
  .brand small { display: none; }
  .two { grid-template-columns: 1fr; }
  .page { padding-left: var(--s4); padding-right: var(--s4); }
  .hero .title h1 { font-size: 19px; }
  .plate.lg { font-size: 22px; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.verif{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ok);border:1px solid rgba(61,220,138,.4);background:rgba(61,220,138,.1);border-radius:999px;padding:1px 8px;white-space:nowrap}

/* ---------- menu em 5 secoes (Fase 1 da auditoria de design, 18/09) ---------- */
.nav a, .menu summary { white-space: nowrap; }
.search { min-width: 180px; }
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px;
  color: var(--ink-2); font-weight: 500; font-size: 14px; padding: 8px 12px; border-radius: var(--r-sm);
  transition: background var(--t), color var(--t);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 14px; height: 14px; transition: transform var(--t); }
.menu[open] summary svg { transform: rotate(180deg); }
.menu summary:hover, .menu[open] summary, .menu summary[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 270px; padding: var(--s1);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.nav .menu-pop a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--ink); }
.menu-pop small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 1px; }
@media (max-width: 1199px) { .live #live-txt { display: none; } .search kbd { display: none; } }

/* barra do celular: 4 atalhos + "Mais" */
.more { position: static; }
.more summary {
  list-style: none; cursor: pointer; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--muted); font-size: 11px; font-weight: 500;
}
.more summary::-webkit-details-marker { display: none; }
.more summary svg { width: 22px; height: 22px; }
.more[open] summary, .more summary[aria-current="page"] { color: var(--accent); }
.more-sheet {
  position: fixed; left: var(--s3); right: var(--s3); bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--s2));
  padding: var(--s2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .5);
}
.bottom-nav .more-sheet a { flex-direction: row; justify-content: flex-start; gap: var(--s3); height: 48px; padding: 0 var(--s3); font-size: 15px; color: var(--ink); border-radius: var(--r-sm); }
.bottom-nav .more-sheet a:hover { background: var(--surface-2); }

/* ---------- abas (visoes da lista de contas e ficha da conta) ---------- */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); margin: 0 0 var(--s4); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: var(--s2) var(--s3) var(--s3); color: var(--ink-2); font-weight: 500; font-size: 14px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* cabecalho da ficha da conta (Cadastro / BOV / Site usam o mesmo topo do Resumo) */
.ficha-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.ficha-head .title { min-width: 0; }
.ficha-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

@media (max-width: 899px) {
  .brand b { display: none; }
  .search { min-width: 0; }
  .search:focus-within { position: absolute; left: var(--s4); right: var(--s4); z-index: 45; }
}

/* ---------- Urgente como fila de trabalho (18/09) ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s2); }
.kpi {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  transition: border-color var(--t), background var(--t);
}
.kpi:hover { border-color: var(--line-strong); background: var(--surface-2); text-decoration: none; }
.kpi b { font: 600 30px/1.1 var(--mono); color: var(--ink); }
.kpi span { font-weight: 600; color: var(--ink); }
.kpi small { color: var(--muted); font-size: 12px; }
.kpi.forte { border-color: color-mix(in srgb, var(--st-suspensa) 45%, transparent); background: color-mix(in srgb, var(--st-suspensa) 8%, var(--surface)); }
.kpi.forte b { color: var(--st-suspensa); }

.grupo { scroll-margin-top: calc(var(--nav-h) + var(--s4)); }
.grupo-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.grupo-head h2 { display: flex; align-items: center; gap: var(--s2); font-size: 17px; }
.grupo-head p { margin: 0; font-size: 13px; flex: 1 1 320px; }
.grupo-head .cnt { font: 600 13px var(--mono); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.grupo details > summary { list-style: none; cursor: pointer; }
.grupo details > summary::-webkit-details-marker { display: none; }
.grupo details[open] > summary .muted { visibility: hidden; }

.row .c .sm { font-size: 12px; margin-top: 1px; }
.plate.vazia { color: var(--muted); font-family: var(--font); font-weight: 500; font-size: 12px; }
.acao-c { text-align: right; }
.acao { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent); padding: 4px 10px; border-radius: var(--r-sm); background: var(--accent-soft); white-space: nowrap; }
a.row:hover .acao { background: var(--accent); color: var(--accent-ink); }

@media (max-width: 899px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--s3); }
  .kpi b { font-size: 24px; }
  .acao-c { text-align: left; }
}

/* cabecalho nao estoura em telas medias (1000-1280px): marca curta, botao so com icone */
@media (min-width: 900px) and (max-width: 1279px) {
  .brand b { display: none; }
  .top-in { gap: var(--s3); }
  .top .btn .hide-m-inline { display: none; }
  .search { flex: 1 1 200px; min-width: 140px; }
  .nav a, .menu summary { padding: 8px 10px; }
}