/*
  Reconstruir la civilización — hoja de estilos general.
  Se aplica a toda página que NO sea la vista de libro (html.libro usa libro.css aparte).

  Organización (orden plano por componentes, sin @layer — ver nota en el informe de entrega):
    1. Reinicio y caja
    2. Variables — tema claro (por defecto)
    3. Variables — tema oscuro (sistema y forzado)
    4. Elementos base y tipografía
    5. Utilidades de accesibilidad
    6. Foco visible y movimiento reducido
    7. Contenedor y estructura de página
    8. Cabecera
    9. Buscador de cabecera/portada/búsqueda y resultados rápidos
    10. Menú y selector de idioma
    11. Pie
    12. Migas de pan
    13. Etiquetas (nivel, estado, traducción)
    14. Avisos
    15. Botones y acciones
    16. Tarjetas (carpetas/dominios)
    17. Lista de artículos
    18. Bloques genéricos
    19. Portada
    20. Carpeta
    21. Artículo: rejilla e índice de página
    22. Prosa compartida (.contenido-articulo y .prosa): tipografía, tablas, mark
    23. Acciones dentro del artículo (titulo-acciones, tabla-acciones)
    24. Relaciones
    25. Buscar
    26. Descargas
    27. Acerca
    28. Raíz y 404
    29. Aviso flotante (JS)
    30. Impresión (@media print)
*/

/* ===== 1. Reinicio y caja ===== */

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

html {
  font-size: 106.25%; /* 17px si el usuario no ha cambiado el tamaño base del navegador */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd,
figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
}

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

a {
  color: inherit;
}

