/* Estilos de las paginas legales (cookies.php y privacidad.php).
 *
 * Van aparte porque el contenido es texto largo con tablas, y las paginas de
 * articulos y biografias tienen sus propias hojas. Sigue la misma idea que
 * .matchesTable de biography-2027.css: cabeceras en <th> de verdad y separador
 * de filas en vez de columnas, que es lo que aguanta un movil estrecho. */

/* ---------- Texto ---------- */

.legal {
    font-size: 1rem;
    line-height: 1.65;
    color: #333;
}

.legal h2 {
    margin: 34px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #EEB811;
    font-family: "Fira Sans Condensed", Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #05356F;
}

.legal h3 {
    margin: 24px 0 8px;
    font-family: "Fira Sans Condensed", Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #05356F;
}

.legal h2:first-child,
.legal h3:first-child { margin-top: 0; }

.legal p { margin: 0 0 14px; }

.legal ul,
.legal ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.legal li { margin-bottom: 8px; }

.legal a {
    color: #05356F;
    font-weight: 700;
    text-decoration: underline;
}

.legal a:hover,
.legal a:focus { color: #EEB811; }

.legal a:focus-visible { outline: 3px solid #EEB811; outline-offset: 2px; }

.legal strong { color: #05356F; }

/* ---------- Aviso dentro del texto ---------- */

.legal-aviso {
    margin: 0 0 22px;
    padding: 14px 16px;
    border-left: 5px solid #EEB811;
    background: #f7f9fc;
    font-size: 0.95rem;
}

/* ---------- Tablas ---------- */

.legalTable {
    width: 100%;
    margin: 20px 0 26px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.legalTable caption {
    margin-bottom: 10px;
    text-align: left;
    font-size: 0.95rem;
    font-style: italic;
    color: #555;
}

.legalTable th,
.legalTable td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
    vertical-align: top;
}

.legalTable thead th {
    background: #05356F;
    color: #fff;
    font-weight: 700;
}

.legalTable tbody tr:nth-child(even) { background: #f7f9fc; }

.legalTable td:first-child {
    font-weight: 700;
    white-space: nowrap;
}

@media screen and (max-width: 800px) {
    .legal { font-size: 0.97rem; }
    .legal h2 { font-size: 1.3rem; }
    /* La tabla de cookies es ancha de narices: en movil se deja deslizar en
     * horizontal en vez de replegarse en tarjetas, que con cinco columnas deja
     * el texto tan estrecho que no se lee. */
    .legalTable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .legalTable th,
    .legalTable td { padding: 8px 10px; }
}


/* Los nombres de las cookies van en <code> dentro de las tablas */
.legal code {
    padding: 1px 5px;
    border-radius: 3px;
    background: #eef2f7;
    font-family: "Roboto Mono", Consolas, monospace;
    font-size: 0.9em;
    color: #05356F;
}

/* ---------- Movil ---------- */

@media screen and (max-width: 800px) {
    .legal h2 { margin-top: 26px; }
    .legal ul,
    .legal ol { padding-left: 20px; }
}