/* ==========================================================================
   politics-wiki — css/wiki.css
   Hoja de estilos ÚNICA del sitio. Sin framework, sin webfonts, sin @import,
   sin peticiones de red. Debe funcionar igual en file:// y en http://.

   --------------------------------------------------------------------------
   1. TOKENS DE COLOR (custom properties) — todos los colores del sitio
   --------------------------------------------------------------------------
   Superficies / fondos
     --pw-bg              Fondo general de la página. Blanco cálido.
     --pw-surface         Fondo de tarjetas, panel de TOC, infobox, resultados.
     --pw-surface-2       Fondo hundido: filas de tabla, chips, hover.
     --pw-wash            Lavado neutro muy tenue (hover, estado activo).
     --pw-sidebar-bg      Fondo de la barra lateral.
     --pw-header-bg       Fondo de la cabecera fija.
   Tinta / texto
     --pw-ink             Texto principal. Tinta oscura cálida.
     --pw-ink-soft        Texto secundario (subtítulos, definiciones).
     --pw-ink-muted       Texto terciario (metadatos, pies, notas al margen).
     --pw-ink-faint       Tinta al 18 % — barras de bloque, filetes gruesos.
     --pw-on-accent       Texto sobre el color de acento del infobox. Blanco.
   Enlaces
     --pw-link            Azul de enlace wiki.
     --pw-link-hover      Azul de enlace al pasar el cursor / enfocar.
     --pw-link-visited    Azul de enlace visitado.
     --pw-missing         Rojo apagado: wikilink a un slug inexistente.
   Bordes y líneas
     --pw-border          Gris claro, 1 px. El borde por defecto del sitio.
     --pw-border-soft     Gris aún más claro: separadores internos.
     --pw-border-strong   Gris medio: barra de cita, hover de tarjeta.
   Estados
     --pw-focus           Color del anillo de foco :focus-visible.
     --pw-focus-halo      Halo translúcido del anillo de foco.
     --pw-empty-fg        Texto de los estados vacíos / de error.

   --------------------------------------------------------------------------
   2. TOKENS NO-COLOR
   --------------------------------------------------------------------------
   --pw-font-serif   Títulos, marca, cifras de referencias. Serif del sistema.
   --pw-font-sans    Interfaz y cuerpo del texto. Sans del sistema.
   --pw-fs-*         Escala tipográfica (xs → 3xl).
   --pw-space-1..8   Escala de espaciado en base 4 px.
   --pw-radius-*     Radios de borde (2 / 4 / 6 px).
   --pw-shadow-*     Sombras mínimas: solo hover y panel infobox.
   --pw-lh-*         Interlineados (1.25 apretado / 1.70 cuerpo / 1.75 amplio).
   --pw-header-h     Alto de la cabecera fija.
   --pw-sidebar-w    Ancho de la columna lateral fija (≥1024px).
   --pw-aside-w      Ancho de la columna TOC + infobox (≥1200px).
   --pw-measure      Ancho máximo de la columna de texto (≈70-75 caracteres).

   --------------------------------------------------------------------------
   3. CLASES AÑADIDAS POR EL AUTOR DE CSS FUERA DE CONTRACT.md §6
      (documentadas aquí para el autor de JS; NO modificar el contrato)
   --------------------------------------------------------------------------
   · .pw-related-card    Tarjeta de "Artículos relacionados". Grid 3.1:
                         <a class="pw-related-card" href="article.html?title=slug">
                           <span class="pw-card-title">Título</span>
                           <span class="pw-card-sub">Subtítulo</span>
                         </a>
                         (declarada en § Artículos relacionados)
   · .pw-empty           Estado vacío / de error: "artículo no encontrado",
                         "sin resultados de búsqueda". (declarada en § Estados)
   · .pw-toc-link.is-active   Resaltado de scrollspy del índice. También se
                         acepta [aria-current="true"] sobre el enlace. (§ Índice)
   · .pw-note-label      Etiqueta "Nota" que el contrato §6.3 exige dentro de
                         .pw-note, pero no nombra. (declarada en § Notas)
   · .pw-figure-credit   Crédito de la ilustración dentro de .pw-figure.
                         (declarada en § Figuras)
   · .pw-loading         Estado "cargando" estático de article.html, que app.js
                         sustituye al renderizar. (declarada en § Estados)
   · .pw-sidebar-toggle  Etiqueta del conmutador plegable de la barra lateral
                         en <1024px; hace clic en el checkbox .pw-nav-toggle.
                         (declarada en § Barra lateral)
   · .pw-nav-toggle      Checkbox oculto que implementa el plegado sin JS.
   · .pw-browse          Contenedor de las categorías en la portada
                         (#categorias-browse). Requisito de la tarea.
   · .pw-search-page     Modificador de tamaño para el buscador del héroe.
   · .pw-article-mount   Contenedor #articulo de article.html.
   · .pw-section         Bloque <section> de la portada (§6.4).

   El color de acento de la cabecera del infobox lo inyecta JS como
   background inline (contrato §6.3) — única excepción documentada a la regla
   de no usar style="" en el HTML. Aquí solo se fija el color del texto.
   ========================================================================== */


/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* --- superficies --- */
  --pw-bg: #fbfaf7;
  --pw-surface: #ffffff;
  --pw-surface-2: #f4f2ec;
  --pw-wash: #f0ede5;
  --pw-sidebar-bg: #f6f4ef;
  --pw-header-bg: #fbfaf7;

  /* --- tinta --- */
  --pw-ink: #1c1b18;
  --pw-ink-soft: #3d3b35;
  --pw-ink-muted: #6c6860;
  --pw-ink-faint: #c9c4b8;
  --pw-on-accent: #ffffff;

  /* --- enlaces --- */
  --pw-link: #2a4b8d;
  --pw-link-hover: #1b3568;
  --pw-link-visited: #5a4b7d;
  --pw-missing: #a3271b;

  /* --- bordes --- */
  --pw-border: #ddd8cd;
  --pw-border-soft: #eae6dd;
  --pw-border-strong: #b6b0a3;

  /* --- estados --- */
  --pw-focus: #1a56c4;
  --pw-focus-halo: rgba(26, 86, 196, 0.22);
  --pw-empty-fg: var(--pw-ink-muted);

  /* --- tipografía --- */
  --pw-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", Times, serif;
  --pw-font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --pw-fs-xs: 0.75rem;
  --pw-fs-sm: 0.8125rem;
  --pw-fs-base: 1rem;
  --pw-fs-md: 1.0625rem;
  --pw-fs-lg: 1.125rem;
  --pw-fs-xl: 1.3125rem;
  --pw-fs-2xl: clamp(1.4rem, 1.18rem + 0.9vw, 1.75rem);
  --pw-fs-3xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.5rem);

  /* --- espaciado (base 4 px) --- */
  --pw-space-1: 0.25rem;
  --pw-space-2: 0.5rem;
  --pw-space-3: 0.75rem;
  --pw-space-4: 1rem;
  --pw-space-5: 1.5rem;
  --pw-space-6: 2rem;
  --pw-space-7: 3rem;
  --pw-space-8: 4rem;

  /* --- bordes / sombras / ritmo --- */
  --pw-radius-sm: 2px;
  --pw-radius: 4px;
  --pw-radius-lg: 6px;
  --pw-shadow-sm: 0 1px 2px rgba(28, 27, 24, 0.06);
  --pw-shadow: 0 1px 3px rgba(28, 27, 24, 0.08),
    0 8px 20px -8px rgba(28, 27, 24, 0.12);
  --pw-shadow-pop: 0 8px 28px -8px rgba(28, 27, 24, 0.26);
  --pw-lh-tight: 1.25;
  --pw-lh-body: 1.7;
  --pw-lh-loose: 1.75;

  /* --- layout --- */
  --pw-header-h: 3.5rem;
  --pw-sidebar-w: 15rem;
  --pw-aside-w: 18rem;
  --pw-measure: 36rem;
  --pw-transition: 150ms ease;
}

/* --- Tema oscuro: solo se redefinen los tokens; todas las clases los usan --- */
@media (prefers-color-scheme: dark) {
  :root {
    --pw-bg: #14150f;
    --pw-surface: #1c1d17;
    --pw-surface-2: #24251e;
    --pw-wash: #2b2c24;
    --pw-sidebar-bg: #191a14;
    --pw-header-bg: #14150f;

    --pw-ink: #ebe8e0;
    --pw-ink-soft: #cfccc3;
    --pw-ink-muted: #9c988d;
    --pw-ink-faint: #45443c;
    --pw-on-accent: #ffffff;

    --pw-link: #8fb0e6;
    --pw-link-hover: #b9cdf2;
    --pw-link-visited: #bda8e0;
    --pw-missing: #e08a7d;

    --pw-border: #34352d;
    --pw-border-soft: #292a23;
    --pw-border-strong: #54544a;

    --pw-focus: #7fa9f0;
    --pw-focus-halo: rgba(127, 169, 240, 0.28);

    --pw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --pw-shadow: 0 1px 3px rgba(0, 0, 0, 0.45),
      0 8px 20px -8px rgba(0, 0, 0, 0.6);
    --pw-shadow-pop: 0 8px 28px -8px rgba(0, 0, 0, 0.7);
  }
}


/* ==========================================================================
   2 · BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--pw-header-h) + var(--pw-space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body.pw-body {
  margin: 0;
  background: var(--pw-bg);
  color: var(--pw-ink);
  font-family: var(--pw-font-sans);
  font-size: var(--pw-fs-md);
  line-height: var(--pw-lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--pw-wash);
  color: var(--pw-ink);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--pw-link);
  text-decoration: none;
}

a:hover {
  color: var(--pw-link-hover);
}

/* Foco visible y coherente en todo el sitio */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pw-focus);
  outline-offset: 2px;
  border-radius: var(--pw-radius-sm);
}

/* Sólo lectura por teclado: sin anillo de foco en clic de ratón */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   3 · CABECERA FIJA
   ========================================================================== */
.pw-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-3) var(--pw-space-5);
  min-height: var(--pw-header-h);
  padding: var(--pw-space-2) var(--pw-space-5);
  background: var(--pw-header-bg);
  border-bottom: 1px solid var(--pw-border);
}

.pw-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  color: var(--pw-ink);
  flex: 0 0 auto;
}

.pw-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--pw-radius-sm);
  background: var(--pw-ink);
  color: var(--pw-bg);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.pw-brand-text {
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--pw-lh-tight);
  white-space: nowrap;
}

.pw-brand:hover .pw-brand-text {
  color: var(--pw-link);
}

.pw-header-links {
  display: flex;
  align-items: center;
  gap: var(--pw-space-4);
  margin-left: auto;
  flex: 0 0 auto;
}

