/*
 * Hoja de estilos de los documentos legales.
 *
 * Aparte de la de la web corporativa, y clara donde aquella es oscura. No es
 * una incoherencia de marca: esto son documentos, no una portada. Se leen
 * enteros, se imprimen y acaban adjuntos en un expediente, y para eso el papel
 * blanco con texto oscuro es lo que lleva funcionando siglos.
 *
 * Sin scripts y sin nada de fuera —ni fuentes, ni analítica, ni CDN—, que es lo
 * que permite que la política de seguridad del servidor siga siendo `self` a
 * secas y que estas páginas se puedan guardar y abrir sin conexión.
 */

:root {
  --verde: #00805f;
  --verde-claro: #00a67e;

  --papel: #ffffff;
  --papel-alt: #f5f7f9;
  --tinta: #16212d;
  --texto: #33404d;
  --tenue: #66727f;
  --borde: #dde3e9;

  --aviso-fondo: #fff8e6;
  --aviso-borde: #e8c56a;
  --aviso-tinta: #6b5107;

  --ancho: 46rem;
}

/* El tema oscuro no es un capricho: quien abre esto desde la app lo hace con el
   móvil en la mano, muchas veces de noche, y un salto a blanco puro deslumbra.
   Solo cambian los colores; la estructura es la misma. */