button, input, select {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ===== 2. Variables — tema claro (por defecto) ===== */

:root {
  color-scheme: light;

  /* Paleta de marca */
  --color-marca: #253951;
  --color-marca-fuerte: #1a2a3c;
  --color-marca-texto: #f2f5f9;
  --color-acento: #f3a63a;
  --color-acento-fuerte: #e0932a;
  --color-acento-texto: #253951;
  --color-foco: var(--color-acento);

  /* Superficies y texto */
  --color-fondo: #ffffff;
  --color-superficie: #f4f6f9;
  --color-superficie-activa: #e9edf3;
  --color-borde: #dde3ea;
  --color-texto: #1b2430;
  --color-texto-suave: #526070;
  --color-enlace: #1d4f8c;
  --color-sombra: 20 30 45;

  /* Etiquetas: nivel (escala del neutro al acento) */
  --nivel-0-bg: #eef1f5; --nivel-0-fg: #3c4753;
  --nivel-1-bg: #e2edfb; --nivel-1-fg: #1d4f8c;
  --nivel-2-bg: #dcf3ee; --nivel-2-fg: #0f6f61;
  --nivel-3-bg: #ece3fb; --nivel-3-fg: #5b3a9e;
  --nivel-4-bg: #fdead0; --nivel-4-fg: #8a5a10;

  /* Etiquetas: estado */
  --estado-borrador-bg: #fdf1d3; --estado-borrador-fg: #8f6208;
  --estado-revisado-bg: #e2edfb; --estado-revisado-fg: #1d4f8c;
  --estado-verificado-bg: #e0f5e6; --estado-verificado-fg: #1f7a34;

  /* Etiquetas: traducción */
  --traduccion-automatica-bg: #e7ecf2; --traduccion-automatica-fg: #46566a;
  --traduccion-revisada-bg: #e0f5e6; --traduccion-revisada-fg: #1f7a34;
  --traduccion-pendiente-bg: #eceff2; --traduccion-pendiente-fg: #5a6472;

  /* Avisos (borde lateral + fondo) */
  --aviso-ambar-borde: #b9791b; --aviso-ambar-bg: #fdf6e8;
  --aviso-rojo-borde: #b3261e; --aviso-rojo-bg: #fbebea;
  --aviso-azul-borde: #1d4f8c; --aviso-azul-bg: #eaf1fb;

  /* Resaltado de texto */
  --marca-resalte-bg: #fff3b0;
  --verificar-bg: #fdecc8;
  --verificar-borde: #b9791b;

  /* Estructura */
  --radio: 0.5rem;
  --radio-mini: 0.35rem;
  --radio-grande: 0.85rem;
  --sombra: 0 1px 2px rgb(var(--color-sombra) / 0.08), 0 4px 12px rgb(var(--color-sombra) / 0.08);
  --ancho-contenedor: 74rem;
  --medida-lectura: 72ch;
  --ancho-indice: 15.5rem;
  --altura-cabecera: 3.75rem;
  --duracion: 150ms;
  --espacio-borde-foco: 2px;

  /* Tipografía */
  --fuente-sistema: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --fuente-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

/* ===== 3. Variables — tema oscuro ===== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --color-marca-fuerte: #14202e;
    --color-acento-fuerte: #ffb454;

    --color-fondo: #0f1822;
    --color-superficie: #172231;
    --color-superficie-activa: #1e2b3c;
    --color-borde: #2a3a4d;
    --color-texto: #e6ebf1;
    --color-texto-suave: #a3afbd;
    --color-enlace: #7fb0ea;
    --color-sombra: 0 0 0;

    --nivel-0-bg: #29323d; --nivel-0-fg: #b9c3cf;
    --nivel-1-bg: #1d2e42; --nivel-1-fg: #8fb8ea;
    --nivel-2-bg: #123430; --nivel-2-fg: #7ad9c4;
    --nivel-3-bg: #2b2143; --nivel-3-fg: #c2a8f5;
    --nivel-4-bg: #3a2a12; --nivel-4-fg: #f3c680;

    --estado-borrador-bg: #3a2c10; --estado-borrador-fg: #f0c467;
    --estado-revisado-bg: #1d2e42; --estado-revisado-fg: #8fb8ea;
    --estado-verificado-bg: #163021; --estado-verificado-fg: #82d99a;

    --traduccion-automatica-bg: #222c38; --traduccion-automatica-fg: #a7b6c8;
    --traduccion-revisada-bg: #163021; --traduccion-revisada-fg: #82d99a;
    --traduccion-pendiente-bg: #232a33; --traduccion-pendiente-fg: #9aa4b0;

    --aviso-ambar-borde: #e0a83e; --aviso-ambar-bg: #332a15;
    --aviso-rojo-borde: #e5766d; --aviso-rojo-bg: #3a1f1d;
    --aviso-azul-borde: #6ea3e0; --aviso-azul-bg: #1c2b3d;

    --marca-resalte-bg: #5a4a12;
    --verificar-bg: #3a2f16;
    --verificar-borde: #e0a83e;
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --color-marca-fuerte: #14202e;
  --color-acento-fuerte: #ffb454;

  --color-fondo: #0f1822;
  --color-superficie: #172231;
  --color-superficie-activa: #1e2b3c;
  --color-borde: #2a3a4d;
  --color-texto: #e6ebf1;
  --color-texto-suave: #a3afbd;
  --color-enlace: #7fb0ea;
  --color-sombra: 0 0 0;

  --nivel-0-bg: #29323d; --nivel-0-fg: #b9c3cf;
  --nivel-1-bg: #1d2e42; --nivel-1-fg: #8fb8ea;
  --nivel-2-bg: #123430; --nivel-2-fg: #7ad9c4;
  --nivel-3-bg: #2b2143; --nivel-3-fg: #c2a8f5;
  --nivel-4-bg: #3a2a12; --nivel-4-fg: #f3c680;

  --estado-borrador-bg: #3a2c10; --estado-borrador-fg: #f0c467;
  --estado-revisado-bg: #1d2e42; --estado-revisado-fg: #8fb8ea;
  --estado-verificado-bg: #163021; --estado-verificado-fg: #82d99a;

  --traduccion-automatica-bg: #222c38; --traduccion-automatica-fg: #a7b6c8;
  --traduccion-revisada-bg: #163021; --traduccion-revisada-fg: #82d99a;
  --traduccion-pendiente-bg: #232a33; --traduccion-pendiente-fg: #9aa4b0;

  --aviso-ambar-borde: #e0a83e; --aviso-ambar-bg: #332a15;
  --aviso-rojo-borde: #e5766d; --aviso-rojo-bg: #3a1f1d;
  --aviso-azul-borde: #6ea3e0; --aviso-azul-bg: #1c2b3d;

  --marca-resalte-bg: #5a4a12;
  --verificar-bg: #3a2f16;
  --verificar-borde: #e0a83e;
}

/* ===== 4. Elementos base y tipografía ===== */

body {
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-sistema);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > .principal {
  flex: 1 0 auto;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-texto);
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

a {
  color: var(--color-enlace);
  text-decoration-thickness: from-font;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong { font-weight: 700; }
em { font-style: italic; }

kbd {
  font-family: var(--fuente-mono);
}

hr {
  border: none;
  border-block-start: 1px solid var(--color-borde);
  margin-block: 2rem;
}

/* ===== 5. Utilidades de accesibilidad ===== */

.visualmente-oculto {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: -3rem;
  z-index: 1000;
  background: var(--color-acento);
  color: var(--color-acento-texto);
  padding: 0.6rem 1rem;
  border-radius: var(--radio);
  font-weight: 700;
  text-decoration: none;
  transition: inset-block-start var(--duracion) ease;
}

.saltar:focus {
  inset-block-start: 0.5rem;
}

/* ===== 6. Foco visible y movimiento reducido ===== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--espacio-borde-foco) solid var(--color-foco);
  outline-offset: 2px;
  border-radius: var(--radio-mini);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===== 7. Contenedor y estructura de página ===== */

.principal {
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 1.75rem 3.5rem;
}

@media (min-width: 700px) {
  .principal {
    padding-inline: 2rem;
  }
}

/* ===== 8. Cabecera ===== */

.cabecera {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--color-marca);
  color: var(--color-marca-texto);
  border-block-end: 1px solid rgb(0 0 0 / 0.15);
}

.cabecera-interior {
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding: 0.6rem 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-marca-texto);
  text-decoration: none;
  font-weight: 700;
  margin-inline-end: auto;
}

.marca-logo {
  border-radius: 50%;
}

.marca-nombre {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

@media (max-width: 479.98px) {
  .marca-nombre {
    display: none;
  }
}

/* ===== 9. Buscador de cabecera/portada/búsqueda y resultados rápidos ===== */

form[data-buscador] {
  position: relative;
}

.buscador-cabecera {
  display: flex;
  align-items: center;
  order: 3;
  flex: 1 1 100%;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radio);
}

.buscador-cabecera input {
  flex: 1;
  background: var(--color-fondo);
  color: var(--color-texto);
  border: none;
  border-radius: calc(var(--radio) - 1px);
  padding-block: 0.5rem;
  padding-inline: 0.7rem 2.2rem;
  min-width: 0;
}

.buscador-cabecera .atajo {
  position: absolute;
  inset-inline-end: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-mini);
  padding: 0.05em 0.4em;
  font-size: 0.75rem;
  line-height: 1.4;
}