.pw-header-link {
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.pw-header-link:hover {
  color: var(--pw-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   4 · BUSCADOR
   ========================================================================== */
.pw-search {
  position: relative;
  flex: 1 1 16rem;
  max-width: 26rem;
  min-width: 0;
}

.pw-search-input {
  display: block;
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  background: var(--pw-surface);
  color: var(--pw-ink);
  font-family: inherit;
  font-size: var(--pw-fs-sm);
  line-height: 1.5;
}

.pw-search-input::placeholder {
  color: var(--pw-ink-muted);
}

.pw-search-input:focus {
  border-color: var(--pw-focus);
  box-shadow: 0 0 0 3px var(--pw-focus-halo);
}

.pw-search-input:focus-visible {
  outline: 2px solid var(--pw-focus);
  outline-offset: 1px;
}

.pw-search-results {
  position: absolute;
  top: calc(100% + var(--pw-space-1));
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow-pop);
}

.pw-search-results[hidden] {
  display: none;
}

.pw-search-item {
  display: block;
  padding: var(--pw-space-2) var(--pw-space-3);
  color: var(--pw-ink);
  border-bottom: 1px solid var(--pw-border-soft);
}

.pw-search-item:last-child {
  border-bottom: 0;
}

.pw-search-item:hover,
.pw-search-item:focus-visible {
  background: var(--pw-wash);
  color: var(--pw-ink);
}

.pw-search-item-title {
  display: block;
  font-size: var(--pw-fs-base);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
}

.pw-search-item-sub {
  display: block;
  margin-top: 2px;
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  line-height: var(--pw-lh-tight);
}

/* Variante del héroe de la portada */
.pw-search-page {
  max-width: 34rem;
  flex: 1 1 auto;
  margin: var(--pw-space-5) auto 0;
}

.pw-search-page .pw-search-input {
  padding: 0.65rem 0.9rem;
  font-size: var(--pw-fs-md);
}


/* ==========================================================================
   5 · LAYOUT Y BARRA LATERAL
   ========================================================================== */
.pw-layout {
  min-height: 60vh;
}

.pw-main {
  padding: var(--pw-space-6) var(--pw-space-5) var(--pw-space-8);
}

.pw-sidebar {
  position: relative;
  padding: var(--pw-space-3) var(--pw-space-4) var(--pw-space-4);
  background: var(--pw-sidebar-bg);
  border-bottom: 1px solid var(--pw-border);
}

.pw-sidebar-title {
  margin: var(--pw-space-4) 0 var(--pw-space-2);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: var(--pw-lh-tight);
}

.pw-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-nav-item {
  margin: 0;
}

.pw-nav-link {
  display: block;
  padding: 0.2rem 0.55rem;
  border-left: 2px solid transparent;
  border-radius: var(--pw-radius-sm);
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-sm);
  line-height: 1.45;
  text-decoration: none;
}

.pw-nav-link:hover {
  background: var(--pw-wash);
  color: var(--pw-ink);
}

.pw-nav-link-active,
.pw-nav-link[aria-current="page"] {
  border-left-color: var(--pw-ink);
  background: var(--pw-wash);
  color: var(--pw-ink);
  font-weight: 600;
}

/* Conmutador plegable (solo <1024px) */
.pw-nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pw-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-2);
  width: 100%;
  padding: var(--pw-space-2) var(--pw-space-3);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  color: var(--pw-ink-soft);
  font-family: inherit;
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
  cursor: pointer;
  user-select: none;
}

.pw-sidebar-toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--pw-transition);
}

.pw-nav-toggle:checked ~ .pw-sidebar-toggle::after {
  transform: translateY(2px) rotate(225deg);
}

.pw-nav-toggle:focus-visible ~ .pw-sidebar-toggle {
  outline: 2px solid var(--pw-focus);
  outline-offset: 2px;
}

/* Plegado: contraído por defecto en móvil, desplegado en escritorio */
.pw-sidebar-title,
.pw-nav-list {
  display: none;
}

.pw-nav-toggle:checked ~ .pw-sidebar-title,
.pw-nav-toggle:checked ~ .pw-nav-list {
  display: block;
}

.pw-nav-toggle:checked ~ .pw-sidebar-title:first-of-type {
  margin-top: var(--pw-space-4);
}

@media (min-width: 1024px) {
  .pw-layout {
    padding-left: var(--pw-sidebar-w);
  }

  .pw-sidebar {
    position: fixed;
    top: var(--pw-header-h);
    left: 0;
    bottom: 0;
    z-index: 20;
    width: var(--pw-sidebar-w);
    padding: var(--pw-space-5) var(--pw-space-3) var(--pw-space-7);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--pw-border);
    border-bottom: 0;
  }

  .pw-nav-toggle,
  .pw-sidebar-toggle {
    display: none;
  }

  .pw-sidebar-title,
  .pw-nav-list {
    display: block;
  }

  .pw-main {
    padding: var(--pw-space-7) var(--pw-space-6) var(--pw-space-8);
  }
}

@media (max-width: 1023px) {
  .pw-nav-list > .pw-nav-item + .pw-nav-item {
    margin-top: 2px;
  }
}


/* ==========================================================================
   6 · PIE
   ========================================================================== */
.pw-footer {
  padding: var(--pw-space-5) var(--pw-space-5);
  border-top: 1px solid var(--pw-border);
  background: var(--pw-surface-2);
}

.pw-footer-text {
  max-width: var(--pw-measure);
  margin: 0 auto;
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-sm);
  text-align: center;
  line-height: var(--pw-lh-body);
}


/* ==========================================================================
   7 · PORTADA
   ========================================================================== */
.pw-home {
  max-width: 72rem;
  margin: 0 auto;
}

.pw-hero {
  position: relative;
  padding: var(--pw-space-6) 0 var(--pw-space-6);
  margin-bottom: var(--pw-space-6);
  text-align: center;
  border-bottom: 1px solid var(--pw-border);
}

.pw-hero::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin: 0 auto var(--pw-space-5);
  background: var(--pw-ink);
}

.pw-hero-title {
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-3xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pw-hero-sub {
  max-width: 52ch;
  margin: var(--pw-space-4) auto 0;
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-lg);
  line-height: var(--pw-lh-loose);
  text-wrap: pretty;
}

.pw-section {
  margin-bottom: var(--pw-space-8);
  scroll-margin-top: calc(var(--pw-header-h) + var(--pw-space-5));
}

.pw-section > .pw-h2:first-child {
  margin-top: 0;
}

.pw-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: var(--pw-space-4);
}

.pw-card {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-1);
  padding: var(--pw-space-4);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  color: var(--pw-ink);
  line-height: var(--pw-lh-body);
  transition: border-color var(--pw-transition), box-shadow var(--pw-transition),
    transform var(--pw-transition);
}

.pw-card:hover,
.pw-card:focus-visible {
  border-color: var(--pw-border-strong);
  box-shadow: var(--pw-shadow);
  transform: translateY(-2px);
  color: var(--pw-ink);
}

.pw-card-title {
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-xl);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
  letter-spacing: -0.01em;
}

.pw-card-sub {
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
}

.pw-card-text {
  margin-top: var(--pw-space-2);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
  text-wrap: pretty;
}

.pw-card-meta {
  margin-top: auto;
  padding-top: var(--pw-space-3);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--pw-lh-tight);
}

/* Categorías de la portada */
.pw-browse {
  display: grid;
  gap: var(--pw-space-6);
}

.pw-browse > .pw-h3 {
  margin: 0 0 var(--pw-space-2);
}

.pw-browse .pw-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-browse .pw-list > li {
  margin: 0;
}

.pw-browse .pw-list a {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border);
  border-radius: 999px;
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-sm);
}

.pw-browse .pw-list a:hover {
  background: var(--pw-wash);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
}


/* ==========================================================================
   8 · ARTÍCULO: estructura
   ========================================================================== */
.pw-article-mount {
  display: flow-root;
}

.pw-article {
  max-width: 72rem;
  margin: 0 auto;
}

.pw-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-4);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-tight);
}

.pw-breadcrumb-link {
  color: var(--pw-ink-muted);
}

.pw-breadcrumb-link:hover {
  color: var(--pw-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pw-breadcrumb-sep {
  color: var(--pw-ink-faint);
}

.pw-breadcrumb-current {
  color: var(--pw-ink-soft);
  font-weight: 600;
}

.pw-title {
  margin: 0;
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-3xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.pw-subtitle {
  max-width: 60ch;
  margin: var(--pw-space-3) 0 0;
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-lg);
  line-height: var(--pw-lh-loose);
  text-wrap: pretty;
}

.pw-article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  margin: var(--pw-space-4) 0 0;
  padding-bottom: var(--pw-space-5);
  border-bottom: 1px solid var(--pw-border);
}

.pw-tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--pw-border);
  border-radius: 999px;
  background: var(--pw-surface-2);
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* La categoría es la etiqueta primaria: presence real, sin color de acento */
.pw-tag-category {
  background: var(--pw-surface);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
}

.pw-tag-updated {
  background: transparent;
  color: var(--pw-ink-muted);
  font-weight: 400;
  letter-spacing: 0;
}

.pw-content {
  display: grid;
  gap: var(--pw-space-6);
  margin-top: var(--pw-space-5);
}

.pw-text {
  max-width: var(--pw-measure);
  min-width: 0;
  font-size: var(--pw-fs-md);
}

.pw-aside {
  min-width: 0;
}

/* 1024-1199px: la columna lateral se convierte en una franja doble sobre el texto */
@media (min-width: 1024px) and (max-width: 1199px) {
  .pw-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .pw-aside {
    order: -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pw-space-4);
    align-items: start;
  }

  .pw-text {
    grid-column: 1 / -1;
  }
}

/* ≥1200px: columna de índice + infobox a la derecha */
@media (min-width: 1200px) {
  .pw-content {
    grid-template-columns: minmax(0, 1fr) var(--pw-aside-w);
    gap: var(--pw-space-7);
    align-items: start;
  }

  .pw-toc {
    position: sticky;
    top: calc(var(--pw-header-h) + var(--pw-space-4));
  }
}


/* ==========================================================================
   9 · BLOQUES DE CONTENIDO (CONTRATO §6.3)
   ========================================================================== */
.pw-p {
  margin: 0 0 var(--pw-space-4);
  text-indent: 1.25em;
  text-wrap: pretty;
}

.pw-p + .pw-p {
  margin-bottom: 0;
}

.pw-lead {
  margin-bottom: var(--pw-space-5);
  font-size: var(--pw-fs-lg);
  font-weight: 600;
  line-height: var(--pw-lh-loose);
  text-indent: 0;
  text-wrap: pretty;
}

.pw-lead + .pw-p {
  margin-top: 0;
}

.pw-h2 {
  margin: var(--pw-space-7) 0 var(--pw-space-4);
  padding-bottom: var(--pw-space-2);
  border-bottom: 1px solid var(--pw-border);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-2xl);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
  letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--pw-header-h) + var(--pw-space-4));
}

.pw-h3 {
  margin: var(--pw-space-6) 0 var(--pw-space-3);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-xl);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--pw-header-h) + var(--pw-space-4));
}

.pw-headline {
  font: inherit;
  color: inherit;
  scroll-margin-top: calc(var(--pw-header-h) + var(--pw-space-4));
}

.pw-headline a {
  color: inherit;
  text-decoration: none;
}

