/* Tema do SISTEMA Rabi — a ajuda aberta DENTRO do sistema fica com o visual do sistema.
   D-45 (23/10) e D-48 (30/10/2026). Liga só com html.tema-sistema (posto pelo tema-sistema.js quando a página
   vem do sistema: ?sistema=1 / ?embutido=1, ou sempre no pacote do cliente). No site público nada muda.
   Valores copiados do rabi-client, tema padrão (themeA): src/theme/common/themePrimitives.ts
     primary.main #9C1824 · neutros Tailwind Gray · shape.borderRadius 8 · fonte Roboto (MUI) ·
     títulos peso 600 · botões sem caixa alta e sem sombra. */
html.tema-sistema {
  --font-sans: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --bg: #F9FAFB; --surface: #FFFFFF; --surface-2: #F3F4F6; --surface-3: #E5E7EB;
  --border: #E5E7EB; --border-strong: #D1D5DB;
  --text: #1F2937; --text-2: #4B5563; --text-3: #6B7280;
  --primary: #9C1824; --primary-lt: #FEF2F2; --primary-dk: #7F1D1D; --primary-text: #FFFFFF;
  --r-sm: 4px; --r-md: 8px; --r-lg: 8px; --r-xl: 8px; --r-2xl: 8px;
  --shadow-xs: none; --shadow-sm: 0 1px 2px rgba(17,24,39,.06); --shadow-md: 0 2px 6px rgba(17,24,39,.08);
}
html.tema-sistema[data-theme="dark"] {
  --bg: #111827; --surface: #1F2937; --surface-2: #1F2937; --surface-3: #374151;
  --border: #374151; --border-strong: #4B5563;
  --text: #FFFFFF; --text-2: #D1D5DB; --text-3: #9CA3AF;
  --primary: #F87171; --primary-lt: rgba(156,24,36,.28); --primary-dk: #FCA5A5; --primary-text: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  html.tema-sistema:not([data-theme="light"]) {
    --bg: #111827; --surface: #1F2937; --surface-2: #1F2937; --surface-3: #374151;
    --border: #374151; --border-strong: #4B5563;
    --text: #FFFFFF; --text-2: #D1D5DB; --text-3: #9CA3AF;
    --primary: #F87171; --primary-lt: rgba(156,24,36,.28); --primary-dk: #FCA5A5; --primary-text: #FFFFFF;
  }
}
html.tema-sistema body { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; background: var(--bg); color: var(--text); }
html.tema-sistema h1, html.tema-sistema h2, html.tema-sistema h3, html.tema-sistema h4,
html.tema-sistema .page-title { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
html.tema-sistema .page-title { font-size: 1.75rem; }
html.tema-sistema .main-content h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
html.tema-sistema .main-content h2 { font-size: 1.375rem; }
html.tema-sistema .main-content h3 { font-size: 1.125rem; }
html.tema-sistema .page-subtitle { font-size: 1rem; }
/* botões como os do sistema: cantos 8, sem caixa alta, sem sombra nem "pulo" */
html.tema-sistema .btn { border-radius: 8px; text-transform: none; font-weight: 500; box-shadow: none; }
html.tema-sistema .btn:hover { transform: none; box-shadow: none; }
html.tema-sistema .btn-primary { background: #9C1824; color: #fff; }
html.tema-sistema .btn-primary:hover { background: #7F1D1D; }
html.tema-sistema .card, html.tema-sistema .callout, html.tema-sistema .toc { border-radius: 8px; box-shadow: none; }
html.tema-sistema .badge { border-radius: 4px; font-weight: 500; }
html.tema-sistema .main-content table { border-radius: 8px; }
html.tema-sistema .main-content th { background: var(--surface-2); font-weight: 600; }
html.tema-sistema a { color: var(--primary); }
html.tema-sistema .sidebar a.active { background: var(--primary-lt); color: var(--primary); }
html.tema-sistema ::selection { background: rgba(156,24,36,.18); }

/* ---------- Dentro do leitor do sistema (?embutido=1): sem cabeçalho, rodapé e menu do site
   (o próprio leitor tem Voltar, Central de Ajuda e Perguntar à Helô) ---------- */
html.embutido .topbar, html.embutido .footer, html.embutido body > footer, html.embutido .skip-link,
html.embutido .sidebar, html.embutido #sidebar-overlay, html.embutido .menu-toggle,
html.embutido .ra-lancador, html.embutido .back-to-top, html.embutido .reading-progress { display: none !important; }
html.embutido .main-content, html.embutido main { margin: 0 auto !important; padding: 16px 20px 40px !important; max-width: 960px; }
html.embutido .main-content > * { max-width: none; }
html.embutido body { padding-top: 0 !important; }
@media (max-width: 640px) { html.embutido .main-content, html.embutido main { padding: 12px 14px 32px !important; } }