/* Comunidade Espírita Ramatis — estilos.
   IDENTIDADE VISUAL: cores e fonte seguem o site comunidaderamatis.com.br
   (azul #0091D9 / #0071A9, amarelo #F6C546, neutros e DM Sans).
   Todas as cores e fontes ficam neste primeiro bloco. */
:root {
  /* Azul da marca */
  --cor-primaria: #0071a9;        /* textos, links e fundos com texto branco */
  --cor-primaria-forte: #005a87;
  --cor-primaria-viva: #0091d9;   /* cor do logo: uso decorativo e em títulos grandes */
  --cor-primaria-suave: #e3f4fc;
  /* Amarelo da marca: botão principal, como no site da Casa */
  --cor-destaque: #f6c546;
  --cor-destaque-forte: #e8aa0b;
  --cor-destaque-suave: #fff4d6;
  /* Neutros */
  --cor-fundo: #f6f6f6;
  --cor-superficie: #ffffff;
  --cor-superficie-suave: #f0f1f2;
  --cor-texto: #191b1f;
  --cor-texto-forte: #3b3d40;
  --cor-texto-suave: #5e6063;
  --cor-linha: #e0e0e2;
  --cor-borda-campo: #a3a4a5;
  --cor-escuro: #191b1f;
  /* Situações */
  --cor-ok: #17693f;
  --cor-ok-suave: #d9fae5;
  --cor-erro: #b3002a;
  --cor-erro-suave: #ffd9e1;
  --cor-aviso: #7a4a00;
  --cor-aviso-suave: #ffefd9;
  --fonte-titulo: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --raio: 12px;
  --raio-botao: 5px;
  --sombra: 0 1px 2px rgba(25, 27, 31, .05), 0 6px 20px rgba(25, 27, 31, .05);
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cor-fundo); color: var(--cor-texto);
  font-family: var(--fonte-texto); font-size: 1rem; line-height: 1.55;
}
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; text-wrap: balance; color: var(--cor-texto-forte); letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--cor-primaria); text-underline-offset: 2px; }
a:hover { color: var(--cor-primaria-forte); }
:focus-visible { outline: 3px solid var(--cor-primaria-viva); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 0; background: var(--cor-primaria); color: #fff; padding: .6rem 1rem; z-index: 10; }
.pular:focus { left: .5rem; top: .5rem; }
.suave { color: var(--cor-texto-suave); }
.pequeno { font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }

/* Cabeçalho do site */
.topo { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-linha); }
.topo-dentro { max-width: 1080px; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--cor-primaria-viva); }
.marca:hover { color: var(--cor-primaria); }
.logo { display: block; height: 38px; width: auto; flex: none; }
.marca-nome { color: var(--cor-texto-suave); font-size: .8rem; font-weight: 500; line-height: 1.2; border-left: 1px solid var(--cor-linha); padding-left: .75rem; max-width: 9rem; }
.topo-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.topo-nav a, .link-botao { color: var(--cor-texto); text-decoration: none; padding: .5rem .7rem; border-radius: 8px; font-size: .95rem; }
.topo-nav a:hover, .link-botao:hover { background: var(--cor-superficie-suave); }
.link-botao { background: none; border: 0; font: inherit; cursor: pointer; }
.pagina { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.rodape { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; color: var(--cor-texto-suave); font-size: .85rem; }

/* Página simples (entrar, ativar, erros) */
.simples { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.simples-caixa { width: 100%; max-width: 440px; }
.simples-marca { justify-content: center; margin-bottom: 1.25rem; }

/* Cartões e blocos */
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: var(--raio); padding: 1.25rem; box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: 1rem; }
.cartao > :last-child { margin-bottom: 0; }
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between; margin-bottom: 1.25rem; }
.cabecalho-pagina h1 { margin: 0; }
.acolhida { background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-forte) 100%); color: #fff; border-radius: var(--raio); padding: 2.25rem 1.5rem; }
.acolhida h1 { color: #fff; }
.acolhida p { color: #eaf6fc; max-width: 60ch; font-size: 1.05rem; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grade-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.indicador { display: block; text-decoration: none; color: inherit; }
.indicador:hover { border-color: var(--cor-primaria-viva); }
.indicador strong { display: block; font-family: var(--fonte-titulo); font-size: 2.1rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--cor-primaria); }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: .65rem 0; border-top: 1px solid var(--cor-linha); }
.lista-simples li:first-child { border-top: 0; padding-top: 0; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.dados dt { color: var(--cor-texto-suave); font-size: .9rem; }
.dados dd { margin: 0; overflow-wrap: anywhere; }

/* Formulários */
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.campo { margin-bottom: 1rem; }
.ajuda { display: block; font-weight: 400; color: var(--cor-texto-suave); font-size: .85rem; margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=file], select, textarea {
  width: 100%; padding: .65rem .75rem; font: inherit; color: var(--cor-texto);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda-campo); border-radius: 6px; min-height: 46px;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--cor-primaria-suave); border-color: var(--cor-primaria); }
