@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Paleta alinhada ao ecossistema Argus (argusbc.com.br) — azul/ciano no
   lugar do verde/âmbar original. Os nomes de variável (--teal, --amber etc.)
   continuam os mesmos (80+ usos no arquivo) pra não precisar tocar em cada
   regra; só o valor de cor muda. */
:root {
  --ink: #16232B;
  --ink-soft: #52616C;
  --paper: #F6F7F5;
  --panel: #FFFFFF;
  --border: #DCE3E0;
  --teal: #2453EB;
  --teal-dark: #1B3FC4;
  --teal-tint: #E8F1FE;
  --amber: #06B6D4;
  --amber-tint: #E0FBFF;
  /* Superfície sempre escura (topbar, cabeçalho do card, tooltip) — não
     inverte no modo escuro, ao contrário de --ink (que é texto). */
  --navy: #0B1220;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
  --radius: 10px;
  /* Fundo degradê + grade do body — mesma receita do argusbc.com.br
     (glow radial em ciano/azul sobre uma grade de 44px), com os tons
     desta paleta no lugar dos deles. */
  --grid-rgb: 6, 182, 212;
  --page-bg:
    radial-gradient(circle at 82% 8%, rgba(6, 182, 212, .14), transparent 34%),
    radial-gradient(circle at 8% 20%, rgba(36, 83, 235, .08), transparent 32%),
    linear-gradient(180deg, #fff, var(--paper) 42%, #fff);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E4E9EA;
    --ink-soft: #93A3A8;
    --paper: #10161A;
    --panel: #1A2328;
    --border: #2E3A3F;
    --teal: #5B8DEF;
    --teal-dark: #8AB4FF;
    --teal-tint: #142138;
    --amber: #22D3EE;
    --amber-tint: #0F2A30;
    --grid-rgb: 34, 211, 238;
    --page-bg:
      radial-gradient(circle at 82% 8%, rgba(34, 211, 238, .10), transparent 34%),
      radial-gradient(circle at 8% 20%, rgba(91, 141, 239, .07), transparent 32%),
      linear-gradient(180deg, #10161A, #141d24 42%, #10161A);
  }
}

/* Escolha manual (botão no topbar) — precisa vencer o prefers-color-scheme
   acima quando o usuário discorda da preferência do sistema operacional.
   [data-theme] tem mais especificidade que :root sozinho, então vence
   independentemente da ordem no arquivo. */
:root[data-theme="light"] {
  --ink: #16232B;
  --ink-soft: #52616C;
  --paper: #F6F7F5;
  --panel: #FFFFFF;
  --border: #DCE3E0;
  --teal: #2453EB;
  --teal-dark: #1B3FC4;
  --teal-tint: #E8F1FE;
  --amber: #06B6D4;
  --amber-tint: #E0FBFF;
  --grid-rgb: 6, 182, 212;
  --page-bg:
    radial-gradient(circle at 82% 8%, rgba(6, 182, 212, .14), transparent 34%),
    radial-gradient(circle at 8% 20%, rgba(36, 83, 235, .08), transparent 32%),
    linear-gradient(180deg, #fff, var(--paper) 42%, #fff);
}
:root[data-theme="dark"] {
  --ink: #E4E9EA;
  --ink-soft: #93A3A8;
  --paper: #10161A;
  --panel: #1A2328;
  --border: #2E3A3F;
  --teal: #5B8DEF;
  --teal-dark: #8AB4FF;
  --teal-tint: #142138;
  --amber: #22D3EE;
  --amber-tint: #0F2A30;
  --grid-rgb: 34, 211, 238;
  --page-bg:
    radial-gradient(circle at 82% 8%, rgba(34, 211, 238, .10), transparent 34%),
    radial-gradient(circle at 8% 20%, rgba(91, 141, 239, .07), transparent 32%),
    linear-gradient(180deg, #10161A, #141d24 42%, #10161A);
}

* { box-sizing: border-box; }

body {
  position: relative;
  margin: 0;
  font-family: var(--sans);
  background: var(--page-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Grade sutil de 44px sobre o degradê, esmaecendo perto do rodapé — igual
   ao efeito de fundo do argusbc.com.br. Absoluta (rola junto com a página,
   cobrindo a altura real do conteúdo) — com "fixed" a máscara ficava presa
   à altura da janela e criava uma linha de corte visível parada na tela
   conforme rolava. Sem interceptar clique, então não interfere na página. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--grid-rgb), .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-rgb), .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 55%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 55%);
}

body > * {
  position: relative;
  z-index: 1;
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--teal);
}
.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.logo-mark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo-mark-icon { height: 24px; width: auto; display: block; }
.logo-mark-fatura { color: var(--amber); }
.logo-sub {
  font-size: 0.85rem;
  color: #A9B7BC;
}
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-home-link {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: #A9B7BC;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid #2E3A42;
  border-radius: 999px;
  padding: 7px 16px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.topbar-home-link:hover { color: #fff; border-color: var(--teal); background: rgba(36, 83, 235, 0.15); }

/* Abaixo de ~420px (ex: iPhone SE/mini em 390px) o topbar-inner não cabia
   numa linha só — o botão de tema (🌙) ficava cortado na borda direita.
   Encolhe logo/pill e permite quebrar em 2 linhas como último recurso. */
@media (max-width: 480px) {
  .topbar-inner { padding: 12px 16px; gap: 8px; flex-wrap: wrap; }
  .logo-mark { font-size: 0.92rem; gap: 6px; }
  .logo-mark-icon { height: 20px; }
  .topbar-actions { gap: 6px; }
  .topbar-home-link { padding: 6px 11px; font-size: 0.72rem; }
}

/* ---------- Layout com sidebar do ecossistema Argus ---------- */
/* Grid de 3 colunas. A coluna central (a ferramenta) tem um piso alto
   (1092px, com folga — a barra de 8 abas precisa de ~1050px pra nunca
   quebrar linha) e só cresce até 1140px; as sidebars é que cedem espaço
   primeiro quando o monitor é menor, e somem (abaixo de 1500px) em vez de
   ficar espremidas coladas na borda da tela. Padding lateral no .app-layout
   garante uma margem mínima mesmo no limite do breakpoint. */
.app-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(1092px, 1140px) minmax(0, 220px);
  justify-content: center;
  align-items: start;
  gap: 24px;
  padding: 0 16px;
}
.app-layout .container { max-width: none; margin: 0; width: 100%; }

.eco-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 96px;
  min-width: 0;
}

