:root {
  --bg: #edece8;
  --surface: #ffffff;
  --border: #e1e3e1;
  --text: #212a33;
  --text-muted: #5c6b76;
  --accent: #2e6480;
  --accent-soft: #e2ecf0;
  --gold: #7c5f38;
  --gold-soft: #f3ede1;
  --warn: #8b5f19;
  --warn-soft: #fbf0dc;
  --danger: #a13a3a;
  --danger-soft: #f7e5e2;
  --info: #33475c;
  --info-soft: #e6eaee;
  --neutral: #5a5650;
  --neutral-soft: #ecebe7;
  --convergente: #3f7d52;
  --convergente-soft: #e6f0e9;
  --radius: 10px;
  font-family: "Lora", "Iowan Old Style", "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* Garante que o atributo `hidden` sempre esconda o elemento de verdade,
   mesmo quando a classe dele tambem define `display` (ex.: `.relato-overlay`
   usa `display: flex` pra centralizar o modal) -- sem isso, esse `display`
   proprio da classe empata em especificidade com a regra padrao do
   navegador pra `[hidden]` e, dependendo da ordem, vence, deixando o
   elemento visivel (e ainda capturando cliques) mesmo com `hidden` marcado.
   Foi exatamente esse bug que fazia a caixa de "Relatar inconsistência" (e,
   por tabela, a barra de resultados/paginação) parecerem travadas sem
   fechar. Uma unica regra global aqui evita a mesma armadilha em qualquer
   elemento futuro. */
[hidden] { display: none !important; }

/* ---------- acessibilidade: utilitarios ---------- */

/* Esconde visualmente mas mantem legivel por leitor de tela -- usado em
   rotulos de campo que ja tem contexto visual suficiente sem texto extra
   na tela (ex.: o campo de pesquisa, cujo placeholder ja mostra um
   exemplo). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo" -- primeiro elemento focavel da pagina,
   invisivel ate receber foco pelo teclado (Tab), pra quem usa leitor de
   tela ou navega so por teclado nao precisar passar pelo cabecalho inteiro
   toda vez que troca de pagina. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.topbar {
  background: var(--surface);
  border-bottom: 3px solid var(--accent);
}

.topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-logo-link {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  transition: opacity 0.15s ease;
}

.brand-logo-link:hover,
.brand-logo-link:focus-visible {
  opacity: 0.85;
}

.brand-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.brand-text { min-width: 0; }

h1 {
  margin: 0;
  font-family: "Lora", "Iowan Old Style", "Georgia", serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #333333;
}

h1 span {
  font-weight: 700;
  color: var(--accent);
}

.version-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  border: none;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-family: inherit;
}

.version-tag:hover,
.version-tag:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.subtitle {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Link "JurisLabor" para o perfil do Instagram -- aparece no subtitulo do
   cabecalho e no rodape (ver index.html/precedente.html). Herda a cor do
   texto ao redor (nao fica com o azul padrao de link) e so sinaliza que e
   clicavel com sublinhado no hover/foco. O icone (svg inline, sem depender
   de nenhum host externo) so indica visualmente que e o Instagram. */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.brand-link:hover,
.brand-link:focus-visible {
  text-decoration: underline;
}

.instagram-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.search-box {
  display: flex;
  gap: 10px;
}

.query-input-wrap {
  position: relative;
  flex: 1;
}

#query-input {
  width: 100%;
  padding: 13px 40px 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
}

#query-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.query-clear-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.query-clear-btn:hover,
.query-clear-btn:focus-visible {
  background: var(--neutral-soft);
  color: var(--text);
  outline: none;
}

#search-btn {
  padding: 13px 22px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

#search-btn:hover { opacity: 0.92; }
#search-btn:disabled { opacity: 0.6; cursor: default; }

.busca-avancada-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.busca-avancada-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.busca-avancada-check input {
  accent-color: var(--accent);
}

.busca-avancada-ajuda-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.busca-avancada-ajuda-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.busca-avancada-ajuda-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.busca-avancada-ajuda {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.5;
}

