/* ═══════════════════════════════════════════════════════════════════════════
   Consentimento de cookies (LGPD)

   Portado do projeto irmão (paroquianatividade, ui-libs/css/privacidade.css) e
   recolorido com os tokens de tema que o SSR publica no :root do base.php.

   ─ COMO O TEMA ENTRA ──────────────────────────────────────────────────────
   O arquivo original escreve toda cor como var(--ref-*, fallback), com os tokens
   da paróquia (--ref-navy-*, --ref-gold, --ref-cream). Em vez de caçar cor por
   cor, o bloco logo abaixo redefine esses MESMOS nomes a partir dos tokens do
   cnvmais (--color-primary, --color-accent, --color-text, --color-background),
   sempre com fallback — se o tema não publicar um token, a camada continua
   legível. O resto do arquivo não sabe de onde a cor vem.

   O escopo dos tokens é o da própria camada (faixa, modal, atalho e cartão),
   não o :root: nomes --ref-* não vazam para o resto do site.

   ─ POR QUE UM ARQUIVO SEPARADO ────────────────────────────────────────────
   Prefixo próprio (`priv-`), sem disputar posição com o CSS do site. Sai no
   <head> por vn_privacidade_assets(), depois do CSS do tema.

   ─ O z-index ──────────────────────────────────────────────────────────────
   Perto do teto do inteiro de 32 bits. Não é exagero: o maior z-index do site é
   9999 (menus, modais, widget de marcas do topo), e a faixa tem de ficar ACIMA
   de tudo — se ela ficar atrás de qualquer coisa, o visitante não consegue
   responder, e um consentimento que não pode ser dado nem negado é o mesmo que
   nenhum.
   ═══════════════════════════════════════════════════════════════════════════ */

