/* ==========================================================================
   LEGAL — Estilos compartidos de las cinco páginas legales
   (aviso-legal.html, politica-privacidad.html, politica-cookies.html,
   proteccion-datos.html, accesibilidad.html)

   El componente `legal-document` lo usan las cinco páginas, así que vive en
   una sola hoja que todas cargan junto a tokens.css. No hay estilos exclusivos
   por página: cualquier bloque diferenciado se añade aquí, anclado al id de
   la sección que lo contiene.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Héroe de las páginas legales

   El título de estas páginas es el del documento oficial, mucho más largo que
   el de una página normal: se escala hacia abajo para que quepa sin partirse
   en cinco líneas. Dos de ellos incluyen además el dominio, una sola palabra
   de más de cuarenta caracteres que desbordaría la pantalla estrecha si no se
   autoriza a partirla.
   -------------------------------------------------------------------------- */

:is(.legal-hero, .privacy-hero, .cookies-hero,
    .dataprotection-hero, .accessibility-hero) .site-page-hero__title {
    font-size: clamp(1.9rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   2. Documento legal — .legal-document
   -------------------------------------------------------------------------- */

.legal-document {
    padding-block: var(--section-padding);
    background-color: var(--body-color);
}

.legal-document__shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin-inline: auto;
}

/* Índice lateral */
.legal-document__index {
    display: grid;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background-color: var(--surface-color);
    border-top: 3px solid var(--primary-color);
}

.legal-document__index-title {
    color: var(--muted-color);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.legal-document__index-list {
    display: grid;
    gap: var(--spacing-xs);
    counter-reset: legal-index;
}

.legal-document__index-item {
    counter-increment: legal-index;
}

.legal-document__index-link {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: baseline;
    gap: var(--spacing-xs);
    color: var(--title-color);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.legal-document__index-link::before {
    content: counter(legal-index, decimal-leading-zero);
    color: var(--primary-color);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.legal-document__index-link:hover {
    color: var(--primary-color);
}

/* Contenido principal */
.legal-document__content {
    display: grid;
    gap: var(--spacing-2xl);
}

.legal-document__intro {
    display: grid;
    gap: var(--spacing-sm);
    max-width: 65ch;
}

.legal-document__intro-text {
    color: var(--text-color);
    font-size: 1.02rem;
    line-height: 1.7;
}

/* Bloques del documento

   La numeración, cuando la hay, viene dentro del propio título del documento
   («1. DATOS IDENTIFICATIVOS»): no se añade por fuera. */
.legal-document__block {
    display: grid;
    gap: var(--spacing-md);
    scroll-margin-top: calc(var(--header-height) + var(--spacing-md));
}

.legal-document__block-head {
    display: grid;
    gap: var(--spacing-2xs);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.legal-document__block-title {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    text-transform: uppercase;
}

.legal-document__block-body {
    display: grid;
    gap: var(--spacing-sm);
    color: var(--text-color);
    font-size: 0.98rem;
    line-height: 1.7;
}

.legal-document__block-body p {
    margin: 0;
}

/* Los subtítulos llegan tal como los escribe cada documento: unos en caja
   alta («SEGÚN LA FINALIDAD») y otros en caja mixta. El interletraje queda
   neutro para que ninguno de los dos casos se vea apretado. */
.legal-document__subheading {
    color: var(--title-color);
    font-size: 1.05rem;
    font-weight: 800;
    margin-top: var(--spacing-sm);
    letter-spacing: 0;
}

/* Listas con guion azul */
.legal-document__list {
    display: grid;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-document__list-item {
    position: relative;
    padding-left: 1.25rem;
    line-height: 1.65;
}

.legal-document__list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 0.85rem;
    height: 1.5px;
    background-color: var(--primary-color);
}

/* Tabla con scroll horizontal en móvil */
.legal-document__table-wrap {
    overflow-x: auto;
    margin-block: var(--spacing-xs);
    border: 1px solid var(--border-color);
}

.legal-document__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 600px;
}

.legal-document__table th,
.legal-document__table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.legal-document__table thead {
    background-color: var(--surface-alt-color);
}

.legal-document__table th {
    color: var(--title-color);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.legal-document__table tbody tr:last-child td {
    border-bottom: 0;
}

/* Las tablas de cookies traen seis columnas y necesitan más recorrido
   horizontal que las de dos. */
.legal-document__table--wide {
    min-width: 900px;
}

.legal-document__table-link {
    color: var(--primary-color);
    word-break: break-all;
    transition: color var(--transition-fast);
}

.legal-document__table-link:hover {
    color: var(--title-color);
}

.legal-document__table code {
    padding: 0.1em 0.45em;
    background-color: var(--surface-alt-color);
    color: var(--primary-color);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.85em;
}

.legal-document__table strong {
    color: var(--title-color);
}

/* --------------------------------------------------------------------------
   3. Ficha de datos identificativos (aviso legal) — .legal-identity
   -------------------------------------------------------------------------- */

.legal-identity {
    display: grid;
    gap: 0;
}

.legal-identity__row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: var(--spacing-sm);
    padding-block: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    align-items: center;
}

.legal-identity__row:last-child {
    border-bottom: 1px solid var(--border-color);
}

.legal-identity__term {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--muted-color);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.legal-identity__icon {
    display: flex;
    flex: none;
    color: var(--primary-color);
}

.legal-identity__value {
    color: var(--title-color);
    font-size: 1rem;
    font-weight: 600;
}

.legal-identity__link {
    color: var(--title-color);
    transition: color var(--transition-fast);
}

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

/* --------------------------------------------------------------------------
   4. Panel de configuración de cookies (política de cookies) — .cookies-panel

   El documento oficial presenta cada grupo de cookies prescindibles con un
   panel y una casilla. El prototipo lo reproduce como parte del texto: el
   consentimiento real lo instala un plugin en WordPress, así que la casilla
   está deshabilitada.
   -------------------------------------------------------------------------- */

.cookies-panel {
    display: grid;
    gap: var(--spacing-2xs);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    background-color: var(--surface-color);
    border-left: 3px solid var(--secondary-color);
}

.cookies-panel__label {
    color: var(--muted-color);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.cookies-panel__title {
    color: var(--title-color);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cookies-panel__choice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-2xs);
}

.cookies-panel__checkbox {
    flex: none;
    margin-top: 0.2em;
    accent-color: var(--primary-color);
}

.cookies-panel__text {
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .legal-document__shell {
        grid-template-columns: 220px 1fr;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: start;
    }

    .legal-document__index {
        position: sticky;
        top: calc(var(--header-height) + var(--spacing-md));
        align-self: start;
        max-height: calc(100vh - var(--header-height) - var(--spacing-2xl));
        overflow-y: auto;
    }

    .legal-identity__row {
        grid-template-columns: minmax(220px, 1fr) 3fr;
    }
}

@media (max-width: 640px) {
    .legal-identity__row {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xs);
    }

    .legal-document__table {
        min-width: 540px;
    }
}