/* ============================================================
   Cânticos — estilo público
   Identidade: hinário aberto — capa bordô com dourado em cima,
   página de papel embaixo. Modo escuro = leitura no culto.
   ============================================================ */

:root {
    --capa:        #5C1F2E;
    --capa-funda:  #451622;
    --ouro:        #B8892E;
    --ouro-claro:  #D9B45E;
    --papel:       #F3EDE0;
    --pagina:      #FBF8F1;
    --tinta:       #2B2430;
    --tinta-suave: #7C7365;
    --borda:       #E3D9C4;
    --marca:       #F1E1AB;
    --sombra:      0 1px 2px rgba(43, 36, 48, .07), 0 6px 18px rgba(43, 36, 48, .06);

    --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --tam-letra: 1.25rem;   /* tamanho da letra do cântico (ajustável) */
}

html[data-tema="escuro"] {
    --capa:        #23131C;
    --capa-funda:  #1A0E15;
    --ouro:        #C79B45;
    --ouro-claro:  #E0BE6B;
    --papel:       #141118;
    --pagina:      #1D1823;
    --tinta:       #EDE6D7;
    --tinta-suave: #A79D8B;
    --borda:       #322A3C;
    --marca:       #57451A;
    --sombra:      0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
}

/* ── Base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.5;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 2px;
    border-radius: 3px;
}

.oculto {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.texto-suave { color: var(--tinta-suave); }

mark {
    background: var(--marca);
    color: inherit;
    border-radius: 2px;
    padding: 0 .15em;
}

/* ── Capa (cabeçalho do hinário) ──────────────────────────── */
.capa {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .12)),
        var(--capa);
    color: var(--ouro-claro);
    text-align: center;
    padding: 2rem 1rem 1.4rem;
    border-bottom: 3px double var(--ouro);
}

.capa-titulo {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.7rem, 6vw, 2.4rem);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.capa-subtitulo {
    margin: .35rem 0 0;
    font-size: .8rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ouro);
}

.botao-tema {
    position: absolute;
    top: .8rem;
    right: .8rem;
    background: transparent;
    color: var(--ouro-claro);
    border: 1px solid var(--ouro);
    border-radius: 50%;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.05rem;
    cursor: pointer;
}

/* Filete duplo dourado com estrela central */
.ornamento {
    display: flex;
    align-items: center;
    gap: .8rem;
    max-width: 20rem;
    margin: 1rem auto 0;
    color: var(--ouro);
    font-size: .8rem;
}

.ornamento::before,
.ornamento::after {
    content: "";
    flex: 1;
    height: 3px;
    border-top: 1px solid var(--ouro);
    border-bottom: 1px solid var(--ouro);
}

/* ── Página ───────────────────────────────────────────────── */
.pagina {
    width: min(44rem, 100% - 2rem);
    margin: 1.25rem auto;
    flex: 1;
}

/* ── Busca ────────────────────────────────────────────────── */
.busca {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.busca input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 1.05rem;
    color: var(--tinta);
    background: var(--pagina);
    border: 1px solid var(--borda);
    border-radius: .6rem;
    padding: .75rem 1rem;
    box-shadow: var(--sombra);
}

.busca input::placeholder { color: var(--tinta-suave); }

.busca input:focus {
    outline: none;
    border-color: var(--ouro);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 30%, transparent);
}

.busca button {
    font: inherit;
    font-weight: 600;
    color: var(--ouro-claro);
    background: var(--capa);
    border: 1px solid var(--capa);
    border-radius: .6rem;
    padding: .75rem 1.2rem;
    cursor: pointer;
}

.busca button:active { transform: translateY(1px); }

/* ── Abas A–Z (dedeiras do hinário) ───────────────────────── */
.abas {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    padding: 0 0 .35rem;
    margin-bottom: -1px;
    scrollbar-width: thin;
}

.abas a {
    flex: 0 0 auto;
    min-width: 2.1rem;
    text-align: center;
    font-family: var(--serif);
    font-weight: 600;
    text-decoration: none;
    color: var(--capa);
    background: var(--pagina);
    border: 1px solid var(--borda);
    border-bottom: 2px solid var(--ouro);
    border-radius: .45rem .45rem 0 0;
    padding: .3rem .45rem;
}

html[data-tema="escuro"] .abas a { color: var(--ouro-claro); }

/* ── Grupos e lista ───────────────────────────────────────── */
.grupo { scroll-margin-top: 1rem; }

.letra-grupo {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    font-family: var(--serif);
    font-size: 1.9rem;
    color: var(--ouro);
    margin: 1.6rem 0 .4rem;
}

