/*
 * legal.css — Decibelio · tema hijo blocksy-child
 * Depende de: variables.css (db-variables) + main.css (db-main: página de texto
 *   —caja y cabecera—, .db-migas, .db-linea)
 * Carga: SOLO en páginas legales con contenido — condicional db_legal_datos() en functions.php
 * HTML inyectado por db_legal_pagina() (blocksy:content:top p10).
 */

/* ============================================================
   1. CABECERA — migas, versión, H1 e intro
   La caja (.db-legal), su ancho (.db-legal__inner) y la tipografía del H1
   y de la intro viven en la sección "Página de texto" de main.css,
   compartida con Contacto. Aquí queda lo propio: versión, filete y márgenes.
   ============================================================ */
.db-legal__breadcrumb { margin-bottom: 2.5rem; }

.db-legal__version {
    font-size: var(--texto-muy-pequeño);
    font-weight: var(--peso-semibold);
    font-stretch: var(--ancho-condensado);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gris-medio);
    margin: 0 0 0.75rem;
}
.db-legal__titulo { margin: 0 0 1.25rem; }

/* La utilidad .db-linea centra; aquí se alinea a la izquierda con el texto */
.db-legal .db-linea--h2 {
    margin-inline: 0;
}

.db-legal__intro { margin: 1.5rem 0 var(--espaciado-seccion-sm); }

/* ============================================================
   2. SECCIONES — H2 y H3 con destino de ancla bajo el header sticky
   ============================================================ */
.db-legal__seccion {
    margin-bottom: 3rem;
    scroll-margin-top: 90px;
}
.db-legal__h2 {
    font-family: var(--font-titulos);
    font-size: var(--texto-h2-seccion);
    font-weight: var(--peso-bold);
    color: var(--color-gris-texto);
    line-height: 1.25;
    margin: 0 0 1rem;
}
.db-legal__h3 {
    font-size: var(--texto-subtitulo);
    font-weight: var(--peso-semibold);
    color: var(--color-verde-oscuro);
    scroll-margin-top: 90px;
    margin: 2rem 0 0.75rem;
}

/* ============================================================
   3. PROSA — párrafos y enlaces inline
   La piel del enlace (verde-oscuro, subrayado, hover azul-acento) es la
   utilidad agrupada de main.css; aquí solo el ajuste contextual de romper
   URLs largas visibles (p. ej. policies.google.com).
   ============================================================ */
.db-legal__parrafo {
    color: var(--color-gris-texto);
    line-height: 1.7;
    margin: 0 0 1rem;
}
.db-legal__parrafo:last-child { margin-bottom: 0; }

.db-legal__parrafo a { overflow-wrap: anywhere; }

/* ============================================================
   4. TABLAS — scroll horizontal en pantallas estrechas
   El wrapper es foco de teclado (role="region" + tabindex) para que
   el scroll sea accesible. Sin display:none (prohibido por SEO).
   ============================================================ */
.db-legal__tabla-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: var(--radio-tarjeta);
    border: 1px solid var(--color-gris-separador);
}
.db-legal__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-pequeño);
}

/* Las tablas de cookies (3-4 columnas) necesitan un mínimo legible: por debajo
   scrollean en horizontal. Las demás (plazos, ficha del titular) se adaptan sin scroll. */
.db-legal__tabla--cookies { min-width: 30rem; }
.db-legal__tabla th,
.db-legal__tabla td {
    text-align: left;
    vertical-align: top;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-gris-separador);
}
.db-legal__tabla th {
    background-color: var(--color-gris-fondo);
    font-weight: var(--peso-semibold);
    color: var(--color-gris-texto);
}
.db-legal__tabla td { color: var(--color-gris-medio); }
.db-legal__tabla tr:last-child > * { border-bottom: none; }

/* Ficha de datos (etiqueta → valor, sin cabecera): la 1.ª columna es
   th scope="row"; se ajusta a su contenido y el valor ocupa el resto. */
.db-legal__tabla--ficha th[scope="row"] {
    width: 1%;
    white-space: nowrap;
}

/* Nombre literal de cookie — Encode Sans (la única familia del sitio,
   CONSTITUTION): el énfasis lo dan el peso y el fondo, no una monoespaciada. */
.db-legal__cookie {
    display: inline-block;
    font-weight: var(--peso-semibold);
    color: var(--color-verde-oscuro);
    background-color: var(--color-verde-suave-2);
    border-radius: var(--radio-boton);
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

/* ============================================================
   5. RESPONSIVE — anclas bajo el header sticky más bajo en móvil
   Mismo ajuste que categoria-contenido.css: en móvil el header mide menos.
   ============================================================ */
@media (max-width: 768px) {
    .db-legal__seccion,
    .db-legal__h3 {
        scroll-margin-top: 75px;
    }
}