@media (prefers-color-scheme: dark) {
  :root {
    --verde: #2fe0b0;
    --verde-claro: #2fe0b0;

    --papel: #0c131b;
    --papel-alt: #111a24;
    --tinta: #f2f6fa;
    --texto: #c2cdd8;
    --tenue: #8593a1;
    --borde: #22303e;

    --aviso-fondo: #2a2410;
    --aviso-borde: #7a6320;
    --aviso-tinta: #f0d999;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  /* 18px y no 16: el interlineado y el cuerpo grandes son lo que distingue un
     documento que se puede leer entero de uno que se abandona al tercer punto. */
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.envoltura {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}

/* En un móvil estrecho, un punto menos de cuerpo y algo menos de margen.
 *
 * No es para que quepa más texto: es por el justificado. A 18px en una pantalla
 * de 375 puntos entran unos 33 caracteres por línea, y cuantas menos palabras
 * hay en una línea, más grande es el hueco que el navegador tiene que repartir
 * entre ellas — que es exactamente lo que se ve como separación fea. Con 17px y
 * un poco menos de margen entran tres o cuatro palabras más por línea, y el
 * reparto se nota bastante menos. */
@media (max-width: 26rem) {
  body {
    font-size: 17px;
  }

  .envoltura {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.cabecera {
  border-bottom: 1px solid var(--borde);
  margin-bottom: 2.5rem;
  padding: 1.25rem 0;
}

.cabecera .envoltura {
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
}

.marca {
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.cabecera nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.85rem;
}

.cabecera nav a {
  color: var(--tenue);
  text-decoration: none;
}

.cabecera nav a:hover,
.cabecera nav a[aria-current="page"] {
  color: var(--verde);
}

/* ── Texto ────────────────────────────────────────────────────────────── */

h1 {
  color: var(--tinta);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h2 {
  color: var(--tinta);
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 2.75rem 0 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--borde);
}

h3 {
  color: var(--tinta);
  font-size: 1.05rem;
  margin: 1.75rem 0 0.5rem;
}

p,
li {
  margin: 0 0 0.9rem;

  /* Texto justificado, que es como se lee un documento legal impreso y lo que
     esperan encontrar tanto un jugador como quien lo evalúa.

     `hyphens` va con él y no es un adorno: justificar SIN partir palabras es
     exactamente lo que hace que el texto se vea mal en un móvil. El navegador
     tiene que repartir el hueco sobrante entre pocas palabras por línea, y
     salen los «ríos» de espacios en blanco que atraviesan el párrafo. Con las
     palabras partidas, el hueco a repartir es pequeño y los espacios quedan
     casi uniformes.

     Parte en español porque el `lang="es"` del `<html>` le dice al navegador
     qué diccionario usar. Sin ese atributo, `hyphens: auto` no hace nada. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;

  /* Mínimo de letras en la palabra y a cada lado del guion. Sin esto, el
     navegador parte por donde le conviene y deja restos de dos letras
     colgando, que se leen peor que el hueco que venían a evitar. */
  hyphenate-limit-chars: 6 3 3;

  /* Última línea de defensa: una dirección larga o una palabra sin puntos de
     corte no cabe en una línea estrecha y, justificada, se saldría del ancho
     del texto en vez de partirse. */
  overflow-wrap: break-word;
}

/* Y lo que NO se justifica.
 *
 * Un texto de una sola línea no se justifica nunca —la última línea siempre va
 * alineada a la izquierda—, así que esto no es por ellos. Es por los de dos o
 * tres: en un pie, una entradilla o una fecha, la separación irregular se nota
 * mucho más que en un párrafo largo, porque hay menos líneas donde disimular. */
.meta,
.pie p,
.indice span {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

ul,
ol {
  padding-left: 1.4rem;
}

a {
  color: var(--verde);
}

strong {
  color: var(--tinta);
}

.entradilla {
  font-size: 1.1rem;
  color: var(--tenue);
  margin-bottom: 1.5rem;
}

.meta {
  font-size: 0.85rem;
  color: var(--tenue);
  margin-bottom: 2rem;
}

/* ── Tablas ───────────────────────────────────────────────────────────── */

/* El contenedor con desplazamiento propio es lo que evita que una tabla ancha
   obligue a desplazar la página entera de lado en un móvil. */
.tabla {
  overflow-x: auto;
  margin: 0 0 1.25rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

th {
  color: var(--tinta);
  background: var(--papel-alt);
  font-weight: 600;
  white-space: nowrap;
}

tr:last-child td {
  border-bottom: 0;
}

/* ── Bloques destacados ───────────────────────────────────────────────── */

.nota {
  background: var(--papel-alt);
  border-left: 3px solid var(--verde);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.25rem;
}

.nota :last-child {
  margin-bottom: 0;
}

/* El aviso de borrador.
 *
 * Amarillo y arriba del todo a propósito: mientras esté ahí, cualquiera que
 * abra la página sabe que el texto no está revisado. Se quita borrando el
 * bloque entero, que por eso va marcado con un comentario en cada página. */
.borrador {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  color: var(--aviso-tinta);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 2rem;
  font-size: 0.92rem;
}

.borrador :last-child {
  margin-bottom: 0;
}

.borrador strong {
  color: inherit;
}

/* Lo que falta por rellenar.
 *
 * Se marca en el texto para que salte a la vista al leer la página, no solo al
 * leer el HTML: un hueco sin rellenar dentro de un párrafo por lo demás
 * correcto es justo lo que se publica sin querer. */
.pendiente {
  background: var(--aviso-fondo);
  color: var(--aviso-tinta);
  border: 1px dashed var(--aviso-borde);
  border-radius: 5px;
  padding: 0 0.3em;
  font-size: 0.92em;
  white-space: nowrap;
}

/* ── Índice de la portada ─────────────────────────────────────────────── */

.indice {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.indice a {
  display: block;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  text-decoration: none;
  color: var(--tinta);
  font-weight: 600;
}

.indice a:hover {
  border-color: var(--verde);
}

.indice span {
  display: block;
  color: var(--tenue);
  font-weight: 400;
  font-size: 0.92rem;
  margin-top: 0.15rem;
}

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

.pie {
  border-top: 1px solid var(--borde);
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--tenue);
}

.pie a {
  color: var(--tenue);
}

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

/* Estas páginas acaban impresas o en PDF dentro de un expediente. Sin esto
   salen con el menú de navegación en la primera hoja y los enlaces convertidos
   en texto azul subrayado que no lleva a ninguna parte sobre papel. */
@media print {
  .cabecera nav,
  .volver {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  h2 {
    /* Que un epígrafe no se quede solo al final de la hoja. */
    break-after: avoid;
  }
}