.letra-grupo::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--borda);
}

.cabecalho-lista {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: .25rem 0 .6rem;
}

.cabecalho-lista h2 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.limpar { font-size: .85rem; color: var(--tinta-suave); }

.lista-canticos {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    background: var(--pagina);
    border: 1px solid var(--borda);
    border-radius: .7rem;
    box-shadow: var(--sombra);
    overflow: hidden;
}

.lista-canticos li + li { border-top: 1px solid var(--borda); }

.item-cantico {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem;
    text-decoration: none;
    min-height: 3.2rem;   /* alvo de toque confortável */
}

.item-cantico:active { background: color-mix(in srgb, var(--ouro) 12%, var(--pagina)); }

.item-cantico .numero {
    flex: 0 0 2.3rem;
    text-align: right;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ouro);
}

.item-cantico .dados { flex: 1; min-width: 0; }

.item-cantico .titulo {
    display: block;
    font-family: var(--serif);
    font-size: 1.1rem;
}

.item-cantico .trecho {
    display: block;
    font-size: .85rem;
    color: var(--tinta-suave);
    margin-top: .15rem;
}

.tom {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--capa);
    background: color-mix(in srgb, var(--ouro) 22%, var(--pagina));
    border: 1px solid var(--ouro);
    border-radius: 999px;
    padding: .18rem .55rem;
}

html[data-tema="escuro"] .tom { color: var(--ouro-claro); }

.contagem {
    text-align: center;
    font-size: .8rem;
    color: var(--tinta-suave);
    margin: 1.4rem 0;
}

/* ── Estados vazios ───────────────────────────────────────── */
.vazio {
    background: var(--pagina);
    border: 1px dashed var(--borda);
    border-radius: .7rem;
    text-align: center;
    padding: 2rem 1.2rem;
    margin: 1.5rem 0;
}

.vazio p { margin: .3rem 0; }

/* ── Página do cântico ────────────────────────────────────── */
.barra-leitura {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .9rem;
    background: color-mix(in srgb, var(--papel) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borda);
}

.barra-leitura .voltar {
    text-decoration: none;
    font-weight: 600;
    color: var(--capa);
    padding: .45rem .3rem;
}

html[data-tema="escuro"] .barra-leitura .voltar { color: var(--ouro-claro); }

.barra-leitura .controles { display: flex; gap: .4rem; }

.barra-leitura .controles button {
    font: inherit;
    font-weight: 600;
    min-width: 2.7rem;
    padding: .45rem .55rem;
    color: var(--tinta);
    background: var(--pagina);
    border: 1px solid var(--borda);
    border-radius: .55rem;
    cursor: pointer;
}

.barra-leitura .controles button:active {
    background: color-mix(in srgb, var(--ouro) 15%, var(--pagina));
}

.pagina-cantico { margin-top: 1.5rem; }

.cabecalho-cantico { text-align: center; }

.numero-grande {
    display: inline-block;
    font-family: var(--serif);
    font-size: .95rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ouro);
}

.cabecalho-cantico h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.5rem, 5.5vw, 2.1rem);
    margin: .25rem 0 .4rem;
}

.meta-cantico {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.selo-oculto {
    font-size: .72rem;
    font-weight: 600;
    color: #8C2F2F;
    background: color-mix(in srgb, #8C2F2F 12%, var(--pagina));
    border: 1px solid #8C2F2F;
    border-radius: 999px;
    padding: .18rem .55rem;
}

.cabecalho-cantico .ornamento { margin-top: .9rem; }

/* Letra do cântico */
.letra {
    font-family: var(--serif);
    font-size: var(--tam-letra);
    line-height: 1.62;
    max-width: 34rem;
    margin: 1.6rem auto 3rem;
}

.estrofe { margin: 0 0 1.35em; }

.estrofe .linha { display: block; }

.estrofe.refrao {
    border-left: 3px solid var(--ouro);
    padding-left: 1rem;
    font-style: italic;
}

.rotulo-refrao {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: .4em;
}

/* ── Rodapé ───────────────────────────────────────────────── */
.rodape {
    text-align: center;
    padding: 1rem;
    font-size: .78rem;
}

.rodape a {
    color: var(--tinta-suave);
    text-decoration: none;
}

.rodape a:hover { color: var(--ouro); }

/* ── Impressão ────────────────────────────────────────────── */
@media print {
    .barra-leitura, .rodape, .botao-tema { display: none !important; }
    body { background: #fff; color: #000; }
    .letra { max-width: none; }
}

/* ── Acessibilidade: movimento reduzido ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}