@media (min-width: 700px) {
  .buscador-cabecera {
    order: 2;
    flex: 1 1 auto;
    max-width: 22rem;
  }
}

@media (max-width: 699.98px) {
  .buscador-cabecera .atajo {
    display: none;
  }
}

.buscador-portada,
.busqueda-formulario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.buscador-portada input,
.busqueda-formulario input {
  flex: 1 1 16rem;
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
}

.busqueda-formulario input {
  flex-basis: 100%;
}

/* Resultados rápidos bajo cualquier form[data-buscador] (el form es el contenedor posicionado) */
.resultados-rapidos {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 0.35rem);
  z-index: 110;
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.35rem;
}

.resultados-rapidos[hidden] {
  display: none;
}

.resultado-rapido {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radio-mini);
  text-decoration: none;
  color: var(--color-texto);
}

.resultado-rapido:hover,
.resultado-rapido[aria-selected="true"] {
  background: var(--color-superficie);
}

.resultado-rapido-titulo {
  font-weight: 600;
}

.resultado-rapido-migas {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

.resultado-rapido-todos {
  text-align: center;
  font-weight: 600;
  color: var(--color-enlace);
  border-block-start: 1px solid var(--color-borde);
  margin-block-start: 0.25rem;
  padding-block-start: 0.6rem;
}

/* ===== 10. Menú y selector de idioma ===== */

.menu {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  order: 2;
  margin-inline-start: auto;
}

@media (min-width: 700px) {
  .menu {
    order: 3;
    margin-inline-start: 0;
  }
}

.menu-enlace {
  color: var(--color-marca-texto);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding-block: 0.25rem;
  border-block-end: 2px solid transparent;
}

.menu-enlace:hover {
  border-block-end-color: rgb(255 255 255 / 0.5);
}

.menu-enlace[aria-current="page"] {
  border-block-end-color: var(--color-acento);
}

.selector-idioma {
  position: relative;
}

.selector-idioma summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-marca-texto);
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radio-mini);
  padding: 0.25rem 0.55rem;
}

