/* ================================================================
   LEGAL.CSS — Política de privacidad y términos de uso
   (privacidad.html, terminos.html). Usa las variables de login.css.
   ================================================================ */

body { background: var(--color-fondo); }

.legal-wrap { max-width: 820px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 16px calc(48px + env(safe-area-inset-bottom)); }
.legal-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.legal-cabecera img { width: 52px; height: 52px; border-radius: 15px; }
.legal-cabecera p { margin: 0; font-size: 13px; color: var(--color-texto-suave); }
.legal-cabecera h1 { margin: 2px 0 0; font-size: 26px; line-height: 1.15; }

.legal-card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 20px;
    box-shadow: var(--sombra-sm);
    padding: 30px 32px;
    font-size: 15px;
    line-height: 1.65;
}
.legal-card h2 { font-size: 18px; margin: 30px 0 8px; }
.legal-card h2:first-of-type { margin-top: 0; }
.legal-card p, .legal-card li { color: var(--color-texto); }
.legal-card ul { padding-left: 20px; margin: 8px 0; }
.legal-card li { margin: 4px 0; }
.legal-card a { color: var(--color-primario-oscuro); font-weight: 600; }
:root[data-theme="dark"] .legal-card a { color: var(--color-primario); }
.legal-resumen {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-primario) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primario) 28%, transparent);
}
.legal-resumen p { margin: 0; }
.legal-version { margin: 26px 0 0; font-size: 13px; color: var(--color-texto-suave); }
.legal-pie { margin-top: 22px; text-align: center; font-size: 13px; color: var(--color-texto-suave); }
.legal-pie a { color: inherit; font-weight: 600; }

@media (max-width: 560px) {
    .legal-card { padding: 22px 18px; font-size: 14px; }
    .legal-cabecera h1 { font-size: 22px; }
}