@media (max-width: 1499px) {
  .app-layout { grid-template-columns: minmax(0, 1140px); padding: 0; }
  .eco-sidebar { display: none; }
}

.eco-sidebar-titulo {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 2px;
}
.eco-sidebar-titulo:hover { color: var(--teal-dark); }
.eco-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pcolor, var(--teal));
  border-radius: 8px;
  padding: 8px 10px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.eco-card:hover { box-shadow: 0 0 0 1px var(--pcolor, var(--teal)) inset; }
.eco-card-nome { font-size: 0.78rem; font-weight: 700; color: var(--pcolor, var(--ink)); }
.eco-card-desc { font-size: 0.72rem; line-height: 1.4; color: var(--ink-soft); }

/* Link de acesso ao FAQ — junto dos cards do ecossistema, mas com destaque
   próprio (fundo tintado + separador) por não ser um produto externo, e sim
   uma seção interna do próprio portal. */
.eco-card-faq {
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px dashed var(--border);
  background: var(--teal-tint);
}

.btn-ajuda {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #A9B7BC;
  background: transparent;
  color: #A9B7BC;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-ajuda:hover {
  border-color: #fff;
  color: #fff;
}

/* ---------- Modal de ajuda ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 35, 43, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal-overlay.hidden { display: none; }
.field.hidden { display: none; }
.modal-box {
  background: var(--panel);
  border-radius: var(--radius);
  max-width: 460px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(22, 35, 43, 0.25);
}
.modal-box-wide { max-width: min(960px, 94vw); }
.modal-box-wide .tabs { flex-wrap: wrap; gap: 2px 4px; margin-bottom: 14px; }
.modal-box-wide .tab-btn { padding: 8px 12px; font-size: 0.82rem; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--teal-dark);
}
.btn-fechar {
  border: none;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 4px;
}
.btn-fechar:hover { color: var(--ink); }
.modal-body {
  padding: 18px 20px 22px;
  font-size: 0.88rem;
  color: var(--ink);
}
.modal-body p { margin: 0 0 12px; }
.modal-body ul {
  margin: 0 0 14px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-body .formula {
  font-family: var(--mono);
  font-weight: 600;
  background: var(--teal-tint);
  color: var(--teal-dark);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
}

/* ---------- Layout ---------- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* ---------- Abas ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1.5px solid var(--border);
}
.tab-btn {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 10px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}
.tab-btn:hover { color: var(--teal-dark); }
.tab-btn.active { color: var(--teal-dark); border-bottom-color: var(--teal); }
.tab-panel.hidden { display: none; }
.tabs.subtabs { margin-bottom: 18px; }
.subtab-btn {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}
.subtab-btn:hover { color: var(--teal-dark); }
.subtab-btn.active { color: var(--teal-dark); border-bottom-color: var(--teal); }
.subtab-panel.hidden { display: none; }
.tabs.subtabs.subtabs-inner { margin-top: 2px; margin-bottom: 16px; border-bottom-style: dashed; }
.subtabs-inner .subtab-btn { font-size: 0.8rem; padding: 8px 14px; }

/* ---------- Favoritos ---------- */
.field-favoritos.hidden { display: none; }
.favoritos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.favorito-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.favorito-chip:hover { border-color: var(--teal); color: var(--teal-dark); }
.favorito-chip .favorito-remover {
  border: none;
  background: none;
  color: #A0341C;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  line-height: 1;
}

