/* Liturgia das Horas — Lirio Catolico */
:root{
  --lh-tinta:#1c1917;
  --lh-suave:#6b6560;
  --lh-linha:#e7e2da;
  --lh-papel:#fffdf9;
  --lh-realce:#8c1c13;      /* rubrica: vermelho liturgico */
  --lh-dourado:#a8862c;
  --lh-fundo-caixa:#f7f4ee;
  --lh-corpo:1.0625rem;
}
.lh-wrap{max-width:52rem;margin:0 auto;padding:0 1rem 4rem}

/* ---- cabecalho do dia ---- */
.lh-hero{text-align:center;padding:1.5rem 0 .5rem}
.lh-hero h1{font-size:1.9rem;line-height:1.2;margin-bottom:.4rem}
.lh-hero .lh-sub{color:var(--lh-suave);font-size:1rem}
.lh-selo{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--lh-linha);
  background:var(--lh-fundo-caixa);color:var(--lh-suave);border-radius:999px;
  padding:.25rem .7rem;font-size:.8rem;margin:.15rem}

/* ---- barra "agora" ---- */
/* O menu do site e fixo e cobre a faixa de cima (67px). Com top:0 esta barra
   grudava ATRAS dele e simplesmente sumia ao rolar. A altura vem do proprio
   menu, medida em tempo de execucao (--lh-topo-menu); o valor de reserva
   cobre o padrao, para o caso de o menu ainda nao ter chegado. */
.lh-agora{position:sticky;top:var(--lh-topo-menu,72px);z-index:30;
  background:var(--lh-papel);
  border-bottom:1px solid var(--lh-linha);padding:.6rem 1rem;margin-bottom:1rem}
.lh-agora-in{max-width:52rem;margin:0 auto;display:flex;align-items:center;
  gap:.6rem;flex-wrap:wrap;justify-content:center}
.lh-agora b{color:var(--lh-realce)}
.lh-agora .lh-btn{margin-left:auto}

/* ---- navegacao de data ---- */
.lh-datanav{display:flex;align-items:center;justify-content:center;gap:.5rem;
  flex-wrap:wrap;margin:.5rem 0 1rem}
.lh-btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--lh-linha);
  background:#fff;color:var(--lh-tinta);border-radius:.5rem;padding:.45rem .8rem;
  font-size:.9rem;cursor:pointer;text-decoration:none;font-family:inherit}
