/* Páginas legales, 404 y banner de cookies */
.legal-body, .nf-body { overflow: auto; }
.legal { max-width: 820px; margin: 0 auto; padding: 32px 20px 60px; line-height: 1.7; }
.legal-logo { display: block; height: auto; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 8px; }
.legal-tabs a { padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; text-decoration: none; }
.legal-tabs a[aria-current="page"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7c2dff, #b14dff); }
.legal h1 { font-size: 30px; margin: 18px 0 6px; color: var(--text); }
.legal h2 { font-size: 18px; margin: 26px 0 8px; color: var(--text); }
.legal p, .legal li, .legal td { color: var(--muted); }
.legal b, .legal th { color: var(--text); }
.legal a:not(.btn) { color: var(--primary2); }
.legal-date { font-size: 13px; }
.legal-scroll { overflow-x: auto; }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.legal th, .legal td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.legal-foot { margin-top: 34px; }

.nf-body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(760px 420px at 50% 18%, rgba(124, 45, 255, .24), transparent 70%), var(--bg, #05060c); }
.nf { max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.nf-code { margin: 6px 0 0; font-size: clamp(88px, 22vw, 150px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; background: linear-gradient(135deg, #22d3ee, #a855f7 55%, #f43f5e); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 26px rgba(168, 85, 247, .45)); }
.nf h1 { margin: 0; font-size: 26px; color: var(--text); }
.nf-text { margin: 0 0 10px; color: var(--muted); }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font-size: 14px; }
.nf-links a { padding: 6px 2px; color: var(--primary2); }

.ck { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px; color: var(--text, #e9ebf8); border-radius: 18px; border: 1px solid rgba(168, 85, 247, .5); background: var(--panel, #0d0f1d); box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 26px rgba(124, 45, 255, .25); }
.ck h2 { margin: 0 0 4px; font-size: 16px; }
.ck p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted, #aab0cc); }
.ck p a { color: var(--primary2, #c084fc); }
.ck-opts { display: grid; gap: 8px; margin-bottom: 12px; }
.ck-opts[hidden] { display: none; }
.ck-opts label { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--border, #24283f); border-radius: 12px; }
.ck-opts input { margin-top: 3px; accent-color: #a855f7; }
.ck-opts b { display: block; font-size: 13.5px; }
.ck-opts small { font-size: 12px; color: var(--muted, #aab0cc); }
.ck-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-btn { flex: 1 1 auto; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text, #e9ebf8); cursor: pointer; border-radius: 11px; border: 1px solid var(--border, #24283f); background: transparent; }
.ck-btn:hover { border-color: #a855f7; }
.ck-go { color: #fff; border: 0; background: linear-gradient(135deg, #7c2dff, #b14dff); }
:focus-visible { outline: 2px solid #c084fc; outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-cta { align-self: flex-start; margin: 4px 0 14px; text-decoration: none; }
/* Contraste mínimo WCAG AA sin cambiar la paleta */
.nav-title { opacity: 1; }
.ck p a, .legal p a, .hint a, .auth-hero small a { text-decoration: underline; text-underline-offset: 2px; }
.btn-accent { color: #04201c; }
.tag-bad { color: #fb8585; }
#soundBtn .n { color: var(--muted); opacity: 1; }
.ai-model em { color: #b9b0ff; }