.priv-faixa,
.priv-modal,
.priv-atalho,
.priv-bloqueado {
    --ref-navy-900: color-mix(in srgb, var(--color-primary, #193e94) 78%, #000);
    --ref-navy-800: var(--color-primary, #193e94);
    --ref-navy-700: var(--color-primary, #193e94);
    --ref-navy-600: var(--color-link, var(--color-primary, #193e94));
    --ref-gold: var(--color-accent, #2f19d7);
    --ref-gold-strong: color-mix(in srgb, var(--color-accent, #2f19d7) 85%, #000);
    --ref-gold-soft: color-mix(in srgb, var(--color-accent, #2f19d7) 14%, #fff);
    --ref-cream: var(--color-background, #fff);
    --ref-white: #fff;
    --ref-ink: var(--color-text, #303030);
    --ref-muted: color-mix(in srgb, var(--color-text, #303030) 75%, #fff);
    --ref-line: color-mix(in srgb, var(--color-text, #303030) 16%, #fff);
    --ref-soft: color-mix(in srgb, var(--color-text, #303030) 5%, #fff);
    --ref-radius: 14px;
}

.priv-faixa,
.priv-modal,
.priv-atalho,
.priv-bloqueado {
    font-family: "Outfit", "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}

.priv-faixa *,
.priv-modal *,
.priv-atalho *,
.priv-bloqueado * {
    box-sizing: border-box;
}

/* ── `display` declarado, e não herdado do padrão do navegador ───────────── */
/*
 * A faixa e o modal são <section>. O projeto irmão sofria com um reset de
 * varredura `section { display: table }` que fazia o modal encolher até o
 * conteúdo e ignorar `left: 0; right: 0`. Aqui o display é declarado de
 * qualquer jeito: o `hidden` logo abaixo depende de ele ser explícito, e é um
 * seguro barato contra qualquer reset de elemento que o tema venha a ganhar.
 */
.priv-faixa,
.priv-modal {
    display: block;
}

/* O `hidden` do HTML precisa vencer o `display` que as regras acima e abaixo
   dão — inclusive um `display` de varredura que o tema venha a injetar. */
.priv-faixa[hidden],
.priv-modal[hidden],
.priv-atalho[hidden],
.priv-opcao__corpo[hidden],
.priv-opcao__detalhes[hidden] {
    display: none !important;
}

/* Com o modal aberto, a página de trás não rola junto. */
.priv-modal-aberto,
.priv-modal-aberto body {
    overflow: hidden;
}

/* ── A faixa ──────────────────────────────────────────────────────────────── */

.priv-faixa {
    position: fixed;
    /* Centralizada com left/right + margin auto, e não com left: 50% +
       translateX(-50%): o tema do site zera o `transform` das <section>, e a
       faixa ficava com a borda esquerda no meio da tela, metade fora dela. */
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 18px;
    width: min(940px, calc(100vw - 28px));
    z-index: 2147483000;
    background: var(--ref-cream, #fff);
    color: var(--ref-ink, #303030);
    border: 1px solid var(--ref-line, #dfe2e8);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(6, 15, 29, .22);
}

.priv-faixa__interno {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.priv-faixa__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.priv-faixa__selo,
.priv-modal__selo {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ref-gold, #2f19d7);
}

.priv-faixa__titulo {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ref-navy-800, #193e94);
}

.priv-faixa__copia {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ref-muted, #5f6368);
}

.priv-faixa__copia a,
.priv-modal__copia a {
    color: var(--ref-navy-700, #193e94);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.priv-faixa__acoes {
    display: grid;
    flex: 0 0 340px;
    width: 340px;
    min-width: 340px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    row-gap: 7px;
}

.priv-faixa__acoes .priv-botao {
    width: 100%;
    min-height: 40px;
    white-space: nowrap;
    font-size: 12px;
}

.priv-faixa__link {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 0;
    background: transparent;
    color: var(--ref-muted, #5f6368);
    border: 0;
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.priv-botao,
.priv-botao-linha,
.priv-opcao__detalhes-abre {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.priv-botao:hover,
.priv-botao-linha:hover {
    transform: translateY(-1px);
}

.priv-botao {
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 12px;
}

.priv-botao--primario {
    background: var(--ref-gold, #2f19d7);
    color: #fff;
}

.priv-botao--primario:hover {
    background: var(--ref-gold-strong, #2a15bf);
}

.priv-botao--secundario {
    background: var(--ref-white, #fff);
    color: var(--ref-navy-800, #193e94);
    border: 1px solid var(--ref-line, #dfe2e8);
}

.priv-botao--secundario:hover {
    border-color: var(--ref-navy-600, #193e94);
}

.priv-botao--fantasma {
    background: transparent;
    color: var(--ref-muted, #5f6368);
    border: 1px solid var(--ref-line, #dfe2e8);
}

/* ── O modal de preferências ──────────────────────────────────────────────── */

.priv-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483100;
}

.priv-modal__fundo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(6, 15, 29, .55);
}

.priv-modal__caixa {
    position: relative;
    margin: min(7vh, 44px) auto;
    width: min(700px, calc(100vw - 24px));
    /* A caixa NAO rola: topo e rodape ficam fixos e so o corpo rola, para que "Salvar
       preferencias" esteja sempre ao alcance, com os detalhes abertos ou nao. A altura
       desconta as DUAS margens (antes descontava 36px fixos e a caixa passava da tela);
       dvh acompanha a area visivel do celular (barra de endereco), vh e o recuo. */
    max-height: calc(100vh - 2 * min(7vh, 44px));
    max-height: calc(100dvh - 2 * min(7vh, 44px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ref-white, #fff);
    color: var(--ref-ink, #303030);
    border: 1px solid var(--ref-line, #dfe2e8);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(6, 15, 29, .3);
}

.priv-modal__topo,
.priv-modal__rodape {
    flex: 0 0 auto;
}

.priv-modal__corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.priv-modal__rodape {
    border-top: 1px solid var(--ref-line, #dfe2e8);
}

.priv-modal__corpo::-webkit-scrollbar { width: 4px; }
.priv-modal__corpo::-webkit-scrollbar-track { background: transparent; }
.priv-modal__corpo::-webkit-scrollbar-thumb {
    background: var(--ref-line, #dfe2e8);
    border-radius: 999px;
}

.priv-modal__topo,
.priv-modal__corpo,
.priv-modal__rodape {
    padding: 22px;
}

.priv-modal__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--ref-line, #dfe2e8);
}

.priv-modal__titulo {
    margin: 0 0 8px;
    font-size: 23px;
    line-height: 1.15;
    color: var(--ref-navy-800, #193e94);
}

.priv-modal__copia {
    margin: 0;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ref-muted, #5f6368);
}

.priv-modal__fechar {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--ref-line, #dfe2e8);
    border-radius: 999px;
    background: var(--ref-white, #fff);
    color: var(--ref-muted, #5f6368);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.priv-modal__corpo {
    display: grid;
    gap: 12px;
}

/* ── Cada categoria ───────────────────────────────────────────────────────── */

/*
 * Duas colunas — cabeçalho e chave — e o corpo ocupando as duas embaixo.
 *
 * O corpo NÃO fica dentro do cabeçalho porque o cabeçalho é um <button>: um
 * controle dentro de outro não é clicável nem navegável por teclado, e a chave
 * liga-desliga precisa ser alcançável sem disparar a sanfona.
 *
 * `align-items: center` na primeira linha para o nome da categoria e a chave se
 * alinharem quando o cartão está fechado, que é o estado padrão.
 */
.priv-opcao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 0;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--ref-line, #dfe2e8);
    border-radius: 16px;
    background: var(--ref-soft, #f4f5f7);
    transition: border-color .2s ease, background-color .2s ease;
}

.priv-opcao:hover {
    border-color: #d2d9e2;
}

/* O cabeçalho clicável ─────────────────────────────────────────────────────
   Ocupa a largura inteira da coluna e recebe recuo negativo na vertical para
   que a área de clique passe das letras sem afastar a chave do nome. */
.priv-opcao__cabeca {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 6px 0;
    background: transparent;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.priv-opcao__titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ref-navy-800, #193e94);
}

/* A seta ───────────────────────────────────────────────────────────────────
   Desenhada com borda em vez de imagem ou ícone de fonte: são 4 linhas de CSS,
   não depende de fonte de ícones e acompanha a cor do texto. */
.priv-opcao__seta {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ref-muted, #5f6368);
    border-bottom: 2px solid var(--ref-muted, #5f6368);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.priv-opcao__cabeca.esta-aberto .priv-opcao__seta {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* O corpo que abre ─────────────────────────────────────────────────────────
   Ocupa as duas colunas: alinhado só à primeira, ele ficaria estreitado pela
   largura da chave, e a explicação quebraria em muito mais linhas. */
.priv-opcao__corpo {
    grid-column: 1 / -1;
    margin-top: 10px;
}

.priv-opcao__marca {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--ref-gold-soft, #e4e0fa);
    color: var(--ref-navy-700, #193e94);
    font-size: 11px;
    font-weight: 700;
}

.priv-opcao__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ref-muted, #5f6368);
}

.priv-opcao__detalhes-abre {
    margin-top: 10px;
    padding: 0;
    background: transparent;
    color: var(--ref-navy-600, #193e94);
    font-size: 11px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.priv-opcao__detalhes-abre.esta-aberto {
    color: var(--ref-ink, #303030);
}

.priv-opcao__detalhes {
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 12px;
    background: var(--ref-white, #fff);
    border: 1px solid var(--ref-line, #dfe2e8);
}

.priv-opcao__detalhes p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ref-ink, #303030);
}

.priv-opcao__detalhes ul {
    margin: 0;
    padding-left: 18px;
    color: var(--ref-muted, #5f6368);
}

/*
 * O marcador vai no <li>, e não no <ul>: resets de varredura (`li { list-style:
 * none }`, comuns em menus) vencem uma declaração feita no pai. Com o marcador
 * apagado, esta lista viraria frases soltas dentro da caixa.
 */
.priv-opcao__detalhes li {
    margin: 0;
    list-style: disc;
    font-size: 12px;
    line-height: 1.55;
}

/* ── A chave liga/desliga ─────────────────────────────────────────────────── */

.priv-chave {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    margin-top: 1px;
}

.priv-chave input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.priv-chave__trilho {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #d5dde6;
    transition: background-color .2s ease;
}

.priv-chave__bola {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--ref-white, #fff);
    box-shadow: 0 3px 8px rgba(6, 15, 29, .2);
    transition: transform .2s ease;
    pointer-events: none;
}

.priv-chave input:checked + .priv-chave__trilho {
    background: var(--ref-navy-700, #193e94);
}

.priv-chave input:checked + .priv-chave__trilho + .priv-chave__bola {
    transform: translateX(18px);
}

.priv-chave input:disabled + .priv-chave__trilho {
    background: var(--ref-gold, #2f19d7);
    opacity: 1;
}

.priv-chave input:disabled {
    cursor: not-allowed;
}

/* ── Rodapé do modal ──────────────────────────────────────────────────────── */

.priv-modal__rodape {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--ref-line, #dfe2e8);
}

.priv-modal__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* ── O atalho permanente ──────────────────────────────────────────────────── */
/*
 * A LGPD exige que revogar seja tão fácil quanto consentir. Este botão é o
 * "tão fácil": fica em toda página, sempre no mesmo canto, e reabre o modal.
 * É o herdeiro do quadradinho "LGPD" que a camada antiga deixava no rodapé.
 */
.priv-atalho {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147482900;
    background: var(--ref-navy-800, #193e94);
    color: var(--ref-white, #fff);
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 14px 32px rgba(6, 15, 29, .3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.priv-atalho:hover {
    background: var(--ref-navy-700, #193e94);
    transform: translateY(-1px);
}

/* ── O cartão de conteúdo bloqueado ───────────────────────────────────────── */
/*
 * Ocupa o lugar exato do iframe que não foi impresso.
 *
 * `height: 100%` para acompanhar o quadro quando o pai já tem altura definida
 * (quadros de vídeo que reservam a proporção). O `min-height` é o piso para quando o pai não define nada: sem
 * ele o cartão colapsaria, e a página daria um pulo quando o vídeo entrasse.
 */
.priv-bloqueado {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 220px;
    padding: 22px;
    border-radius: var(--ref-radius, 14px);
    background: linear-gradient(135deg, var(--ref-navy-900, #122e6e), var(--ref-navy-700, #193e94));
    color: var(--ref-white, #fff);
    text-align: center;
}

/* Cartao POSICIONADO (absolute, inset-0) dentro de um quadro de proporcao fixa: o quadro
   ja da a altura, e o piso de 220px so o fazia vazar (a 390px o quadro 16:9 tem ~203px).
   O conteudo cede por rolagem como ultimo recurso, nunca por vazamento. */
.priv-bloqueado[class~="absolute"] {
    min-height: 0;
    overflow: auto;
}

/* Dentro de um quadro de proporção fixa (se o cnvmais tiver um), o cartão ocupa o
   lugar do iframe: o ajuste fica com a Tarefa 5, que mexe nos pontos de iframe. */

.priv-bloqueado__interno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 380px;
}

/* Filho DIRETO: o aviso, e não um <span> que apareça dentro da nota. */
.priv-bloqueado__interno > span {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(244, 246, 249, .88);
}

.priv-botao-linha {
    background: var(--ref-gold, #2f19d7);
    color: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 12px;
}

.priv-botao-linha:hover {
    background: var(--ref-gold-strong, #2a15bf);
}

/* O que o clique alcança. Precisa estar escrito — consentimento sem saber o que
   se está consentindo não é consentimento —, mas em voz baixa: quem só quer ver
   a matéria não deve ter de ler isto antes. */
.priv-bloqueado__nota {
    font-size: 11px;
    /* O site trata quase todo texto pequeno como rótulo e o deixa semibold; aqui
       é nota de rodapé, e peso de rótulo a fazia competir com o aviso de cima. */
    font-weight: 400;
    line-height: 1.5;
    color: rgba(244, 246, 249, .62);
}

.priv-bloqueado__link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.priv-bloqueado__link:hover {
    color: var(--ref-white, #fff);
}

@media (max-width: 767.98px) {
    .priv-bloqueado {
        padding: 12px;
    }

    .priv-bloqueado__interno {
        gap: 6px;
    }

    .priv-bloqueado__nota {
        line-height: 1.4;
    }

    .priv-bloqueado__interno > span {
        font-size: 12px;
    }
}

/* ── Link no rodapé do site ───────────────────────────────────────────────── */

.priv-link-rodape {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

/* ── Celular ──────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .priv-faixa {
        width: calc(100vw - 16px);
        bottom: 8px;
        border-radius: 16px;
    }

    .priv-faixa__interno {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px 6px;
    }

    /* As duas respostas lado a lado (cabem: ~165px cada): poupa uma linha de 47px. */
    .priv-faixa__acoes {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr 1fr;
        row-gap: 0;
    }

    /* Alvo de toque de 44px sem mudar o aspecto do link: a area cresce por padding e a
       margem negativa devolve o espaco, entao a faixa nao engorda. */
    .priv-faixa__link {
        min-height: 44px;
        padding: 0 28px;
        margin-top: -2px;
        display: inline-flex;
        align-items: center;
    }

    .priv-modal__caixa {
        margin: 12px auto;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .priv-modal__topo,
    .priv-modal__corpo,
    .priv-modal__rodape {
        padding: 18px;
    }

    .priv-modal__rodape {
        flex-direction: column;
        align-items: stretch;
    }

    .priv-modal__acoes {
        width: 100%;
        flex-direction: column;
    }

    .priv-opcao {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .priv-botao,
    .priv-botao-linha {
        width: 100%;
        justify-content: center;
    }

    /* Com a faixa aberta, o atalho ficaria por cima dela no celular. */
    .priv-atalho {
        right: 10px;
        bottom: 10px;
        font-size: 11px;
        padding: 8px 12px;
    }
}

/* ── Foco visível (acessibilidade, spec §9) ───────────────────────────────── */
/* Um controle alcançável por Tab precisa mostrar onde está o foco. A chave é um
   <input> invisível sobre o trilho, então o anel vai no trilho. */
.priv-faixa button:focus-visible,
.priv-faixa a:focus-visible,
.priv-modal button:focus-visible,
.priv-modal a:focus-visible,
.priv-atalho:focus-visible,
.priv-bloqueado button:focus-visible,
.priv-bloqueado a:focus-visible {
    outline: 3px solid var(--ref-gold, #2f19d7);
    outline-offset: 2px;
}

.priv-chave input:focus-visible + .priv-chave__trilho {
    outline: 3px solid var(--ref-gold, #2f19d7);
    outline-offset: 2px;
}