/* ==========================================================================
   CONTA - telas da frente A (entrar, cadastro, perfil, lembretes, agenda, Bíblia,
   galeria, notificações, Mais). Só o que o base.css/site.css não tem.
   No protótipo, .opcao/.chave/.chip mudavam de estado por JS de apresentação; aqui
   são <input> de verdade (o formulário funciona sem JS) e o visual vem do :checked.
   ========================================================================== */

/* ---------------- Login (A-01): faixa da marca com o cartão por cima ---------------- */
.entrar-topo { background: linear-gradient(160deg, var(--brand-900), var(--brand-500)); color: #fff; padding: 36px 28px 70px; text-align: center; border-radius: 22px; }
.entrar-topo img { width: 230px; max-width: 80%; margin: 0 auto; }
.entrar-topo p { margin-top: 18px; font-size: 14px; opacity: .92; }
.entrar-cartao { margin: -46px 14px 0; padding: 20px; position: relative; }
.entrar-cartao h1, .entrar-cartao h2 { font-size: 19px; margin-bottom: 14px; }
.link-forte { font-size: 13px; color: var(--brand-500); font-weight: 600; text-decoration: none; }
.link-forte:hover { text-decoration: underline; }
.conta-estreita { max-width: 460px; margin: 0 auto; }

/* ---------------- Erros de campo além do input ---------------- */
.campo.erro select, .campo.erro textarea { border-color: var(--erro); }
.campo.erro .opcao { border-color: var(--erro); }
/* :where() zera a especificidade: .cartao, .mt16 etc. continuam valendo no fieldset. */
:where(fieldset.campo) { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
:where(fieldset.campo) > legend { font-size: 12.5px; font-weight: 600; color: var(--tx-2); padding: 0; margin-bottom: 5px; }

/* ---------------- .opcao com checkbox/radio de verdade ---------------- */
label.opcao { position: relative; }
.opcao > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opcao:has(> input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.opcao:has(> input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcao .marca-check svg { visibility: hidden; }
.opcao:has(> input:checked) .marca-check { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.opcao:has(> input:checked) .marca-check svg { visibility: visible; }
.opcao .marca-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borda-2); flex: none; background: #fff; }
.opcao:has(> input:checked) .marca-radio { border: 7px solid var(--brand-500); }
.opcoes { display: grid; gap: 8px; }

/* ---------------- .chave (liga/desliga) com checkbox ---------------- */
.linha-chave { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.linha-chave .txt-chave { min-width: 0; }
.linha-chave .txt-chave b { display: block; font-size: 14px; }
.linha-chave .txt-chave .muted { display: block; font-size: 12px; }
.linha-chave .chave-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
span.chave { display: inline-block; }
.chave-in:checked + .chave { background: var(--brand-500); }
.chave-in:checked + .chave::after { left: 21px; }
.chave-in:focus-visible + .chave { outline: 3px solid var(--foco); outline-offset: 2px; }
.lista-chaves > .linha-chave { padding: 11px 0; border-bottom: 1px solid var(--borda); }
.lista-chaves > .linha-chave:last-child { border-bottom: 0; }
.lista-chaves > .linha-chave .txt-chave b { font-size: 13.5px; }
.lista-chaves > .linha-chave .txt-chave .muted { font-size: 11.5px; }

/* ---------------- Chips de escolha (antecedência) ---------------- */
.chips-op { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-op { cursor: pointer; }
.chip-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-op .chip { padding: 7px 13px; font-size: 12.5px; background: var(--cinza-50); color: var(--tx-2); }
.chip-op input:checked + .chip { background: var(--brand-500); color: #fff; }
.chip-op input:focus-visible + .chip { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---------------- Termo de uso de imagem ---------------- */
.termo-texto { background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--tx-2); max-height: 180px; overflow: auto; }
/* Declaração do menor, dentro do modal: mais alta, e é nela que se rola até o fim. */
.termo-texto.termo-rolar { max-height: min(46vh, 320px); }

/* ---------------- Mais (A-17) ---------------- */
.item-mais { display: flex; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--borda); gap: 14px; text-decoration: none; color: inherit; }
.item-mais:last-child { border-bottom: 0; }
.item-mais:hover { color: var(--brand-700); }
.item-mais .ic-mais { color: var(--brand-500); display: grid; }
.item-mais .rot-mais { flex: 1; font-size: 14.5px; }
.item-mais .qtd-mais { background: var(--acento-600); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }

/* ---------------- Notificações ---------------- */
a.notif { text-decoration: none; color: inherit; }
a.notif:hover { border-color: var(--brand-200); }
.notif.nova { border-color: var(--brand-200); background: var(--brand-50); }
.notif .ponto-novo { width: 8px; height: 8px; border-radius: 50%; background: var(--acento-600); flex: none; margin-top: 6px; }
.lista-notif { display: grid; gap: 8px; }

/* ---------------- Agenda: mês em tela grande (W-03) ---------------- */
.mes-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mes-grade .ds { font-size: 12px; font-weight: 600; color: var(--tx-3); padding: 6px 8px; }
.mes-grade .vazio-dia { background: var(--cinza-50); border-radius: 10px; min-height: 96px; }
.mes-dia { background: #fff; border: 1px solid var(--borda); border-radius: 10px; min-height: 96px; padding: 6px; min-width: 0; }
.mes-dia.hoje { border-color: var(--brand-500); }
.mes-dia.sel { box-shadow: inset 0 0 0 2px var(--brand-200); }
.mes-dia .num { font-size: 12.5px; font-weight: 700; color: var(--tx); text-decoration: none; }
.mes-dia.hoje .num { color: var(--brand-700); }
.mes-item { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.3; margin-top: 4px; padding: 2px 6px; border-radius: 6px; border-left: 3px solid var(--brand-500); background: var(--brand-50); color: var(--tx); text-decoration: none; }
.mes-item.estudo { border-color: var(--brand-200); }
.mes-item.evento { border-color: var(--acento-600); background: var(--acento-50); }
a.mes-item:hover { text-decoration: underline; }
.sino-on { color: var(--brand-500); }
.sino-off { color: var(--borda-2); }

/* ---------------- Bíblia (A-16) ---------------- */
.biblia-texto h2 { font-size: 18px; margin-bottom: 10px; }
.biblia-texto p { font-size: 14.5px; line-height: 1.7; margin-bottom: 6px; scroll-margin-top: 80px; }
.biblia-texto sup { color: var(--brand-500); font-weight: 700; margin-right: 4px; }
.biblia-texto p.realce-v { background: #fff6d6; border-radius: 6px; padding: 2px 6px; margin-left: -6px; margin-right: -6px; }
.biblia-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }

/* ---------------- Galeria (A-15) ---------------- */
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.foto { display: block; }
a.foto:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.album-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: inherit; }
.grade-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.foto-grande { background: #0b1a20; padding: 0; max-width: 960px; overflow: hidden; position: relative; }
.foto-grande img { width: 100%; max-height: calc(100vh - 80px); object-fit: contain; }
.foto-grande .fechar { position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; color: var(--tx); }
@media (min-width: 701px) {
  .grade-fotos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grade-fotos.album { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* .so-cel força display:block e desalinha o ícone do botão redondo de voltar. */
  .cab-pagina .voltar.so-cel { display: grid !important; }
  .entrar-topo { margin: -14px -16px 0; border-radius: 0 0 22px 22px; }
  .entrar-cartao { margin: -46px 0 0; }
}
/* O hover genérico do .btn pinta de azul; no botão de perigo o texto vermelho sumiria. */
.btn.perigo:hover { background: var(--erro-50); }
/* No dia selecionado (fundo azul) os pontos de culto ficariam azul sobre azul: o
   !important das cores .pt-* (site.css) venceria o branco do .d.sel. */
.cal-grade .d.sel .pts i { background: #fff !important; }
@media (min-width: 701px) {
  /* .cab-pagina .voltar (display:grid) venceria o .so-cel no computador. */
  .cab-pagina .voltar.so-cel { display: none; }
}