/* ===== Página dos hinos (hinos.php) ===== */

.pagina-hinos {
    max-width: 860px;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* Título do hinário acompanha o tamanho da tela */
#titulo_hino {
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* Cada hino */
#dropdown_hinos .card {
    margin-bottom: .5rem;
    border-radius: .5rem !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    overflow: hidden;
    background-color: transparent;
}

#dropdown_hinos .card-header {
    padding: 0;
    border-bottom: 0;
}

/* Cabeçalho clicável: número + título + seta */
.cabecalho-hino {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;              /* área de toque confortável no celular */
    padding: .75rem 1rem;
    text-align: left;
    white-space: normal;           /* títulos longos quebram linha */
    color: inherit;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cabecalho-hino:hover,
.cabecalho-hino:focus {
    color: inherit;
    text-decoration: none;
    background-color: rgba(0, 0, 0, .04);
    box-shadow: none;
}

.numero-hino {
    flex: 0 0 auto;
    min-width: 2.75rem;
    margin-right: .75rem;
    padding: .2rem .45rem;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    border-radius: .35rem;
    background-color: rgba(0, 0, 0, .08);
}

.cabecalho-hino .h5_titulo_hino {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

/* Seta que gira ao abrir/fechar */
.seta-hino {
    flex: 0 0 auto;
    margin-left: .75rem;
    width: .6rem;
    height: .6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    opacity: .6;
}

.cabecalho-hino[aria-expanded="true"] .seta-hino {
    transform: rotate(-135deg);
}

/* Letra do hino */
.letra_dropdown {
    padding: 1.25rem 1rem 1.5rem;
    font-size: 1rem;
    line-height: 1.75;
    text-align: center;
    overflow-wrap: break-word;
}

/* Mensagens (sem hinos, erro, carregando) */
.mensagem-hinos {
    margin-top: 1rem;
    opacity: .75;
}

/* Celulares pequenos: aproveita mais a largura */
@media (max-width: 575px) {
    .pagina-hinos {
        padding-left: 10px;
        padding-right: 10px;
    }

    .cabecalho-hino {
        padding: .65rem .75rem;
    }

    .letra_dropdown {
        padding: 1rem .75rem 1.25rem;
    }
}

/* ===== Botões A- / A+ (fixos no canto da tela) ===== */

.pagina-hinos {
    padding-bottom: 6rem;          /* o último hino não fica escondido atrás dos botões */
}

/* Botões A- / A+: estilos em base.css (usados também em outras páginas) */


/* ===== Pesquisa ===== */

.pesquisa-hinos {
    position: relative;
    margin: 0 0 .5rem;
}

.icone-pesquisa {
    position: absolute;
    top: 50%;
    left: .9rem;
    width: 1.15rem;
    height: 1.15rem;
    transform: translateY(-50%);
    opacity: .55;
    pointer-events: none;
}

.campo-pesquisa {
    width: 100%;
    height: 3rem;                       /* área de toque confortável */
    padding: 0 2.75rem 0 2.75rem;
    font-size: 1rem;                    /* 16px evita zoom automático no iPhone */
    color: inherit;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 1.5rem;
    background-color: #ffffff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo-pesquisa:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .2);
}

/* Esconde o "x" nativo do navegador (usamos o nosso) */
.campo-pesquisa::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.limpar-pesquisa {
    position: absolute;
    top: 50%;
    right: .4rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: inherit;
    border: 0;
    border-radius: 50%;
    background: transparent;
    opacity: .6;
    cursor: pointer;
}

.limpar-pesquisa:hover,
.limpar-pesquisa:focus {
    opacity: 1;
    outline: none;
    background-color: rgba(0, 0, 0, .06);
}

.resultado-pesquisa {
    min-height: 1.25rem;
    margin-bottom: .75rem;
    font-size: .9rem;
    opacity: .8;
}

/* Título + trecho da letra no cabeçalho do hino */
.textos-cabecalho {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.trecho-hino {
    margin-top: .2rem;
    font-size: .85rem;
    opacity: .75;
}

/* Palavras encontradas */
#dropdown_hinos mark {
    padding: 0 .1em;
    border-radius: .2em;
    color: inherit;
    background-color: rgba(255, 193, 7, .45);
}

.numero-hino.numero-encontrado {
    color: #212529;
    background-color: rgba(255, 193, 7, .7);
}

/* Modo escuro */
#corpo_pagina.bg-secondary .campo-pesquisa {
    border-color: rgba(255, 255, 255, .25);
    background-color: var(--escuro-cartao);
}

#corpo_pagina.bg-secondary .campo-pesquisa::placeholder {
    color: rgba(255, 255, 255, .6);
}