.selector-idioma summary::-webkit-details-marker {
  display: none;
}

.selector-idioma summary::after {
  content: "▾";
  margin-inline-start: 0.3em;
  font-size: 0.75em;
}

.selector-idioma[open] summary::after {
  content: "▴";
}

.selector-idioma ul {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.4rem);
  z-index: 110;
  list-style: none;
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.35rem;
  min-width: 9rem;
}

.selector-idioma li a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radio-mini);
  color: var(--color-texto);
  text-decoration: none;
}

.selector-idioma li a:hover {
  background: var(--color-superficie);
}

.boton-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: transparent;
  color: var(--color-marca-texto);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  cursor: pointer;
}

.boton-tema:hover {
  background: rgb(255 255 255 / 0.12);
}

/* ===== 11. Pie ===== */

.pie {
  border-block-start: 1px solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-texto-suave);
}

.pie-interior {
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding: 1.75rem 16px;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}

@media (min-width: 700px) {
  .pie-interior {
    padding-inline: 2rem;
  }
}

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

.pie-edicion code {
  font-family: var(--fuente-mono);
  font-size: 0.85em;
}

/* ===== 12. Migas de pan ===== */

.migas {
  margin-block-end: 1.25rem;
  font-size: 0.88rem;
  color: var(--color-texto-suave);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0.35rem;
}

.migas li:not([aria-current]) a {
  color: var(--color-enlace);
  text-decoration: none;
}

.migas li:not([aria-current]) a:hover {
  text-decoration: underline;
}

.migas li:not(:last-child)::after {
  content: "/";
  margin-inline-start: 0.35rem;
  color: var(--color-texto-suave);
}

.migas li[aria-current="page"] {
  color: var(--color-texto);
  font-weight: 600;
}

/* ===== 13. Etiquetas (nivel, estado, traducción) ===== */

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0.4rem;
  margin-block-start: 0.6rem;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.65em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

a.etiqueta:hover,
a.etiqueta:focus-visible {
  text-decoration: underline;
}

.etiqueta-nivel.nivel-0 { background: var(--nivel-0-bg); color: var(--nivel-0-fg); }
.etiqueta-nivel.nivel-1 { background: var(--nivel-1-bg); color: var(--nivel-1-fg); }
.etiqueta-nivel.nivel-2 { background: var(--nivel-2-bg); color: var(--nivel-2-fg); }
.etiqueta-nivel.nivel-3 { background: var(--nivel-3-bg); color: var(--nivel-3-fg); }
.etiqueta-nivel.nivel-4 { background: var(--nivel-4-bg); color: var(--nivel-4-fg); }

.etiqueta-estado.estado-borrador { background: var(--estado-borrador-bg); color: var(--estado-borrador-fg); }
.etiqueta-estado.estado-revisado { background: var(--estado-revisado-bg); color: var(--estado-revisado-fg); }
.etiqueta-estado.estado-verificado { background: var(--estado-verificado-bg); color: var(--estado-verificado-fg); }

.etiqueta-traduccion.traduccion-automatica { background: var(--traduccion-automatica-bg); color: var(--traduccion-automatica-fg); }
.etiqueta-traduccion.traduccion-revisada { background: var(--traduccion-revisada-bg); color: var(--traduccion-revisada-fg); }
.etiqueta-traduccion.traduccion-pendiente { background: var(--traduccion-pendiente-bg); color: var(--traduccion-pendiente-fg); }

/* Etiqueta de nivel usada suelta (tabla de "Acerca", pendientes de carpeta) */
.etiqueta-nivel {
  font-variant-numeric: tabular-nums;
}

/* ===== 14. Avisos ===== */

.aviso {
  border-inline-start: 4px solid var(--color-borde);
  background: var(--color-superficie);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 0.85rem 1rem;
  margin-block: 1rem;
}

.aviso p {
  margin: 0;
}

.aviso-titulo {
  margin-inline-end: 0.35em;
}