.busca-avancada-ajuda p {
  margin: 0 0 6px;
}

.busca-avancada-ajuda ul {
  margin: 0;
  padding-left: 20px;
}

.busca-avancada-ajuda li {
  margin-bottom: 4px;
}

.busca-avancada-ajuda code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.78rem;
}

.busca-avancada-excluir-linha {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.busca-avancada-excluir-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.busca-avancada-excluir-input {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
}

.busca-avancada-excluir-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

/* Duas linhas distintas: dropdown/tribunais de um lado, caixas de
   inclusão/exclusão do outro -- mantidas juntas entre si em qualquer
   largura de tela, em vez de se misturarem no mesmo flex-wrap. */
.filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.filters select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  max-width: 220px;
}

.filters-tribunais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

/* "Marcar todas" / "Desmarcar todas" -- botões de texto discretos, sem o
   peso visual de um botão cheio (não são a ação principal da tela). */
.filters-row-actions {
  gap: 4px 14px;
}

.filtro-acao-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  font-family: "Baloo 2", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.filtro-acao-btn:hover {
  opacity: 0.8;
}

.filtro-acao-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Reflete visualmente o aria-pressed (ver app.js/atualizarEstadoMarcarDesmarcar):
   sinaliza que o botão já corresponde ao estado atual dos filtros, do mesmo
   jeito que isso já é anunciado por leitor de tela. */
.filtro-acao-btn[aria-pressed="true"] {
  text-decoration: none;
  font-weight: 700;
  opacity: 0.55;
}

.filters-group-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.filters .check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.filters .check input {
  accent-color: var(--accent);
}

