/* ══════════ Navegação de Documentos Médicos ══════════
   Usado por: formularios.html, atestado.html, encaminhamento.html
   Fonte única de verdade em js/docsNav.js — não duplicar botões nas páginas.
   Tudo sempre visível, agrupado em linhas com rótulo — sem acordeão.

   .tab-btn e .docs-nav-row também são reaproveitados por outras páginas
   (ex: config.html) pra abas simples que nada têm a ver com essa navegação
   — só pegam o estilo da pílula, não o componente DocsNav inteiro. */

/* ── Pílula padrão (.tab-btn) ──
   Também usada por outros toggles internos das páginas (ex: Capaz/Incapaz e
   Sim/Não no LME, tipo de laudo INSS) que nada têm a ver com a navegação —
   por isso essa regra continua genérica e não veio junto com a navegação. */
.tab-btn {
  padding: 9px 20px;
  border: 2px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.tab-btn:hover { border-color: var(--primary); color: var(--primary); }
.tab-btn.active {
  border-color: var(--primary);
  background: rgba(0, 229, 255, 0.1);
  color: var(--primary);
}

/* var(--primary) (#00e5ff) como borda+texto desta pílula tem só ~1,5:1 sobre
   fundo claro — troca aqui, só nela, pelo teal já calibrado em --focus-ring.
   Não mexe em var(--primary) (usada em foco de input, hover de card, chips
   etc. em todo o resto do site) nem em nenhum outro componente. */
body:not(.dark-mode) .tab-btn:hover {
  border-color: #0e7490;
  color: #0e7490;
}
body:not(.dark-mode) .tab-btn.active {
  border-color: #0e7490;
  background: rgba(14, 116, 144, 0.1);
  color: #0e7490;
}

.docs-nav {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.docs-nav-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.docs-nav-divider {
  height: 1px;
  background: var(--border-ghost);
  margin: 14px 0;
}

.docs-nav-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

@media (max-width: 640px) {
  .docs-nav-row { gap: 6px; }
}