/* Termos de Uso e Política de Privacidade (server/php/legal/legal.php):
   texto do documento, caixinhas de aceite, modal e página pública.
   Tudo escopado em .legal-*: registrar.php e criar-conta.php estilizam
   input, h2 e button por tag, então cada regra aqui define o que precisa. */

:root {
    --legal-fundo: #f5f6f8;
    --legal-card: #ffffff;
    --legal-texto: #1f2937;
    --legal-suave: #6b7280;
    --legal-borda: #e5e7eb;
    --legal-link: var(--brand-primary, #004AAD);
}

/* ---------- texto do documento ---------- */
.legal-doc { color: var(--legal-texto); font-family: 'Open Sans', sans-serif; line-height: 1.65; text-align: left; }
.legal-doc h2 {
    font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--legal-texto);
    text-align: left; margin: 28px 0 10px; padding: 18px 0 0; border-top: 1px solid var(--legal-borda);
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.legal-doc p, .legal-doc li { font-size: .95rem; color: var(--legal-texto); margin: 0; }
.legal-doc p + p { margin-top: 10px; }
.legal-doc ul, .legal-doc ol { margin: 10px 0 10px 22px; padding: 0; }
.legal-doc ol.legal-alfa { list-style: lower-alpha; }
.legal-doc li + li { margin-top: 5px; }
.legal-doc a { color: var(--legal-link); }
.legal-doc strong { font-weight: 600; color: inherit; }
.legal-doc .legal-data { color: var(--legal-suave); font-size: .88rem; }
.legal-doc .legal-assinatura { margin-top: 18px; }

/* ---------- caixinhas de aceite (dentro do formulário) ---------- */
.legal-aceite {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px;
    font-size: .86rem; font-weight: 400; line-height: 1.45; color: #475569; cursor: pointer; text-align: left;
}
.legal-aceite input[type="checkbox"] {
    flex: none; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; padding: 0;
    accent-color: var(--brand-primary, #004AAD); cursor: pointer;
}
.legal-aceite span { color: #475569; }
.legal-aceite a { color: var(--brand-primary, #004AAD); font-weight: 600; text-decoration: underline; }

/* ---------- modal ---------- */
/* margin: auto explícito: o reset "* { margin: 0 }" das telas de cadastro
   tirava a centralização padrão do <dialog> e o modal colava no canto. */
.legal-modal {
    width: min(760px, calc(100% - 24px)); max-height: 88vh; margin: auto; padding: 0; border: 0; border-radius: 14px;
    background: var(--legal-card); color: var(--legal-texto); box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.legal-modal[open] { display: flex; flex-direction: column; }
.legal-modal::backdrop { background: rgba(15, 23, 42, .55); }
.legal-modal-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--legal-borda);
}
.legal-modal-topo h2 {
    margin: 0; padding: 0; text-align: left; font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem; font-weight: 800; color: var(--brand-900, #0b1f4d);
}
.legal-modal-x {
    flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #64748b; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.legal-modal-x:hover { background: #f1f5f9; }
.legal-modal-corpo { flex: 1; overflow-y: auto; padding: 8px 22px 20px; overscroll-behavior: contain; }
.legal-modal-corpo:focus { outline: none; }
.legal-modal-rodape {
    display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px;
    border-top: 1px solid var(--legal-borda); background: var(--legal-card);
}
.legal-btn {
    width: auto; margin: 0; padding: 11px 22px; border-radius: 999px; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: .9rem; font-weight: 700;
}
.legal-btn-fechar { background: transparent; border: 1px solid #cbd5e1; color: #475569; }
.legal-btn-fechar:hover { background: #f8fafc; }
.legal-btn-aceitar { background: var(--brand-primary, #004AAD); border: 1px solid transparent; color: #ffffff; }
.legal-btn-aceitar:hover { filter: brightness(.94); }
body.legal-modal-aberto { overflow: hidden; }

@media (max-width: 600px) {
    .legal-modal { width: calc(100% - 16px); max-height: 92vh; }
    .legal-modal-topo, .legal-modal-rodape { padding-left: 16px; padding-right: 16px; }
    .legal-modal-corpo { padding-left: 16px; padding-right: 16px; }
    .legal-modal-rodape .legal-btn { flex: 1; }
}

/* ---------- página pública ---------- */
.legal-pagina { margin: 0; padding: 32px 16px 48px; background: var(--legal-fundo); font-family: 'Open Sans', sans-serif; }
.legal-folha {
    max-width: 820px; margin: 0 auto; padding: 0 36px 36px; overflow: hidden;
    background: var(--legal-card); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}
/* Logo da marca é branco: vai numa faixa azul, nunca direto no fundo claro. */
.legal-topo { display: block; margin: 0 -36px 30px; padding: 22px 36px; background: var(--brand-gradient, #001a7a); }
.legal-topo img { display: block; width: 110px; height: auto; }
.legal-folha h1 { margin: 0 0 4px; font-family: 'Montserrat', sans-serif; font-size: 1.8rem; line-height: 1.25; color: var(--legal-texto); }
.legal-rodape-links { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--legal-borda); font-size: .92rem; color: var(--legal-suave); }
.legal-rodape-links a { color: var(--legal-link); font-weight: 600; }

@media (max-width: 600px) {
    .legal-folha { padding: 0 20px 28px; }
    .legal-topo { margin: 0 -20px 24px; padding: 18px 20px; }
    .legal-folha h1 { font-size: 1.45rem; }
}

/* Escuro só na página pública (registrar/criar-conta são claras). */
@media (prefers-color-scheme: dark) {
    .legal-pagina {
        --legal-fundo: #111418; --legal-card: #1a1f25; --legal-texto: #e5e7eb;
        --legal-suave: #9ca3af; --legal-borda: #374151; --legal-link: #7fb0ff;
    }
}