.pw-h2:target > .pw-headline,
.pw-h3:target > .pw-headline {
  background: var(--pw-wash);
  box-shadow: 0 0 0 3px var(--pw-wash);
  border-radius: var(--pw-radius-sm);
}

.pw-editlink {
  margin: calc(-1 * var(--pw-space-3)) 0 var(--pw-space-3);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-sm);
  text-align: right;
  line-height: var(--pw-lh-tight);
}

.pw-editlink a {
  color: var(--pw-link);
}

.pw-editlink a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Listas --- */
.pw-list {
  margin: 0 0 var(--pw-space-4);
  padding-left: 1.4rem;
  line-height: var(--pw-lh-body);
}

.pw-list > li {
  margin-bottom: var(--pw-space-1);
  text-wrap: pretty;
}

.pw-list > li::marker {
  color: var(--pw-ink-muted);
}

.pw-list-num {
  list-style: decimal;
}

/* --- Definiciones --- */
.pw-dl {
  margin: 0 0 var(--pw-space-4);
  line-height: var(--pw-lh-body);
}

.pw-dl dt {
  margin-top: var(--pw-space-3);
  font-weight: 700;
  line-height: var(--pw-lh-body);
}

.pw-dl dt:first-child {
  margin-top: 0;
}

.pw-dl dd {
  margin: 0 0 0 var(--pw-space-4);
  color: var(--pw-ink-soft);
  text-wrap: pretty;
}

/* --- Cita --- */
.pw-quote {
  margin: var(--pw-space-5) 0;
  padding: var(--pw-space-1) 0 var(--pw-space-1) var(--pw-space-4);
  border-left: 3px solid var(--pw-border-strong);
  color: var(--pw-ink-soft);
  font-style: italic;
  line-height: var(--pw-lh-loose);
}

.pw-quote p {
  margin: 0 0 var(--pw-space-3);
  text-indent: 0;
}

.pw-quote p:last-of-type {
  margin-bottom: 0;
}

.pw-quote cite {
  display: block;
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-sm);
  font-style: normal;
  text-align: right;
  line-height: var(--pw-lh-body);
}

.pw-quote cite::before {
  content: "— ";
}

/* --- Notas --- */
.pw-note {
  margin: var(--pw-space-5) 0;
  padding: var(--pw-space-3) var(--pw-space-4);
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border-soft);
  border-left: 3px solid var(--pw-ink-faint);
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-loose);
  border-radius: 0 var(--pw-radius-sm) var(--pw-radius-sm) 0;
}

.pw-note p {
  margin: 0;
  text-indent: 0;
}

.pw-note p + p {
  margin-top: var(--pw-space-2);
}

.pw-note-label {
  display: block;
  margin-bottom: 2px;
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--pw-lh-tight);
}

/* --- Figuras --- */
.pw-figure {
  margin: var(--pw-space-5) 0;
  padding: var(--pw-space-4);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  text-align: center;
}

.pw-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pw-radius-sm);
}

.pw-figure figcaption {
  margin-top: var(--pw-space-3);
  padding-top: var(--pw-space-2);
  border-top: 1px solid var(--pw-border-soft);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-sm);
  font-style: italic;
  line-height: var(--pw-lh-body);
  text-indent: 0;
  text-wrap: pretty;
}

.pw-figure-credit {
  display: block;
  margin-top: var(--pw-space-1);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  font-style: normal;
}

/* --- Tablas --- */
.pw-wtable,
.pw-infobox {
  width: 100%;
  margin: var(--pw-space-5) 0;
  border-collapse: collapse;
  border: 1px solid var(--pw-border);
  background: var(--pw-surface);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
}

.pw-wtable th,
.pw-wtable td,
.pw-infobox th,
.pw-infobox td {
  padding: var(--pw-space-2) var(--pw-space-3);
  border: 1px solid var(--pw-border);
  text-align: left;
  vertical-align: top;
}

.pw-wtable th {
  background: var(--pw-surface-2);
  font-weight: 700;
  white-space: nowrap;
}

.pw-wtable tbody tr:nth-child(even) td,
.pw-wtable tbody tr:nth-child(even) th {
  background: var(--pw-surface-2);
}

.pw-wtable caption {
  padding-bottom: var(--pw-space-2);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  text-align: left;
}

/* --- Enlaces internos --- */
.pw-wikilink {
  color: var(--pw-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pw-wikilink:hover {
  color: var(--pw-link-hover);
  text-decoration-thickness: 2px;
}

.pw-wikilink:visited {
  color: var(--pw-link-visited);
}

.pw-wikilink-missing,
.pw-wikilink-missing:visited {
  color: var(--pw-missing);
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}


/* ==========================================================================
   10 · REFERENCIAS Y CATEGORÍAS
   ========================================================================== */
.pw-references-wrap {
  margin-top: var(--pw-space-7);
}

.pw-references {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pw-ref;
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
}

.pw-references > li {
  position: relative;
  margin-bottom: var(--pw-space-2);
  padding-left: 2.1rem;
  color: var(--pw-ink-soft);
  text-indent: 0;
  text-wrap: pretty;
}

.pw-references > li::before {
  counter-increment: pw-ref;
  content: "[" counter(pw-ref) "]";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--pw-ink-muted);
  font-variant-numeric: tabular-nums;
}

.pw-catlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pw-space-2);
  margin-top: var(--pw-space-6);
  padding-top: var(--pw-space-4);
  border-top: 1px solid var(--pw-border);
}

.pw-catlinks-label {
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: var(--pw-lh-tight);
}

.pw-catlinks-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-catlinks-list > li {
  margin: 0;
}

.pw-catlinks-list a,
.pw-catlinks-list > li > span {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border);
  border-radius: 999px;
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-xs);
  line-height: 1.7;
}

.pw-catlinks-list a:hover {
  background: var(--pw-wash);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
}


/* ==========================================================================
   11 · ÍNDICE (TOC) E INFOBOX
   ========================================================================== */
.pw-toc {
  padding: var(--pw-space-3) var(--pw-space-4) var(--pw-space-4);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
}

.pw-toc-title {
  padding-bottom: var(--pw-space-2);
  margin-bottom: var(--pw-space-2);
  border-bottom: 1px solid var(--pw-border);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: var(--pw-lh-tight);
}

.pw-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-toc-item {
  margin: 0;
}

.pw-toc-link {
  display: block;
  padding: 0.15rem 0.5rem;
  border-left: 2px solid transparent;
  border-radius: var(--pw-radius-sm);
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-sm);
  line-height: 1.5;
  text-decoration: none;
}

.pw-toc-link:hover {
  background: var(--pw-wash);
  color: var(--pw-ink);
}

/* Estado activo del scrollspy (añadido por CSS, §3) */
.pw-toc-link.is-active,
.pw-toc-link[aria-current="true"],
.pw-toc-item.is-active > .pw-toc-link {
  border-left-color: var(--pw-ink);
  background: var(--pw-wash);
  color: var(--pw-ink);
  font-weight: 600;
}

.pw-infobox {
  margin: 0;
  box-shadow: var(--pw-shadow-sm);
  font-size: var(--pw-fs-sm);
}

.pw-infobox caption,
.pw-infobox th[colspan],
.pw-infobox td[colspan] {
  padding: var(--pw-space-2) var(--pw-space-3);
  background: var(--pw-ink);
  color: var(--pw-on-accent);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-lg);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
  text-align: center;
  border: 0;
}

.pw-infobox th {
  width: 38%;
  background: var(--pw-surface-2);
  font-weight: 700;
}

.pw-infobox th[colspan],
.pw-infobox th:not([colspan]) {
  width: auto;
}

.pw-infobox tbody tr:nth-child(even) td {
  background: var(--pw-surface-2);
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .pw-infobox {
    margin: 0;
  }
}


/* ==========================================================================
   12 · ARTÍCULOS RELACIONADOS
   ========================================================================== */
.pw-related {
  margin-top: var(--pw-space-8);
  padding-top: var(--pw-space-5);
  border-top: 1px solid var(--pw-border);
}

.pw-related > .pw-h2 {
  margin-top: 0;
}

.pw-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--pw-space-3);
}

.pw-related-card {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-1);
  padding: var(--pw-space-3) var(--pw-space-4);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  color: var(--pw-ink);
  transition: border-color var(--pw-transition), box-shadow var(--pw-transition),
    transform var(--pw-transition);
}

.pw-related-card:hover,
.pw-related-card:focus-visible {
  border-color: var(--pw-border-strong);
  box-shadow: var(--pw-shadow-sm);
  transform: translateY(-1px);
  color: var(--pw-ink);
}

.pw-related-card .pw-card-title {
  font-size: var(--pw-fs-lg);
}

.pw-related-card .pw-card-sub {
  font-size: var(--pw-fs-xs);
  color: var(--pw-ink-muted);
}


/* ==========================================================================
   13 · ESTADOS: carga, vacío y error
   ========================================================================== */
.pw-loading {
  margin: 0;
  padding: var(--pw-space-6) 0;
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-sm);
  letter-spacing: 0.04em;
}

.pw-loading::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.6em;
  border: 2px solid var(--pw-border-strong);
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: pw-spin 700ms linear infinite;
}

@keyframes pw-spin {
  to {
    transform: rotate(360deg);
  }
}

.pw-empty {
  margin: var(--pw-space-5) 0;
  padding: var(--pw-space-6) var(--pw-space-4);
  background: var(--pw-surface-2);
  border: 1px dashed var(--pw-border-strong);
  border-radius: var(--pw-radius);
  color: var(--pw-empty-fg);
  text-align: center;
  line-height: var(--pw-lh-loose);
}

.pw-empty p {
  margin: 0;
  text-indent: 0;
}

.pw-empty p + p {
  margin-top: var(--pw-space-2);
}

.pw-empty a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pw-search-results .pw-empty {
  margin: 0;
  padding: var(--pw-space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--pw-fs-sm);
}


/* ==========================================================================
   14 · PANTALLAS PEQUEÑAS
   ========================================================================== */
