/* CSS/legal.css — Páginas legales (términos, privacidad, seguridad) y modal de aceptación.
   Autocontenido: no depende de style.css. Claro/oscuro automático (o el que la persona eligió en Felix). */

:root {
    --lg-bg: #f5f7fb; --lg-card: #ffffff; --lg-soft: #eef2f8; --lg-line: #e2e8f0;
    --lg-text: #0f172a; --lg-muted: #475569; --lg-faint: #64748b;
    --lg-primary: #0d6efd; --lg-primary-soft: rgba(13, 110, 253, 0.1);
    --lg-warn: #b45309; --lg-warn-bg: #fffbeb; --lg-warn-line: #fcd34d;
    --lg-ok: #15803d; --lg-ok-bg: #f0fdf4; --lg-ok-line: #86efac;
    --lg-mark: #fde68a; --lg-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
}
body.dark-mode {
    --lg-bg: #0b0d12; --lg-card: #14171f; --lg-soft: #1b1f2a; --lg-line: #262b38;
    --lg-text: #e8ecf4; --lg-muted: #aab4c6; --lg-faint: #8893a8;
    --lg-primary: #5b9dff; --lg-primary-soft: rgba(91, 157, 255, 0.14);
    --lg-warn: #fbbf24; --lg-warn-bg: rgba(251, 191, 36, 0.08); --lg-warn-line: rgba(251, 191, 36, 0.4);
    --lg-ok: #4ade80; --lg-ok-bg: rgba(74, 222, 128, 0.08); --lg-ok-line: rgba(74, 222, 128, 0.35);
    --lg-mark: rgba(251, 191, 36, 0.28); --lg-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.legal-body *, .cs-overlay, .cs-overlay * { box-sizing: border-box; }
html:has(.legal-body) { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.legal-body {
    margin: 0; background: var(--lg-bg); color: var(--lg-text);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
.legal-body a { color: var(--lg-primary); }

/* Barra superior */
.lg-nav {
    position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px;
    background: color-mix(in srgb, var(--lg-bg) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lg-line);
}
.lg-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lg-text) !important; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.lg-brand img { height: 30px; width: auto; }
.lg-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--lg-soft); }
.lg-tabs a { padding: 7px 14px; border-radius: 9px; text-decoration: none; color: var(--lg-muted); font-weight: 700; font-size: 0.85rem; transition: background-color 0.2s ease, color 0.2s ease; }
.lg-tabs a:hover { color: var(--lg-text); }
.lg-tabs a.active { background: var(--lg-card); color: var(--lg-text); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }
.lg-back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; font-size: 0.85rem; color: var(--lg-muted) !important; padding: 8px 12px; border-radius: 10px; }
.lg-back:hover { background: var(--lg-soft); }

/* Encabezado */
.lg-hero { max-width: 1120px; margin: 0 auto; padding: 48px 24px 24px; }
.lg-hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--lg-primary-soft); color: var(--lg-primary); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.lg-hero h1 { margin: 14px 0 8px; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; }
.lg-hero p { margin: 0; max-width: 680px; color: var(--lg-muted); font-size: 1.05rem; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--lg-card); border: 1px solid var(--lg-line); color: var(--lg-muted); font-size: 0.8rem; font-weight: 600; }
.lg-chip button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--lg-primary); }

/* Distribución */
.lg-wrap { max-width: 1120px; margin: 0 auto; padding: 8px 24px 80px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.lg-toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 4px 0; }
.lg-toc h6 { margin: 0 0 10px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lg-faint); font-weight: 800; }
.lg-toc a { display: block; padding: 7px 12px; margin-bottom: 2px; border-left: 2px solid var(--lg-line); color: var(--lg-muted); text-decoration: none; font-size: 0.84rem; font-weight: 600; line-height: 1.35; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; }
.lg-toc a:hover { color: var(--lg-text); }
.lg-toc a.active { color: var(--lg-primary); border-left-color: var(--lg-primary); background: var(--lg-primary-soft); border-radius: 0 8px 8px 0; }

/* Contenido */
.lg-article { min-width: 0; }
.lg-card { background: var(--lg-card); border: 1px solid var(--lg-line); border-radius: 20px; padding: 28px 32px; box-shadow: var(--lg-shadow); margin-bottom: 18px; }
.lg-article h2 { margin: 36px 0 12px; font-size: 1.35rem; letter-spacing: -0.015em; line-height: 1.3; font-weight: 800; display: flex; gap: 12px; align-items: baseline; }
.lg-article h2 .num { flex-shrink: 0; min-width: 34px; height: 28px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--lg-primary-soft); color: var(--lg-primary); font-size: 0.85rem; }
.lg-article h3 { margin: 22px 0 6px; font-size: 1.02rem; font-weight: 800; }
.lg-article p, .lg-article li { color: var(--lg-muted); font-size: 0.97rem; }
.lg-article p { margin: 0 0 12px; }
.lg-article ul, .lg-article ol { margin: 0 0 14px; padding-left: 22px; }
.lg-article li { margin-bottom: 6px; }
.lg-article strong { color: var(--lg-text); }
.lg-article code { background: var(--lg-soft); padding: 2px 6px; border-radius: 6px; font-size: 0.88em; }

.lg-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; }
.lg-summary li { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--lg-soft); margin: 0; }
.lg-summary .ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--lg-card); font-size: 1.1rem; }
.lg-summary b { display: block; color: var(--lg-text); font-size: 0.92rem; }
.lg-summary span { font-size: 0.84rem; color: var(--lg-muted); line-height: 1.5; }