/* ---------- Search panel ---------- */
.search-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.field input {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.field-codigo input { max-width: 260px; font-size: 1.1rem; }
.field select {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  max-width: 520px;
}
.field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}

.busca-wrapper { position: relative; max-width: 420px; }
.busca-wrapper input {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.busca-wrapper input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.busca-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(22, 35, 43, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
}
.busca-dropdown.hidden { display: none; }
.busca-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.busca-item:last-child { border-bottom: none; }
.busca-item:hover { background: var(--teal-tint); }
.busca-item .codigo {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--teal-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.busca-item .desc { color: var(--ink); }
.busca-vazio { padding: 10px 14px; font-size: 0.82rem; color: var(--ink-soft); }

.edicoes-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.chip-btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.chip-btn:hover { border-color: var(--teal); color: var(--teal); }

.field-convenio { margin-bottom: 18px; }
.convenio-toolbar { display: flex; gap: 8px; align-items: center; }
.convenio-toolbar select {
  flex: 1;
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 9px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}

.edicoes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.edicao-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  user-select: none;
}
.edicao-item:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-weight: 600;
}
.edicao-item input { accent-color: var(--teal); }
.loading-text { color: var(--ink-soft); font-size: 0.85rem; }

/* Seletor de edições: fechado por padrão, mostra um resumo (ex: "Todas as
   21 edições selecionadas") em vez da grade inteira de checkboxes — a
   grade completa fica a um clique, dentro do painel. */
.edicoes-select summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
}
.edicoes-select summary:hover { border-color: var(--teal); }
.edicoes-select summary::-webkit-details-marker { display: none; }
.edicoes-select summary::after {
  content: '▾';
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-left: 10px;
  transition: transform 0.15s;
}
.edicoes-select[open] summary {
  border-radius: 6px 6px 0 0;
  border-bottom-color: transparent;
}
.edicoes-select[open] summary::after { transform: rotate(180deg); }
.edicoes-select-corpo {
  padding: 12px;
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
}
.edicoes-select-corpo .edicoes-toolbar { margin-bottom: 10px; }