@media (max-width: 767px) {
  .pw-header {
    gap: var(--pw-space-2) var(--pw-space-3);
    padding: var(--pw-space-2) var(--pw-space-4);
  }

  .pw-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin: var(--pw-space-1) 0 0;
  }

  .pw-main {
    padding: var(--pw-space-5) var(--pw-space-4) var(--pw-space-7);
  }

  .pw-hero {
    padding: var(--pw-space-5) 0;
  }

  .pw-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pw-aside {
    display: grid;
    gap: var(--pw-space-4);
  }

  .pw-wtable {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .pw-wtable th,
  .pw-wtable td {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .pw-brand-text {
    font-size: var(--pw-fs-base);
  }

  .pw-header-links {
    gap: var(--pw-space-3);
  }

  .pw-subtitle {
    font-size: var(--pw-fs-md);
  }

  .pw-lead {
    font-size: var(--pw-fs-md);
  }

  .pw-dl dd {
    margin-left: 0;
  }

  .pw-catlinks {
    flex-direction: column;
    gap: var(--pw-space-2);
  }
}


/* ==========================================================================
   15 · MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   16 · IMPRESIÓN
   ========================================================================== */
@media print {
  .pw-header,
  .pw-sidebar,
  .pw-footer,
  .pw-toc,
  .pw-article-actions,
  .pw-editlink,
  .pw-related {
    display: none;
  }

  .pw-layout {
    padding-left: 0;
  }

  .pw-main {
    padding: 0;
  }

  .pw-text {
    max-width: none;
  }
}


/* ===== v2 · interfaz y funciones ===== */
/* ==========================================================================
   ===== v2 · interfaz y funciones =====
   Capa nueva de UI + las tres preferencias de lectura de FEATURES.md §5.

   Reglas de esta ampliación:
   · Solo se AÑADE al final. Ninguna regla anterior se reescribe ni se borra.
   · No se redefine ninguna clase de CONTRACT.md §6. Donde una clase ya
     existente hay que ajustarla en un contexto concreto (el anillo de foco
     global, el estado vacío dentro de un popover) se hace con un selector
     nuevo de contexto, nunca pisando la clase base; cada caso se comenta.
   · Todo se apoya en los tokens de §1, así que los temas claro / oscuro /
     sepia los recolorean sin tocar una sola clase.
   · Bordes redondeados: --pw-radius (4px) o --pw-radius-sm (2px). Ningún
     color de acento sobre superficies redondeadas: los estados activos usan
     solo tinta (--pw-ink / --pw-ink-soft / --pw-surface / --pw-wash /
     --pw-border-strong).

   Índice
     1 · Temas     html[data-pw-theme="claro|oscuro|sepia"]   (auto = media query)
     2 · Tamaño   html[data-pw-size="sm|md|lg|xl"] -> --pw-text-scale
     3 · Ancho    html[data-pw-measure="estrecha|normal|amplia"]
     4 · [hidden] gana a todo
     5 · Cabecera: barra de herramientas
     6 · Popovers y preferencias de lectura
     7 · Progreso de lectura y volver arriba
     8 · Ficha del artículo y favoritos
     9 · Diálogo de atajos
     10 · Hovercards
     11 · Permalinks de sección
     12 · Índice alfabético
     13 · Impresión, pantallas pequeñas y movimiento reducido
   ========================================================================== */


/* ==========================================================================
   v2 · 1 · TEMAS  (FEATURES.md §5)
   --------------------------------------------------------------------------
   `auto` no se declara: es exactamente el comportamiento vigente, o sea la
   media query `prefers-color-scheme: dark` de §1. Los otros tres se declaran
   aquí, al final del fichero y con el selector `html[attr]` (0,1,1), que gana
   a `:root` (0,1,0) de la media query sea cual sea su orden. De ahí que
   `data-pw-theme="oscuro"` gane a `prefers-color-scheme: light` y `claro`
   gane a `prefers-color-scheme: dark`.
   Todos los bloques repiten la lista completa de tokens que §1 cambia por
   tema, incluido --pw-empty-fg: es un `var(--pw-ink-muted)` resuelto ya en
   :root, así que hay que volver a declararlo aquí para que apunte a la tinta
   del tema activo y no a la del tema del sistema.
   ========================================================================== */
html[data-pw-theme="claro"] {
  --pw-bg: #fbfaf7;
  --pw-surface: #ffffff;
  --pw-surface-2: #f4f2ec;
  --pw-wash: #f0ede5;
  --pw-sidebar-bg: #f6f4ef;
  --pw-header-bg: #fbfaf7;

  --pw-ink: #1c1b18;
  --pw-ink-soft: #3d3b35;
  --pw-ink-muted: #6c6860;
  --pw-ink-faint: #c9c4b8;
  --pw-on-accent: #ffffff;

  --pw-link: #2a4b8d;
  --pw-link-hover: #1b3568;
  --pw-link-visited: #5a4b7d;
  --pw-missing: #a3271b;

  --pw-border: #ddd8cd;
  --pw-border-soft: #eae6dd;
  --pw-border-strong: #b6b0a3;

  --pw-focus: #1a56c4;
  --pw-focus-halo: rgba(26, 86, 196, 0.22);
  --pw-empty-fg: var(--pw-ink-muted);

  --pw-shadow-sm: 0 1px 2px rgba(28, 27, 24, 0.06);
  --pw-shadow: 0 1px 3px rgba(28, 27, 24, 0.08),
    0 8px 20px -8px rgba(28, 27, 24, 0.12);
  --pw-shadow-pop: 0 8px 28px -8px rgba(28, 27, 24, 0.26);
}

html[data-pw-theme="oscuro"] {
  --pw-bg: #14150f;
  --pw-surface: #1c1d17;
  --pw-surface-2: #24251e;
  --pw-wash: #2b2c24;
  --pw-sidebar-bg: #191a14;
  --pw-header-bg: #14150f;

  --pw-ink: #ebe8e0;
  --pw-ink-soft: #cfccc3;
  --pw-ink-muted: #9c988d;
  --pw-ink-faint: #45443c;
  --pw-on-accent: #ffffff;

  --pw-link: #8fb0e6;
  --pw-link-hover: #b9cdf2;
  --pw-link-visited: #bda8e0;
  --pw-missing: #e08a7d;

  --pw-border: #34352d;
  --pw-border-soft: #292a23;
  --pw-border-strong: #54544a;

  --pw-focus: #7fa9f0;
  --pw-focus-halo: rgba(127, 169, 240, 0.28);
  --pw-empty-fg: var(--pw-ink-muted);

  --pw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pw-shadow: 0 1px 3px rgba(0, 0, 0, 0.45),
    0 8px 20px -8px rgba(0, 0, 0, 0.6);
  --pw-shadow-pop: 0 8px 28px -8px rgba(0, 0, 0, 0.7);
}

/* Sepia: fondo cálido #f4ecd8, tinta #3b2f1e, enlace #7a4a1e.
   Contraste sobre #f4ecd8: tinta 11,1:1 · tinta suave 7,2:1 · tinta apagada
   5,5:1 · enlace 6,3:1 · enlace visitado 7,5:1 · faltan 6,2:1 · anillo de
   foco 5,8:1. Todos ≥ AA (4,5:1 texto normal, 3:1 componentes de interfaz). */
html[data-pw-theme="sepia"] {
  --pw-bg: #f4ecd8;
  --pw-surface: #fbf6e9;
  --pw-surface-2: #ece0c4;
  --pw-wash: #e7dabb;
  --pw-sidebar-bg: #f0e6cd;
  --pw-header-bg: #f4ecd8;

  --pw-ink: #3b2f1e;
  --pw-ink-soft: #5b4a34;
  --pw-ink-muted: #6d5c42;
  --pw-ink-faint: #b3a17c;
  --pw-on-accent: #ffffff;

  --pw-link: #7a4a1e;
  --pw-link-hover: #5e3614;
  --pw-link-visited: #6d3a4f;
  --pw-missing: #9c2f1c;

  --pw-border: #ded0b0;
  --pw-border-soft: #e8ddc3;
  --pw-border-strong: #c3b189;

  --pw-focus: #8a4b12;
  --pw-focus-halo: rgba(138, 75, 18, 0.25);
  --pw-empty-fg: var(--pw-ink-muted);

  --pw-shadow-sm: 0 1px 2px rgba(59, 47, 30, 0.1);
  --pw-shadow: 0 1px 3px rgba(59, 47, 30, 0.1),
    0 8px 20px -8px rgba(59, 47, 30, 0.16);
  --pw-shadow-pop: 0 8px 28px -8px rgba(59, 47, 30, 0.3);
}


/* ==========================================================================
   v2 · 2 · TAMAÑO DEL TEXTO  (FEATURES.md §5)
   --------------------------------------------------------------------------
   La base de todo el texto del sitio son tokens rem (§1), así que el tamaño
   se escala multiplicando esos tokens, nunca escribiendo px: la fuente
   relativa es el `rem` de cada token de §1 y el multiplicador es
   --pw-text-scale. Sin atributo en <html> el valor es 1 y el sitio se ve
   exactamente igual que antes.
   ========================================================================== */
:root {
  --pw-text-scale: 1;

  --pw-fs-xs: calc(0.75rem * var(--pw-text-scale));
  --pw-fs-sm: calc(0.8125rem * var(--pw-text-scale));
  --pw-fs-base: calc(1rem * var(--pw-text-scale));
  --pw-fs-md: calc(1.0625rem * var(--pw-text-scale));
  --pw-fs-lg: calc(1.125rem * var(--pw-text-scale));
  --pw-fs-xl: calc(1.3125rem * var(--pw-text-scale));
  --pw-fs-2xl: calc(clamp(1.4rem, 1.18rem + 0.9vw, 1.75rem) * var(--pw-text-scale));
  --pw-fs-3xl: calc(clamp(1.75rem, 1.35rem + 1.9vw, 2.5rem) * var(--pw-text-scale));
}

html[data-pw-size="sm"] { --pw-text-scale: 0.94; }
html[data-pw-size="md"] { --pw-text-scale: 1; }
html[data-pw-size="lg"] { --pw-text-scale: 1.09; }
html[data-pw-size="xl"] { --pw-text-scale: 1.18; }


/* ==========================================================================
   v2 · 3 · ANCHO DE COLUMNA  (FEATURES.md §5)
   ========================================================================== */
html[data-pw-measure="estrecha"] { --pw-measure: 32rem; }
html[data-pw-measure="normal"] { --pw-measure: 36rem; }
html[data-pw-measure="amplia"] { --pw-measure: 44rem; }


/* ==========================================================================
   v2 · 4 · EL ATRIBUTO hidden MANDA
   .pw-popover, .pw-hovercard, .pw-totop y .pw-favs-* empiezan ocultos en el
   HTML; sin esto, cualquier `display` de sus reglas los sacaría a la luz.
   ========================================================================== */
[hidden] {
  display: none !important;
}


/* ==========================================================================
   v2 · 5 · CABECERA: BARRA DE HERRAMIENTAS
   --------------------------------------------------------------------------
   `.pw-tools` se queda en el flujo de la cabecera (flex-wrap de §3 la lleva
   a su propia línea por debajo de 768px) y es el contexto de posicionamiento
   de los dos popover, que cuelgan de él y se ancran por la derecha.
   Sin `margin-left: auto` a propósito: el hueco elástico lo absorbe
   `.pw-header-links` (§3) y así los enlaces siguen donde estaban; solo por
   debajo de 768px se alinean a la derecha las herramientas (v2 · 13).
   ========================================================================== */
.pw-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pw-space-1);
  flex: 0 0 auto;
  margin-left: 0;
}

.pw-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--pw-radius);
  background: transparent;
  color: var(--pw-ink-soft);
  font-family: inherit;
  font-size: var(--pw-fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--pw-transition), color var(--pw-transition),
    border-color var(--pw-transition);
}

.pw-btn:hover {
  background: var(--pw-wash);
  color: var(--pw-ink);
}

/* Estado abierto: tinta, nunca acento */
.pw-btn[aria-expanded="true"] {
  background: var(--pw-surface-2);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
}