#corpo_pagina.bg-secondary #dropdown_hinos mark {
    background-color: rgba(255, 193, 7, .35);
}

/* Coro: marcado como [b]...[/b] no banco */
.coro-hino {
    display: inline-block;
    font-weight: 700;
}

/* ===== Versículo do hinário (abaixo do título) ===== */
.versiculo-hinario {
    max-width: 640px;
    margin: -.25rem auto 1.5rem;
    padding: 0 .5rem;
    font-family: 'Lora', Georgia, 'Times New Roman', serif;   /* Lora vem do próprio site (offline) */
    font-style: italic;
    font-size: clamp(1rem, 3.9vw, 1.15rem);
    line-height: 1.65;
    opacity: .9;
}

.versiculo-hinario p {
    margin-bottom: .4rem;
}

.versiculo-hinario cite {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-style: normal;
    font-size: .85em;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .8;
}

/* ===== Botão "Copiar hino" (embaixo da letra) ===== */
.acoes-hino {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.botao-copiar-hino {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;                 /* área de toque confortável */
    padding: .45rem 1.1rem;
    font-size: .95rem;                /* não acompanha o A-/A+ da letra */
    font-weight: 600;
    line-height: 1.2;
    color: #1B7615;
    border: 1px solid #1B7615;
    border-radius: 2rem;
    background-color: transparent;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.botao-copiar-hino svg {
    width: 1rem;
    height: 1rem;
}

.botao-copiar-hino:hover,
.botao-copiar-hino:focus {
    outline: none;
    color: #fff;
    background-color: #1B7615;
}

.botao-copiar-hino.copiado {
    color: #fff;
    border-color: #1B7615;
    background-color: #1B7615;
}

/* Modo escuro */
#corpo_pagina.bg-secondary .acoes-hino {
    border-top-color: var(--escuro-borda);
}

#corpo_pagina.bg-secondary .botao-copiar-hino {
    color: #8fd88a;
    border-color: #8fd88a;
}

#corpo_pagina.bg-secondary .botao-copiar-hino:hover,
#corpo_pagina.bg-secondary .botao-copiar-hino:focus,
#corpo_pagina.bg-secondary .botao-copiar-hino.copiado {
    color: #1c1f22;
    background-color: #8fd88a;
}

/* ===== Modo de apresentação (tela cheia) ===== */
html.apresentando,
html.apresentando body {
    overflow: hidden;
}

.apresentacao {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: #000;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.apresentacao[hidden] {
    display: none;
}

.apresentacao:focus {
    outline: none;
}