.lg-article .callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid; margin: 16px 0; font-size: 0.93rem; }
.lg-article .callout p { margin: 0; color: inherit; }
.lg-article .callout.warn { background: var(--lg-warn-bg); border-color: var(--lg-warn-line); color: var(--lg-warn); }
.lg-article .callout.ok { background: var(--lg-ok-bg); border-color: var(--lg-ok-line); color: var(--lg-ok); }
.lg-article .callout.info { background: var(--lg-primary-soft); border-color: var(--lg-primary-soft); color: var(--lg-text); }
.lg-article .callout .em { flex-shrink: 0; font-size: 1.15rem; line-height: 1.5; }

.lg-table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 0.9rem; }
.lg-table th, .lg-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lg-line); vertical-align: top; color: var(--lg-muted); }
.lg-table th { color: var(--lg-text); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--lg-soft); }
.lg-table-wrap { overflow-x: auto; border: 1px solid var(--lg-line); border-radius: 14px; margin: 10px 0 16px; }
.lg-table-wrap .lg-table { margin: 0; }

/* Datos por completar */
.lg-pending { background: var(--lg-mark); color: var(--lg-text); padding: 1px 6px; border-radius: 6px; font-weight: 700; }

.lg-foot { max-width: 1120px; margin: 0 auto; padding: 0 24px 60px; color: var(--lg-faint); font-size: 0.82rem; }
.lg-foot a { margin-right: 14px; }
.lg-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border: none; border-radius: 14px; cursor: pointer; background: var(--lg-primary); color: #fff; font-size: 1.1rem; box-shadow: 0 8px 24px rgba(13, 110, 253, 0.4); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; }
.lg-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* ------------------------------------------------------------------ */
/* Modal de aceptación (login, registro y app)                         */
/* ------------------------------------------------------------------ */
.cs-overlay { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 8, 18, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s ease; }
.cs-overlay.open { opacity: 1; }
.cs-box { width: min(560px, 100%); max-height: min(92vh, 760px); overflow-y: auto; border-radius: 26px; background: var(--lg-card); color: var(--lg-text); border: 1px solid var(--lg-line); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); padding: 30px; transform: translateY(16px) scale(0.98); transition: transform 0.3s cubic-bezier(0.3, 1.2, 0.5, 1); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.cs-overlay.open .cs-box { transform: none; }
.cs-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; background: linear-gradient(135deg, #0d6efd, #7c4dff); box-shadow: 0 10px 28px rgba(13, 110, 253, 0.35); margin-bottom: 16px; }
.cs-box h2 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -0.02em; font-weight: 800; }
.cs-box > p { margin: 0 0 16px; color: var(--lg-muted); font-size: 0.93rem; line-height: 1.55; }
.cs-points { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.cs-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; color: var(--lg-muted); line-height: 1.45; }
.cs-points li::before { content: '✓'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--lg-ok-bg); color: var(--lg-ok); font-weight: 900; font-size: 0.72rem; margin-top: 1px; }
.cs-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--lg-line); background: var(--lg-soft); cursor: pointer; font-size: 0.86rem; color: var(--lg-muted); line-height: 1.5; }
.cs-check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: #0d6efd; cursor: pointer; }
.cs-check a { font-weight: 700; }
.cs-check.req { border-color: var(--lg-primary-soft); }
.cs-check em { font-style: normal; font-size: 0.72rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--lg-primary-soft); color: var(--lg-primary); margin-left: 4px; }
.cs-err { min-height: 20px; margin: 4px 2px 6px; color: #dc2626; font-size: 0.83rem; font-weight: 600; }
.cs-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cs-btn { flex: 1; min-width: 140px; height: 48px; border-radius: 14px; border: 1px solid var(--lg-line); background: transparent; color: var(--lg-text); font: inherit; font-weight: 800; font-size: 0.93rem; cursor: pointer; transition: transform 0.15s ease, opacity 0.2s ease; }
.cs-btn:hover:not(:disabled) { transform: translateY(-1px); }
.cs-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cs-btn.primary { background: linear-gradient(135deg, #0d6efd, #3b82f6); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(13, 110, 253, 0.35); }
.cs-fine { margin-top: 14px; font-size: 0.74rem; color: var(--lg-faint); line-height: 1.5; }

@media (max-width: 900px) {
    .lg-wrap { grid-template-columns: 1fr; gap: 0; }
    .lg-toc { position: static; max-height: none; display: flex; gap: 6px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 6px; }
    .lg-toc h6 { display: none; }
    .lg-toc a { flex-shrink: 0; border: 1px solid var(--lg-line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
    .lg-toc a.active { border-color: var(--lg-primary); border-radius: 999px; }
    .lg-summary { grid-template-columns: 1fr; }
    .lg-card { padding: 22px 18px; }
    .lg-nav { padding: 10px 14px; }
    .lg-tabs a { padding: 6px 10px; font-size: 0.78rem; }
    .lg-back span { display: none; }
    .lg-hero { padding: 32px 18px 16px; }
    .lg-wrap { padding: 8px 18px 70px; }
    .cs-box { padding: 22px 18px; border-radius: 22px; }
}
@media (max-width: 520px) { .lg-brand span { display: none; } }
@media print {
    .lg-nav, .lg-toc, .lg-top, .lg-meta button { display: none !important; }
    body.legal-body { background: #fff; color: #000; }
    .lg-wrap { display: block; padding: 0; } .lg-card { box-shadow: none; border: none; padding: 0; }
    .lg-article p, .lg-article li, .lg-table td { color: #222; } .lg-pending { background: none; border: 1px dashed #999; }
}
@media (prefers-reduced-motion: reduce) { html:has(.legal-body) { scroll-behavior: auto; } .cs-overlay, .cs-box, .lg-top { transition: none; } }

@media (max-width: 900px) {
    .lg-toc > div { display: flex; gap: 6px; }
}