.aviso a {
  font-weight: 600;
  color: var(--color-enlace);
}

.aviso-borrador,
.aviso-desactualizada {
  border-inline-start-color: var(--aviso-ambar-borde);
  background: var(--aviso-ambar-bg);
}

.aviso-seguridad {
  border-inline-start-color: var(--aviso-rojo-borde);
  background: var(--aviso-rojo-bg);
}

.aviso-traduccion,
.aviso-sin-traducir,
.aviso-info {
  border-inline-start-color: var(--aviso-azul-borde);
  background: var(--aviso-azul-bg);
}

/* ===== 15. Botones y acciones ===== */

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block: 1.25rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 1.1em;
  background: var(--color-superficie);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duracion) ease, border-color var(--duracion) ease, transform var(--duracion) ease;
}

.boton:hover {
  background: var(--color-superficie-activa);
  border-color: var(--color-texto-suave);
}

.boton:active {
  transform: translateY(1px);
}

.boton-primario {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-acento-texto);
}

.boton-primario:hover {
  background: var(--color-acento-fuerte);
  border-color: var(--color-acento-fuerte);
}

.boton-discreto {
  background: transparent;
  border-color: transparent;
  color: var(--color-enlace);
}

.boton-discreto:hover {
  background: var(--color-superficie);
}

.boton-mini {
  padding: 0.3em 0.7em;
  font-size: 0.8rem;
}

.peso {
  color: var(--color-texto-suave);
  font-weight: 400;
  font-size: 0.85em;
  margin-inline-start: 0.15em;
}

/* ===== 16. Tarjetas (carpetas/dominios) ===== */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  list-style: none;
}

.tarjeta {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  background: var(--color-fondo);
  transition: border-color var(--duracion) ease, box-shadow var(--duracion) ease, transform var(--duracion) ease;
}

.tarjeta:hover {
  border-color: var(--color-enlace);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.tarjeta-enlace {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  height: 100%;
  text-decoration: none;
  color: var(--color-texto);
}

.tarjeta-numero {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-acento-fuerte);
  font-variant-numeric: tabular-nums;
}

.tarjeta-titulo {
  font-weight: 700;
  font-size: 1.05rem;
}

.tarjeta-descripcion {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  flex: 1;
}

.tarjeta-recuento {
  color: var(--color-texto-suave);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.tarjeta-vacia .tarjeta-titulo,
.tarjeta-vacia .tarjeta-descripcion {
  color: var(--color-texto-suave);
}

.tarjeta-vacia {
  border-style: dashed;
}

/* ===== 17. Lista de artículos ===== */

.lista-articulos {
  list-style: none;
  border-block-start: 1px solid var(--color-borde);
}

.fila-articulo {
  padding-block: 1rem;
  border-block-end: 1px solid var(--color-borde);
}

.fila-titulo {
  display: inline-block;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--color-texto);
}

.fila-titulo:hover {
  color: var(--color-enlace);
  text-decoration: underline;
}

.fila-descripcion {
  color: var(--color-texto-suave);
  margin-block-start: 0.25rem;
}

/* ===== 18. Bloques genéricos ===== */

.bloque {
  margin-block: 2.5rem;
}

.bloque-titulo {
  margin-block-end: 0.25rem;
}

.bloque-explicacion {
  color: var(--color-texto-suave);
  margin-block-end: 1.25rem;
  max-width: var(--medida-lectura);
}

.vacio {
  color: var(--color-texto-suave);
  font-style: italic;
  padding-block: 1rem;
}

/* ===== 19. Portada ===== */

.portada {
  text-align: center;
  padding-block: 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.portada-logo {
  margin-block-end: 0.4rem;
}

.portada-titulo {
  font-size: 2.4rem;
}

.portada-lema {
  color: var(--color-texto-suave);
  font-size: 1.15rem;
  max-width: 40ch;
}

.buscador-portada {
  width: 100%;
  max-width: 34rem;
  margin-block-start: 0.5rem;
}

.buscador-portada button {
  flex: 0 0 auto;
}

.portada-cifras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  list-style: none;
  margin-block-start: 0.75rem;
  color: var(--color-texto-suave);
}

.portada-cifras strong {
  color: var(--color-texto);
  font-size: 1.2rem;
  margin-inline-end: 0.3em;
}