.status {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.summary {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.summary-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.relevancia-nota {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.resumo-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: "Baloo 2", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.resumo-btn:hover { opacity: 0.85; }

.pdf-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: "Baloo 2", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.pdf-btn:hover { opacity: 0.85; }
.pdf-btn:disabled { opacity: 0.6; cursor: default; }

.resumo-head-acoes {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.resumo-panel {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.resumo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.resumo-head h2 {
  margin: 0;
  font-family: "Lora", "Georgia", serif;
  font-size: 1.08rem;
  color: var(--text);
}

.resumo-fechar {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.resumo-fechar:hover { color: var(--text); }

.resumo-modos {
  margin-top: 12px;
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.modo-btn {
  border: none;
  background: none;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: "Baloo 2", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.modo-btn.is-ativo {
  background: var(--accent);
  color: #fff;
}

.resumo-corpo { margin-top: 12px; }

/* ---------- resumo: modo infografico ---------- */

.resumo-info { margin-top: 14px; }

.info-cabecalho {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.info-pergunta {
  margin: 0 0 10px;
  font-family: "Lora", "Georgia", serif;
  font-size: 1rem;
  color: var(--text);
}

.info-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}

.info-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}

.info-stat b {
  display: block;
  font-family: "Lora", "Georgia", serif;
  font-size: 1.3rem;
  color: var(--accent);
}

.info-stat span {
  display: block;
  margin-top: 1px;
  font-size: 0.64rem;
  line-height: 1.2;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.info-secao + .info-secao {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.info-secao-label {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 10px;
}

.info-secao-label span {
  color: var(--text-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.info-icone {
  display: inline-block;
  margin-right: 3px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 560px) {
  .info-grid { grid-template-columns: 1fr 1fr; }
}

.info-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 11px 13px;
}

.info-card-cab {
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text);
  text-align: justify;
}

.info-card-cite {
  margin: 0 0 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
}

.info-card-trecho {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.4;
  text-align: justify;
}

.info-card-extra {
  margin: 5px 0 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.resumo-grupo + .resumo-grupo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.resumo-grupo h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--gold);
}

.resumo-grupo h3 span {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.82rem;
}

.resumo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resumo-item {
  padding: 4px 4px 4px 12px;
  margin-left: -4px;
  border-left: 2px solid var(--border);
  border-radius: 0 6px 6px 0;
}

.resumo-item-cab {
  margin: 0;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  text-align: justify;
}

.resumo-item-cab .tag {
  margin-left: 6px;
  vertical-align: middle;
}

.resumo-item-meta {
  margin: 2px 0 4px;
  font-size: 0.78rem;
  color: var(--accent);
}

.resumo-item-trecho {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
  text-align: justify;
}

.resumo-item-detalhes {
  margin: 4px 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Casos agrupados (paragrafos do mesmo julgado, ex. Corte IDH, juntos --
   ver GRUPOS_AGRUPADOS_POR_DOCUMENTO no backend e casosListaHtml/
   casosInfograficoHtml em app.js) -- modo "lista". */
.resumo-casos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.resumo-caso {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
}

.resumo-caso-titulo {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  text-align: justify;
}

.resumo-caso-meta {
  margin: 0 0 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.resumo-caso-paragrafos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resumo-paragrafo {
  padding: 2px 2px 2px 10px;
  border-left: 2px solid var(--border);
}

.resumo-paragrafo-cab {
  margin: 0;
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text);
  text-align: justify;
}

.resumo-paragrafo-num {
  color: var(--accent);
  font-weight: 700;
}

.resumo-paragrafo-trecho {
  margin: 2px 0 0;
  font-size: 0.84rem;
  color: var(--text);
  text-align: justify;
}

/* Mesma ideia, modo "infografico" (cartao maior por caso, ver
   itensInfograficoHtml/casosInfograficoHtml em app.js). */
.info-casos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-caso {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 11px 13px;
}

.info-caso-titulo {
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text);
  text-align: justify;
}

.info-caso-paragrafos {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-caso-paragrafo + .info-caso-paragrafo {
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.resumo-grupo-nota {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--accent);
  font-style: italic;
  cursor: pointer;
}

.resumo-grupo-nota:hover {
  text-decoration: underline;
}

.resumo-grupo-nota:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.resumo-vazio {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.resumo-acoes {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

.resumo-acoes button {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: "Baloo 2", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.resumo-acoes button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.resumo-acoes button:disabled { opacity: 0.4; cursor: default; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.pagination button {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
}

/* Botões "Primeira página"/"Última página" -- so' o icone (« »), sem texto,
   pra nao disputar destaque com Anterior/Proxima (acao principal) nem
   apertar a barra em telas estreitas -- pedido explicito do usuario. */
.pagination-extremo-btn {
  padding: 9px 12px !important;
  font-size: 1rem !important;
  line-height: 1;
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination button:not(:disabled):hover {
  border-color: var(--accent);
}

.pagination #page-info {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.results {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.result-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0;
  text-align: justify;
}

.result-score {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.tag.muted {
  background: #eeece7;
  color: var(--text-muted);
}

.tag.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.tag.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.tag.info {
  background: var(--info-soft);
  color: var(--info);
}

.tag.neutral {
  background: var(--neutral-soft);
  color: var(--neutral);
}

.result-sintese {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: justify;
}

.result-sintese b {
  color: var(--accent);
  font-weight: 700;
}

/* Card agrupado (varios paragrafos do mesmo julgado da Corte IDH, ver
   agruparItensPorCaso/casoCardHtml em app.js) -- mesmo card de sempre, so'
   com a borda no tom "gold" (mesmo usado nos blocos de caso do painel de
   Resumo) pra se diferenciar visualmente de um card de paragrafo unico. */
.result-card--caso {
  border-left-color: var(--gold);
}

.result-caso-nota {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.result-sintese--conjunta p:first-child {
  margin: 0 0 4px;
}

.result-sintese-lista {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-sintese-lista li {
  font-size: 0.88rem;
}

.result-sintese-lista b {
  color: var(--accent);
}

.result-caso-paragrafos {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result-caso-paragrafo + .result-caso-paragrafo {
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.result-caso-paragrafo-cab {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  text-align: justify;
}

/* Rotulo "Em resumo (N trechos):" acima da lista de paragrafos agrupados
   no painel de Resumo (ver casosListaHtml/casosInfograficoHtml em app.js)
   -- mesmo espirito do resumo unico por caso da lista principal. */
.resumo-caso-rotulo {
  margin: 6px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

.result-text {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 0.95rem;
  white-space: pre-line;
  text-align: justify;
}

/* Recorte visual de texto longo (ver resultTextoHtml em shared.js) --
   clamp por numero de linhas, nao por altura fixa, pra continuar
   funcionando em qualquer tamanho de tela/fonte. O texto completo
   continua no HTML mesmo recolhido (Ctrl+F, copiar/colar e leitor de
   tela enxergam tudo) -- so a exibicao fica limitada ate o botao
   "Estender texto" ser clicado. */
.result-text--recolhido {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-text-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -4px 0 10px;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.result-text-toggle-btn:hover,
.result-text-toggle-btn:focus-visible {
  text-decoration: underline;
  outline: none;
}

.result-relacao {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: justify;
}

.result-relacao--convergente {
  background: var(--convergente-soft);
  border-left: 3px solid var(--convergente);
  color: var(--text);
}

.result-relacao--divergente {
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  color: var(--text);
}

.result-relacao-selo {
  display: inline-block;
  font-family: "Baloo 2", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: 1px;
}

.result-relacao--convergente .result-relacao-selo {
  background: var(--convergente);
  color: #fff;
}

.result-relacao--divergente .result-relacao-selo {
  background: var(--danger);
  color: #fff;
}

.result-foot {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.result-foot b { color: var(--text); font-weight: 600; }

/* Linha com os botoes de acao do card ("Consultar no tribunal" e "Versão
   para citação") -- lado a lado, quebrando pra linha de baixo em telas
   estreitas. */
.result-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* Botao "Consultar no tribunal" -- abre, em nova aba, a pagina oficial de
   consulta processual (ver urlConsultaOficial em shared.js). Pill pequeno,
   deliberadamente discreto (nao compete com o titulo/selos), mas com
   contraste suficiente pra ficar claro que e clicavel e leva pra fora do
   JLab. */
.link-oficial-tribunal,
.citar-abnt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.link-oficial-tribunal:hover,
.link-oficial-tribunal:focus-visible,
.citar-abnt-btn:hover,
.citar-abnt-btn:focus-visible {
  background: var(--accent-soft);
  text-decoration: none;
  outline: none;
}

.link-oficial-tribunal svg,
.citar-abnt-btn svg {
  flex: none;
}

/* Caixa revelada abaixo do botao "Versão para citação", com a referência
   pronta pra copiar (ver toggleCitacaoAbnt em shared.js). */
.citacao-abnt-caixa {
  width: 100%;
  margin-top: 8px;
}

.citacao-abnt-caixa textarea {
  width: 100%;
  min-height: 84px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.4;
  font-family: inherit;
  resize: vertical;
}

.citacao-abnt-aviso {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 10px;
}

footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 20px;
}

.footer-links {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-links a,
.footer-link-btn {
  color: var(--text-muted);
  text-decoration: underline;
}

.footer-link-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

/* Destaque do botão "Relatar inconsistência" (pedido explícito do usuário
   -- antes era um link discreto igual aos demais, difícil de notar). Vira
   um botão de verdade, com cor própria (dourado, já usado no restante do
   site pra sinalizar "atenção/ajuda"), em vez de texto sublinhado cor de
   rodapé. */
.footer-link-btn.relato-destaque {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
}

.footer-link-btn.relato-destaque:hover {
  background: var(--gold);
  color: #fff;
}

.footer-link-btn.relato-destaque:focus-visible {
  background: var(--gold);
  color: #fff;
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- aviso de cookies (LGPD) ---------- */

.cookies-aviso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--text);
  color: #f4f4f2;
  padding: 14px 20px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}

.cookies-aviso p {
  margin: 0;
  max-width: 620px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.cookies-aviso a {
  color: #cfe3ee;
}

.cookies-aviso-botoes {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookies-aviso-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  font-family: "Baloo 2", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.cookies-aviso-btn:hover { opacity: 0.9; }

.cookies-aviso-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Privacy by design (pedido explicito do usuario): a interface nao deve
   induzir a pessoa a aceitar cookies de rastreamento -- por isso "Recusar" e
   o botao em destaque (preenchido), e "Aceitar" fica discreto (contorno),
   invertendo o padrao mais comum de mercado. */
.cookies-aviso-recusar {
  background: var(--accent);
  color: #fff;
  border: none;
}

.cookies-aviso-recusar:hover {
  opacity: 0.9;
}

.cookies-aviso-aceitar {
  background: transparent;
  border: 1px solid rgba(244, 244, 242, 0.55);
  color: #f4f4f2;
}

.cookies-aviso-aceitar:hover {
  opacity: 1;
  background: rgba(244, 244, 242, 0.12);
}

/* Botao pequeno e permanente pra rever o aviso de cookies -- fica visivel
   mesmo depois de aceito (pedido explicito do usuario), num canto discreto. */
.cookies-revisar-btn {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 55;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.cookies-revisar-btn:hover { opacity: 0.85; }

@media (max-width: 520px) {
  .cookies-aviso { justify-content: flex-start; text-align: left; }
}

/* ---------- caixa de dialogo "Relatar inconsistência" ---------- */

.relato-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 24, 28, 0.55);
}

.relato-modal {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 4px solid var(--gold);
  padding: 20px 22px;
}

.relato-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.relato-modal-head h2 {
  margin: 0;
  font-family: "Lora", "Georgia", serif;
  font-size: 1.08rem;
  color: var(--text);
}

.relato-fechar {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.relato-fechar:hover { color: var(--text); }

.relato-contexto {
  margin: 4px 0 12px;
  padding: 8px 10px;
  background: var(--neutral-soft);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.relato-label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
}

.relato-label textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  resize: vertical;
}

.relato-label textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* campo-isca anti-spam -- invisivel pra gente de verdade, bots costumam preencher */
.relato-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.relato-status {
  margin: 8px 0 14px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.relato-status-ok { color: #2f7a4f; }
.relato-status-erro { color: var(--danger); }

.relato-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.relato-cancelar {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: "Baloo 2", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.relato-enviar {
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.relato-enviar:hover { opacity: 0.9; }
.relato-enviar:disabled { opacity: 0.6; cursor: default; }

/* ---------- painel "Novidades" (historico de versoes) ---------- */

.novidades-modal {
  max-width: 480px;
  border-left-color: var(--accent);
}

.novidades-corpo {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.novidades-versao + .novidades-versao {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.novidades-versao-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.novidades-versao-numero {
  font-family: "Baloo 2", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

.novidades-versao-data {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.novidades-lista {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.87rem;
  color: var(--text);
  line-height: 1.4;
}

/* ---------- pagina de politica de privacidade/cookies ---------- */

.privacidade-main {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.privacidade-main h2 {
  font-family: "Lora", "Georgia", serif;
  font-size: 1.15rem;
  margin: 28px 0 8px;
}

.privacidade-main h2:first-of-type { margin-top: 8px; }

.privacidade-main p,
.privacidade-main li {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.privacidade-main p {
  text-align: justify;
  hyphens: auto;
}

.privacidade-main ul { padding-left: 20px; }

@media (max-width: 520px) {
  .search-box { flex-direction: column; }
  #search-btn { width: 100%; }
}

/* ---------- pagina de precedente completo (acessivel so por link direto, sem nenhum link no site desde a v1.12) ---------- */

.precedente-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.precedente-voltar {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.precedente-voltar:hover { text-decoration: underline; }

/* Dentro da pagina de precedente o card nao e clicavel (ja e a propria
   pagina do item), entao remove o cursor/hover herdados de .result-card. */
.precedente-card {
  cursor: default;
}

.precedente-card:hover,
.precedente-card:focus-visible {
  box-shadow: none;
}

.precedente-extra {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.precedente-secao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.precedente-secao h3 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.precedente-secao p {
  margin: 0;
  font-size: 0.92rem;
  white-space: pre-line;
  text-align: justify;
}

/* ---------- cadastro/login gratuito (Supabase Auth) ---------- */
/* Fase 1 do plano Premium/Cursos: cadastro opcional e gratuito, nada e'
   bloqueado ainda. Ver PLANO_PREMIUM_CURSOS (documento interno) para o
   racional completo das duas ondas de aviso. */

.topbar-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.conta-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 6px;
}

.conta-btn {
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-family: "Baloo 2", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.conta-btn:hover,
.conta-btn:focus-visible { background: var(--accent-soft); outline: none; }

.conta-btn-sair {
  border-color: var(--border);
  color: var(--text-muted);
}

.conta-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-modal { border-left-color: var(--accent); }

.auth-intro {
  margin: 4px 0 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
}

.auth-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.auth-acoes { justify-content: space-between; align-items: center; }

.auth-esqueci {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}

.auth-esqueci:hover { color: var(--accent); }

.auth-status { margin: 8px 0 14px; font-size: 0.85rem; line-height: 1.4; }
.auth-status-ok { color: #2f7a4f; }
.auth-status-erro { color: var(--danger); }

.auth-troca {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.auth-troca-btn {
  border: none;
  background: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
  font-family: inherit;
}

/* Meus cursos (matriculas do usuario) -- ver criarModalMeusCursos em shared.js */
.meus-cursos-carregando,
.meus-cursos-vazio {
  margin: 0;
  padding: 4px 0 2px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.meus-cursos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meus-cursos-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.meus-cursos-item strong {
  display: block;
  font-family: "Baloo 2", sans-serif;
  font-size: 0.92rem;
  color: var(--text);
}

.meus-cursos-item p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.meus-cursos-abrir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--gold);
  color: #fff;
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.meus-cursos-abrir:hover {
  filter: brightness(0.94);
}

/* Aviso da 1a onda de transicao -- ver DATA_LIMITE_CADASTRO em shared.js */
.banner-cadastro {
  position: relative;
  z-index: 60;
  background: var(--gold-soft);
  border-bottom: 1px solid var(--gold);
  padding: 10px 44px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-cadastro p {
  margin: 0;
  max-width: 760px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
}

.banner-cadastro-criar {
  display: inline-block;
  margin-left: 8px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: "Baloo 2", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.banner-cadastro-fechar {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 6px;
}

.banner-cadastro-fechar:hover { color: var(--text); }

@media (max-width: 640px) {
  .topbar-inner { justify-content: flex-start; }
  .conta-area { margin-left: auto; }
}

@media (max-width: 520px) {
  .banner-cadastro { padding: 10px 40px 10px 14px; }
  .banner-cadastro-criar { display: block; margin: 6px auto 0; width: fit-content; }
}

/* ---------- pagina "Cursos e cronogramas" (v1.41) ---------- */

.cursos-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.cursos-titulo {
  font-size: 1.5rem;
  margin: 4px 0 10px;
}

.cursos-intro {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 62ch;
}

.cursos-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.curso-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.curso-card--em-breve {
  border-left-style: dashed;
  opacity: 0.75;
}

.curso-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.curso-card-titulo {
  font-size: 1.05rem;
  margin: 0;
}

.curso-card-preco {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--gold-strong, var(--gold));
  white-space: nowrap;
}

.curso-card-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eeece7;
  color: var(--text-muted);
  white-space: nowrap;
}

.curso-card-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

.curso-card-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.curso-cta-conta,
.curso-cta-comprar {
  font-family: "Baloo 2", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.curso-cta-conta {
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}

.curso-cta-conta:hover,
.curso-cta-conta:focus-visible { background: var(--accent-soft); outline: none; }

.curso-cta-comprar {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #fff;
}

.curso-cta-comprar:hover { opacity: 0.9; }

.curso-card-logado {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.curso-card-nota {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-faint, var(--text-muted));
}

@media (max-width: 520px) {
  .curso-card-cta { flex-direction: column; align-items: flex-start; }
  .curso-cta-conta, .curso-cta-comprar { width: 100%; text-align: center; }
}