.ajustes { margin-bottom: 18px; }
.ajustes summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-dark);
  padding: 8px 0;
}
.ajustes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  padding-top: 8px;
}
.ajustes-grid input { font-size: 0.9rem; padding: 8px 10px; }
.ajustes-nota {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
/* .ajustes-nota só tem margem no topo (pra não abrir espaço quando é a
   última coisa dentro de um card) — mas quando vem um campo logo depois,
   sem isso os dois ficam colados. Cobre .field em qualquer tela do portal
   onde essa sequência nota→campo aparece, sem precisar de ajuste manual
   em cada tela. */
.ajustes-nota + .field {
  margin-top: 16px;
}
.link-inline {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  color: var(--teal-dark);
  text-decoration: underline;
  cursor: pointer;
}
.link-inline:hover { color: var(--teal); }

.btn-consultar {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-consultar:hover { background: var(--teal-dark); }

/* ---------- Results ---------- */
#resultado-area { margin-top: 32px; }
#mp-resultado-area { margin-top: 24px; }
.mp-card { max-width: 720px; }

.resultado-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.resultado-header h2 {
  font-size: 1.1rem;
  margin: 0;
}
.resultado-header .codigo-tag {
  font-family: var(--mono);
  color: var(--teal-dark);
}
.descricao-atual {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: -8px 0 20px;
}

.resultado-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.acao-btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.acao-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.acao-btn.ativo { border-color: var(--amber); color: var(--amber); background: var(--amber-tint); }

.amb-tuss-box {
  background: var(--amber-tint);
  border: 1px solid #E9CBA0;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
}
.amb-tuss-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--amber);
  display: block;
  margin-bottom: 6px;
}
.amb-tuss-item {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);
  padding: 3px 0;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.edicao-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.edicao-card-head {
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.edicao-card-head .nome { font-weight: 600; font-size: 0.9rem; }
.edicao-card-head .ano { font-family: var(--mono); font-size: 0.8rem; color: var(--A9B7BC, #A9B7BC); }
.edicao-card-head.clicavel { cursor: pointer; }
.edicao-card-head.clicavel:hover { background: var(--teal-dark); }
.edicao-card-head.clicavel .nome::after { content: ' ▸'; opacity: 0.7; font-weight: 400; }

.edicao-card-desc {
  padding: 10px 16px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}

.breakdown { padding: 8px 16px; }
.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.85rem;
}
.breakdown-row:last-of-type { border-bottom: none; }
.breakdown-row .label { color: var(--ink-soft); }
.breakdown-row .detail { font-family: var(--mono); font-size: 0.72rem; color: #94A0A6; display: block; }
.breakdown-row .value { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.breakdown-row .value.zero { color: #B7BFC2; font-weight: 400; }
.breakdown-row .value.wrap {
  white-space: normal;
  text-align: right;
  font-family: var(--sans);
  font-weight: 500;
  max-width: 62%;
}
.breakdown-row .pct-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  background: var(--amber-tint);
  color: var(--amber);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* ---------- Grupos recolhíveis (cirurgião / anestesista / equipe) ---------- */
.grupo {
  border-top: 1px solid var(--border);
}
.grupo-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px;
  background: var(--teal-tint);
  user-select: none;
}
.grupo-summary::-webkit-details-marker { display: none; }
.grupo-summary::before {
  content: '▸';
  font-size: 0.7rem;
  margin-right: 8px;
  color: var(--teal-dark);
  transition: transform 0.15s;
}
.grupo[open] > .grupo-summary::before { transform: rotate(90deg); }

.grupo-nome {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal-dark);
  display: flex;
  align-items: center;
}
.grupo-valor {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--teal-dark);
}

.grupo-secundario > .grupo-summary { background: var(--amber-tint); }
.grupo-secundario > .grupo-summary::before { color: var(--amber); }
.grupo-secundario .grupo-nome,
.grupo-secundario .grupo-valor { color: var(--amber); }

.grupo-corpo { padding-bottom: 4px; }

/* ---------- Cards SIGTAP ---------- */
.sigtap-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sigtap-card-head {
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.sigtap-card-head .codigo {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: #A9B7BC;
}
.sigtap-badge {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--teal-tint);
  color: var(--teal-dark);
}
.sigtap-badge-3 { background: var(--amber-tint); color: var(--amber); }
.sigtap-badge-erro { background: #FBE7E4; color: #A0341C; }
.bpa-linha-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.bpa-linha-card .bpa-linha-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }
.sigtap-card-nome {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--border);
}
.sigtap-card-classificacao {
  padding: 8px 16px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--border);
}
.sigtap-card-valores {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--teal-tint);
  border-top: 1px dashed var(--border);
}
.sigtap-card-valores .valor-item {
  padding: 10px 8px;
  text-align: center;
  border-left: 1px dashed var(--border);
}
.sigtap-card-valores .valor-item:first-child { border-left: none; }
.sigtap-card-valores .valor-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--teal-dark);
  margin-bottom: 2px;
}
.sigtap-card-valores .valor-num {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--teal-dark);
}

/* ---------- Verificadores (compatibilidade / habilitação) ---------- */
.compat-par {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.compat-par .compat-codigos { flex: 1 1 320px; font-size: 0.88rem; }
.compat-par .compat-codigos .codigo { font-family: var(--mono); font-weight: 700; color: var(--teal-dark); }
.compat-par .compat-codigos .nome { color: var(--ink-soft); display: block; font-size: 0.8rem; }
.compat-status {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.compat-status.compativel { background: var(--teal-tint); color: var(--teal-dark); }
.compat-status.sem-registro { background: var(--amber-tint); color: var(--amber); }
.compat-aviso {
  flex-basis: 100%;
  font-size: 0.78rem;
  color: #A0341C;
  background: #FBE7E4;
  border-radius: 6px;
  padding: 6px 10px;
}
.habilitacao-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 8px;
}
.habilitacao-card .nome { font-weight: 600; font-size: 0.88rem; }
.habilitacao-card .detail { font-size: 0.76rem; color: var(--ink-soft); margin-top: 2px; }

.conversor-secao-titulo {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-dark);
  margin: 16px 0 8px;
}
.conversor-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.conversor-card .info { flex: 1 1 280px; }
.conversor-card .codigo { font-family: var(--mono); font-weight: 700; color: var(--teal-dark); margin-right: 6px; }
.conversor-card .nome { font-size: 0.85rem; }
.grau-badge {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal-dark);
  white-space: nowrap;
}