.apresentacao-palco {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 4vh 5vw 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.apresentacao-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.apresentacao-linha {
    display: block;
    white-space: pre-wrap;
}

/* Coro em itálico e um pouco mais claro, para diferenciar da estrofe */
.apresentacao-texto.eh-coro {
    font-style: italic;
    color: #fff7d1;
}

.apresentacao-texto strong {
    font-weight: 800;
}

.apresentacao-controles {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
    color: rgba(255, 255, 255, .55);
    font-size: .95rem;
}

.apresentacao-info {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.apresentacao-titulo {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.apresentacao-posicao {
    flex: 0 0 auto;
    padding: .35rem .75rem;
    font: inherit;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 2rem;
    background: transparent;
    cursor: pointer;
}

/* setinha indicando que abre uma lista */
.apresentacao-posicao::after {
    content: " ▴";
    font-size: .8em;
}

.apresentacao-posicao:hover,
.apresentacao-posicao:focus,
.apresentacao-posicao[aria-expanded="true"] {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    outline: none;
}

.apresentacao-botao,
.apresentacao-fechar {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.9rem;
    line-height: 1;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    cursor: pointer;
    transition: opacity .3s ease, background-color .15s ease;
}

.apresentacao-botao:disabled {
    opacity: .25 !important;
    cursor: default;
}

.apresentacao-fechar {
    position: absolute;
    top: calc(.75rem + env(safe-area-inset-top));
    right: .75rem;
}

.apresentacao-botao:hover,
.apresentacao-fechar:hover {
    background: rgba(255, 255, 255, .25);
}

/* Botões somem depois de alguns segundos parados, para não aparecer no telão */
.apresentacao .apresentacao-botao,
.apresentacao .apresentacao-fechar {
    opacity: 0;
}

.apresentacao.controles-visiveis .apresentacao-botao,
.apresentacao.controles-visiveis .apresentacao-fechar {
    opacity: 1;
}

.apresentacao.em-branco .apresentacao-titulo {
    visibility: hidden;
}

/* Botão de trocar cores e tema claro (fundo branco, letra preta) */
.apresentacao-tema svg {
    width: 1.15rem;
    height: 1.15rem;
}

.apresentacao.tema-claro {
    color: #111;
    background-color: #fff;
}

.apresentacao.tema-claro .apresentacao-texto.eh-coro {
    color: #5c3d00;
}

.apresentacao.tema-claro .apresentacao-controles {
    color: rgba(0, 0, 0, .5);
}

.apresentacao.tema-claro .apresentacao-botao,
.apresentacao.tema-claro .apresentacao-fechar {
    color: #111;
    background: rgba(0, 0, 0, .08);
}

.apresentacao.tema-claro .apresentacao-botao:hover,
.apresentacao.tema-claro .apresentacao-fechar:hover {
    background: rgba(0, 0, 0, .16);
}

/* Primeiro slide: título do hino e hinário */
.apresentacao-texto.eh-titulo .titulo-hino {
    font-weight: 700;
}

.apresentacao-texto.eh-titulo .titulo-hinario {
    margin-top: .6em;
    padding-top: .5em;
    font-size: .5em;
    font-weight: 400;
    opacity: .75;
    border-top: 2px solid currentColor;
}

/* Menu de estrofes: abre para cima a partir do rodapé */
.apresentacao-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + .6rem);
    z-index: 2;
    min-width: 11rem;
    max-height: 70vh;
    margin: 0;
    padding: .35rem;
    overflow-y: auto;
    list-style: none;
    border-radius: .75rem;
    background-color: #1e1f22;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
}

.apresentacao-menu[hidden] {
    display: none;
}

.apresentacao-menu button {
    display: block;
    width: 100%;
    padding: .6rem .9rem;
    font: inherit;
    font-size: 1rem;
    text-align: left;
    color: #fff;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    cursor: pointer;
}

.apresentacao-menu button:hover,
.apresentacao-menu button:focus {
    outline: none;
    background-color: rgba(255, 255, 255, .12);
}

.apresentacao-menu button.atual {
    font-weight: 700;
    color: #8fd88a;
}

.apresentacao-menu li:last-child {
    margin-top: .25rem;
    padding-top: .25rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

/* Com o menu aberto, os botões não somem */
.apresentacao.menu-aberto .apresentacao-botao,
.apresentacao.menu-aberto .apresentacao-fechar {
    opacity: 1;
}

/* Tema claro */
.apresentacao.tema-claro .apresentacao-posicao {
    border-color: rgba(0, 0, 0, .2);
}

.apresentacao.tema-claro .apresentacao-posicao:hover,
.apresentacao.tema-claro .apresentacao-posicao:focus,
.apresentacao.tema-claro .apresentacao-posicao[aria-expanded="true"] {
    color: #111;
    border-color: rgba(0, 0, 0, .45);
}

.apresentacao.tema-claro .apresentacao-menu {
    background-color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

.apresentacao.tema-claro .apresentacao-menu button {
    color: #111;
}

.apresentacao.tema-claro .apresentacao-menu button:hover,
.apresentacao.tema-claro .apresentacao-menu button:focus {
    background-color: rgba(0, 0, 0, .07);
}

.apresentacao.tema-claro .apresentacao-menu button.atual {
    color: #1B7615;
}

.apresentacao.tema-claro .apresentacao-menu li:last-child {
    border-top-color: rgba(0, 0, 0, .12);
}