.pw-btn-glyph {
  display: block;
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.pw-btn-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.22rem;
  border: 1px solid var(--pw-bg);
  border-radius: 999px;
  background: var(--pw-ink);
  color: var(--pw-bg);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* El anillo de foco global (§2 BASE) fija border-radius: 2px a todo botón
   enfocado; los botones nuevos conservan su propio radio para que el foco
   no deforme la forma. */
.pw-btn:focus-visible { border-radius: var(--pw-radius); }
.pw-totop:focus-visible { border-radius: 50%; }
.pw-fav-remove:focus-visible,
.pw-permalink:focus-visible { border-radius: var(--pw-radius-sm); }
.pw-seg:focus-visible,
.pw-step:focus-visible,
.pw-btn-text:focus-visible { border-radius: var(--pw-radius); }


/* ==========================================================================
   v2 · 6 · POPOVERS Y PREFERENCIAS DE LECTURA
   ========================================================================== */
.pw-popover {
  position: absolute;
  top: calc(100% + var(--pw-space-2));
  right: 0;
  z-index: 45;
  width: min(20rem, calc(100vw - 2.5rem));
  padding: var(--pw-space-3);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow-pop);
  color: var(--pw-ink);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
}

.pw-popover-wide {
  width: min(25rem, calc(100vw - 2.5rem));
}

/* §4 no define qué elemento lleva .is-open: se interpreta como refuerzo del
   popover ya abierto, sin decidir su visibilidad (eso es de `hidden`, §3.1). */
.pw-popover.is-open {
  border-color: var(--pw-border-strong);
  box-shadow: var(--pw-shadow-pop);
}

.pw-popover-title {
  padding-bottom: var(--pw-space-2);
  margin-bottom: var(--pw-space-1);
  border-bottom: 1px solid var(--pw-border);
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: var(--pw-lh-tight);
}

.pw-pref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-1) var(--pw-space-3);
  padding: var(--pw-space-2) 0;
}

.pw-pref-row + .pw-pref-row {
  border-top: 1px solid var(--pw-border-soft);
}

.pw-pref-row-end {
  justify-content: flex-end;
  padding-top: var(--pw-space-3);
}

.pw-pref-label {
  flex: 0 0 auto;
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--pw-lh-tight);
}

.pw-segmented,
.pw-stepper {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
}

.pw-seg,
.pw-step {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--pw-radius-sm);
  background: transparent;
  color: var(--pw-ink-soft);
  font-family: inherit;
  font-size: var(--pw-fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pw-transition), color var(--pw-transition),
    border-color var(--pw-transition);
}

.pw-seg:hover,
.pw-step:hover {
  background: var(--pw-wash);
  color: var(--pw-ink);
}

/* Seleccionado: superficie + borde fuerte + tinta (nunca acento) */
.pw-seg[aria-checked="true"] {
  background: var(--pw-surface);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
  font-weight: 700;
}

.pw-step:active {
  background: var(--pw-surface);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
}

.pw-step-value {
  min-width: 4.25rem;
  padding: 0 0.3rem;
  color: var(--pw-ink);
  font-size: var(--pw-fs-xs);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

.pw-btn-text {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  background: var(--pw-surface);
  color: var(--pw-ink-soft);
  font-family: inherit;
  font-size: var(--pw-fs-xs);
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: background var(--pw-transition), color var(--pw-transition),
    border-color var(--pw-transition);
}

.pw-btn-text:hover {
  background: var(--pw-wash);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
}

/* --- Panel de favoritos (rellenado por features.js) --- */
.pw-favs {
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pw-fav-item {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  padding: var(--pw-space-2) 0;
  border-bottom: 1px solid var(--pw-border-soft);
  color: var(--pw-ink);
  text-decoration: none;
}

.pw-fav-item:first-child {
  padding-top: var(--pw-space-1);
}

.pw-fav-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.pw-fav-item:hover {
  color: var(--pw-ink);
}

.pw-fav-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  line-height: var(--pw-lh-tight);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pw-fav-item-sub {
  flex: 0 1 auto;
  max-width: 45%;
  overflow: hidden;
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  line-height: var(--pw-lh-tight);
}

/* La × se alinea a la derecha de la fila: es el último hijo flexible */
.pw-fav-remove {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--pw-radius-sm);
  background: transparent;
  color: var(--pw-ink-muted);
  font-family: inherit;
  font-size: var(--pw-fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--pw-transition), color var(--pw-transition),
    border-color var(--pw-transition);
}

.pw-fav-remove:hover {
  background: var(--pw-wash);
  border-color: var(--pw-border);
  color: var(--pw-ink);
}

/* `.pw-empty` ya existe (§13) con márgenes de bloque y borde discontinuo.
   Aquí solo se ajusta la INSTANCIA que vive dentro de un popover, igual que
   hace `.pw-search-results .pw-empty` en §13: la clase no se redefine. */
.pw-popover .pw-empty {
  margin: 0;
  padding: var(--pw-space-4);
  background: transparent;
  border: 0;
  font-size: var(--pw-fs-xs);
  line-height: var(--pw-lh-body);
}


/* ==========================================================================
   v2 · 7 · PROGRESO DE LECTURA Y VOLVER ARRIBA
   --------------------------------------------------------------------------
   La barra escala con transform: scaleX() sobre el ancho completo del
   viewport; el contenedor no pinta fondo y no intercepta el ratón, así que
   se puede hacer scroll y pulsar a través de ella.
   ========================================================================== */
.pw-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.pw-progress-bar {
  width: 100%;
  height: 100%;
  background: var(--pw-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 120ms linear;
}

.pw-totop {
  position: fixed;
  right: var(--pw-space-4);
  bottom: var(--pw-space-4);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--pw-border-strong);
  /* §4 lo pide circular: 50 % es el radio del único control redondo del sitio. */
  border-radius: 50%;
  background: var(--pw-surface);
  box-shadow: var(--pw-shadow-sm);
  color: var(--pw-ink-soft);
  font-family: inherit;
  font-size: var(--pw-fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--pw-transition), color var(--pw-transition),
    box-shadow var(--pw-transition);
}

.pw-totop:hover {
  background: var(--pw-wash);
  box-shadow: var(--pw-shadow);
  color: var(--pw-ink);
}


/* ==========================================================================
   v2 · 8 · FICHA DEL ARTÍCULO
   --------------------------------------------------------------------------
   Misma densidad que `table.pw-infobox` (§11): 1px, tipografía --pw-fs-sm,
   interlineado de cuerpo, filas con zebra y rótulo en negrita al 40 %.
   ========================================================================== */
.pw-articleinfo {
  margin: var(--pw-space-4) 0 0;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow-sm);
  color: var(--pw-ink);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
  overflow: hidden;
}

.pw-articleinfo-title {
  padding: var(--pw-space-2) var(--pw-space-3);
  background: var(--pw-surface-2);
  border-bottom: 1px solid var(--pw-border);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-lg);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
}

.pw-articleinfo-list {
  margin: 0;
  padding: 0;
}

.pw-articleinfo-row {
  display: flex;
  align-items: baseline;
  gap: var(--pw-space-2);
  padding: 0.3rem var(--pw-space-3);
  border-bottom: 1px solid var(--pw-border-soft);
}

.pw-articleinfo-row:nth-child(even) {
  background: var(--pw-surface-2);
}

.pw-articleinfo-row:last-child {
  border-bottom: 0;
}

.pw-articleinfo-row dt {
  flex: 0 0 40%;
  font-weight: 700;
  line-height: 1.5;
}

.pw-articleinfo-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--pw-ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.5;
}

.pw-fav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pw-space-2);
  width: 100%;
  padding: var(--pw-space-2) var(--pw-space-3);
  border: 0;
  border-top: 1px solid var(--pw-border);
  border-radius: 0;
  background: var(--pw-surface);
  color: var(--pw-ink-soft);
  font-family: inherit;
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background var(--pw-transition), color var(--pw-transition);
}

.pw-fav-toggle:hover {
  background: var(--pw-wash);
  color: var(--pw-ink);
}

.pw-fav-toggle[aria-pressed="true"] {
  background: var(--pw-surface-2);
  color: var(--pw-ink);
  font-weight: 700;
}

.pw-fav-star {
  font-size: var(--pw-fs-base);
  line-height: 1;
  pointer-events: none;
}

.pw-fav-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  text-align: center;
  line-height: 1.5;
}


/* ==========================================================================
   v2 · 9 · DIÁLOGO DE ATAJOS
   --------------------------------------------------------------------------
   <dialog> nativo. No se declara `display` en el estado cerrado: el
   `dialog:not([open])` de la hoja del navegador hace ese trabajo y así
   `.showModal()` de features.js sigue funcionando. Solo se declara
   `display: block` cuando está abierto.
   ========================================================================== */
.pw-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: calc(100% - 2rem);
  max-width: 420px;
  max-height: calc(100% - 2rem);
  margin: auto;
  padding: var(--pw-space-4);
  overflow-y: auto;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow-pop);
  color: var(--pw-ink);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
}

.pw-modal:not([open]) {
  display: none;
}

.pw-modal[open] {
  display: block;
}

.pw-modal::backdrop {
  background: rgba(28, 27, 24, 0.4);
}

.pw-modal-title {
  padding-bottom: var(--pw-space-2);
  margin-bottom: var(--pw-space-3);
  border-bottom: 1px solid var(--pw-border);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-lg);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
}

.pw-keys {
  margin: 0;
}

.pw-key-row {
  display: flex;
  align-items: baseline;
  gap: var(--pw-space-3);
  padding: var(--pw-space-1) 0;
}

.pw-key-row + .pw-key-row {
  border-top: 1px solid var(--pw-border-soft);
}

.pw-key-row dt {
  flex: 0 0 3.5rem;
  margin: 0;
}

.pw-key-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--pw-ink-soft);
  text-indent: 0;
}

.pw-keys kbd {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--pw-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--pw-radius-sm);
  background: var(--pw-surface-2);
  color: var(--pw-ink);
  font-family: var(--pw-font-sans);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* El <dialog> es un bloque: el "Cerrar" se va a la esquina inferior derecha */
.pw-modal > .pw-btn-text {
  display: block;
  margin: var(--pw-space-4) 0 0 auto;
}


/* ==========================================================================
   v2 · 10 · HOVERCARDS
   --------------------------------------------------------------------------
   Un solo elemento reutilizado que features.js añade a <body> y coloca con
   top/left en coordenadas de viewport (por eso `fixed`, y se oculta al
   hacer scroll). `pointer-events: none` para no robar el hover al enlace.
   ========================================================================== */
.pw-hovercard {
  position: fixed;
  z-index: 70;
  width: max-content;
  max-width: 320px; /* 20rem, §4 */
  padding: var(--pw-space-2) var(--pw-space-3);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow-pop);
  color: var(--pw-ink);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
  pointer-events: none;
}

.pw-hovercard-title {
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-base);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
}

.pw-hovercard-sub {
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-xs);
  line-height: var(--pw-lh-tight);
}

.pw-hovercard-text {
  margin-top: var(--pw-space-1);
  padding-top: var(--pw-space-1);
  border-top: 1px solid var(--pw-border-soft);
  color: var(--pw-ink-soft);
  text-wrap: pretty;
}