.tarjetas-dominios .tarjeta-enlace {
  padding: 1.3rem 1.3rem 1.1rem;
}

.llevatelo .descargas-destacadas {
  margin-block-start: 0.5rem;
}

.descargas-destacadas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.85rem;
}

.descarga {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-fondo);
  text-decoration: none;
  color: var(--color-texto);
  transition: border-color var(--duracion) ease, box-shadow var(--duracion) ease;
}

.descarga:hover {
  border-color: var(--color-enlace);
  box-shadow: var(--sombra);
}

.descarga-tipo {
  align-self: flex-start;
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  border-radius: var(--radio-mini);
  padding: 0.1em 0.5em;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--fuente-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.descarga-nombre {
  font-weight: 700;
}

.descarga-detalle {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.descarga-peso {
  color: var(--color-texto-suave);
  font-size: 0.8rem;
}

/* ===== 20. Carpeta ===== */

.carpeta-cabecera {
  margin-block-end: 0.5rem;
}

.carpeta-titulo {
  margin-block-end: 0.4rem;
}

.entradilla {
  color: var(--color-texto-suave);
  font-size: 1.05rem;
  max-width: var(--medida-lectura);
}

.recuento {
  color: var(--color-texto-suave);
  font-size: 0.88rem;
  margin-block-start: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.pendientes {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  background: var(--color-superficie);
}

.pendientes summary {
  cursor: pointer;
  font-weight: 700;
  list-style: revert;
}

.pendientes-numero {
  color: var(--color-texto-suave);
  font-weight: 400;
}

.pendientes-explicacion {
  color: var(--color-texto-suave);
  margin-block: 0.6rem;
}

.pendientes-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pendientes-lista li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.35rem;
  border-block-start: 1px dashed var(--color-borde);
}

.pendientes-lista li:first-child {
  border-block-start: none;
}

/* ===== 21. Artículo: rejilla e índice de página ===== */

.articulo-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 62.5em) {
  .articulo-rejilla {
    grid-template-columns: var(--ancho-indice) 1fr;
  }
}

.articulo {
  /* Evita que un hijo de grid con contenido ancho (pre, tabla) fuerce scroll horizontal de página */
  min-width: 0;
}

.indice-pagina {
  min-width: 0;
}

@media (min-width: 62.5em) {
  .indice-pagina {
    position: sticky;
    inset-block-start: calc(var(--altura-cabecera) + 1.25rem);
    max-height: calc(100vh - var(--altura-cabecera) - 2.5rem);
    overflow-y: auto;
  }
}

.indice-pagina-desplegable summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-block-end: 0.5rem;
}

@media (min-width: 62.5em) {
  .indice-pagina-desplegable summary {
    cursor: default;
    pointer-events: none;
  }
  .indice-pagina-desplegable summary::-webkit-details-marker {
    display: none;
  }
  .indice-pagina-desplegable summary::marker {
    content: "";
  }
}

.indice-pagina ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-inline-start: 2px solid var(--color-borde);
}

.indice-pagina li a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.8rem;
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  margin-inline-start: -2px;
}

.indice-pagina li a:hover {
  color: var(--color-texto);
}

.indice-pagina li a[aria-current="true"] {
  color: var(--color-enlace);
  border-inline-start-color: var(--color-acento);
  font-weight: 600;
}

.indice-pagina-h3 a {
  padding-inline-start: 1.6rem;
}

.articulo-cabecera {
  margin-block-end: 0.5rem;
}

.articulo-seccion {
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-block-end: 0.3rem;
}

.articulo-titulo {
  margin-block-end: 0.4rem;
}

/* ===== 22. Prosa compartida (.contenido-articulo y .prosa) ===== */

.contenido-articulo,
.prosa {
  max-width: var(--medida-lectura);
}

.contenido-articulo > :first-child,
.prosa > :first-child {
  margin-block-start: 0;
}

.contenido-articulo h2,
.contenido-articulo h3,
.contenido-articulo h4,
.prosa h2,
.prosa h3 {
  margin-block: 2rem 0.75rem;
  scroll-margin-block-start: calc(var(--altura-cabecera) + 1rem);
}

