/* Estilos de las páginas legales. Misma identidad que la portada —negro
   azulado, rojo y azul como canales, amarillo solo en trazos de un píxel—
   pero con la composición de un documento: una columna, medida corta y
   jerarquía tipográfica en vez de retícula. */

:root {
  color-scheme: dark light;

  --suelo:    #0a0b10;
  --panel:    #11131b;
  --tinta:    #e9ebf2;
  --tenue:    #868da3;
  --borde:    #232838;
  --borde-vivo:#2e3448;

  --rojo:     #dc2f3c;
  --rojo-tenue:#3a1116;
  --azul:     #3d70e8;
  --amarillo: #f2c230;

  --r-campo: 0;
  --r-tarjeta: 0;
  --r-pildora: 0;

  --mono:  ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --sans:  "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, sans-serif;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --suelo:#f4f4f6; --panel:#fff; --tinta:#10121a; --tenue:#5c6377;
    --borde:#dfe1e9; --borde-vivo:#c9cddb;
    --rojo:#c31f2c; --rojo-tenue:#fdecee; --azul:#2450bd; --amarillo:#c99500;
  }
}
:root[data-theme="light"] {
  --suelo:#f4f4f6; --panel:#fff; --tinta:#10121a; --tenue:#5c6377;
  --borde:#dfe1e9; --borde-vivo:#c9cddb;
  --rojo:#c31f2c; --rojo-tenue:#fdecee; --azul:#2450bd; --amarillo:#c99500;
}
:root[data-theme="dark"] {
  --suelo:#0a0b10; --panel:#11131b; --tinta:#e9ebf2; --tenue:#868da3;
  --borde:#232838; --borde-vivo:#2e3448;
  --rojo:#dc2f3c; --rojo-tenue:#3a1116; --azul:#3d70e8; --amarillo:#f2c230;
}

* { box-sizing: border-box; }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-vivo) transparent;
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--suelo); }
::-webkit-scrollbar-thumb {
  background: var(--borde-vivo);
  border: 3px solid var(--suelo);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--rojo); }

body {
  margin: 0;
  background: var(--suelo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.envoltura { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 1rem; }

/* ---------------------------------------------------------- en visor ---
   Cuando la página se abre dentro del modal de la portada, sobran su enlace
   de vuelta y su pie: pulsarlos haría que el iframe navegara al inicio y
   acabarías viendo el sitio entero metido dentro del modal.
   La clase la pone la propia página al detectar que está enmarcada. */
.en-visor .volver,
.en-visor footer { display: none; }

.en-visor .envoltura { padding: 2rem 1.75rem 2.5rem; }
.en-visor h1 { font-size: clamp(1.4rem, 4vw, 1.7rem); }
.en-visor h2 { margin-top: 2.2rem; }

.volver { margin: 0 0 2.5rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; }
.volver a { color: var(--tenue); text-decoration: none; }
.volver a:hover { color: var(--amarillo); }

h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
  text-wrap: balance;
}

/* El trazo amarillo, igual que en la portada. */
h1::after {
  content: ""; display: block; width: 46px; height: 1px;
  border-radius: var(--r-pildora);
  background: var(--amarillo); margin-top: 1rem;
}

.version {
  margin: 1rem 0 2.5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  color: var(--tenue);
}

h2 {
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em;
  margin: 3rem 0 .7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--borde);
}

p, li { color: var(--tinta); }
ul { padding-left: 1.15rem; }
li { margin-bottom: .5rem; }
li::marker { color: var(--azul); }

a { color: var(--azul); text-decoration: none; border-bottom: 1px solid var(--borde-vivo); }
a:hover { border-color: var(--amarillo); }
a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

code {
  font-family: var(--mono); font-size: .86em;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r-campo);
  padding: .1em .45em;
}

table {
  width: 100%; border-collapse: collapse; margin: 1.2rem 0;
  font-size: .89rem; display: block; overflow-x: auto;
}
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--borde); }
th {
  font-family: var(--mono); font-weight: 500;
  color: var(--tenue); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em;
  border-bottom-color: var(--borde-vivo);
}

/* Marca de lo que falta antes de publicar. Roja, no amarilla: el amarillo
   está reservado a los trazos y perdería su significado si también avisara. */
.pendiente {
  background: var(--rojo-tenue);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--rojo);
  border-radius: var(--r-tarjeta);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: .89rem;
}
.pendiente strong { color: var(--rojo); }

footer {
  border-top: 1px solid var(--borde);
  margin-top: 3.5rem; padding: 2rem 1.5rem 3rem;
  text-align: center;
  font-size: .78rem; line-height: 1.9; color: var(--tenue);
}
footer p { margin: 0; }
footer a { color: var(--tenue); }