/*
 * Consentimento LGPD (checkbox) e aviso de privacidade dos formulários públicos.
 * Mobile-first (390px base). Cores e medidas vêm das variáveis do :root: para adaptar a
 * um tema escuro basta redefini-las no :root da página (ex.: --consentimento-texto).
 *
 * BEM simplificado:
 *   .consentimento            bloco (caixa do aceite)
 *   .consentimento__item      <label> clicável, inclui checkbox + texto
 *   .consentimento__caixa     o checkbox
 *   .consentimento__texto     texto do aceite
 *   .consentimento__link      link para a política
 *   .consentimento__aviso     texto de aviso (formulários sem checkbox)
 */
:root {
    --consentimento-texto: #374151;
    --consentimento-texto-suave: #6b7280;
    --consentimento-fundo: #f9fafb;
    --consentimento-borda: #e5e7eb;
    --consentimento-destaque: #a3002d;
    --consentimento-foco: #a3002d;
    --consentimento-raio: 12px;
    --consentimento-espaco: 12px;
    --consentimento-alvo: 22px;          /* alvo de toque do checkbox: >= 20px */
    --consentimento-fonte: 13px;
}

.consentimento {
    margin-top: calc(var(--consentimento-espaco) * 1.5);
}

.consentimento__item {
    display: flex;
    align-items: flex-start;
    gap: var(--consentimento-espaco);
    padding: var(--consentimento-espaco);
    background: var(--consentimento-fundo);
    border: 1px solid var(--consentimento-borda);
    border-radius: var(--consentimento-raio);
    color: var(--consentimento-texto);
    font-size: var(--consentimento-fonte);
    line-height: 1.45;
    cursor: pointer;                     /* o texto inteiro marca/desmarca */
}

.consentimento__caixa {
    flex: 0 0 var(--consentimento-alvo);
    width: var(--consentimento-alvo);
    height: var(--consentimento-alvo);
    margin: 0;
    accent-color: var(--consentimento-destaque);
    cursor: pointer;
}

.consentimento__caixa:focus-visible {
    outline: 3px solid var(--consentimento-foco);
    outline-offset: 2px;
}

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

.consentimento__link {
    color: var(--consentimento-destaque);
    font-weight: 600;
    text-decoration: underline;
}

.consentimento__link:focus-visible {
    outline: 3px solid var(--consentimento-foco);
    outline-offset: 2px;
    border-radius: 2px;
}

.consentimento__aviso {
    margin: var(--consentimento-espaco) 0 0;
    color: var(--consentimento-texto-suave);
    font-size: calc(var(--consentimento-fonte) - 1px);
    line-height: 1.5;
    text-align: center;
}

@media (min-width: 768px) {
    :root {
        --consentimento-fonte: 14px;
    }
}