.contenido-articulo p,
.contenido-articulo ul,
.contenido-articulo ol,
.contenido-articulo blockquote,
.contenido-articulo pre,
.contenido-articulo .tabla,
.prosa p,
.prosa ul,
.prosa ol,
.prosa blockquote,
.prosa pre,
.prosa .tabla,
.prosa dl {
  margin-block: 1rem;
}

.contenido-articulo ul,
.contenido-articulo ol,
.prosa ul,
.prosa ol {
  padding-inline-start: 1.5rem;
}

.contenido-articulo li + li,
.prosa li + li {
  margin-block-start: 0.35rem;
}

.contenido-articulo blockquote,
.prosa blockquote {
  border-inline-start: 3px solid var(--color-borde);
  padding-inline-start: 1rem;
  color: var(--color-texto-suave);
  font-style: italic;
}

.contenido-articulo code,
.prosa code {
  background: var(--color-superficie);
  border-radius: 0.3em;
  padding: 0.15em 0.4em;
  font-family: var(--fuente-mono);
  font-size: 0.9em;
}

.contenido-articulo pre,
.prosa pre {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  line-height: 1.55;
}

.contenido-articulo pre code,
.prosa pre code {
  background: none;
  padding: 0;
  font-size: 0.88em;
}

.contenido-articulo hr,
.prosa hr {
  margin-block: 1.75rem;
}

/* Tablas */

.tabla {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.tabla table {
  min-width: 100%;
}

.tabla th,
.tabla td {
  padding: 0.55rem 0.85rem;
  text-align: start;
  border-block-end: 1px solid var(--color-borde);
  font-size: 0.94rem;
}

.tabla thead th {
  background: var(--color-superficie);
  font-weight: 700;
  white-space: nowrap;
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
  border-block-end: none;
}

.tabla-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.5rem;
  border-block-end: 1px solid var(--color-borde);
  background: var(--color-superficie);
}

/* Resaltado de texto */

mark {
  background: var(--marca-resalte-bg);
  color: var(--color-texto);
  border-radius: 0.2em;
  padding: 0 0.15em;
}

mark.verificar {
  background: var(--verificar-bg);
  text-decoration: underline dotted;
  text-decoration-color: var(--verificar-borde);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* ===== 23. Acciones dentro del artículo ===== */

.contenido-articulo :is(h2, h3, h4) {
  position: relative;
}

.titulo-acciones {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-inline-start: 0.5rem;
  vertical-align: middle;
  opacity: 0;
  transition: opacity var(--duracion) ease;
}

.contenido-articulo :is(h2, h3, h4):hover .titulo-acciones,
.contenido-articulo :is(h2, h3, h4):focus-within .titulo-acciones,
.titulo-acciones:focus-within {
  opacity: 1;
}

.ancla {
  font-weight: 400;
  font-size: 0.8em;
  color: var(--color-texto-suave);
  text-decoration: none;
}

.ancla:hover {
  color: var(--color-enlace);
}

.copiar-seccion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  padding: 0;
  font-size: 0.85em;
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-mini);
  cursor: pointer;
}

.copiar-seccion:hover {
  color: var(--color-texto);
  border-color: var(--color-texto-suave);
}

/* ===== 24. Relaciones ===== */

.relaciones {
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--color-borde);
  max-width: var(--medida-lectura);
}

.relaciones-titulo {
  font-size: 1.2rem;
  margin-block-end: 1rem;
}

.relaciones-grupo {
  margin-block: 1rem;
}

.relaciones-grupo h3 {
  font-size: 1rem;
  margin-block-end: 0.5rem;
}

.relaciones-grupo ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.relaciones-grupo a {
  font-weight: 600;
  text-decoration: none;
}

.relaciones-grupo a:hover {
  text-decoration: underline;
}

.relaciones-descripcion {
  color: var(--color-texto-suave);
}

/* ===== 25. Buscar ===== */

.busqueda {
  max-width: 52rem;
}

.busqueda-titulo {
  margin-block-end: 1.25rem;
}

.busqueda-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-block: 1rem;
}

.filtro {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.filtro-nombre {
  color: var(--color-texto-suave);
  font-weight: 600;
}

.filtro select {
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-mini);
  padding: 0.4rem 0.6rem;
  min-width: 10rem;
}

.busqueda-estado {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  margin-block: 1rem;
  min-height: 1.3em;
}