.glosa-categoria { padding: 4px 16px 14px; }
.glosa-categoria-titulo {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-dark);
  margin: 10px 0 8px;
}
.glosa-card {
  display: flex;
  gap: 12px;
  border-left: 3px solid var(--teal);
  background: var(--paper);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.glosa-card-codigo {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--teal-dark);
  flex-shrink: 0;
  min-width: 44px;
}
.glosa-card-corpo { font-size: 0.82rem; line-height: 1.4; }
.glosa-card-linha { margin-bottom: 3px; }
.glosa-card-linha:last-child { margin-bottom: 0; }
.glosa-card-linha .label { font-weight: 700; color: var(--ink-soft); margin-right: 4px; }

/* ---------- Ranking de motivos de glosa (Leitor de DAC) ---------- */
.dac-ranking-item { margin-bottom: 12px; }
.dac-ranking-item:last-child { margin-bottom: 0; }
.dac-ranking-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.dac-ranking-head .codigo { font-family: var(--mono); font-weight: 700; color: var(--teal-dark); }
.dac-ranking-head .valor { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.dac-ranking-head .valor .detail { font-weight: 400; color: var(--ink-soft); }
.dac-ranking-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.dac-ranking-fill { height: 100%; background: var(--amber); border-radius: 3px; }
.dac-ranking-evitar { font-size: 0.76rem; color: var(--ink-soft); margin-top: 4px; }

/* ---------- Tabelas de Domínio TISS ---------- */
.tiss-tabela-bloco {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.tiss-tabela-titulo {
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}
.tiss-tabela-nota {
  margin: 0;
  padding: 6px 16px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  background: var(--teal-tint);
}
.tiss-tabela-scroll { overflow-x: auto; }
.tiss-tabela-tabela { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tiss-tabela-tabela th {
  text-align: left;
  padding: 8px 16px;
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tiss-tabela-tabela td {
  padding: 7px 16px;
  border-top: 1px dashed var(--border);
  vertical-align: top;
}
.tiss-tabela-tabela td.codigo {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--teal-dark);
  white-space: nowrap;
}
.tiss-tabela-paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--teal-tint);
  border-top: 1px dashed var(--border);
}
.tiss-tabela-paginacao .pagina-info {
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tiss-tabela-paginacao .chip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tiss-tabela-paginacao .chip-btn:disabled:hover { border-color: var(--border); color: var(--ink-soft); }
.tiss-tabela-paginacao .pagina-por-pagina {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tiss-tabela-paginacao .pagina-por-pagina select {
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 3px 6px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}

/* ---------- CID-10 ---------- */
.cid10-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cid10-card-head {
  background: var(--navy);
  padding: 10px 16px;
}
.cid10-card-head .codigo {
  font-family: var(--mono);
  font-weight: 700;
  color: #fff;
}
.cid10-card-nome {
  padding: 12px 16px 4px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
}
.cid10-card-categoria {
  padding: 0 16px 12px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.versoes-tiss-lista { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.versao-tiss-item { border-left: 3px solid var(--teal); padding-left: 12px; }
.versao-tiss-nome {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 0.88rem;
}
.versao-tiss-data {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.78rem;
  margin-left: 8px;
}
.versao-tiss-desc { font-size: 0.85rem; color: var(--ink); margin-top: 4px; line-height: 1.45; }
.versao-tiss-item-desatualizada { border-left-color: var(--amber); opacity: 0.85; }
.versao-tiss-item-desatualizada .versao-tiss-nome { color: var(--amber); }

.pct-badge-neutro {
  background: var(--teal-tint);
  color: var(--teal-dark);
}

.referencia-tabela {
  padding: 8px 16px 14px;
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-family: var(--mono);
}

.comparativo {
  padding: 12px 16px 14px;
  border-top: 1px dashed var(--border);
  background: var(--paper);
}
.comparativo-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 0.8rem;
}
.comparativo-row .label { color: var(--ink-soft); }
.comparativo-row .value { font-family: var(--mono); font-weight: 600; }
.comparativo-row.diferenca {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 700;
}
.comparativo-row.diferenca .label { color: var(--ink); }
.comparativo-row.diff-alta .value { color: var(--teal-dark); }
.comparativo-row.diff-baixa .value { color: #A0341C; }

.msg {
  padding: 16px;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.msg.erro { background: #FBE7E4; color: #A0341C; border: 1px solid #E9B4A8; }
.msg.vazio { background: var(--panel); border: 1px dashed var(--border); color: var(--ink-soft); text-align: center; }

.validador-linha {
  padding: 6px 0;
  font-size: 0.85rem;
  border-bottom: 1px dashed var(--border);
}
.validador-linha:last-child { border-bottom: none; }
.validador-linha.ok { color: var(--teal-dark); }
.validador-linha.aviso { color: var(--amber); }
.validador-linha.erro { color: #A0341C; font-weight: 600; }

@media (max-width: 640px) {
  .container { padding: 20px 14px 60px; }
  .search-panel { padding: 18px; }
}

/* ---------- Dashboard comparativo (gráficos entre edições) ---------- */
#dashboard-area { margin-top: 32px; }

.dashboard-titulo {
  font-size: 1.1rem;
  margin: 0 0 16px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.grafico-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 8px;
}
.grafico-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.grafico-svg { width: 100%; height: auto; display: block; }
.grafico-barra {
  transition: opacity 0.1s;
}
.grafico-barra:hover,
.grafico-barra.hover {
  opacity: 0.8;
}
.grafico-hit { cursor: pointer; }
.grafico-valor-label {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--ink);
}
.grafico-eixo-label {
  font-family: var(--sans);
  font-size: 9px;
  fill: var(--ink-soft);
}
.grafico-gridline { stroke: var(--border); stroke-width: 1; }
.grafico-baseline { stroke: #A9B7BC; stroke-width: 1; }

.chart-tooltip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--navy);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  box-shadow: 0 8px 20px rgba(22, 35, 43, 0.25);
  max-width: 220px;
}
.chart-tooltip.hidden { display: none; }
.chart-tooltip .tt-edicao { color: #A9B7BC; font-size: 0.7rem; margin-bottom: 2px; }
.chart-tooltip .tt-valor { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; }

/* ---------- Múltiplos procedimentos (via de acesso) ---------- */
.mp-panel { margin-top: 32px; }
.mp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mp-header h2 { font-size: 1.05rem; margin: 0; }
.mp-header .btn-ajuda {
  border-color: var(--border);
  color: var(--ink-soft);
}
.mp-header .btn-ajuda:hover { border-color: var(--teal); color: var(--teal-dark); }
.mp-header #btn-versoes-tiss { margin-left: auto; }

.sigtap-competencia-area {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sigtap-competencia-badge {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--teal-dark);
  background: var(--teal-tint);
  padding: 4px 10px;
  border-radius: 999px;
}
.sigtap-competencia-area .chip-btn.disponivel {
  border-color: var(--amber);
  color: var(--amber);
}
.sigtap-competencia-area .chip-btn.disponivel:hover { background: var(--amber-tint); }
.sigtap-competencia-badge.erro { background: #FBE7E4; color: #A0341C; }

#mp-edicao {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  max-width: 320px;
}

.mp-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.mp-linha {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.mp-linha .busca-wrapper { flex: 1 1 260px; }
.mp-linha .mp-codigo-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--teal-dark);
  padding: 10px 0;
}
.mp-linha select.mp-relacao {
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 9px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  min-width: 160px;
}
.mp-linha .mp-btn-remover {
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: #A0341C;
  border-radius: 6px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
}
.mp-linha .mp-btn-remover:hover { border-color: #A0341C; background: #FBE7E4; }
.mp-btn-adicionar { margin-top: 4px; }

/* ---------- Badge de versão ---------- */
.version-badge {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 35, 43, 0.12);
}
.version-badge:hover { border-color: var(--teal); color: var(--teal-dark); }

.versao-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.versao-item:last-child { border-bottom: none; }
.versao-item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.versao-item .versao-numero {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--teal-dark);
}
.versao-item .versao-data {
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.versao-item ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proximos-passos {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.proximos-passos-titulo {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.proximos-passos ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------- Impressão / exportar PDF ---------- */
@media print {
  .topbar,
  .tabs,
  .version-badge,
  .chart-tooltip,
  .modal-overlay,
  .search-panel,
  .resultado-acoes,
  .btn-ajuda {
    display: none !important;
  }
  body { background: #fff; }
  .container { padding: 0; max-width: 100%; }
  .cards-grid, .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .edicao-card, .grafico-card, .mp-card { break-inside: avoid; }
}

/* ---------- Guia/fatura simulada (Fase 5) ---------- */
.guia-print-area { display: none; }
.guia-doc-head { margin-bottom: 20px; }
.guia-doc-aviso {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 2px 0 14px;
}
.guia-doc-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
  font-size: 0.9rem;
}
.guia-doc-tabela { width: 100%; border-collapse: collapse; margin-top: 20px; }
.guia-doc-tabela th, .guia-doc-tabela td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.guia-doc-tabela th:last-child, .guia-doc-tabela td:last-child { text-align: right; font-family: var(--mono); }
.guia-doc-tabela .detail { font-family: var(--mono); font-size: 0.72rem; color: #94A0A6; }
.guia-doc-tabela tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none; }
.guia-doc-tabela-itens .col-data { white-space: nowrap; font-family: var(--mono); font-size: 0.8rem; }
.guia-doc-paciente { margin: 22px 0 4px; font-size: 0.95rem; break-inside: avoid; break-after: avoid; }
.guia-doc-paciente + .guia-doc-tabela { margin-top: 6px; break-inside: avoid; }
.guia-doc-total-geral { margin-top: 20px; padding-top: 12px; border-top: 2px solid var(--ink); text-align: right; font-size: 1rem; }

@media print {
  body.modo-guia .topbar,
  body.modo-guia .tabs,
  body.modo-guia .version-badge,
  body.modo-guia .modal-overlay,
  body.modo-guia .container {
    display: none !important;
  }
  body.modo-guia .guia-print-area { display: block !important; }
}

/* ---------- Guia SP/SADT no layout oficial ANS ---------- */
@page { size: landscape; margin: 8mm; }

.guia-oficial { font-size: 0.82rem; color: #000; }
.go-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid #000;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.go-cabecalho-prestador { flex: 1 1 auto; }
.go-campo-guia-prestador { flex: 0 0 180px; min-height: auto !important; border: 1px solid #999 !important; }
.go-prestador { font-weight: 700; font-size: 0.95rem; }
.go-operadora { font-size: 0.8rem; color: #333; }
.go-titulo { font-weight: 700; font-size: 0.85rem; text-align: center; text-transform: uppercase; flex: 1 1 auto; }
.go-aviso { font-size: 0.72rem; color: #555; font-style: italic; margin: 6px 0 10px; }
.go-secao-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #eee;
  padding: 3px 8px;
  margin-top: 8px;
  border: 1px solid #999;
  border-bottom: none;
}
.go-grid {
  display: grid;
  border: 1px solid #999;
  border-top: none;
}
.go-grid-2 { grid-template-columns: repeat(2, 1fr); }
.go-grid-3 { grid-template-columns: repeat(3, 1fr); }
.go-grid-4 { grid-template-columns: repeat(4, 1fr); }
.go-grid-5 { grid-template-columns: repeat(5, 1fr); }
.go-campo {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 3px 7px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 30px;
}
.go-campo-larga { grid-column: span 2; }
.go-rotulo { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.02em; color: #555; }
.go-valor { font-weight: 600; word-break: break-word; }
.go-valor-obs { font-weight: 400; font-style: italic; color: #666; font-size: 0.7rem; }
.go-tabela { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 0.74rem; }
.go-tabela th, .go-tabela td { border: 1px solid #999; padding: 3px 5px; text-align: left; }
.go-tabela th { background: #eee; font-size: 0.64rem; text-transform: uppercase; }
.go-tabela .go-num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.go-vazio { text-align: center; color: #777; font-style: italic; padding: 6px; }
.go-observacao { border: 1px solid #999; border-top: none; padding: 6px 8px; margin: 0; min-height: 20px; font-size: 0.78rem; }
.go-totais {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #999;
  border-top: none;
}
.go-campo-total { background: #eee; }
.go-campo-total .go-valor { font-size: 1rem; }
.go-assinaturas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 22px;
}
.go-assinatura { border-top: 1px solid #000; padding-top: 4px; text-align: center; font-size: 0.72rem; }

/* O anexo de outras despesas (materiais/medicamentos/taxas/OPME/gases) pode
   ter dezenas de linhas — sempre começa em página nova em vez de espremer
   junto do corpo principal da guia. */
.go-anexo-despesas { break-before: page; }

@media print {
  html, body { width: 100%; height: 100%; }
  /* Antes forçava tudo (inclusive o anexo de outras despesas, que pode ter
     dezenas de linhas) num único formato de página landscape com fonte de
     6.6px — ilegível. Agora o conteúdo flui em quantas páginas precisar, com
     fonte legível, e as tabelas repetem o cabeçalho a cada página. */
  .guia-oficial { font-size: 9px; }
  .go-cabecalho { padding-bottom: 4px; margin-bottom: 2px; }
  .go-secao-titulo { margin-top: 6px; padding: 2px 6px; }
  .go-campo { min-height: 16px; padding: 2px 6px; }
  .go-tabela th, .go-tabela td { padding: 1.5px 4px; }
  /* Só protege contra o pior caso (uma linha de tabela cortada ao meio entre
     páginas, no anexo de outras despesas quando ele é longo) — sem também
     forçar título+tabela ou grids inteiros a saltar de página, senão uma
     guia curta que caberia inteira numa página acaba ganhando uma segunda
     página quase vazia por causa de uma tabela de 1 linha no fim. */
  .go-tabela thead { display: table-header-group; }
  .go-tabela tr { break-inside: avoid; }
  .go-assinaturas { margin-top: 10px; gap: 20px; }
  .go-assinatura { padding-top: 3px; }
  .go-aviso { margin: 3px 0 5px; }
  .go-observacao { min-height: 12px; padding: 3px 6px; }
  .go-totais { margin-top: 0; }
}

/* ---------- FAQ (Dúvidas frequentes) ---------- */
.faq-intro { margin-bottom: 20px; }
.faq-subtabs { margin-bottom: 20px; }
.faq-subtab-btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}
.faq-subtab-btn:hover { color: var(--teal-dark); }
.faq-subtab-btn.active { color: var(--teal-dark); border-bottom-color: var(--teal); }
.faq-subtab-panel.hidden { display: none; }

/* Título de seção inserido na frente de cada subaba com resultado, só
   durante a busca cruzada — sem ele, ao mostrar várias subabas juntas fica
   impossível saber de qual assunto cada pergunta veio. */
.faq-subtab-titulo-busca {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 18px 0 8px;
}
.faq-subtab-titulo-busca:first-child { margin-top: 0; }
#faq-busca-contagem.hidden { display: none; }
#faq-busca-contagem { margin: -8px 0 16px; }

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-item.hidden { display: none; }
.faq-pergunta {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  background: var(--teal-tint);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  user-select: none;
}
.faq-pergunta::-webkit-details-marker { display: none; }
.faq-pergunta::before {
  content: '▸';
  font-size: 0.7rem;
  color: var(--teal-dark);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.faq-item[open] > .faq-pergunta::before { transform: rotate(90deg); }
.faq-resposta {
  padding: 14px 16px 16px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.faq-resposta p { margin: 0 0 10px; }
.faq-resposta p:last-child { margin-bottom: 0; }
.faq-resposta ul.faq-lista { margin: 0 0 10px; padding-left: 20px; }
.faq-resposta ul.faq-lista:last-child { margin-bottom: 0; }
.faq-resposta ul.faq-lista li { margin-bottom: 6px; }
.faq-resposta ul.faq-lista li:last-child { margin-bottom: 0; }
.faq-resposta a:not(.faq-portal-link) { color: var(--teal-dark); font-weight: 600; }
.faq-portal-link,
a.faq-portal-link,
a.faq-portal-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  margin-top: 4px;
}
.faq-portal-link:hover,
a.faq-portal-link:hover { background: var(--teal-dark); color: #fff; }
.faq-fonte {
  font-size: 0.72rem;
  color: var(--ink-soft);
  opacity: 0.85;
  margin-top: 10px !important;
}

/* ---------- Fontes de dados ---------- */
.fontes-lista { display: flex; flex-direction: column; gap: 10px; }
.fontes-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel);
}
.fontes-item-head { font-size: 0.86rem; }
.fontes-item-fonte { font-size: 0.78rem; margin-top: 4px; }
.fontes-item-fonte a { color: var(--teal-dark); }
.fontes-item-data { font-size: 0.72rem; color: var(--ink-soft); opacity: 0.85; margin-top: 4px; }

/* ---------- Indicadores ANAHP ---------- */
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.stat-card .num { font-size: 1.15rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat-card .lbl { font-size: 0.72rem; color: var(--ink-soft); line-height: 1.3; margin-top: 4px; }

.indicador-promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.indicador-promo.eco-card {
  padding: 14px 16px;
}
.indicador-promo .eco-card-nome { font-size: 0.85rem; }
.indicador-promo .eco-card-desc { font-size: 0.8rem; }

.quality-banner {
  padding: 18px 20px;
  margin-bottom: 20px;
  background: rgba(245, 158, 11, 0.08);
  gap: 8px;
}
.quality-banner .eco-card-nome { font-size: 1rem; }
.quality-banner .eco-card-desc { font-size: 0.86rem; line-height: 1.6; }
.quality-banner-cta { margin-top: 4px; align-self: flex-start; }