/* ═══════════════════════════════════════════════════════════
   CONSENT.CSS — tela de consentimento LGPD (v11.2.218, SEC-02)

   z-index: acima de TUDO, inclusive do splash. Se o splash cobrisse a tela de
   consentimento, o app pediria GPS por tras de uma tela que o motorista nao ve —
   que e exatamente o furo que este trabalho fecha. Usa a mesma escala de tokens
   do projeto (--z-sistema), nao um numero solto.
   ═══════════════════════════════════════════════════════════ */

.consent-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sistema) + 10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 12, 18, .78);
    /* sem backdrop-filter de proposito: a v11.2.181 provou que blur sobre camada
       animada custa caro em celular fraco, e aqui nao agrega nada */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* trava o scroll do app atras do modal */
body.consent-travado {
    overflow: hidden;
}

.consent-caixa {
    width: 100%;
    max-width: 460px;
    margin: auto;
    background: #151b23;
    color: #e8edf3;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    padding: 22px 20px 18px;
    font-family: 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

.consent-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.consent-icone { font-size: 26px; }

.consent-cabecalho h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.consent-corpo p { margin: 0 0 12px; font-size: 14.5px; }

.consent-lista {
    margin: 0 0 14px;
    padding-left: 18px;
    font-size: 13.5px;
    color: #c7d2de;
}

.consent-lista li { margin-bottom: 7px; }

.consent-lista strong { color: #e8edf3; }

/* o opcional precisa PARECER opcional — caixa separada, nao mais um paragrafo */
.consent-opcional {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    padding: 12px;
    margin: 0 0 14px;
    font-size: 13px;
    color: #c7d2de;
    cursor: pointer;
}

.consent-opcional input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 auto;
    accent-color: #FF6B35;
    cursor: pointer;
}

.consent-opcional strong { color: #e8edf3; }

.consent-politica {
    font-size: 12.5px;
    color: #9fb0c2;
    margin: 0 0 16px;
}

.consent-politica a { color: #6cb6ff; }

/* AS DUAS SAIDAS TEM O MESMO PESO.
   Aceitar recebe cor de marca, recusar recebe contorno legivel — nao um link
   apagado no rodape. Esconder a recusa e o padrao escuro que invalida o
   consentimento; o custo de fazer certo aqui e uma borda. */
.consent-acoes {
    display: flex;
    gap: 10px;
}

.consent-btn {
    flex: 1;
    padding: 13px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s ease, background .15s ease;
}

.consent-btn:focus-visible {
    outline: 2px solid #6cb6ff;
    outline-offset: 2px;
}

.consent-btn-recusar {
    background: transparent;
    color: #d5dee8;
    border: 1px solid rgba(255, 255, 255, .28);
}

.consent-btn-recusar:hover { background: rgba(255, 255, 255, .07); }

.consent-btn-aceitar {
    background: #FF6B35;
    color: #fff;
    border: 1px solid #FF6B35;
}

.consent-btn-aceitar:hover { filter: brightness(1.08); }

.consent-rodape-recusa {
    margin: 12px 0 0;
    font-size: 12px;
    color: #8fa1b3;
    text-align: center;
}

/* telas baixas (celular deitado): a caixa rola dentro do overlay */
@media (max-height: 620px) {
    .consent-overlay { align-items: flex-start; }
    .consent-caixa { margin: 8px auto; padding: 16px 16px 14px; }
    .consent-lista { font-size: 13px; }
}