.lh-btn:hover{background:var(--lh-fundo-caixa)}
.lh-btn[disabled]{opacity:.45;cursor:not-allowed}
.lh-btn-forte{background:var(--lh-realce);border-color:var(--lh-realce);color:#fff}
.lh-btn-forte:hover{background:#731710}
.lh-datanav input[type=date]{border:1px solid var(--lh-linha);border-radius:.5rem;
  padding:.4rem .6rem;font-family:inherit;font-size:.9rem}

/* ---- abas das horas ----
   Grade que quebra linha, e nao uma fila rolavel: com 14 Horas (memorias +
   Terza/Sesta/Nona) a fila em pilula obrigava rolagem lateral. Em grade tudo
   fica visivel de uma vez, em qualquer largura. */
.lh-abas{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.4rem;border-bottom:1px solid var(--lh-linha);padding-bottom:.6rem;
  margin-bottom:.25rem}
.lh-aba{border:1px solid var(--lh-linha);background:#fff;border-radius:.5rem;
  padding:.55rem .7rem;font-size:.9rem;cursor:pointer;color:var(--lh-suave);
  font-family:inherit;text-align:left;line-height:1.3;
  overflow-wrap:break-word;hyphens:auto}
.lh-aba:hover{background:var(--lh-fundo-caixa)}
.lh-aba[aria-selected=true]{background:var(--lh-realce);border-color:var(--lh-realce);
  color:#fff;font-weight:600}
.lh-aba .fa-clock{color:var(--lh-dourado)}
.lh-aba[aria-selected=true] .fa-clock{color:#fff}

/* ---- ferramentas ---- */
.lh-ferramentas{display:flex;gap:.4rem;justify-content:flex-end;margin:.6rem 0}

/* ---- texto liturgico ---- */
.lh-oficio{background:var(--lh-papel);border:1px solid var(--lh-linha);
  border-radius:.75rem;padding:1.5rem 1.25rem;font-size:var(--lh-corpo);line-height:1.7}
.lh-oficio .lh-titulo{font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:.95em;color:var(--lh-realce);margin:1.6rem 0 .5rem;
  border-bottom:1px solid var(--lh-linha);padding-bottom:.25rem}
.lh-oficio .lh-titulo:first-child{margin-top:0}
.lh-oficio .lh-ref{font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--lh-suave);font-size:.9em;margin-left:.4rem}
.lh-oficio .lh-sentenca{font-style:italic;color:var(--lh-suave);
  background:var(--lh-fundo-caixa);border-left:2px solid var(--lh-dourado);
  padding:.5rem .75rem;margin:.5rem 0 .9rem;font-size:.95em}
.lh-oficio .lh-subtitulo{font-style:italic;color:var(--lh-realce);margin:.6rem 0}
.lh-oficio .lh-antifona{margin:.9rem 0;padding-left:.75rem;
  border-left:2px solid var(--lh-realce)}
.lh-oficio .lh-versiculo{margin:.7rem 0}
.lh-oficio .lh-verso{margin:.7rem 0}
.lh-oficio .lh-rubrica{color:var(--lh-realce);font-style:italic;font-size:.88em;
  margin:.7rem 0}
.lh-oficio .lh-citacao,.lh-oficio .lh-referencia{color:var(--lh-suave);font-size:.85em;
  margin:.3rem 0}
.lh-oficio .lh-parte{font-weight:600;color:var(--lh-suave);margin:1rem 0 .3rem;
  font-size:.9em}
.lh-oficio .lh-alt{margin:1.1rem 0 .3rem;font-size:.88em;color:var(--lh-suave);
  font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.lh-oficio .lh-variante{border-left:2px dashed var(--lh-linha);padding-left:.75rem;
  margin:.3rem 0 .3rem}
/* ---- marcacao vinda dos fragmentos liturgicos ----
   O texto impresso do Oficio distingue duas vozes: o que se reza (preto) e o
   que orienta quem reza (vermelho). E a unica informacao de aparencia que a
   limpeza preserva; todo o resto do estilo do Word foi descartado.
   O Oficio e composto centrado, como no breviario impresso. */
.lh-oficio{text-align:center}
.lh-oficio .rubrica{color:var(--lh-realce)}
.lh-oficio .rubrica sup{font-style:italic;font-size:.82em;line-height:1.5}
.lh-oficio p{margin:.65rem 0}

/* Titulos de secao (Hino, Salmodia, Leitura breve, Preces, Oracao...).
   Na fonte sao apenas texto vermelho, indistinguiveis do verso que anunciam;
   aqui viram cabecalho de verdade — e o botao que fecha a secao, porque o
   oficio e longo e nem sempre se reza tudo. */
.lh-secao{margin:1.6rem 0}
.lh-secao-cab{display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;max-width:26rem;margin:0 auto .6rem;padding:.35rem .5rem .35rem;
  background:none;border:0;border-bottom:1px solid var(--lh-linha);
  color:var(--lh-realce);font-family:inherit;font-weight:700;font-size:.82em;
  text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.lh-secao-cab:hover{background:var(--lh-fundo-caixa)}
.lh-secao-cab i{font-size:.85em;opacity:.7}
.lh-secao-corpo[hidden]{display:none}
/* Fora das secoes (o titulo do oficio, no topo) o estilo antigo permanece. */
.lh-oficio .rubrica.titulo{display:block;margin:1.6rem auto .6rem;
  max-width:26rem;padding-bottom:.3rem;font-weight:700;font-size:.82em;
  text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--lh-linha)}

/* ℣ e ℟ sao os sinais do versiculo e do responsorio no livro liturgico.
   Em negrito porque marcam quem fala, e o olho precisa acha-los correndo. */
.lh-oficio .versiculo{font-weight:700;color:var(--lh-realce);
  margin-right:.15em;font-size:1.05em}

/* ---- escolhas do dia (memoria facultativa, memoria obrigatoria facultada) ---- */
.lh-escolha{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}

/* ---- salmos do Invitatorio ----
   O Oficio admite quatro salmos convidatorios; o app deixa escolher, e a
   estrofe repetida e opcional. */
.lh-salmos{display:flex;align-items:center;justify-content:center;gap:.35rem;
  flex-wrap:wrap;margin:.2rem 0 1rem;padding-bottom:.8rem;
  border-bottom:1px solid var(--lh-linha)}
.lh-salmos-rot{font-size:.85rem;color:var(--lh-suave);margin-right:.3rem}
.lh-salmos select{border:1px solid var(--lh-linha);border-radius:.5rem;
  padding:.4rem .6rem;font-family:inherit;font-size:.9rem;
  background:#fff;color:var(--lh-tinta);cursor:pointer}
.lh-salmos select:focus{outline:2px solid var(--lh-dourado);outline-offset:1px}
/* A caixa da estrofe fica desativada nos dias em que o salmo escolhido so
   existe numa das versoes — dai o estado :has(:disabled). */
.lh-estrofe{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.9rem;color:var(--lh-tinta);cursor:pointer}
.lh-estrofe input{width:1rem;height:1rem;accent-color:var(--lh-realce);cursor:pointer}
.lh-estrofe:has(input:disabled){opacity:.45;cursor:not-allowed}
.lh-estrofe:has(input:disabled) input{cursor:not-allowed}

/* ---- coleta salmodica: opcional, entra recolhida ---- */
.lh-coleta{display:block;margin:.6rem auto}
.lh-coleta-btn{display:inline-flex;align-items:center;gap:.4rem;
  border:1px dashed var(--lh-linha);background:var(--lh-fundo-caixa);
  color:var(--lh-realce);border-radius:.4rem;padding:.2rem .6rem;
  font-family:inherit;font-size:.82em;cursor:pointer}
.lh-coleta-btn:hover{background:#efe9dd}
.lh-coleta-btn i{font-size:.85em;opacity:.7}
.lh-coleta-txt{display:block;margin:.4rem auto 0;max-width:32rem;
  font-size:.95em;color:var(--lh-tinta)}
.lh-coleta-txt[hidden]{display:none}
/* A sentenca e a citacao que da a chave de leitura crista do salmo. */
.lh-oficio .rubrica.sentenca{display:block;font-style:italic;font-size:.94em;
  color:var(--lh-suave);margin:.2rem auto .8rem;max-width:30rem}

/* Cada estrofe de hino e cada bloco de salmodia vem num <div class=estrofe>
   (era <center> na fonte). O espaco entre elas e o que separa uma estrofe da
   seguinte — sem isso o hino inteiro vira um paragrafo so. */
.lh-oficio .estrofe{margin:.85rem 0}
.lh-oficio .estrofe:first-child{margin-top:0}
.lh-oficio .estrofe .rubrica sup{display:inline-block;margin:.5rem 0}

.lh-oficio b{color:var(--lh-tinta)}
.lh-oficio i{color:var(--lh-suave)}
.lh-oficio sup{color:var(--lh-suave);font-size:.75em;padding-right:.15em}
.lh-oficio a{color:var(--lh-realce)}

/* "em latim", "exame de consciencia": no aplicativo abrem outra tela; aqui
   abrem o popup. Precisam parecer clicaveis. */
.lh-extra{cursor:pointer;text-decoration:none;border-bottom:1px dotted var(--lh-realce)}
.lh-extra u{text-decoration:none}
.lh-extra:hover{background:var(--lh-fundo-caixa)}

/* ---- popup dos textos complementares ---- */
/* Acima do menu do site (z-index 1000) e dos itens dele (1001). Por baixo, o
   popup ficava com o titulo e o botao de fechar escondidos atras do menu —
   justamente o que se precisa para sair dele. */
.lh-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;
  justify-content:center;padding:1rem;background:rgba(28,25,23,.55)}
.lh-modal[hidden]{display:none}
.lh-modal-caixa{background:var(--lh-papel);border-radius:.75rem;max-width:44rem;
  width:100%;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,.28)}
.lh-modal-topo{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;
  border-bottom:1px solid var(--lh-linha)}
.lh-modal-topo h3{font-size:1.05rem;margin:0;flex:1;color:var(--lh-realce)}
.lh-modal-corpo{overflow-y:auto;padding:1.25rem;line-height:1.7;text-align:center}
.lh-modal-corpo .estrofe{margin:.85rem 0}
.lh-modal-corpo .rubrica{color:var(--lh-realce)}
/* A flexa (†) e o asterisco (*) marcam as pausas do versiculo: em corpo de
   texto normal ficam quase invisiveis, entao ganham realce proprio. */
.lh-oficio .lh-flexa{font-size:1.35em;line-height:1;color:var(--lh-realce);
  font-weight:600;vertical-align:-0.06em;padding:0 .06em}
.lh-oficio .lh-pausa{font-size:1.15em;color:var(--lh-realce);padding:0 .04em}

/* ---- catequese ---- */
.lh-catequese{margin-top:2.5rem}
.lh-catequese h2{font-size:1.4rem;margin:2rem 0 .75rem}
.lh-catequese h3{font-size:1.08rem;margin:1.25rem 0 .4rem}
.lh-catequese p,.lh-catequese li{line-height:1.75;margin-bottom:.6rem}
.lh-catequese ul,.lh-catequese ol{padding-left:1.3rem;margin-bottom:.8rem}
.lh-det{border:1px solid var(--lh-linha);border-radius:.6rem;background:var(--lh-papel);
  padding:.4rem .9rem;margin-bottom:.6rem}
.lh-det summary{cursor:pointer;font-weight:600;padding:.5rem 0}
.lh-det[open] summary{border-bottom:1px solid var(--lh-linha);margin-bottom:.6rem}
.lh-grade{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:1rem 0}
.lh-card{border:1px solid var(--lh-linha);border-radius:.6rem;padding:.9rem;
  background:var(--lh-papel)}
.lh-card h4{font-size:.98rem;margin-bottom:.25rem;color:var(--lh-realce)}
.lh-card p{font-size:.9rem;color:var(--lh-suave);margin:0}
.lh-card .lh-hora-rel{font-size:.8rem;color:var(--lh-dourado);font-weight:600}
.lh-nota-fonte{font-size:.82rem;color:var(--lh-suave);margin-top:1.5rem;
  border-top:1px solid var(--lh-linha);padding-top:.8rem}
.lh-aviso{border:1px solid var(--lh-linha);border-left:3px solid var(--lh-dourado);
  background:var(--lh-fundo-caixa);padding:.8rem 1rem;border-radius:.4rem;margin:1rem 0;
  font-size:.92rem}

@media (max-width:600px){
  .lh-hero h1{font-size:1.45rem}
  .lh-oficio{padding:1.1rem .85rem;border-radius:.5rem}
  .lh-agora-in{font-size:.9rem}
}
@media print{
  .lh-agora,.lh-abas,.lh-datanav,.lh-ferramentas,.lh-catequese,
  #menu-container,#footer-container,#doacao-pix{display:none !important}
  .lh-oficio{border:0;padding:0}
}

/* ---- os dois hinos do Oficio das Leituras ----
   O botao fica ACIMA do cabecalho "Hino": quem chega no hino ja sabe qual dos
   dois esta lendo, sem ter de procurar a rubrica. */
.lh-hino-quando{display:flex;flex-direction:column;align-items:center;
  margin:.8rem 0 .2rem}
.lh-hino-quando .lh-btn{font-size:.85rem;padding:.3rem .7rem}
.lh-hino-quando .fa-moon{color:#5b6b8c}
.lh-hino-quando .fa-sun{color:var(--lh-dourado)}
/* A dica sob o botao: sem ela o botao parece um rotulo do hino que esta na
   tela, e o segundo hino fica invisivel por nada dizer que ele existe. */
.lh-hino-dica{margin-top:.25rem;font-size:.78rem;color:var(--lh-suave)}
[data-hino][hidden]{display:none}

/* ---- hinos a escolha ("Ou:", "Ou ainda:", "Outro hino a escolha") ----
   Mesmo desenho do seletor das antifonas finais, e pelo mesmo motivo: o livro
   empilha dois ou tres hinos e mostra-se um. */
[data-hino-opcao][hidden]{display:none}

/* ---- sugestao de silencio antes do Cantico Evangelico ----
   Fica FORA da secao, para continuar visivel com o cantico recolhido. */
.lh-silencio{max-width:30rem;margin:1.6rem auto .2rem;padding:.6rem .9rem;
  border:1px dashed var(--lh-linha);border-radius:.5rem;
  background:var(--lh-fundo-caixa);color:var(--lh-suave);
  font-size:.88em;font-style:italic;line-height:1.5}
.lh-silencio i{color:var(--lh-dourado);font-style:normal;margin-right:.35rem}

/* ---- siglas: Ant., Ant.1, ℣., ℟., (R.) ----
   Nao se leem, marcam quem fala. Em peso normal se perdem no verso. */
.lh-oficio .rubrica.sigla{font-weight:700}
.lh-oficio b.sigla{font-weight:700}

/* ---- antifonas finais de Nossa Senhora (Completas) ----
   A fonte empilha cinco em portugues e quatro em latim; mostra-se uma. */
.lh-antifonas-ctrl{display:flex;align-items:center;justify-content:center;
  gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1rem;padding-bottom:.8rem;
  border-bottom:1px solid var(--lh-linha)}
.lh-antifonas-ctrl select{border:1px solid var(--lh-linha);border-radius:.5rem;
  padding:.4rem .6rem;font-family:inherit;font-size:.9rem;
  background:#fff;color:var(--lh-tinta);cursor:pointer;max-width:100%}
.lh-antifonas-ctrl select:focus{outline:2px solid var(--lh-dourado);outline-offset:1px}
[data-antifona][hidden],[data-antifona-la][hidden]{display:none}