/* ==========================================================================
   v2 · 11 · PERMALINKS DE SECCIÓN
   --------------------------------------------------------------------------
   features.js añade el botón como hermano de `.pw-headline` dentro de
   `.pw-h2`; los selectores cubren también el caso de que lo añada como
   hermano del propio h2. Invisible hasta que la sección se enfoca o se
   pasa por encima, y siempre visible donde no hay hover (§4).
   ========================================================================== */
.pw-permalink {
  display: inline-block;
  margin-left: var(--pw-space-2);
  padding: 0 0.3rem;
  border: 1px solid transparent;
  border-radius: var(--pw-radius-sm);
  background: transparent;
  color: var(--pw-ink-muted);
  font-family: inherit;
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  line-height: 1;
  vertical-align: baseline;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--pw-transition), background var(--pw-transition),
    color var(--pw-transition), border-color var(--pw-transition);
}

.pw-h2:hover .pw-permalink,
.pw-h2:focus-within .pw-permalink,
.pw-h2:hover + .pw-permalink,
.pw-permalink:focus-visible {
  opacity: 1;
}

.pw-permalink:hover {
  background: var(--pw-wash);
  border-color: var(--pw-border);
  color: var(--pw-ink);
}

/* Confirmación efímera de §6.8: destello de tinta, nada de acento */
.pw-permalink.is-copied {
  background: var(--pw-ink);
  border-color: var(--pw-ink);
  color: var(--pw-bg);
  opacity: 1;
}

@media (hover: none) {
  .pw-permalink {
    opacity: 1;
  }
}


/* ==========================================================================
   v2 · 12 · ÍNDICE ALFABÉTICO
   --------------------------------------------------------------------------
   `min-width` en cada letra para que todas ocupen el mismo ancho y queden
   alineadas. El estado `aria-current` es un tono de tinta. Si features.js no
   encuentra iniciales no renderiza nada: `:empty` evita el hueco de su
   `margin-bottom`.
   ========================================================================== */
.pw-azindex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-1);
  margin-bottom: var(--pw-space-4);
}

.pw-azindex:empty {
  display: none;
}

.pw-azindex-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-sm);
  background: var(--pw-surface);
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
}

.pw-azindex-link:hover {
  background: var(--pw-wash);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
  text-decoration: none;
}

.pw-azindex-link[aria-current="true"] {
  background: var(--pw-ink);
  border-color: var(--pw-ink);
  color: var(--pw-bg);
  font-weight: 700;
}


/* ==========================================================================
   v2 · 13 · IMPRESIÓN, PANTALLAS PEQUEÑAS Y MOVIMIENTO REDUCIDO
   ========================================================================== */
@media print {
  .pw-progress,
  .pw-totop,
  .pw-tools,
  .pw-azindex,
  .pw-permalink,
  .pw-articleinfo {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Por debajo de 768px la cabecera ya envuelve a varias líneas (§14): las
     herramientas se alinean a la derecha de su propia línea. Entre 768 y
     1023px no se toca nada, porque el buscador vuelve a estar en línea y el
     `margin-left: auto` de `.pw-header-links` debe seguir siendo el único
     hueco elástico. */
  .pw-tools {
    margin-left: auto;
  }
}

@media (max-width: 560px) {
  .pw-btn {
    width: 1.75rem;
    height: 1.75rem;
  }

  .pw-tools {
    gap: 2px;
  }
}

/* Un término largo en la infobox no debe abrir scroll horizontal a 375px
   cuando el texto está a 1,18×: se le deja partir antes de desbordar. */
.pw-infobox th,
.pw-infobox td {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  /* §15 ya anula transiciones y animaciones; solo se quita el suavizado
     propio de la barra de progreso, que no depende de transition. */
  .pw-progress-bar {
    transition: none;
  }
}


/* ===== v3 · los cinco dominios ===== */
/* ==========================================================================
   ===== v3 · los cinco dominios =====
   Capa de CONTRACT-V3.md §8: conmutador de dominio, tarjeta con franja de
   color y resumen, y las cuatro piezas de las fichas nuevas.

   Reglas de esta ampliación:
   · Solo se AÑADE al final. Ninguna regla de §1, §7 ni del bloque v2 se
     reescribe ni se borra. Donde una clase que ya existía choca con el
     contexto nuevo, el ajuste va en el punto 9 de este bloque, con selector
     de CONTEXTO y su comentario: nunca se redefine la clase base.
   · Todo lo nuevo se apoya en los tokens de §1, así que los CUATRO temas
     (claro, oscuro, sepia y auto = prefers-color-scheme de §1) recolorean
     esta capa entera sin tocar una sola regla. Aquí no hay ni un literal de
     color: los únicos valores que no son tokens son --flag-a y --flag-b, que
     son DATO del contenido (§8.4), el color real del partido o de la
     organización, no color de marca.
   · Estados activos solo con TINTA (--pw-ink, --pw-ink-soft, --pw-surface,
     --pw-surface-2, --pw-wash, --pw-border-strong). Nunca un color de acento
     sobre superficie redondeada, igual que hace .pw-seg[aria-checked="true"]:
     el conmutador de dominio se lee como parte del mismo sistema.
   · Radios: --pw-radius (4px) o --pw-radius-sm (2px) (§8.4). El único
     control redondo del sitio sigue siendo .pw-totop, con 50 %, intacto.

   Índice
     1 · Conmutador de dominio    .pw-domains .pw-domain .pw-domain-count
     2 · Tarjeta: franja de color .pw-card-flag
     3 · Tarjeta: resumen         .pw-card-summary
     4 · Tarjeta: etiquetas       .pw-tag (en el contexto nuevo)
     5 · Ficha de partido         .pw-party-colors .pw-ideology-chips .pw-chip
     6 · Ficha: sección destacada .pw-section-featured
     7 · Ficha de geopolítica     .pw-actors .pw-actor
     8 · Ficha de organización    .pw-member-count
      9 · Ajustes de CONTEXTO sobre clases que ya existían
     10 · Encabezados de grupo     .pw-catgroup .pw-catgroup-title
     11 · Impresión
   ========================================================================== */


/* ==========================================================================
   v3 · 1 · CONMUTADOR DE DOMINIO
   --------------------------------------------------------------------------
   Va en index.html entre el héroe y el catálogo (§8.1). Se alinea a la
   izquierda, no centrado como el héroe, porque filtra la rejilla de abajo:
   queda en la misma línea base que los encabezados de grupo y que el índice
   alfabético, y se leen como un par de filtros. `.pw-azindex` y `.pw-domains`
   comparten densidad, radio y separador de 2px.
   ========================================================================== */
.pw-domains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  margin-bottom: var(--pw-space-6);
  padding: 2px;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
}

.pw-domain {
  /* `flex: 0 1 auto` + `min-width: 0` dejan que el botón encoja en vez de
     desbordar: con data-pw-size="xl" a 375px la fila se reparte en varias
     líneas y ningún botón empuja la anchura. `overflow-wrap: anywhere` es la
     red de seguridad para un rótulo más largo del previsto: min-content cae a
     1ch y el texto puede partirse en lugar de abrir scroll horizontal. */
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.3rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--pw-radius-sm);
  background: transparent;
  color: var(--pw-ink-soft);
  font-family: inherit;
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background var(--pw-transition), color var(--pw-transition),
    border-color var(--pw-transition);
}

.pw-domain:hover {
  background: var(--pw-wash);
  color: var(--pw-ink);
}

/* Activo: exactamente el lenguaje visual de `.pw-seg[aria-checked="true"]`
   (superficie + borde fuerte + tinta). Es la misma receta, no una nueva. */
.pw-domain[aria-pressed="true"] {
  background: var(--pw-surface);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
  font-weight: 700;
}

.pw-domain[aria-pressed="true"] .pw-domain-count {
  color: var(--pw-ink-soft);
}

/* Foco de teclado: el anillo global de §2 (2px de --pw-focus) se mantiene y
   se le conserva su propio radio, como se hizo con .pw-seg en v2. El borde
   fuerte hace que el botón enfocado no se confunda con el dominio inactivo. */
.pw-domain:focus-visible {
  background: var(--pw-surface);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
  border-radius: var(--pw-radius-sm);
}

.pw-domain-count {
  display: inline-block;
  min-width: 2ch; /* §8.2 */
  margin-left: 0.35em;
  color: var(--pw-ink-muted);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  vertical-align: baseline;
}


/* ==========================================================================
   v3 · 2 · FRANJA DE COLOR DE LA TARJETA
   --------------------------------------------------------------------------
   §8.2 y §8.4: 4px de alto, degradado entre --flag-a y --flag-b, radio solo
   arriba porque se apoya en el borde superior de la tarjeta. NO es color de
   marca: es el color real del partido, por eso el degradado se construye con
   los valores que inyecta el contenido y no con tokens del sitio.
   --flag-from / --flag-to son locales a la franja y resuelven el caso de un
   solo color (§8.4): degradado hacia su versión más clara, mezclando con
   --pw-on-accent, que es blanco en los tres temas. Si `color-mix` no existiera,
   la sustitución sería inválida, `background-image` caería a `none` y la franja
   seguiría mostrando el color plano de abajo: nunca desaparece.
   ========================================================================== */
.pw-card-flag {
  --flag-from: var(--flag-a, var(--pw-ink-muted));
  --flag-to: var(--flag-b, color-mix(in srgb, var(--flag-from) 45%, var(--pw-on-accent)));
  display: block;
  flex: 0 0 auto;
  height: 4px;
  /* Se sale del relleno de la tarjeta para apoyarse en su borde superior: por
     eso el radio va arriba y solo arriba. El `gap` de .pw-card (4px) se suma al
     margen de abajo, así que de la franja al título queda --pw-space-4, el
     mismo aire que el resto de la tarjeta. */
  margin: calc(-1 * var(--pw-space-4)) calc(-1 * var(--pw-space-4)) var(--pw-space-3);
  border-radius: var(--pw-radius-sm) var(--pw-radius-sm) 0 0;
  background-color: var(--flag-from);
  background-image: linear-gradient(90deg, var(--flag-from), var(--flag-to));
}


/* ==========================================================================
   v3 · 3 · RESUMEN DE LA TARJETA
   --------------------------------------------------------------------------
   §8.2 la pide en las cuatro tarjetas; en las de ideología no se usa, así que
   no afecta a ninguna tarjeta existente.

   El `line-clamp` a 3 líneas es lo que mantiene la rejilla compacta y
   homogénea, y por eso se declara con altura fija: sin el `min-height`, un
   resumen de dos líneas dejaría su tarjeta un renglón más corta que la de al
   lado y la fila se escalonaría. Con las tres líneas reservadas, todas las
   tarjetas de la fila miden igual y lo único que puede variar es el título.
   El alto se calcula con --pw-lh-body, no con un número: escala con
   data-pw-size igual que el texto.
   ========================================================================== */
