/* ══════════════════════════════════════════════
   BusYa · Privacidad y políticas
   Misma paleta que la vista de Ajustes
══════════════════════════════════════════════ */
.legal-wrap {
    --l-bg: #111417;
    --l-panel: #1a1d21;
    --l-panel-2: #212428;
    --l-border: #2b2e33;
    --l-accent: #ea6430;
    --l-accent-soft: rgba(234, 100, 48, .12);
    --l-text: #b99e97;
    --l-title: #f1e6e2;
    --l-t: .22s cubic-bezier(.4, 0, .2, 1);

    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 36px 40px;
    color: var(--l-text);
}

/* ── Encabezado ─────────────────────────────── */
.legal-head { margin-bottom: 24px; }
.legal-head h1 { font-size: 1.85rem; font-weight: 800; margin: 0 0 8px; color: var(--l-title); }
.legal-head p { font-size: .9rem; line-height: 1.55; max-width: 640px; margin: 0; }
.legal-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 600; color: var(--l-text);
    text-decoration: none; margin-bottom: 14px; transition: color var(--l-t);
}
.legal-back:hover { color: var(--l-accent); }

/* ── Pestañas (solo CSS con radios) ─────────── */
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }

.legal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.legal-tabs label {
    padding: 10px 18px; border-radius: 8px; cursor: pointer;
    background: var(--l-panel); border: 1px solid var(--l-border);
    font-size: .85rem; font-weight: 600; color: var(--l-text);
    transition: border-color var(--l-t), color var(--l-t), background var(--l-t);
}
.legal-tabs label:hover { border-color: var(--l-accent); color: var(--l-title); }

#tab-priv:checked ~ .legal-tabs label[for="tab-priv"],
#tab-terms:checked ~ .legal-tabs label[for="tab-terms"],
#tab-cookies:checked ~ .legal-tabs label[for="tab-cookies"],
#tab-seg:checked ~ .legal-tabs label[for="tab-seg"] {
    background: var(--l-accent); border-color: var(--l-accent); color: #fff;
}
.tab-radio:focus-visible ~ .legal-tabs { outline: 2px solid var(--l-accent); outline-offset: 4px; border-radius: 8px; }

/* ── Paneles ────────────────────────────────── */
.legal-panel {
    display: none;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    align-items: start;
}
#tab-priv:checked ~ .legal-panels .panel-priv,
#tab-terms:checked ~ .legal-panels .panel-terms,
#tab-cookies:checked ~ .legal-panels .panel-cookies,
#tab-seg:checked ~ .legal-panels .panel-seg { display: grid; }

/* Índice lateral */
.legal-index {
    position: sticky; top: 80px;
    background: var(--l-panel); border: 1px solid var(--l-border);
    border-radius: 12px; padding: 16px 12px;
    max-height: calc(100vh - 120px); overflow-y: auto;
}
.legal-index h2 { font-size: .8rem; font-weight: 700; margin: 0 8px 10px; color: var(--l-title); }
.legal-index a {
    display: block; padding: 8px 10px; border-radius: 6px;
    font-size: .82rem; font-weight: 500; color: var(--l-text);
    text-decoration: none; transition: background var(--l-t), color var(--l-t);
}
.legal-index a:hover { background: var(--l-accent); color: #111417; }

/* Contenido con barra de desplazamiento */
.legal-scroll {
    background: var(--l-panel); border: 1px solid var(--l-border);
    border-radius: 12px; padding: 26px 30px;
    height: calc(100vh - 260px); min-height: 420px;
    overflow-y: auto; scroll-behavior: smooth;
}
.legal-scroll,
.legal-index { scrollbar-width: thin; scrollbar-color: var(--l-accent) transparent; }
.legal-scroll::-webkit-scrollbar,
.legal-index::-webkit-scrollbar { width: 8px; }
.legal-scroll::-webkit-scrollbar-track,
.legal-index::-webkit-scrollbar-track { background: var(--l-panel-2); border-radius: 8px; }
.legal-scroll::-webkit-scrollbar-thumb,
.legal-index::-webkit-scrollbar-thumb { background: var(--l-accent); border-radius: 8px; }

.legal-meta {
    display: inline-block; font-size: .76rem; padding: 6px 12px; margin-bottom: 22px;
    background: var(--l-accent-soft); color: var(--l-accent); border-radius: 20px; font-weight: 600;
}
.legal-scroll section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--l-border); scroll-margin-top: 4px; }
.legal-scroll section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-scroll h3 { font-size: 1.05rem; font-weight: 700; color: var(--l-title); margin: 0 0 10px; }
.legal-scroll p, .legal-scroll li { font-size: .88rem; line-height: 1.7; max-width: 75ch; }
.legal-scroll p { margin: 0 0 10px; }
.legal-scroll ul { margin: 0 0 10px; padding-left: 20px; }
.legal-scroll li { margin-bottom: 6px; }
.legal-scroll li::marker { color: var(--l-accent); }
.legal-scroll strong { color: var(--l-title); font-weight: 600; }
.legal-scroll a { color: var(--l-accent); }

/* Tabla de cookies */
.legal-table-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--l-border); border-radius: 8px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.legal-table th, .legal-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--l-border); }
.legal-table th { background: var(--l-panel-2); color: var(--l-title); font-weight: 600; }
.legal-table tr:last-child td { border-bottom: none; }

/* Pie con contacto */
.legal-contact {
    margin-top: 20px; padding: 16px 20px; border-radius: 12px;
    background: var(--l-panel); border: 1px solid var(--l-border);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: .85rem;
}
.legal-contact strong { color: var(--l-title); }
.legal-contact a {
    background: var(--l-accent); color: #fff; text-decoration: none;
    padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: .84rem;
    transition: filter var(--l-t);
}
.legal-contact a:hover { filter: brightness(1.08); }

/* ── Botón en la vista de Ajustes ───────────── */
.setting-link.legal-link { border-color: rgba(234, 100, 48, .35); }
.setting-link.legal-link strong { color: #ea6430; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 900px) {
    .legal-wrap { padding: 20px; }
    .legal-panel { grid-template-columns: 1fr; }
    .legal-index { position: static; max-height: 160px; }
    .legal-scroll { height: 60vh; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .legal-scroll { scroll-behavior: auto; }
    .legal-wrap * { transition: none !important; }
}