/* ============================================================
   CPR — Páginas legales
   Estilos compartidos por /terminos-y-condiciones,
   /politica-de-privacidad y /politica-de-cancelacion.
   Encolado desde inc/theme/assets-loader.php
   (cpr_encolar_assets_legales, is_page() con los 3 slugs).
   Depende de: tokens.css. El reset base, el header y el footer
   (base.css, header.css, footer.css) los encola aparte
   cpr_encolar_header_footer() para toda página con la plantilla
   "CPR - Ancho completo".

   Corregido respecto del borrador original (2026-09-21):
   - --lh-body no existe en tokens.css → --lh-relaxed.
   - --border-hairline y --focus-ring son solo colores: usados
     como shorthand de border/outline dejaban border-style/
     outline-style en none (bordes y foco invisibles). Ahora
     llevan grosor y estilo explícitos.
   - scroll-margin-top de h2/h3 bajó de 100px a var(--space-4):
     el alto del header ya lo compensa header.css con
     html { scroll-padding-top }; aquí va solo el aire extra para
     que el título no quede pegado al header. scroll-anclas.js
     suma ambos valores igual que el salto nativo del navegador.
   ============================================================ */

.cpr-legal {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(2rem, 6vh, 5rem) clamp(1rem, 6vw, 3rem);
    font-family: var(--font-sans);
    color: var(--text-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
}

/* ── Encabezado ──────────────────────────────────────────── */

.cpr-legal-header {
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-hairline);
}

.cpr-legal-titulo {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--text-strong);
}

.cpr-legal-meta {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ── Índice ──────────────────────────────────────────────── */

.cpr-legal-indice {
    margin-bottom: var(--space-7);
    padding: var(--space-5);
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
}

.cpr-legal-indice-titulo {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-secondary);
}

.cpr-legal-indice ol {
    margin: 0;
    padding-left: var(--space-4);
    columns: 2;
    column-gap: var(--space-6);
    font-size: var(--fs-sm);
}

.cpr-legal-indice li {
    margin-bottom: var(--space-2);
    break-inside: avoid;
}

@media (max-width: 640px) {
    .cpr-legal-indice ol { columns: 1; }
}

/* ── Secciones ───────────────────────────────────────────── */

.cpr-legal h2 {
    scroll-margin-top: var(--space-4);
    margin: var(--space-7) 0 var(--space-3);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--text-strong);
}

.cpr-legal h3 {
    scroll-margin-top: var(--space-4);
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.cpr-legal p { margin: 0 0 var(--space-3); }

.cpr-legal ul,
.cpr-legal ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
}

.cpr-legal li { margin-bottom: var(--space-2); }

.cpr-legal strong {
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.cpr-legal a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cpr-legal a:hover { color: var(--color-primary-hover); }

.cpr-legal a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── Botón (Privacidad §9.3: "Configurar cookies") ───────── */
/* Reabre el aviso de cookies (data-cpr-cookies-abrir, cookies.js).
   Botón secundario del sistema: borde --green-600, texto
   --green-800, hover --green-100. */

.cpr-legal .cpr-legal-boton {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 1.2rem;
    border: 2px solid var(--green-600);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--green-800);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease;
}

.cpr-legal .cpr-legal-boton:hover { background: var(--green-100); }

.cpr-legal .cpr-legal-boton:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ── Datos del prestador ─────────────────────────────────── */

.cpr-legal-datos {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}

.cpr-legal-datos li { margin-bottom: var(--space-1); }

/* ── Aviso de emergencia ─────────────────────────────────── */

.cpr-legal-emergencia {
    margin: var(--space-4) 0;
    padding: var(--space-5);
    background: var(--color-bg-warm);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-md);
}

.cpr-legal-emergencia p:last-child { margin-bottom: 0; }

.cpr-legal-emergencia-titulo {
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.cpr-legal-emergencia-numeros {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    font-size: var(--fs-sm);
}

.cpr-legal-emergencia-numeros strong {
    font-size: var(--fs-lead);
    color: var(--danger);
}

/* ── Bloque destacado (consentimiento, retracto) ─────────── */

.cpr-legal-destacado {
    margin: var(--space-4) 0;
    padding: var(--space-5);
    background: var(--green-050, var(--color-bg-soft));
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.cpr-legal-destacado p:last-child { margin-bottom: 0; }

/* ── Pie ─────────────────────────────────────────────────── */

.cpr-legal-pie {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-hairline);
    font-size: var(--fs-sm);
}

.cpr-legal-pie ul {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
}

/* ── Tablas (privacidad y cancelación) ───────────────────── */
/* El contenedor hace el scroll horizontal; la tabla conserva un
   ancho mínimo legible y nunca empuja el ancho de la página. */

.cpr-legal-tabla {
    margin: 0 0 var(--space-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
}

.cpr-legal-tabla table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.cpr-legal-tabla th,
.cpr-legal-tabla td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-hairline);
}

.cpr-legal-tabla th {
    background: var(--color-bg-soft);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.cpr-legal-tabla tr:last-child td { border-bottom: 0; }

/* Tablas de 2 columnas (política de cancelación): caben en móvil,
   así que no se les fuerza el ancho mínimo ni el scroll horizontal. */
.cpr-legal-tabla-compacta table { min-width: 0; }

@media (max-width: 640px) {
    .cpr-legal-tabla-compacta th,
    .cpr-legal-tabla-compacta td {
        padding: var(--space-3);
    }
}

/* ── Impresión ───────────────────────────────────────────── */

@media print {
    .cpr-legal-indice { display: none; }
    .cpr-legal { max-width: none; padding: 0; }
    .cpr-legal a { text-decoration: none; color: var(--ink); }
}