/* =============================
   CSS principal consolidado
   ============================= */

/* Variáveis de cor e temas */
:root{
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --panel: #ffffff;
  --border: #e2e8f0;
  --link: #0a58ca;
  --link-hover:#084298;
  --accent:#0d6efd;
  --code-bg:#0f172a0a;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --panel:#0f172a;
    --border:#1f2a44;
    --link:#6aa8ff;
    --link-hover:#9cc3ff;
    --accent:#7aa2ff;
    --code-bg:#ffffff14;
  }
}

/* Base */
html, body{ height:100% }
html{ scroll-behavior:smooth }
body{
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.8;
  font-size:1.05rem;
  margin:0;
  padding:0;
}

h1,h2,h3,h4,h5,h6{ line-height:1.3; margin-top:1.2rem }
p{ margin-bottom:1.2rem }

/* Links */
a{ color:var(--link); text-decoration:underline; text-underline-offset:2px }
a:hover{ color:var(--link-hover) }

/* Navbar & Footer */
.navbar,.footer{ background:var(--panel); border-bottom:1px solid var(--border) }
.footer{ border-top:1px solid var(--border); border-bottom:none }

/* Layout do artigo */
.article-wrap{ width:80%; max-width:1200px; margin:0 auto; padding:1rem }
@media (max-width: 992px){ .article-wrap{ width:90%; font-size:1rem } }
@media (max-width: 576px){ .article-wrap{ width:95%; padding:.5rem; font-size:.95rem } }

.section{ border:1px solid var(--border); background:var(--panel); border-radius:12px; padding:2rem }

/* Citações */
.citacao{ font-size:.9rem; color:var(--muted); border-left:3px solid var(--border); margin:1rem 0; padding-left:1rem; font-style:italic }
.citacao-inline{ font-size:.92rem; font-style:italic; color:var(--muted) }

/* Ícones / Links especiais */
.icon-pdf,.icon-audio{ display:inline-flex; align-items:center; gap:.35rem }
.icon-pdf i,.icon-audio i{ font-size:.95em }

/* Sumário (TOC) */
#toc-links{ display:flex; flex-wrap:wrap; gap:.6rem .8rem }
#toc-links a{ text-decoration:none; font-size:.95rem; padding:.2rem .5rem; border:1px solid var(--border); border-radius:999px; background:transparent }
#toc-links a.active{ background:var(--code-bg) }

/* Barra de progresso de leitura */
.progress-reading{ position:fixed; top:0; left:0; height:4px; width:0; background:var(--accent); z-index:1030 }

/* Player de áudio inline (opcional; usado quando data-inline="true") */
.audio-inline-player{ position:fixed; right:1rem; bottom:1rem; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.75rem; box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; align-items:center; gap:.6rem; z-index:1040 }
.audio-inline-player__title{ font-size:.9rem; color:var(--muted); margin:0 }
.audio-inline-player__close{ border:none; background:transparent; cursor:pointer; font-size:1.1rem; line-height:1; color:var(--muted) }
.audio-inline-player__close:hover{ color:var(--text) }

/* Utilidades acessibilidade */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Botões utilitários no fim do artigo */
.btn-outline-light{ --bs-btn-color:var(--text); --bs-btn-border-color:var(--border); --bs-btn-hover-bg:var(--code-bg); --bs-btn-hover-color:var(--text) }

/* Tabelas simples dentro do artigo (se surgirem) */
.prose table{ width:100%; border-collapse:collapse; margin:1rem 0 }
.prose th,.prose td{ border:1px solid var(--border); padding:.5rem .6rem; text-align:left }
.prose thead th{ background:var(--code-bg) }

/* Imagens responsivas (se houver) */
.prose img{ max-width:100%; height:auto; border-radius:8px }

/* Impressão */
@media print{
  :root{ --bg:#fff; --text:#000; --panel:#fff; --border:#e5e7eb; --link:#000; --accent:#000; --code-bg:#f2f4f8 }
  body{ background:#fff }
  .navbar, .footer, .progress-reading, #toc-links, #btn-share{ display:none !important }
  a[href^="http"]:after{ content:" (" attr(href) ")"; font-size:.85em }
  .section{ border:none; padding:0 }
  .article-wrap{ width:100% }
}