.resultados {
  list-style: none;
  border-block-start: 1px solid var(--color-borde);
}

.resultado {
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--color-borde);
}

.resultado-titulo {
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--color-texto);
}

.resultado-titulo:hover {
  color: var(--color-enlace);
  text-decoration: underline;
}

.resultado-migas {
  color: var(--color-texto-suave);
  font-size: 0.82rem;
  margin-block-start: 0.2rem;
}

.resultado-extracto {
  margin-block-start: 0.4rem;
  color: var(--color-texto-suave);
}

.resultado-extracto mark {
  color: var(--color-texto);
}

.resultado .etiquetas {
  margin-block-start: 0.5rem;
}

.cargar-mas {
  display: block;
  margin: 2rem auto 0;
}

.cargar-mas[hidden] {
  display: none;
}

/* ===== 26. Descargas ===== */

.descargas h2 {
  margin-block: 2rem 0.75rem;
}

.descargas.prosa {
  max-width: 60rem;
}

.prosa .descargas-destacadas {
  padding-inline-start: 0;
  list-style: none;
}

.prosa .descargas-destacadas > li {
  margin: 0;
}

.tabla-descargas th,
.tabla-descargas td {
  vertical-align: middle;
}

.tabla-descargas td {
  white-space: nowrap;
}

.nota {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  margin-block-start: 2rem;
}

/* ===== 27. Acerca ===== */

.acerca section {
  margin-block: 2.25rem;
}

.definiciones {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.definiciones dt {
  margin-block-end: 0.25rem;
}

.definiciones dd {
  color: var(--color-texto-suave);
  padding-inline-start: 0.1rem;
}

/* ===== 28. Raíz y 404 ===== */

.raiz {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 2.5rem 16px;
  text-align: center;
  background: var(--color-fondo);
  color: var(--color-texto);
}

.raiz-idiomas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
}

.raiz-idiomas a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.6rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--color-texto);
  min-width: 11rem;
  transition: border-color var(--duracion) ease, transform var(--duracion) ease;
}

.raiz-idiomas a:hover {
  border-color: var(--color-enlace);
  transform: translateY(-2px);
}

.raiz-idiomas strong {
  font-size: 1.1rem;
}

.raiz-idiomas span {
  color: var(--color-texto-suave);
  font-size: 0.88rem;
}

.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 34rem;
}

.error-404 h1 {
  font-size: 2.4rem;
}

.error-404 p {
  color: var(--color-texto-suave);
}

.error-404 .buscador-portada {
  margin-block-start: 0.5rem;
}

/* ===== 29. Aviso flotante (JS) ===== */

/* El propio div es la pastilla visible: el JS le pone el texto como contenido y alterna .visible */
.aviso-flotante {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 1.5rem;
  z-index: 200;
  width: fit-content;
  margin-inline: auto;
  max-width: calc(100vw - 2rem);
  background: var(--color-marca);
  color: var(--color-marca-texto);
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  box-shadow: var(--sombra);
  font-size: 0.9rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--duracion) ease, transform var(--duracion) ease;
}

.aviso-flotante.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== 30. Impresión ===== */

@media print {
  * {
    box-shadow: none !important;
  }

  html, body {
    background: #fff;
    color: #000;
  }

  .cabecera,
  .pie,
  .migas,
  .acciones,
  .indice-pagina,
  .titulo-acciones,
  .tabla-acciones,
  .resultados-rapidos,
  .buscador-cabecera,
  .buscador-portada,
  .busqueda-formulario,
  .aviso-flotante,
  .saltar {
    display: none !important;
  }

  .principal {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .articulo-rejilla {
    display: block;
  }

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

  .contenido-articulo a[href^="http"]::after,
  .prosa a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
    color: #333;
  }

  .contenido-articulo,
  .prosa {
    max-width: none;
  }

  .tabla,
  pre,
  .aviso,
  table,
  figure {
    break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
  }

  .aviso {
    border: 1px solid #999;
    border-inline-start-width: 4px;
    background: #fff;
  }

  mark {
    background: #eee;
  }

  mark.verificar {
    background: #eee;
    text-decoration: underline dotted;
    text-decoration-color: #000;
  }

  @page {
    size: A4;
    margin: 18mm 15mm 20mm;
  }
}