.pw-card-summary {
  margin: var(--pw-space-2) 0 0;
  color: var(--pw-ink-muted);
  font-size: var(--pw-fs-sm);
  line-height: var(--pw-lh-body);
  /* Un término largo no debe abrir scroll horizontal a 375px con el texto a
     1,18×: se le deja partir antes de desbordar (como .pw-infobox en v2). */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* El equivalente estándar va DESPUÉS del prefijado, y ese orden es lo que
     importa: en los navegadores que ya no necesitan el prefijo manda esta, y
     en los que solo entienden la de arriba se sigue recortando con la de
     arriba. Puestas al revés, la declaración estándar se descartaría al no
     ser reconocida y la tarjeta quedaría sin recortar. */
  line-clamp: 3;
  min-height: calc(var(--pw-lh-body) * 3 * 1em);
}


/* ==========================================================================
   v3 · 4 · ETIQUETAS DENTRO DE .pw-card-meta
   --------------------------------------------------------------------------
   §8.2 las coloca en `.pw-card-meta` de las tarjetas nuevas. El ajuste va en
   el punto 9 de este bloque, junto a los demás ajustes de contexto: aquí solo
   se deja constancia de por qué.
   ========================================================================== */


/* ==========================================================================
   v3 · 5 · FICHA DE PARTIDO
   --------------------------------------------------------------------------
   `.pw-party-colors` es la franja de la cabecera: mismo mecanismo de degradado
   que la tarjeta y más alto (6px), porque aquí es el elemento de identidad de
   la ficha y no un adorno de 4px.
   ========================================================================== */
.pw-party-colors {
  --flag-from: var(--flag-a, var(--pw-ink-muted));
  --flag-to: var(--flag-b, color-mix(in srgb, var(--flag-from) 45%, var(--pw-on-accent)));
  display: block;
  /* Si el motor la deja en la fila de etiquetas de la cabecera, ocupa su propia
     línea; en cualquier otro contexto es un ancho completo. */
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  height: 6px;
  margin: 0 0 var(--pw-space-3);
  border-radius: var(--pw-radius-sm);
  background-color: var(--flag-from);
  background-image: linear-gradient(90deg, var(--flag-from), var(--flag-to));
}

.pw-ideology-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-1);
  min-width: 0;
  margin: var(--pw-space-4) 0 0;
}

.pw-chip {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-sm);
  background: var(--pw-surface-2);
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-xs);
  font-weight: 600;
  line-height: 1.7;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: background var(--pw-transition), color var(--pw-transition),
    border-color var(--pw-transition);
}

.pw-chip:hover {
  background: var(--pw-wash);
  border-color: var(--pw-border-strong);
  color: var(--pw-ink);
}

/* Un chip que es enlace tiene que parecerse a un enlace al pulsarlo y al
   enfocarlo: subrayado, sin cambiar de color de marca. */
a.pw-chip:hover,
a.pw-chip:focus-visible {
  color: var(--pw-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}


/* ==========================================================================
   v3 · 6 · SECCIÓN DESTACADA DE LA FICHA
   --------------------------------------------------------------------------
   §8.3: una sola por ficha, discreta, sin gritar. El tratamiento es de TINTA:
   un filete corto delante del titular —el mismo gesto que el filete de 2px del
   héroe en §7— y el filete de debajo pasa a borde fuerte. Ni un acento, ni un
   fondo de color, ni una etiqueta inventada.
   La marca va sobre el `h2.pw-h2` de la sección `practica` porque §6 no envuelve
   las secciones en ningún contenedor: el DOM del artículo es plano. Por eso el
   filete de debajo se limita al caso `h2`, y no se aplica si el motor eligiera
   un contenedor: solo perdería el refuerzo, no se rompería nada.
   ========================================================================== */
.pw-section-featured::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 2px;
  margin-right: var(--pw-space-2);
  vertical-align: middle;
  background: var(--pw-ink);
}

h2.pw-section-featured {
  border-bottom-color: var(--pw-border-strong);
}


/* ==========================================================================
   v3 · 7 · FICHA DE GEOPOLÍTICA
   --------------------------------------------------------------------------
   Rejilla de actores tal cual la pide §8.4. `.pw-actor` lleva borde de 1px y
   superficie, y NUNCA sombra: ni en reposo ni al pasar por encima, para que la
   rejilla se lea como una lista de fichas y no como una hilera de ventanas.
   El indicador de `power` se pinta con tinta en tres pasos —lavado, tinta suave,
   tinta maciza— en vez de con rojo, verde o un color de acento.
   ========================================================================== */
.pw-actors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--pw-space-3);
  margin: var(--pw-space-4) 0;
}

.pw-actor {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-1);
  min-width: 0;
  padding: var(--pw-space-3);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  box-shadow: none; /* §8.4 lo exige: sin sombra. */
  color: var(--pw-ink);
  line-height: var(--pw-lh-body);
}

.pw-actor > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pw-actor > :first-child {
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-md);
  font-weight: 600;
  color: var(--pw-ink);
  line-height: var(--pw-lh-tight);
}

/* El `role` y cualquier línea intermedia: texto de apoyo. */
.pw-actor > *:not(:first-child) {
  color: var(--pw-ink-soft);
  font-size: var(--pw-fs-sm);
  line-height: 1.55;
}

/* El indicador de `power`: el último hijo, y solo si es el tercero o
   posterior. §5.3 da tres campos por actor (name, role, power), así que el
   último hijo es el indicador; el `:nth-child(n+3)` es la red de seguridad para
   que un actor con solo dos hijos no acabe con el `role` pintado de etiqueta. */
.pw-actor > :nth-child(n+3):last-child {
  align-self: flex-start;
  max-width: 100%;
  margin-top: var(--pw-space-1);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-sm);
  background: var(--pw-wash);
  color: var(--pw-ink);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Si el motor marca el nivel con el atributo `data-power` del §5.3, los tres
   escalones se reparten en un solo tono de tinta. Si no lo emite, el indicador
   se queda en el lavado neutro de arriba: mismo lenguaje, sin inventar nada. */
.pw-actor [data-power="alta"] {
  background: var(--pw-ink);
  border-color: var(--pw-ink);
  color: var(--pw-bg);
}

.pw-actor [data-power="baja"] {
  background: transparent;
  border-color: var(--pw-border);
  color: var(--pw-ink-muted);
}


/* ==========================================================================
   v3 · 8 · FICHA DE ORGANIZACIÓN
   --------------------------------------------------------------------------
   Cifra grande de miembros, con `memberSince` al lado en cuerpo pequeño: mismo
   carácter de rótulo que los datos de .pw-articleinfo, para que la cifra se
   lea como un dato de la ficha y no como un titular.
   ========================================================================== */
.pw-member-count {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--pw-space-2);
  max-width: 100%;
  color: var(--pw-ink);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--pw-lh-tight);
}

/* `memberSince` al lado, sea el elemento que sea, en el mismo tono de rótulo
   que usa .pw-articleinfo-row dt / .pw-catlinks-label. */
.pw-member-count > *:not(:first-child),
.pw-member-count small,
.pw-member-count sub,
.pw-member-count em {
  color: var(--pw-ink-muted);
  font-family: var(--pw-font-sans);
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}


/* ==========================================================================
   v3 · 9 · AJUSTES DE CONTEXTO SOBRE CLASES QUE YA EXISTÍAN
   --------------------------------------------------------------------------
   Aquí es donde se resuelven los tres roces con reglas anteriores. Ninguna
   clase base se redefine: los tres ajustes son selectores de CONTEXTO, con la
   clase antigua al principio de la cadena, para que sus demás usos —la ficha
   de ideología, la portada v1— queden exactamente como estaban.
   ========================================================================== */

/* (a) `.pw-tag` hereda de `.pw-card-meta` su `text-transform: uppercase` y su
   `letter-spacing`, pensados para una línea de texto y no para una etiqueta.
   §8.2 pide que la etiqueta tenga el mismo lenguaje visual que
   `.pw-catlinks-list a`, que va en caja normal. Se anula la herencia; la
   definición de `.pw-tag` de §6 no se toca, así que las etiquetas de la ficha
   del artículo (`.pw-article-actions`) quedan como estaban.
   El margen sustituye a un `gap`: `.pw-card-meta` es un bloque y las
   etiquetas fluyen en línea, así que el aire entre ellas lo da el margen. */
.pw-card-meta .pw-tag {
  margin: 0 var(--pw-space-1) var(--pw-space-1) 0;
  text-transform: none;
  letter-spacing: 0;
}

/* (b) `.pw-card-meta` reserva `--pw-space-3` de aire superior para una línea
   de texto. Con etiquetas en línea, ese aire se sumaría a su propio margen y
   la separación sería de 16px en vez de 12px. `:has()` solo para esto; si no
   estuviera soportado, la fila de etiquetas simplemente respiraría un poco más. */
.pw-card-meta:has(> .pw-tag) {
  padding-top: var(--pw-space-2);
}

/* (c) La tarjeta con franja recorta sus propias esquinas, para que la franja no
   asome por el radio de 4px. No hay ningún elemento saliente dentro de
   `.pw-card`, así que el recorte no puede recortar nada: ni el anillo de foco
   —un `outline` nunca lo recorta su propio contenedor— ni la etiqueta. */
.pw-card:has(> .pw-card-flag) {
  overflow: hidden;
}


/* ==========================================================================
   v3 · 10 · ENCABEZADOS DE GRUPO DEL CATÁLOGO
   --------------------------------------------------------------------------
   §7 agrupa los dominios con `<section class="pw-catgroup">` +
   `<h3 class="pw-catgroup-title">`: el mismo patrón que la portada de las
   categorías, con las mismas clases y sin inventar ninguna.

   `grid-column: 1 / -1` no es decoración: el grupo es hijo de la REJILLA
   EXTERIOR (`#articulos-grid`) y lleva su propia `.pw-card-grid` dentro. Sin
   esto, el `repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr))` de §7 los
   colocaría uno al lado del otro en una celda de 16,5rem, y los grupos saldrían
   en dos columnas en vez de apilados. El grupo tiene que ocupar la fila entera.

   El título va un escalón por debajo de `.pw-h2` y por encima de `.pw-h3`:
   es una fila de catálogo —país, región, tipo—, no una sección de artículo.
   Mismo serif del sistema y un filete `--pw-border-soft`, más discreto que el
   del `h2` de la sección, para que la jerarquía del catálogo se lea de un
   vistazo.
   ========================================================================== */
.pw-catgroup {
  grid-column: 1 / -1;
  min-width: 0;
}

.pw-catgroup + .pw-catgroup {
  /* El `gap` de la rejilla exterior ya separa los grupos; esto solo ensancha
     esa separación, sin tocar la de la primera fila, que la marca el `h2`. */
  margin-top: var(--pw-space-5);
}

.pw-catgroup-title {
  margin: 0 0 var(--pw-space-3);
  padding-bottom: var(--pw-space-1);
  border-bottom: 1px solid var(--pw-border-soft);
  color: var(--pw-ink);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-lg);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
}


/* ==========================================================================
   v3 · 11 · IMPRESIÓN
   --------------------------------------------------------------------------
   El conmutador es un control: en papel no hay nada que conmutar, igual que
   el índice alfabético y las herramientas de la cabecera, que ya se ocultan en
   v2. Las fichas, en cambio, sí se imprimen enteras.
   ========================================================================== */