.marcar { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.marcar input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--cor-primaria); }
.linha-campos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.filtros { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; margin-bottom: 1rem; }
.filtros .campo { margin: 0; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px;
  padding: .65rem 1.25rem; border-radius: var(--raio-botao); border: 1px solid var(--cor-destaque);
  background: var(--cor-destaque); color: var(--cor-texto-forte); font: inherit; font-weight: 600; font-size: .9rem;
  letter-spacing: .03em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--cor-destaque-forte); border-color: var(--cor-destaque-forte); color: var(--cor-texto); }
.botao-secundario { background: var(--cor-superficie); color: var(--cor-primaria); border-color: var(--cor-primaria); }
.botao-secundario:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); border-color: var(--cor-primaria-forte); }
.botao-azul { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.botao-azul:hover { background: var(--cor-primaria-forte); color: #fff; border-color: var(--cor-primaria-forte); }
.botao-perigo { background: var(--cor-superficie); color: var(--cor-erro); border-color: var(--cor-erro); }
.botao-perigo:hover { background: var(--cor-erro-suave); color: var(--cor-erro); border-color: var(--cor-erro); }
.botao-pequeno { min-height: 38px; padding: .35rem .85rem; font-size: .8rem; }
.botao-largo { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
form.em-linha { display: inline; }

/* Avisos */
.aviso { border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; }
.aviso-success { background: var(--cor-ok-suave); border-color: #a9e8c2; color: #0f4a2b; }
.aviso-error { background: var(--cor-erro-suave); border-color: #ffb3c4; color: #7d001d; }
.aviso-info { background: var(--cor-primaria-suave); border-color: #b5e0f5; color: #004466; }
.aviso-atencao { background: var(--cor-aviso-suave); border-color: #ffd699; color: #5c3800; }
.copiar { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.copiar input { flex: 1 1 240px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }

/* Etiquetas */
.etiqueta { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--cor-superficie-suave); color: var(--cor-texto-suave); white-space: nowrap; }
.etiqueta-ok { background: var(--cor-ok-suave); color: var(--cor-ok); }
.etiqueta-aviso { background: var(--cor-aviso-suave); color: var(--cor-aviso); }
.etiqueta-erro { background: var(--cor-erro-suave); color: var(--cor-erro); }
.etiqueta-primaria { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); }
.etiqueta-destaque { background: var(--cor-destaque-suave); color: #6b4e00; }

/* Tabelas: rolam dentro do próprio bloco em telas estreitas */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--cor-linha); border-radius: var(--raio); background: var(--cor-superficie); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--cor-linha); vertical-align: top; }
th { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); background: var(--cor-superficie-suave); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.quebra { overflow-wrap: anywhere; min-width: 14rem; }
tbody td:first-child { min-width: 9rem; }
tbody td.num:first-child { min-width: 0; white-space: nowrap; }
.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--cor-texto-suave); }
.paginacao { display: flex; gap: .5rem; align-items: center; justify-content: space-between; margin-top: 1rem; flex-wrap: wrap; }

details.recolhe { border: 1px solid var(--cor-linha); border-radius: 8px; background: var(--cor-superficie); }
details.recolhe + details.recolhe { margin-top: .6rem; }
details.recolhe > summary { cursor: pointer; padding: .75rem 1rem; font-weight: 600; list-style-position: inside; }
details.recolhe > .recolhe-corpo { padding: 0 1rem 1rem; }

/* Painel administrativo */
.admin { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.admin-lateral { background: var(--cor-escuro); color: #c5c6c7; padding: 1.1rem .75rem; }
.admin-lateral .marca { color: #fff; padding: .25rem .5rem 1.1rem; }
.admin-lateral .logo { height: 32px; }
.admin-menu { list-style: none; margin: 0; padding: 0; }
.admin-menu a { display: block; color: #e8e8e9; text-decoration: none; padding: .55rem .75rem; border-radius: 6px; font-size: .95rem; }
.admin-menu a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.admin-menu a[aria-current=page] { background: var(--cor-primaria-viva); color: #fff; font-weight: 600; }
.admin-menu .grupo { margin: 1rem .75rem .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #a3a4a5; }
.admin-principal { min-width: 0; }
.admin-barra { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .6rem 1.25rem; background: var(--cor-superficie); border-bottom: 1px solid var(--cor-linha); flex-wrap: wrap; }
.admin-conteudo { padding: 1.5rem 1.25rem 3rem; max-width: 1180px; }
.admin-menu-botao { display: none; }

@media (max-width: 860px) {
  .admin { display: block; }
  .admin-lateral { padding: .5rem .75rem; }
  .admin-lateral .marca { padding: .25rem .5rem; }
  .admin-menu-botao { display: block; }
  .admin-menu-botao > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: #fff; }
  .admin-menu-botao > summary::-webkit-details-marker { display: none; }
  .admin-menu-botao > summary .abre { border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; padding: .4rem .8rem; font-size: .9rem; }
  .admin-lateral > .marca, .admin-lateral > nav { display: none; }
  .admin-menu-botao[open] > summary { margin-bottom: .5rem; }
  .admin-conteudo { padding: 1.25rem 1rem 3rem; }
  .dados { grid-template-columns: 1fr; gap: 0; }
  .dados dd { margin-bottom: .6rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .botao, .admin-menu a, .indicador { transition: background-color .15s, border-color .15s, color .15s; }
}
.espaco-acima { margin-top: 1rem; }
.centro { text-align: center; }
.espaco-acima-pequeno { margin-top: .5rem; }
.midia-grade { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.midia-item.cartao + .midia-item.cartao { margin-top: 0; }
.midia-miniatura { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--cor-superficie-suave); margin-bottom: .75rem; }
.midia-arquivo { display: grid; place-items: center; text-decoration: none; font-weight: 700; letter-spacing: .08em; color: var(--cor-texto-suave); }
.quebra-palavra { overflow-wrap: anywhere; }
.grade > .cartao + .cartao { margin-top: 0; }
summary .etiqueta { margin-left: .35rem; }
code, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: var(--cor-superficie-suave); padding: .1rem .35rem; border-radius: 4px; overflow-wrap: anywhere; }
.instalacao { max-width: 760px; } .instalacao .marca { margin-bottom: 1rem; } button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) { .admin-barra > .suave { display: none; } .admin-barra { padding: .4rem .5rem; } }
.simples-marca { display: flex; }
.simples-marca .logo { height: 46px; }
.instalacao .logo { height: 44px; }
@media (max-width: 480px) { .marca-nome { display: none; } .logo { height: 32px; } }

/* Páginas públicas (cadastro) */
.topo-estreito, .pagina-estreita { max-width: 640px; }
.acolhida-compacta { padding: 1.5rem 1.25rem; }
.acolhida-compacta h1 { font-size: clamp(1.5rem, 6vw, 1.9rem); margin-bottom: .35rem; }
.acolhida-compacta p { margin: 0; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.erro-campo { display: block; color: var(--cor-erro); font-size: .88rem; font-weight: 500; margin-top: .3rem; }
[aria-invalid=true] { border-color: var(--cor-erro) !important; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 600; font-size: .92rem; margin-bottom: .45rem; padding: 0; }
.opcoes-linha { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcoes-linha legend { width: 100%; }
.opcao, .chip { position: relative; display: inline-flex; font-weight: 400; margin: 0; }
.opcao input, .chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcao span, .chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .95rem; border: 1px solid var(--cor-borda-campo);
  border-radius: 999px; background: var(--cor-superficie); font-size: .93rem; line-height: 1.25;
}
.opcao input:checked + span, .chip input:checked + span { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; font-weight: 500; }
.opcao input:focus-visible + span, .chip input:focus-visible + span { outline: 3px solid var(--cor-primaria-viva); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bloco-responsavel { background: var(--cor-destaque-suave); border: 1px solid #f3dc9a; border-radius: var(--raio); padding: 1rem; }
.bloco-responsavel legend { float: left; width: 100%; font-size: 1rem; }
.bloco-responsavel legend + * { clear: both; }
.js .bloco-responsavel:not([data-aberto]) { display: none; }
.bloco-termos { background: var(--cor-superficie-suave); border-radius: var(--raio); padding: 1rem; }
.bloco-termos h2 { font-size: 1rem; }
.bloco-termos .marcar + .marcar { margin-top: .5rem; }
.caminhos { display: grid; gap: .75rem; }
.caminho { display: block; text-decoration: none; color: inherit; border-left: 4px solid var(--cor-primaria-viva); }
.caminho:hover { border-color: var(--cor-primaria); border-left-color: var(--cor-destaque); }
.caminho strong { display: block; color: var(--cor-primaria); font-size: 1.05rem; }
.cartao.caminho + .cartao.caminho { margin-top: 0; }

/* Painel: cadastro por QR */
.qr-area { display: grid; gap: 1.25rem; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.qr-caixa { width: 220px; min-height: 220px; display: grid; place-items: center; background: #fff; border: 1px solid var(--cor-linha); border-radius: 8px; text-align: center; padding: 0; overflow: hidden; }
.qr-caixa img { display: block; }
.linha-opcao { display: grid; grid-template-columns: minmax(0, 1fr) 5rem auto auto; gap: .5rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--cor-linha); }
.linha-opcao .marcar { margin: 0; align-items: center; font-size: .9rem; }
.linha-opcao .marcar input { margin-top: 0; }
.linha-nova { grid-template-columns: minmax(0, 1fr) auto; padding-top: .75rem; }
@media (max-width: 560px) {
  .qr-area { grid-template-columns: 1fr; }
  .linha-opcao { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .linha-nova { grid-template-columns: minmax(0, 1fr) auto; }
}
.botao-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.botao-claro:hover { background: rgba(255, 255, 255, .15); color: #fff; border-color: #fff; }

/* ---------------------------------------------------------------- Conteúdo */
.espaco-acima-grande { margin-top: 2rem; }
.centro-flex { justify-content: center; }
.rotulo-tipo { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-primaria); margin: 0 0 .25rem; }
.rotulo-tipo a { color: inherit; text-decoration: none; }
.rotulo-tipo a:hover { text-decoration: underline; }
.grade-conteudo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grade-destaque { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cartao-conteudo { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: inherit; }
.cartao.cartao-conteudo + .cartao.cartao-conteudo { margin-top: 0; }
.cartao-conteudo:hover { border-color: var(--cor-primaria-viva); }
.cartao-conteudo:hover .cartao-titulo { color: var(--cor-primaria); }
.cartao-capa { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cor-superficie-suave); }
.cartao-capa-vazia { display: grid; place-items: center; background: linear-gradient(135deg, var(--cor-primaria-suave), #c9e9f8); color: var(--cor-primaria); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.cartao-capa-audio { background: linear-gradient(135deg, var(--cor-destaque-suave), #fbe3a1); color: #6b4e00; }
.cartao-capa-video { background: linear-gradient(135deg, #e8e8e9, #c5c6c7); color: var(--cor-texto-forte); }
.cartao-corpo { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.15rem; }
.cartao-titulo { display: block; font-size: 1.08rem; font-weight: 600; line-height: 1.3; color: var(--cor-texto-forte); }
.cartao-resumo { font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.progresso { display: block; height: 5px; border-radius: 3px; background: var(--cor-linha); overflow: hidden; margin-top: .35rem; }
.progresso-barra { display: block; height: 100%; background: var(--cor-primaria-viva); }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.filtro-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip-link { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem; border: 1px solid var(--cor-borda-campo); border-radius: 999px; background: var(--cor-superficie); color: var(--cor-texto-forte); text-decoration: none; font-size: .92rem; }
.chip-link:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.chip-link[aria-current=page] { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; font-weight: 500; }
.chip-tema { min-height: 34px; font-size: .85rem; background: var(--cor-superficie-suave); border-color: transparent; }

.atalhos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.atalho { display: flex; flex-direction: column; min-width: 7.5rem; padding: .7rem 1rem; border-radius: 10px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; text-decoration: none; }
.atalho:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.atalho strong { font-size: 1.05rem; }
.atalho span { font-size: .82rem; color: #d9eef9; }

.leitura { max-width: 720px; margin: 0 auto; }
.leitura h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.leitura-resumo { font-size: 1.15rem; color: var(--cor-texto-forte); max-width: 62ch; }
.leitura-meta { margin-bottom: 1.25rem; }
.leitura-capa { display: block; width: 100%; border-radius: var(--raio); margin-bottom: 1.5rem; }
.video-caixa { position: relative; aspect-ratio: 16 / 9; margin-bottom: 1.5rem; border-radius: var(--raio); overflow: hidden; background: #000; }
.video-caixa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-video { display: block; width: 100%; border-radius: var(--raio); background: #000; margin-bottom: 1.5rem; }
.player-audio { background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: var(--raio); padding: 1rem; margin-bottom: 1.5rem; }
.player-audio audio { display: block; width: 100%; }
.player-audio p { margin: 0 0 .5rem; }
.texto-rico { font-size: 1.08rem; line-height: 1.7; overflow-wrap: break-word; }
.texto-rico h2 { font-size: 1.45rem; margin-top: 2rem; }
.texto-rico h3 { font-size: 1.2rem; margin-top: 1.5rem; }
.texto-rico h4 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.texto-rico p { margin: 0 0 1.1em; }
.texto-rico ul, .texto-rico ol { margin: 0 0 1.1em; padding-left: 1.4rem; }
.texto-rico li { margin-bottom: .35em; }
.texto-rico blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem; border-left: 4px solid var(--cor-destaque); color: var(--cor-texto-forte); font-size: 1.12rem; }
.texto-rico img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 1.25rem auto; }
.texto-rico hr { border: 0; border-top: 1px solid var(--cor-linha); margin: 2rem 0; }
.leitura-temas { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.leitura-acoes { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cor-linha); }
.util { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
[aria-pressed=true].botao-secundario { background: var(--cor-primaria); color: #fff; }
.serie-nav { max-width: 720px; margin: 1.5rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.serie-nav .cartao { display: flex; flex-direction: column; text-decoration: none; color: inherit; margin: 0; }
.serie-nav .cartao:hover { border-color: var(--cor-primaria-viva); }
.serie-proximo { text-align: right; }
.passos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; max-width: 720px; }
.passo { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; text-decoration: none; color: inherit; }
.passo:hover { border-color: var(--cor-primaria-viva); }
.passo-numero { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--cor-primaria); color: #fff; display: grid; place-items: center; font-weight: 600; }
.passo > span:last-child { display: flex; flex-direction: column; gap: .2rem; }
@media (max-width: 640px) { .topo-nav { margin-left: 0; width: 100%; gap: 0; } .topo-nav a, .topo-nav .link-botao { padding: .45rem .6rem; font-size: .9rem; } }

/* Painel: editor de conteúdo */
.grade-editor { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
.grade-editor > div > * + * { margin-top: 1rem; }
.sem-borda { border: 0; padding: 0; margin: 0; min-width: 0; }
.rotulo { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
textarea.baixo { min-height: 4.5rem; }
.editor-barra { display: none; flex-wrap: wrap; gap: .3rem; padding: .4rem; border: 1px solid var(--cor-borda-campo); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--cor-superficie-suave); position: sticky; top: 0; z-index: 2; }
.editor-barra button { min-height: 36px; padding: .25rem .65rem; border: 1px solid var(--cor-linha); border-radius: 5px; background: var(--cor-superficie); font: inherit; font-size: .85rem; cursor: pointer; }
.editor-barra button:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.editor-area { display: none; min-height: 22rem; padding: 1rem 1.1rem; border: 1px solid var(--cor-borda-campo); border-radius: 0 0 6px 6px; background: var(--cor-superficie); }
.editor-area:focus { outline: 3px solid var(--cor-primaria-suave); border-color: var(--cor-primaria); }
.editor-area[contenteditable=false] { background: var(--cor-superficie-suave); }
.editor-fonte { min-height: 18rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; }
.editor-ativo .editor-barra { display: flex; }
.editor-ativo .editor-area { display: block; }
.editor-ativo .editor-fonte { display: none; }
.seletor-imagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; max-height: 17rem; overflow-y: auto; padding: .15rem; }
.miniatura { position: relative; display: block; aspect-ratio: 1; border: 2px solid var(--cor-linha); border-radius: 8px; overflow: hidden; background: var(--cor-superficie-suave); padding: 0; cursor: pointer; margin: 0; }
.miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { border-color: var(--cor-primaria-viva); }
.miniatura-opcao input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.miniatura-opcao:has(input:checked) { border-color: var(--cor-primaria); box-shadow: 0 0 0 2px var(--cor-primaria); }
.miniatura-opcao:has(input:focus-visible) { outline: 3px solid var(--cor-primaria-viva); outline-offset: 2px; }
.sem-capa { display: grid; place-items: center; height: 100%; font-size: .75rem; font-weight: 400; color: var(--cor-texto-suave); text-align: center; }
.lista-rolagem { max-height: 18rem; overflow-y: auto; }
.lista-rolagem .marcar { padding: .3rem 0; }
.barra-acoes { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0; margin-top: 1rem; background: linear-gradient(to top, var(--cor-fundo) 75%, transparent); z-index: 3; }
fieldset:disabled .botao { opacity: .55; }
.linha-tema { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto auto; gap: .5rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--cor-linha); }
.linha-tema .marcar { margin: 0; align-items: center; font-size: .9rem; }
.linha-tema .marcar input { margin-top: 0; }
.linha-tema-nova { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; padding-top: .75rem; }
.linha-tipo { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; }
.lista-passos li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
@media (max-width: 900px) {
  .grade-editor { grid-template-columns: 1fr; }
  .linha-tema, .linha-tema-nova, .linha-tipo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .serie-nav { grid-template-columns: 1fr; } .serie-proximo { text-align: left; } }