/* Catequizando • Ajustes complementares para o catálogo e detalhes SQL.
   NÃO substitui os CSS já aprovados; use juntamente com os arquivos atuais. */

.lista_oracoes_compacta .item_oracao.oracao_dinamica_generica {
  --card-cor:#1a3e6e;
  --card-clara:#edf5ff;
}
.lista_oracoes_compacta .item_oracao .miniatura_oracao_dinamica img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:none;
}
/* A miniatura do Santo Anjo é uma imagem real, não um símbolo de nuvem. */
.lista_oracoes_compacta .item_oracao.oracao_santo-anjo .miniatura_oracao_dinamica {
  background-image:none !important;
}
.lista_oracoes_compacta .item_oracao.oracao_santo-anjo .miniatura_oracao_dinamica img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
}
.oracoes_dinamicas_aviso {
  padding:24px 20px;
  border-radius:16px;
  border:1px solid #dbe6f2;
  background:#f8fbff;
  color:#274768;
  text-align:center;
  font-size:16px;
  line-height:1.5;
}
.oracao_dinamica_pagina .hero_oracao_dinamica .hero_oracao_imagem {
  position:relative;
  min-height:360px;
  overflow:hidden;
  background:#f5eee1;
}
.oracao_dinamica_pagina .hero_oracao_dinamica .hero_oracao_imagem > img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.oracao_dinamica_pagina .hero_oracao_dinamica .oracao_dinamica_sem_imagem {
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#edf4fc,#fff6e5);
}
.oracao_dinamica_pagina .hero_oracao_dinamica .oracao_dinamica_sem_imagem > img {
  position:absolute;
  inset:auto;
  top:50%;
  left:50%;
  width:110px;
  height:110px;
  max-width:110px;
  transform:translate(-50%,-50%);
  object-fit:contain;
}
.oracao_dinamica_pagina .titulo_oracao_hero {
  font-size:clamp(27px,3.4vw,43px) !important;
  word-break:normal;
}
.oracao_dinamica_pagina .texto_oracao_premium.oracao_dinamica_versos {
  font-weight:600;
  line-height:1.65 !important;
}
.oracao_dinamica_pagina .oracao_dinamica_uma_coluna {
  max-width:750px;
  margin:0 auto;
  text-align:center;
}
.oracao_dinamica_pagina .oracao_dinamica_versos p {margin:0;}
.oracao_dinamica_pagina .card_oracao_info {min-width:0;}
.oracao_dinamica_nao_encontrada {max-width:700px;margin:25px auto;text-align:center;}
.oracao_dinamica_nao_encontrada h1 {color:#1a3e6e;font-family:Georgia,serif;}
.oracao_dinamica_nao_encontrada p {font-size:16px;line-height:1.55;}
@media(max-width:900px) {
  .oracao_dinamica_pagina .hero_oracao_dinamica .hero_oracao_imagem {
    height:320px;
    min-height:0;
    max-height:none;
  }
}
@media(max-width:700px) {
  .oracao_dinamica_pagina .hero_oracao_dinamica .hero_oracao_imagem {
    height:275px;
    min-height:0;
    max-height:none;
  }
  .oracao_dinamica_pagina .titulo_oracao_hero {font-size:30px !important;}
  .oracao_dinamica_pagina .texto_oracao_premium.oracao_dinamica_versos {
    font-size:18.5px !important;
    line-height:1.68 !important;
  }
}
@media(max-width:430px) {
  .oracao_dinamica_pagina .titulo_oracao_hero {font-size:27px !important;}
}


/* ================================================================
   V2 - LEITOR DE ORAÇÕES COM MENU LATERAL / FAIXA MOBILE
   Computador: navegação lateral vertical, rolável e fixa ao rolar.
   iPhone / smartphone / tablet: navegação horizontal no topo.
   O conteúdo permanece com o CSS premium já aprovado.
================================================================ */
.oracao_leitor_com_menu.oracao_premium {
  max-width:1310px !important;
  width:100%;
}
.oracao_leitor_layout{
  display:grid;
  grid-template-columns:minmax(210px, 236px) minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.oracao_leitor_layout > *{min-width:0;}
.oracao_menu_lateral{
  position:sticky;
  top:14px;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 28px);
  overflow:hidden;
  border:1px solid #dce6f1;
  border-radius:20px;
  background:linear-gradient(165deg,#fff 0%,#f9fbfe 100%);
  box-shadow:0 10px 26px rgba(26,62,110,.09);
}
.oracao_menu_cabecalho{
  flex:0 0 auto;
  padding:17px 16px 15px;
  border-bottom:1px solid #e2eaf4;
  background:linear-gradient(135deg,#f6faff,#fff9e9);
}
.oracao_menu_selo{
  color:#a5751b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.9px;
}
.oracao_menu_cabecalho h2{
  margin:4px 0 0;
  color:#1a3e6e;
  font-family:Georgia,'Times New Roman',serif;
  font-size:23px;
  font-weight:800;
  line-height:1.15;
}
.oracao_menu_lista{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:10px;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:#cbd9e9 transparent;
  scrollbar-width:thin;
}
.oracao_menu_item{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
  gap:10px;
  min-height:50px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:12px;
  text-decoration:none;
  background:transparent;
  color:#1a3e6e;
  transition:background .18s ease,border-color .18s ease;
}
.oracao_menu_item:hover,
.oracao_menu_item:focus-visible{
  background:#eff5fc;
  border-color:#d6e5f3;
  outline:none;
}
.oracao_menu_item.oracao_menu_ativo{
  background:linear-gradient(110deg,#e9f2fc,#f9f6eb);
  border-color:#c5d9ef;
  box-shadow:inset 3px 0 #d8a327;
}
.oracao_menu_icone{
  display:grid;
  place-items:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  overflow:hidden;
  border-radius:10px;
  border:1px solid #dbe6f2;
  background:linear-gradient(135deg,#fff,#f5f8fc);
}
.oracao_menu_icone img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.oracao_menu_inicial{
  color:#bd8a24;
  font:700 20px/1 Georgia,'Times New Roman',serif;
}
.oracao_menu_nome{
  display:block;
  min-width:0;
  color:inherit;
  font-family:Georgia,'Times New Roman',serif;
  font-size:15.4px;
  font-weight:700;
  line-height:1.22;
  overflow-wrap:break-word;
}
.oracao_menu_todas{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:13px 16px;
  border-top:1px solid #e1eaf3;
  color:#1a3e6e;
  background:#f6f9fd;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}
.oracao_menu_todas:hover{text-decoration:underline;}
.oracao_leitor_conteudo{
  min-width:0;
}
.oracao_leitor_conteudo .hero_oracao_dinamica{
  grid-template-columns:minmax(0,1fr) minmax(300px,1fr);
}
.oracao_leitor_conteudo .hero_oracao_dinamica .hero_oracao_conteudo{
  padding:30px 26px;
}
.oracao_leitor_conteudo .atalhos_oracao_grade{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body.modo-escuro .oracao_menu_lateral{
  background:#182230;
  border-color:#2b3a4d;
}
body.modo-escuro .oracao_menu_cabecalho,
body.modo-escuro .oracao_menu_todas{background:#203047;border-color:#2b3a4d;}
body.modo-escuro .oracao_menu_cabecalho h2,
body.modo-escuro .oracao_menu_nome,
body.modo-escuro .oracao_menu_todas{color:#e8eff8;}
body.modo-escuro .oracao_menu_item.oracao_menu_ativo{background:#244061;border-color:#45729d;}
body.modo-escuro .oracao_menu_item:hover{background:#24374f;}
@media(max-width:1150px) and (min-width:1021px){
  .oracao_leitor_layout{grid-template-columns:minmax(190px,210px) minmax(0,1fr);gap:15px;}
  .oracao_leitor_conteudo .hero_oracao_dinamica{
    grid-template-columns:minmax(0,1fr) minmax(265px,1fr);
  }
  .oracao_leitor_conteudo .hero_oracao_dinamica .hero_oracao_conteudo{padding:25px 20px;}
}
@media(max-width:1020px){
  .oracao_leitor_layout{display:flex;flex-direction:column;gap:17px;}
  .oracao_menu_lateral{
    position:static;
    width:100%;
    max-height:none;
    overflow:hidden;
    border-radius:17px;
  }
  .oracao_menu_cabecalho{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 15px 8px;
  }
  .oracao_menu_cabecalho h2{margin:0;font-size:19px;}
  .oracao_menu_lista{
    display:flex;
    flex-direction:row;
    gap:8px;
    min-width:0;
    max-width:100%;
    padding:8px 12px 12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .oracao_menu_item{
    flex:0 0 auto;
    max-width:190px;
    min-height:48px;
    scroll-snap-align:start;
    padding:6px 10px;
    border-color:#e1e9f2;
    background:#fff;
  }
  .oracao_menu_item.oracao_menu_ativo{
    box-shadow:inset 0 -3px #d8a327;
  }
  .oracao_menu_nome{
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .oracao_menu_todas{display:none;}
  .oracao_leitor_conteudo{width:100%;}
  .oracao_leitor_conteudo .hero_oracao_dinamica{
    grid-template-columns:1fr;
  }
  .oracao_leitor_conteudo .hero_oracao_dinamica .hero_oracao_conteudo{
    padding:26px 24px;
  }
}
@media(max-width:700px){
  .oracao_leitor_layout{gap:14px;}
  .oracao_menu_cabecalho{padding:10px 12px 7px;}
  .oracao_menu_cabecalho h2{font-size:17px;}
  .oracao_menu_selo{font-size:9px;}
  .oracao_menu_lista{padding:7px 9px 10px;gap:7px;}
  .oracao_menu_item{min-height:45px;max-width:172px;padding:5px 8px;gap:7px;}
  .oracao_menu_icone{flex-basis:32px;width:32px;height:32px;border-radius:8px;}
  .oracao_menu_nome{font-size:13px;}
  .oracao_leitor_conteudo .hero_oracao_dinamica .hero_oracao_conteudo{padding:22px 16px;}
  .oracao_leitor_conteudo .atalhos_oracao_grade{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:360px){
  .oracao_menu_item{max-width:145px;}
  .oracao_menu_nome{font-size:12.5px;}
}

/* ================================================================
   V3 - ORACAO MAIS COMPACTA / AREA INFERIOR NA LARGURA TOTAL
   O hero e a oracao acompanham a coluna ao lado do menu.
   Informacoes complementares e "Continue rezando" ficam abaixo
   de ambas as colunas e ocupam toda a largura do container.
================================================================ */
.oracao_leitor_conteudo .box_oracao_premium{
    padding:24px 24px 27px !important;
    margin-bottom:0;
}
.oracao_leitor_conteudo .titulo_bloco_oracao{
    font-size:21px;
    margin-bottom:17px;
}
.oracao_leitor_conteudo .texto_oracao_premium.oracao_dinamica_versos{
    font-size:18.5px !important;
    font-weight:600;
    line-height:1.50 !important;
    letter-spacing:.08px;
}
.oracao_leitor_conteudo .texto_oracao_duas_colunas{
    gap:30px;
}
.oracao_leitor_conteudo .texto_oracao_duas_colunas > div:first-child::after{
    right:-21px;
    font-size:28px;
}
.oracao_leitor_inferior{
    width:100%;
    min-width:0;
    margin-top:24px;
}
.oracao_leitor_inferior > .cards_oracao_info{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.oracao_leitor_inferior > .atalhos_oracao_secao{
    width:100%;
}
/* Na secao inferior, remover a limitacao do antigo layout lateral. */
.oracao_leitor_inferior .atalhos_oracao_grade{
    grid-template-columns:repeat(6,minmax(0,1fr));
}
@media(max-width:1020px){
    .oracao_leitor_inferior{margin-top:19px;}
}
@media(max-width:900px){
    .oracao_leitor_inferior > .cards_oracao_info{grid-template-columns:1fr;}
    .oracao_leitor_inferior .atalhos_oracao_grade{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:700px){
    .oracao_leitor_conteudo .box_oracao_premium{
        padding:22px 16px 24px !important;
        margin-bottom:0;
    }
    .oracao_leitor_conteudo .titulo_bloco_oracao{
        font-size:20px;
        margin-bottom:16px;
    }
    .oracao_leitor_conteudo .texto_oracao_premium.oracao_dinamica_versos{
        font-size:17.5px !important;
        line-height:1.55 !important;
    }
    .oracao_leitor_inferior{margin-top:17px;}
    .oracao_leitor_inferior .atalhos_oracao_grade{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:430px){
    .oracao_leitor_conteudo .texto_oracao_premium.oracao_dinamica_versos{
        font-size:17px !important;
        line-height:1.52 !important;
    }
}


/* ================================================================
   V5 — ORAÇÕES: MENU E LEITOR NA MESMA PÁGINA PRINCIPAL
   URL: /opcoes_tela/oracoes.asp?slug=...
   Desktop: menu lateral + oração à direita.
   iPhone/smartphone: menu deslizante no topo + oração abaixo.
   Conteúdo complementar permanece em largura total.
================================================================ */
.oracoes_hub.oracao_leitor_com_menu.oracao_premium{
    max-width:1310px !important;
    margin:0 auto;
    padding:26px 20px 42px !important;
}
.oracoes_hub .topo_oracoes_padrao{
    margin-bottom:22px;
}
.oracoes_hub .oracao_leitor_layout{
    scroll-margin-top:12px;
}
.oracoes_hub .oracao_leitor_conteudo .box_oracao_premium{
    margin-bottom:0;
}
.oracoes_hub .oracao_leitor_inferior{
    margin-top:24px;
}
.oracoes_hub .bloco_oracoes_info{
    width:100%;
    margin:0 0 20px;
}
.oracoes_hub .oracao_menu_todas{
    align-items:center;
}
@media(max-width:1020px){
    .oracoes_hub .oracao_leitor_layout{
        scroll-margin-top:8px;
    }
    .oracoes_hub .oracao_leitor_inferior{margin-top:18px;}
}
@media(max-width:700px){
    .oracoes_hub.oracao_leitor_com_menu.oracao_premium{
        padding:18px 10px 32px !important;
    }
    .oracoes_hub .topo_oracoes_padrao{margin-bottom:17px;}
    .oracoes_hub .oracao_leitor_inferior{margin-top:16px;}
}


/* ================================================================
   V6 - MENU LIMPO, ALTURA ALINHADA A ORACAO (DESKTOP)
   - Retira os titulos do menu no ASP
   - Menu acompanha toda a altura do hero + texto da oracao
   - Lista interna rola quando houver muitas oracoes
   - Preserva a faixa deslizante no celular
================================================================ */
@media(min-width:1021px){
  .oracoes_hub .oracao_leitor_layout{
    align-items:stretch;
  }
  .oracoes_hub .oracao_leitor_conteudo{
    min-height:565px;
  }
  .oracoes_hub .oracao_menu_lateral{
    position:relative;
    top:auto;
    /* Impede uma lista extensa de aumentar a altura da oração:
       a altura final acompanha a coluna direita, e a lista rola internamente. */
    height:0;
    min-height:100%;
    max-height:none;
    overflow:hidden;
  }
  .oracoes_hub .oracao_menu_lista{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding-top:13px;
  }
}
.oracoes_hub .oracao_menu_vazio{
  display:block;
  margin:12px 8px;
  padding:12px 10px;
  border-radius:10px;
  background:#f4f7fc;
  color:#546a83;
  font-size:13px;
  line-height:1.5;
  text-align:center;
}
.oracoes_hub .oracao_dinamica_nao_encontrada{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:565px;
  margin:0;
}
.oracoes_hub .oracao_dinamica_nao_encontrada h1,
.oracoes_hub .oracao_dinamica_nao_encontrada p{
  margin:0;
}
@media(max-width:1020px){
  .oracoes_hub .oracao_menu_lateral{
    height:auto;
    min-height:0;
    max-height:none;
    position:static;
  }
  .oracoes_hub .oracao_leitor_conteudo{
    min-height:0;
  }
  .oracoes_hub .oracao_dinamica_nao_encontrada{
    min-height:230px;
  }
}


/* ================================================================
   V8 — INFORMATIVOS COMPACTOS SOB A ORACAO
   - Sempre visíveis, sem cliques ou expansão.
   - Na coluna direita, logo após o texto da oração.
   - Continua rezando e demais opções permanecem largura total.
================================================================ */
.oracoes_hub .oracao_info_compacta{
  width:100%;
  min-width:0;
  margin:13px 0 0;
}
.oracoes_hub .oracao_info_legenda{
  color:#64758b;
  font:600 11px/1.3 Arial,Helvetica,sans-serif;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:0 2px;
  margin:0 0 9px;
}
.oracoes_hub .oracao_info_legenda span{
  color:#c49b49;
  padding-left:5px;
}
.oracoes_hub .oracao_info_compacta .cards_oracao_info{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0;
  width:100%;
  align-items:stretch;
}
.oracoes_hub .oracao_info_compacta .card_oracao_info{
  min-width:0;
  padding:12px 12px 13px !important;
  border-radius:12px;
  border:1px solid #e2e9f0;
  box-shadow:0 2px 7px rgba(26,62,110,.045);
  text-align:left;
}
.oracoes_hub .oracao_info_compacta .card_oracao_info::after{
  display:none;
}
.oracoes_hub .oracao_info_cabecalho{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
}
.oracoes_hub .oracao_info_compacta .card_oracao_icone{
  display:flex;
  flex:0 0 27px;
  align-items:center;
  justify-content:center;
  width:27px;
  height:27px;
  margin:0 !important;
  border-radius:8px;
  font-size:14px;
  line-height:1;
  box-shadow:none;
}
.oracoes_hub .oracao_info_compacta .card_oracao_info h2{
  margin:0 !important;
  font:700 15px/1.2 Georgia,'Times New Roman',serif !important;
}
.oracoes_hub .oracao_info_compacta .card_oracao_info p{
  margin:0;
  color:#4b5d72;
  font:400 12.8px/1.43 Arial,Helvetica,sans-serif;
}
body.modo-escuro .oracoes_hub .oracao_info_legenda{color:#bfd0e1;}
body.modo-escuro .oracoes_hub .oracao_info_compacta .card_oracao_info{
  background:#192534;
  border-color:#324357;
}
body.modo-escuro .oracoes_hub .oracao_info_compacta .card_oracao_info p{color:#d0dbe6;}
@media(min-width:701px) and (max-width:1180px){
  .oracoes_hub .oracao_info_compacta .cards_oracao_info{gap:8px;}
  .oracoes_hub .oracao_info_compacta .card_oracao_info{padding:11px 10px 12px !important;}
  .oracoes_hub .oracao_info_compacta .card_oracao_info h2{font-size:14px !important;}
  .oracoes_hub .oracao_info_compacta .card_oracao_info p{font-size:12.2px;}
}
@media(max-width:700px){
  .oracoes_hub .oracao_info_compacta{margin-top:12px;}
  .oracoes_hub .oracao_info_compacta .cards_oracao_info{
    grid-template-columns:1fr;
    gap:8px;
  }
  .oracoes_hub .oracao_info_compacta .card_oracao_info{
    padding:11px 12px !important;
    border-radius:11px;
  }
  .oracoes_hub .oracao_info_cabecalho{margin-bottom:5px;}
  .oracoes_hub .oracao_info_compacta .card_oracao_info h2{font-size:15px !important;}
  .oracoes_hub .oracao_info_compacta .card_oracao_info p{font-size:13px;line-height:1.42;}
}

/* ================================================================
   V9 — TROCA SUAVE DE ORAÇÃO, SEM RECARREGAR A PÁGINA
   Mantém a posição de leitura e o menu lateral.
================================================================ */
.oracoes_hub .oracao_leitor_conteudo{
    transition:opacity .18s ease;
}
.oracoes_hub .oracao_leitor_conteudo.oracao_carregando{
    opacity:.72;
}
.oracoes_hub .oracao_status_navegacao{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
@media(prefers-reduced-motion:reduce){
    .oracoes_hub .oracao_leitor_conteudo{transition:none;}
}


/* ================================================================
   V11 — FOTO AJUSTADA AO QUADRO DA ORACAO
   - A fotografia preenche quase toda a area da imagem, sem faixas
     vazias grandes acima ou abaixo (object-fit:cover).
   - Preserva proporcao; se necessario recorta apenas as extremidades.
   - A mesma regra vale automaticamente para toda imagem_url do SQL.
   - Quando falta foto, o icone continua centralizado e menor.
   - Nenhuma alteracao em menu, AJAX ou conteudo da oracao.
================================================================ */
.oracoes_hub .hero_oracao_dinamica .hero_oracao_imagem:not(.oracao_dinamica_sem_imagem){
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(145deg,#eaf1f8 0%,#f8f6f0 54%,#fdf4e4 100%);
}
.oracoes_hub .hero_oracao_dinamica .hero_oracao_imagem:not(.oracao_dinamica_sem_imagem) > img{
  position:absolute;
  inset:8px;
  top:8px;
  left:8px;
  width:calc(100% - 16px);
  height:calc(100% - 16px);
  max-width:none;
  max-height:none;
  display:block;
  object-fit:cover;
  object-position:50% 50%;
  transform:none;
  border-radius:13px;
  box-shadow:0 3px 12px rgba(29,53,80,.09);
}
/* O simbolo reserva nao deve ser ampliado para ocupar o quadro. */
.oracoes_hub .hero_oracao_dinamica .hero_oracao_imagem.oracao_dinamica_sem_imagem > img{
  width:110px;
  height:110px;
  max-width:110px;
  max-height:110px;
  inset:auto;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
}
body.modo-escuro .oracoes_hub .hero_oracao_dinamica .hero_oracao_imagem:not(.oracao_dinamica_sem_imagem){
  background:linear-gradient(145deg,#1b2a3d,#273242 60%,#342d27);
}
@media(max-width:700px){
  .oracoes_hub .hero_oracao_dinamica .hero_oracao_imagem:not(.oracao_dinamica_sem_imagem) > img{
    inset:6px;
    top:6px;
    left:6px;
    width:calc(100% - 12px);
    height:calc(100% - 12px);
    border-radius:11px;
  }
}


/* ================================================================
   V12 — SELETOR OPCIONAL EM CARTOES (MODELO ANTIGO)
   - Abre uma grade em janela sobre o leitor, sem alterar a navegacao.
   - Cartoes derivados do menu SQL: somente oracoes publicadas.
================================================================ */
.oracoes_hub .oracoes_v12_acoes{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:-4px 0 13px;
}
.oracoes_hub .oracoes_v12_abrir{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:9px 15px;
  border:1px solid #cddded;
  border-radius:12px;
  background:linear-gradient(180deg,#fff,#f1f6fc);
  color:#1a3e6e;
  font:700 13px/1.3 Arial,Helvetica,sans-serif;
  box-shadow:0 3px 10px rgba(27,63,107,.06);
  cursor:pointer;
}
.oracoes_hub .oracoes_v12_abrir:hover,
.oracoes_hub .oracoes_v12_abrir:focus-visible{
  border-color:#c49a44;
  background:#fffaf0;
}
.oracoes_hub .oracoes_v12_abrir span{font:700 21px/1 Arial,sans-serif; color:#b17a15;}
.oracoes_v12_modal[hidden]{display:none !important;}
.oracoes_v12_modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.oracoes_v12_fundo{
  position:absolute;
  inset:0;
  background:rgba(9,24,45,.72);
}
.oracoes_v12_painel{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:min(1020px,100%);
  max-height:min(850px,88dvh);
  max-height:88vh;
  border-radius:21px;
  background:#f4f7fb;
  border:1px solid #cdd9e7;
  box-shadow:0 20px 70px rgba(0,0,0,.28);
  overflow:hidden;
}
.oracoes_v12_cabecalho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex:none;
  padding:21px 23px 18px;
  background:#fff;
  border-bottom:1px solid #e0e8f1;
}
.oracoes_v12_cabecalho h2{
  margin:0 0 4px;
  color:#1a3e6e;
  font:700 28px/1.15 Georgia,'Times New Roman',serif;
}
.oracoes_v12_cabecalho p{
  margin:0;
  color:#5f7186;
  font:400 13px/1.45 Arial,Helvetica,sans-serif;
}
.oracoes_v12_fechar{
  flex:0 0 auto;
  width:37px;
  height:37px;
  border-radius:10px;
  border:1px solid #dce4ee;
  background:#f4f7fb;
  color:#1a3e6e;
  font:400 27px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.oracoes_v12_fechar:hover{background:#edf3fa;}
.oracoes_v12_grade{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:12px;
  padding:20px;
  overflow-y:auto;
  overscroll-behavior:contain;
  min-height:0;
}
.oracoes_v12_cartao{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  min-height:91px;
  padding:12px;
  border:1px solid #dfE7f0;
  border-left:4px solid #c6a15c;
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#fafbfe);
  text-decoration:none !important;
  color:#1a3e6e !important;
  box-shadow:0 4px 11px rgba(27,63,107,.07);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
/* Cores suaves alternadas, inspiradas nos cartoes do catalogo anterior. */
.oracoes_v12_cartao:nth-child(6n+1){--v12-acento:#be8d36;--v12-tinta:#1a3e6e;}
.oracoes_v12_cartao:nth-child(6n+2){--v12-acento:#3b8f92;--v12-tinta:#287788;}
.oracoes_v12_cartao:nth-child(6n+3){--v12-acento:#ad6549;--v12-tinta:#864334;}
.oracoes_v12_cartao:nth-child(6n+4){--v12-acento:#d2a03b;--v12-tinta:#a66c11;}
.oracoes_v12_cartao:nth-child(6n+5){--v12-acento:#698598;--v12-tinta:#52718c;}
.oracoes_v12_cartao:nth-child(6n+6){--v12-acento:#bb8e35;--v12-tinta:#9b6a15;}
.oracoes_v12_cartao{border-left-color:var(--v12-acento,#c6a15c);}
.oracoes_v12_cartao .oracoes_v12_texto strong{color:var(--v12-tinta,#1a3e6e);}
.oracoes_v12_cartao .oracoes_v12_letra{color:var(--v12-tinta,#b17a15);}
.oracoes_v12_cartao:hover,
.oracoes_v12_cartao:focus-visible{
  border-color:#c99b44;
  box-shadow:0 6px 16px rgba(27,63,107,.13);
  background:#fffdf8;
}
.oracoes_v12_cartao.oracoes_v12_atual{
  background:#f7f7f1;
  border-color:#c8a158;
  box-shadow:inset 0 0 0 1px rgba(201,155,68,.3);
}
.oracoes_v12_miniatura{
  flex:0 0 64px;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  border:1px solid #e3eaf2;
  background:#f8f4e8;
}
.oracoes_v12_miniatura img{display:block;width:100%;height:100%;object-fit:cover;}
.oracoes_v12_letra{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:700 31px Georgia,serif;color:#b17a15;}
.oracoes_v12_texto{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;}
.oracoes_v12_texto strong{font:700 19px/1.12 Georgia,serif;color:#1a3e6e;overflow-wrap:break-word;}
.oracoes_v12_texto small{font:500 12px/1.27 Arial,Helvetica,sans-serif;color:#5c6d83;}
.oracoes_v12_seta{flex:0 0 auto;font:400 26px/1 Georgia,serif;color:#b6a37e;}
.oracoes_v12_vazio{grid-column:1/-1;text-align:center;color:#596e86;padding:24px;}
body.oracoes_v12_sem_rolagem{overflow:hidden !important;}
body.modo-escuro .oracoes_hub .oracoes_v12_abrir{background:#203149;border-color:#415773;color:#e6edf7;}
body.modo-escuro .oracoes_v12_painel,
body.modo-escuro .oracoes_v12_cabecalho{background:#1c2838;border-color:#34475e;}
body.modo-escuro .oracoes_v12_cabecalho h2{color:#f4f6fa;}
body.modo-escuro .oracoes_v12_cabecalho p{color:#b6c5d5;}
body.modo-escuro .oracoes_v12_cartao{background:#253447;border-color:#43556b;}
body.modo-escuro .oracoes_v12_texto strong{color:#f2f5fa;}
body.modo-escuro .oracoes_v12_texto small{color:#c9d3df;}
@media(max-width:820px){
  .oracoes_v12_grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;}
  .oracoes_v12_cartao{min-height:82px;padding:9px;gap:8px;}
  .oracoes_v12_miniatura{flex-basis:54px;width:54px;height:54px;border-radius:10px;}
  .oracoes_v12_texto strong{font-size:16px;}
  .oracoes_v12_texto small{font-size:11px;}
}
@media(max-width:460px){
  .oracoes_hub .oracoes_v12_acoes{justify-content:center;margin:-5px 0 12px;}
  .oracoes_hub .oracoes_v12_abrir{min-height:39px;width:100%;max-width:280px;}
  .oracoes_v12_modal{padding:8px;}
  .oracoes_v12_painel{max-height:94vh;border-radius:15px;}
  .oracoes_v12_cabecalho{padding:16px 15px 13px;}
  .oracoes_v12_cabecalho h2{font-size:23px;}
  .oracoes_v12_cabecalho p{font-size:12px;}
  .oracoes_v12_grade{gap:9px;padding:10px;}
  .oracoes_v12_cartao{min-height:85px;padding:8px;gap:7px;border-radius:12px;border-left-width:3px;}
  .oracoes_v12_miniatura{flex-basis:46px;width:46px;height:46px;border-radius:9px;}
  .oracoes_v12_texto strong{font-size:14.5px;line-height:1.13;}
  .oracoes_v12_texto small{font-size:10.5px;line-height:1.2;}
  .oracoes_v12_seta{font-size:20px;}
}
@media(prefers-reduced-motion:reduce){.oracoes_v12_cartao{transition:none;}}