@media print {
  .pw-domains {
    display: none;
  }
}


/* ===== v4 · espectro ideológico y grafo de conexiones =====
 *
 * Dos piezas de lectura, dos ficheros nuevos (js/spectrum.js y js/graph.js) y
 * ninguna dependencia. Aquí solo vive su epidermis:
 *
 * - `#espectro` (portada) y `.pw-contextmap` (panel lateral de la ficha) son
 *   paneles con el mismo gramaje que `.pw-articleinfo`: superficie, borde de
 *   1px, `--pw-radius`, sombra corta SOLO en reposo. El rótulo repite el patrón
 *   `.pw-articleinfo-title`: superficie-2, filete y serif del sistema.
 * - Los nodos son `<a>` de SVG, así que el color de la tinta lo pone CSS, no un
 *   atributo: en reposo son superficie con borde y tinta de texto; al pasar el
 *   ratón o al enfocarse pasan a `--pw-link` con el texto a `--pw-on-accent`,
 *   que es el estado de enlace que ya usan `.pw-card` y `.pw-chip`. Nunca un
 *   color de acento sobre superficie redondeada, y nunca una sombra flotante al
 *   pasar el ratón: solo un halo de foco, como el resto del sitio.
 * - El nodo central del grafo sí es tinta maciza: es el artículo que se está
 *   leyendo, el mismo "estado actual = tinta" de `.pw-azindex-link[aria-current]`.
 * - Todo el color sale de tokens `--pw-*`, incluidos los que se pintan dentro
 *   del SVG, así que los cuatro temas funcionan sin tocar una sola regla más.
 */

/* --- 1 · Los dos paneles --- */

#espectro,
.pw-contextmap {
  min-width: 0;
  padding: var(--pw-space-4);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow-sm);
  color: var(--pw-ink);
  overflow: hidden;
}

/* El rótulo se pega a los bordes del panel: es su cabecera, no un título suelto
   dentro de una caja. El margen negativo cancela el padding del panel. */
#espectro > .pw-h2 {
  margin: calc(var(--pw-space-4) * -1) calc(var(--pw-space-4) * -1) var(--pw-space-4);
  padding: var(--pw-space-2) var(--pw-space-4);
  background: var(--pw-surface-2);
  border-bottom: 1px solid var(--pw-border);
}

.pw-contextmap {
  margin: var(--pw-space-4) 0 0;
  font-size: var(--pw-fs-sm);
}

.pw-contextmap-title {
  margin: calc(var(--pw-space-4) * -1) calc(var(--pw-space-4) * -1) var(--pw-space-3);
  padding: var(--pw-space-2) var(--pw-space-3);
  background: var(--pw-surface-2);
  border-bottom: 1px solid var(--pw-border);
  font-family: var(--pw-font-serif);
  font-size: var(--pw-fs-lg);
  font-weight: 600;
  line-height: var(--pw-lh-tight);
}

/* `hidden` gana siempre: un SVG con viewBox se dibuja aunque su contenedor
   esté oculto, y el script lo usa para retirar la sección cuando el mapa no
   tiene nada que enseñar. */
#espectro[hidden],
.pw-contextmap[hidden] {
  display: none !important;
}

/* El SVG manda en su tamaño (`viewBox` + `width:100%`): con `data-pw-size="xl"`
   a 375px la caja se estrecha, el mapa se encoge y nunca hay scroll horizontal. */
#espectro svg,
.pw-contextmap svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* --- 2 · Espectro: ejes, polos y nodos --- */

.pw-spectrum a,
.pw-graph a {
  cursor: pointer;
}

.pw-spectrum .pw-spectrum-axis {
  fill: none;
  stroke: var(--pw-border);
  stroke-width: 1.5;
}

.pw-spectrum .pw-spectrum-pole {
  fill: var(--pw-ink-muted);
  font-family: var(--pw-font-serif);
  font-size: 18px;
  font-weight: 600;
}

.pw-spectrum .pw-spectrum-label {
  fill: var(--pw-ink);
  font-family: var(--pw-font-sans);
  font-size: 18px;
  font-weight: 600;
}

/* Un mapa es un gráfico de dispersión y las etiquetas tienen que sobrevivir a lo
   que se cruza con ellas: los ejes y el círculo de un vecino en una nube
   cerrada. El contorno lleva el color de la superficie y se pinta DEBAJO del
   relleno (`paint-order`), así que las letras quedan recortadas sobre una
   línea de color de fondo en lugar de ser tachadas por ella. */
.pw-spectrum .pw-spectrum-pole,
.pw-spectrum .pw-spectrum-label {
  paint-order: stroke fill;
  stroke: var(--pw-surface);
  stroke-width: 4;
  stroke-linejoin: round;
}

.pw-spectrum a circle {
  fill: var(--pw-surface);
  stroke: var(--pw-border-strong);
  stroke-width: 1.5;
}

.pw-spectrum a circle,
.pw-spectrum a text {
  transition: fill var(--pw-transition), stroke var(--pw-transition);
}

.pw-spectrum a:hover circle,
.pw-spectrum a:focus-visible circle {
  fill: var(--pw-link);
  stroke: var(--pw-link-hover);
}

.pw-spectrum a:hover text,
.pw-spectrum a:focus-visible text {
  fill: var(--pw-on-accent);
  stroke: var(--pw-link);
}

.pw-spectrum a:focus-visible {
  outline: 2px solid var(--pw-focus);
  outline-offset: 2px;
}

.pw-spectrum a:focus-visible circle {
  filter: drop-shadow(0 0 4px var(--pw-focus-halo));
}

/* --- 3 · Grafo: aristas, centro y vecinos --- */

.pw-graph .pw-graph-edge {
  stroke: var(--pw-border);
  stroke-width: 1;
  stroke-linecap: round;
}

.pw-graph .pw-graph-label {
  fill: var(--pw-ink-soft);
  font-family: var(--pw-font-sans);
  font-size: 12px;
  font-weight: 600;
}

.pw-graph a circle {
  fill: var(--pw-surface);
  stroke: var(--pw-border-strong);
  stroke-width: 1.5;
}

.pw-graph a circle,
.pw-graph a text {
  transition: fill var(--pw-transition), stroke var(--pw-transition);
}

.pw-graph a:hover circle,
.pw-graph a:focus-visible circle {
  fill: var(--pw-link);
  stroke: var(--pw-link-hover);
}

.pw-graph a:hover text,
.pw-graph a:focus-visible text {
  fill: var(--pw-on-accent);
}

.pw-graph a:focus-visible {
  outline: 2px solid var(--pw-focus);
  outline-offset: 2px;
}

.pw-graph a:focus-visible circle {
  filter: drop-shadow(0 0 4px var(--pw-focus-halo));
}

/* El nodo central es "aquí estoy": tinta maciza en reposo, con el texto al
   color de fondo, igual que `.pw-azindex-link[aria-current="true"]`. */
.pw-graph .pw-graph-label-hub {
  fill: var(--pw-bg);
  font-size: 13px;
  font-weight: 700;
}

.pw-graph .pw-graph-hub circle {
  fill: var(--pw-ink);
  stroke: var(--pw-ink);
}

.pw-graph .pw-graph-hub:hover circle,
.pw-graph .pw-graph-hub:focus-visible circle {
  fill: var(--pw-link);
  stroke: var(--pw-link-hover);
}

/* --- 4 · Rejilla del panel lateral entre 1024 y 1199px --- */

@media (min-width: 1024px) and (max-width: 1199px) {
  /* Ahí `.pw-aside` es una rejilla de dos columnas y el grafo es más ancho que
     cualquiera de las dos: ocupa la fila entera, como `.pw-text`. */
  .pw-contextmap {
    grid-column: 1 / -1;
  }
}

/* --- 5 · Impresión --- */

@media print {
  /* Dos mapas de lectura, no contenido: en papel no aportan y sí rompen la
     caja de 18rem. La ficha y su índice sí se imprimen enteros. */
  #espectro,
  .pw-contextmap {
    display: none;
  }
}

/* ==========================================================================
 * v5 · Página del espectro (espectro.html) y su selector de ideologías
 * ========================================================================== */

/* --- 1 · Contenedor de la página dedicada --- */

.pw-espectro-page {
  max-width: 72rem;
  margin: 0 auto;
}

.pw-espectro-page .pw-section > .pw-h2:first-child {
  margin-top: 0;
}

.pw-espectro-intro {
  max-width: 52ch;
  margin: 0 0 var(--pw-space-6);
  font-size: 1.0625rem;
  line-height: var(--pw-lh-body);
  color: var(--pw-ink-muted);
}

/* --- 2 · Selector de ideologías (chips) --- */

.pw-spectrum-pick {
  margin-bottom: var(--pw-space-5);
}

.pw-spectrum-pick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pw-space-3);
  margin-bottom: var(--pw-space-3);
}

.pw-spectrum-pick-label {
  font-family: var(--pw-font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pw-ink);
}

.pw-spectrum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
}

.pw-spectrum-chip {
  border: 1px solid var(--pw-border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--pw-ink);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: var(--pw-space-2) var(--pw-space-3);
  cursor: pointer;
  transition: color var(--pw-transition), background-color var(--pw-transition),
    border-color var(--pw-transition);
}

.pw-spectrum-chip:hover,
.pw-spectrum-chip:focus-visible {
  border-color: var(--pw-link);
  color: var(--pw-link);
}

.pw-spectrum-chip[aria-checked="true"] {
  background: var(--pw-link);
  border-color: var(--pw-link);
  color: var(--pw-on-accent);
}

.pw-spectrum-chip[aria-checked="true"]:hover,
.pw-spectrum-chip[aria-checked="true"]:focus-visible {
  background: var(--pw-link-hover);
  border-color: var(--pw-link-hover);
  color: var(--pw-on-accent);
}

.pw-spectrum-chip:focus-visible {
  outline: 2px solid var(--pw-link);
  outline-offset: 2px;
}

/* --- 3 · Estado vacío (menos de dos ideologías marcadas) --- */

.pw-spectrum-empty {
  max-width: 52ch;
  margin: 0 0 var(--pw-space-6);
  padding: var(--pw-space-4) var(--pw-space-5);
  border: 1px dashed var(--pw-border-strong);
  border-radius: var(--pw-radius);
  background: var(--pw-wash);
  color: var(--pw-ink);
}

/* --- 4 · Nota al pie --- */

.pw-espectro-note {
  margin-top: var(--pw-space-6);
  color: var(--pw-ink-muted);
  font-size: 0.9375rem;
}

/* --- 5 · Impresión --- */

@media print {
  /* En su propia página el mapa SÍ es contenido y se imprime: se anula con más
     especificidad la regla v4 que lo ocultaba (pensada para la portada). El
     selector y los avisos son controles y no pintan. */
  body.pw-body-espectro #espectro {
    display: block;
  }

  .pw-spectrum-pick,
  .pw-spectrum-empty {
    display: none;
  }
}