/* ==========================================================================
   Bronce Final — base
   Reset ligero, tipografía, layout y componentes transversales
   (chips, tarjetas, sheets, navegación, toggle de modo, botón de tema).
   Los estilos propios de cada vista viven en vistas.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset ligero
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

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

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

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* la página nunca scrollea en horizontal (§3) */
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
}

:target {
  scroll-margin-top: calc(var(--alto-cabecera) + var(--e5));
}

/* --------------------------------------------------------------------------
   2. Tipografía (Diseño.md §2)
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--bronce);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 1.5rem + 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem);
  line-height: 1.25;
}

h4 {
  font-size: 1.0625rem;
  line-height: 1.3;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--e4);
}

small,
.ui {
  font-family: var(--sans);
  font-size: 0.875rem;
}

strong,
b {
  font-weight: 600;
}

a {
  color: var(--egeo);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.06em;
  /* «El cargamento»: el subrayado engorda al pasar, sin mover la caja */
  transition: text-decoration-thickness var(--t-rapido) var(--curva);
}

a:hover {
  text-decoration-thickness: 0.12em;
}

/* Cita editorial: los bloques del guion en modo Ojear */
blockquote {
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Foco, saltos y utilidades
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--egeo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* El router enfoca el titular de cada vista (y el salto, #contenido) por
   código: son destinos con tabindex="-1" a los que el teclado no llega
   tabulando, así que el anillo solo aparecía como un recuadro sorpresa
   alrededor del título en cada carga con hash. El foco programático se
   mantiene (los lectores de pantalla lo necesitan); el anillo, no. */
.vista h1[tabindex="-1"]:focus,
.sheet__titulo:focus,
#contenido:focus {
  outline: none;
}

/* Affordance de las tiras con scroll horizontal oculto: el JS mantiene
   data-scroll="izq der" (componentes.js) y aquí se difumina el borde por el
   que hay más contenido. La máscara se ancla a la caja del contenedor, no al
   contenido, así que no viaja con el scroll. */
[data-scroll~="der"] {
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}

[data-scroll~="izq"] {
  mask-image: linear-gradient(90deg, transparent, #000 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
}

[data-scroll="izq der"] {
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.salto-contenido {
  position: absolute;
  left: var(--e3);
  top: var(--e3);
  z-index: 100;
  transform: translateY(-200%);
  padding: var(--e2) var(--e4);
  background: var(--bg-alzado);
  border: 1.5px solid var(--bronce);
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--tinta);
  transition: transform var(--t-rapido) var(--curva);
}

.salto-contenido:focus {
  transform: translateY(0);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* El botón de tema vive en la cabecera en escritorio y en el sheet «Más» en
   móvil. La clase se repite para ganar especificidad (0,2,0) a las reglas de
   componente que declaran su propio `display` más abajo —.boton-icono, en la
   más abajo en este mismo archivo—, que si no ganarían por orden de cascada. */
.solo-desktop.solo-desktop {
  display: none;
}

@media (min-width: 768px) {
  .solo-desktop.solo-desktop {
    display: grid;
  }
}

/* Botón que se lee como enlace (p. ej. «Ver más» del glosario) */
.enlace-mas {
  padding: 0;
  font-family: var(--sans);
  font-size: inherit;
  color: var(--egeo);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.aviso-error {
  padding-block: var(--e6);
}

/* Solo se ve sin JavaScript (dentro de <noscript>): §8 exige que el tour se
   lea entero igualmente, este aviso solo explica qué queda inactivo. */
.aviso-sinjs {
  margin: 0;
  padding: var(--e3) var(--e4);
  background: var(--bg-hundido);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--tinta);
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. Layout de vistas y columna de lectura
   -------------------------------------------------------------------------- */

.vista {
  padding-bottom: var(--e8);
}

.vista[hidden] {
  display: none !important;
}

.columna {
  width: 100%;
  max-width: var(--col-texto);
  margin-inline: auto;
  padding-inline: var(--e4);
}

.columna--ancha {
  max-width: 64rem;
}

@media (min-width: 768px) {
  .columna {
    padding-inline: var(--e5);
  }
}

/* Contenedor principal: deja hueco para la cabecera fija y la nav inferior */
.contenido {
  padding-top: var(--alto-cabecera);
  padding-bottom: calc(var(--alto-nav-inferior) + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   5. Cabecera y wordmark
   -------------------------------------------------------------------------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-inline: var(--e4);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

@supports not (backdrop-filter: blur(10px)) {
  .cabecera {
    background: var(--bg);
  }
}

.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  color: var(--bronce);
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--bronce-vivo);
}

@media (min-width: 768px) {
  .cabecera {
    padding-inline: var(--e5);
    gap: var(--e5);
  }

  .wordmark {
    font-size: 1.375rem;
  }
}

.cabecera__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e2);
}

/* Barra de progreso del tour (3px, marcas por acto) */
.progreso {
  position: fixed;
  top: var(--alto-cabecera);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 41;
  background: var(--bg-hundido);
  pointer-events: none;
}

.progreso__barra {
  height: 100%;
  width: 0;
  /* «El cargamento»: la barra se tiñe con el acto que se lee (--acento-acto
     lo escribe vista-tour.js en <html>; el mapa de acto→color, en vistas.css) */
  background: var(--acento-acto, var(--bronce));
  transform-origin: left;
  transition: width var(--t-rapido) linear,
    background-color var(--t-lento) var(--curva);
}

/* --------------------------------------------------------------------------
   6. Toggle de modo Ojear / Profundizar (Diseño.md §4.2)
   -------------------------------------------------------------------------- */

.toggle-modo {
  display: inline-flex;
  align-items: stretch;
  padding: 2px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--bg-alzado);
}

.toggle-modo__opcion {
  position: relative;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  padding: var(--e2) var(--e3);
  min-height: 32px;
  border-radius: 999px;
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: background var(--t-rapido) var(--curva),
    color var(--t-rapido) var(--curva);
}

/* La cápsula mide 32px para caber en la cabecera de 56px; el área de toque se
   amplía por arriba y por abajo hasta los 44px, sin mover nada y sin invadir
   la opción vecina (Diseño.md §8). */
.toggle-modo__opcion::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.toggle-modo__opcion:hover {
  color: var(--tinta);
}

.toggle-modo__opcion[aria-checked="true"] {
  background: var(--bronce);
  color: var(--bg);
  font-weight: 600;
}

@media (min-width: 480px) {
  .toggle-modo__opcion {
    padding: var(--e2) var(--e4);
    min-height: 36px;
  }
}

/* Micro-etiqueta bajo el toggle en la portada */
.toggle-pista {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   7. Botones
   -------------------------------------------------------------------------- */

.boton-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--tinta);
  transition: background var(--t-rapido) var(--curva),
    color var(--t-rapido) var(--curva);
}

.boton-icono:hover {
  background: var(--bg-hundido);
  color: var(--bronce);
}

.boton-icono svg {
  width: 24px;
  height: 24px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: var(--e2) var(--e5);
  border-radius: 999px;
  border: 1.5px solid var(--bronce);
  background: var(--bronce);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  /* «El cargamento»: brillo de bronce pulido que barre el botón en hover */
  position: relative;
  overflow: hidden;
  transition: background var(--t-rapido) var(--curva),
    border-color var(--t-rapido) var(--curva);
}

.boton::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.3) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 130% 0;
  pointer-events: none;
  transition: background-position 0.7s var(--curva);
}

.boton:hover {
  background: var(--bronce-vivo);
  border-color: var(--bronce-vivo);
}

.boton:hover::after {
  background-position: -50% 0;
}

/* El barrido es cosa del botón primario: en el secundario (fondo
   transparente) un destello blanco parecía un fallo de render. */
.boton--secundario::after {
  content: none;
}

.boton--secundario {
  background: transparent;
  color: var(--bronce);
  border-color: var(--linea);
}

.boton--secundario:hover {
  background: color-mix(in srgb, var(--bronce) 10%, transparent);
  border-color: var(--bronce);
  color: var(--bronce);
}

/* --------------------------------------------------------------------------
   8. Navegación (Diseño.md §4.3)
   -------------------------------------------------------------------------- */

/* Barra inferior (móvil, < 768) */
.nav-inferior {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  height: calc(var(--alto-nav-inferior) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg-alzado);
  border-top: 1px solid var(--linea);
}

.nav-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  padding-top: 4px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  line-height: 1.1;
  color: var(--tinta-suave);
  text-decoration: none;
  position: relative;
}

.nav-inferior__item svg {
  width: 24px;
  height: 24px;
}

.nav-inferior__item[aria-current="page"],
.nav-inferior__item.es-activo {
  color: var(--bronce);
}

.nav-inferior__item[aria-current="page"]::before,
.nav-inferior__item.es-activo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--bronce);
  border-radius: 2px;
}

/* Barra superior (≥ 768) */
.nav-superior {
  display: none;
}

@media (min-width: 768px) {
  .nav-inferior {
    display: none;
  }

  /* Con «Expediente» son siete ítems: entre 768 y ~1080 px no siempre caben,
     así que la tira scrollea en horizontal por dentro (salida autorizada por
     Diseño.md §3: la página nunca scrollea horizontal, la tira sí puede). */
  .nav-superior {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-superior::-webkit-scrollbar {
    display: none;
  }

  .nav-superior__item {
    position: relative;
    padding: var(--e2) var(--e3);
    font-family: var(--sans);
    font-size: 0.9375rem;
    color: var(--tinta-suave);
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
  }

  .nav-superior__item:hover {
    color: var(--tinta);
  }

  .nav-superior__item[aria-current="page"] {
    color: var(--bronce);
    font-weight: 500;
  }

  .nav-superior__item[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--e3);
    right: var(--e3);
    bottom: 0;
    height: 2px;
    background: var(--bronce);
    border-radius: 2px;
  }
}

/* --------------------------------------------------------------------------
   9. Chip de certeza (componente firma, Diseño.md §4.1)
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 2px 10px 2px 6px;
  border-radius: var(--radio-chip);
  border: 1.5px solid var(--chip-color, var(--tinta-suave));
  background: color-mix(in srgb, var(--chip-color, var(--tinta-suave)) 14%, transparent);
  color: var(--chip-color, var(--tinta-suave));
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
}

.chip svg {
  width: 14px;
  height: 14px;
  flex: none;
}

button.chip {
  position: relative;
  cursor: pointer;
  transition: background var(--t-rapido) var(--curva),
    transform var(--t-rapido) var(--curva);
}

/* El chip mide 26,5px de alto porque va dentro del texto; el área de toque se
   amplía por debajo hasta los 44px sin mover nada (Diseño.md §8). El inset se
   resuelve contra la caja de relleno (26,5 − 3 de borde = 23,5), así que hacen
   falta 10,5px por lado: 23,5 + 21 = 44,5. */
button.chip::after {
  content: "";
  position: absolute;
  inset: -10.5px -4px;
}

button.chip:hover {
  background: color-mix(in srgb, var(--chip-color) 24%, transparent);
  /* «El cargamento»: el chip crece un pelo al pasar; con reduced-motion no
     hay transición de transform (base.css §16 las restringe a la opacidad) */
  transform: scale(1.06);
}

.chip--verde { --chip-color: var(--certeza-verde); }
.chip--ambar { --chip-color: var(--certeza-ambar); }
.chip--azul  { --chip-color: var(--certeza-azul); }
.chip--rojo  { --chip-color: var(--certeza-rojo); }

/* La etiqueta cambia con el modo: los datos traen ambas */
.chip__ojear,
.chip__profundizar {
  display: none;
}

[data-modo="ojear"] .chip__ojear,
[data-modo="profundizar"] .chip__profundizar {
  display: inline;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* Popover explicativo del nivel de certeza */
.popover-certeza {
  position: absolute;
  z-index: 60;
  max-width: min(20rem, calc(100vw - 32px));
  padding: var(--e3) var(--e4);
  background: var(--bg-alzado);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--chip-color, var(--bronce));
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tinta);
}

.popover-certeza__titulo {
  display: block;
  font-weight: 600;
  color: var(--chip-color, var(--bronce));
  margin-bottom: var(--e1);
}

/* --------------------------------------------------------------------------
   10. Tarjetas (Diseño.md §4.4)
   -------------------------------------------------------------------------- */

.tarjeta {
  background: var(--bg-alzado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e4);
}

@media (min-width: 768px) {
  .tarjeta {
    padding: var(--e5);
  }
}

.fuente {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}

/* Pie de foto obligatorio (Diseño.md §4.5) */
figure {
  margin: 0;
}

figcaption {
  margin-top: var(--e2);
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}

figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  object-fit: cover;
  filter: sepia(0.15) contrast(1.02);
}

/* --------------------------------------------------------------------------
   11. Bloques de Profundizar (Diseño.md §4.2)
   -------------------------------------------------------------------------- */

.solo-profundizar {
  display: none;
}

/* Sin JavaScript no hay toggle de modo: se muestra todo, que es la lectura
   más completa y la única posible (Diseño.md §8). */
html:not(.js) .solo-profundizar {
  display: block;
}

[data-modo="profundizar"] .solo-profundizar {
  display: block;
  animation: revelar-bloque var(--t-medio) var(--curva);
}

/* Una fila de tabla no puede volver como block: rompería la tabla (la 7.ª
   fila del balance del veredicto solo se muestra en Profundizar). */
html:not(.js) tr.solo-profundizar,
[data-modo="profundizar"] tr.solo-profundizar {
  display: table-row;
}

@keyframes revelar-bloque {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

details.solo-profundizar,
details.bloque {
  margin-top: var(--e4);
  background: var(--bg-alzado);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--bronce);
  border-radius: var(--radio);
  overflow: hidden;
}

details.solo-profundizar > summary,
details.bloque > summary {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bronce);
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details.solo-profundizar > summary::before,
details.bloque > summary::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  transition: transform var(--t-rapido) var(--curva);
  /* cruz «＋» que gira a «×» al abrir */
  clip-path: polygon(
    43% 0, 57% 0, 57% 43%, 100% 43%, 100% 57%, 57% 57%,
    57% 100%, 43% 100%, 43% 57%, 0 57%, 0 43%, 43% 43%
  );
}

details[open].solo-profundizar > summary::before,
details[open].bloque > summary::before {
  transform: rotate(45deg);
}

details.solo-profundizar > summary:hover,
details.bloque > summary:hover {
  background: color-mix(in srgb, var(--bronce) 8%, transparent);
}

.details__cuerpo {
  padding: 0 var(--e4) var(--e4);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.details__cuerpo > * + * {
  margin-top: var(--e3);
}

/* --------------------------------------------------------------------------
   12. Sheets (móvil) y paneles laterales (≥1080) — Diseño.md §4.4
   -------------------------------------------------------------------------- */

.capa-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Durante los 300 ms de la salida el nodo sigue en el DOM: sin esto, el velo
   invisible se tragaba el primer toque tras cerrar un sheet. */
.capa-modal:not(.es-visible) {
  pointer-events: none;
}

.capa-modal__velo {
  position: absolute;
  inset: 0;
  background: rgb(20 14 8 / 0.45);
  opacity: 0;
  transition: opacity var(--t-medio) var(--curva);
}

.capa-modal.es-visible .capa-modal__velo {
  opacity: 1;
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 40rem;
  max-height: 75svh;
  display: flex;
  flex-direction: column;
  background: var(--bg-alzado);
  border-top: 1px solid var(--linea);
  border-radius: var(--radio) var(--radio) 0 0;
  box-shadow: var(--sombra);
  transform: translateY(100%);
  transition: transform var(--t-medio) var(--curva);
}

.capa-modal.es-visible .sheet {
  transform: translateY(0);
}

.sheet__asa {
  flex: none;
  width: 40px;
  height: 4px;
  margin: var(--e2) auto 0;
  border-radius: 999px;
  background: var(--linea);
}

.sheet__cabecera {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4) 0;
}

.sheet__titulo {
  font-size: 1.25rem;
  line-height: 1.2;
  flex: 1;
}

.sheet__cerrar {
  flex: none;
  margin: -6px -6px 0 0;
}

.sheet__cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--e4);
  padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px));
}

.sheet__cuerpo > * + * {
  margin-top: var(--e3);
}

/* Lista de enlaces del sheet «Más» */
.lista-enlaces {
  list-style: none;
  margin: 0;
}

.lista-enlaces a,
.lista-enlaces button {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 48px;
  padding: var(--e2) var(--e1);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  text-align: left;
}

.lista-enlaces li:last-child a,
.lista-enlaces li:last-child button {
  border-bottom: none;
}

.lista-enlaces svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--bronce);
}

.lista-enlaces a:hover,
.lista-enlaces button:hover {
  color: var(--bronce);
}

/* ≥1080: panel lateral derecho de 400px */
@media (min-width: 1080px) {
  .capa-modal {
    align-items: stretch;
    justify-content: flex-end;
  }

  .sheet {
    width: 400px;
    max-width: 400px;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-top: none;
    border-left: 1px solid var(--linea);
    transform: translateX(100%);
  }

  .capa-modal.es-visible .sheet {
    transform: translateX(0);
  }

  .sheet__asa {
    display: none;
  }

  .sheet__cabecera {
    padding-top: var(--e5);
  }
}

/* --------------------------------------------------------------------------
   13. Glosario (tooltips)
   -------------------------------------------------------------------------- */

dfn[data-termino] {
  position: relative;
  font-style: normal;
  border-bottom: 1px dashed var(--bronce);
  cursor: help;
}

/* Los términos del glosario y las llamadas de cita son texto en línea (~28px
   de caja) convertidos en botón: el área de toque se amplía sin mover nada,
   como en los chips (Diseño.md §8). */
dfn[data-termino]::after,
.cita[data-cita]::after {
  content: "";
  position: absolute;
  inset: -8px -3px;
}

.cita[data-cita] {
  position: relative;
}

.tooltip-glosario {
  position: absolute;
  z-index: 60;
  max-width: min(22rem, calc(100vw - 32px));
  padding: var(--e3) var(--e4);
  background: var(--bg-alzado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
}

.tooltip-glosario__termino {
  display: block;
  font-weight: 600;
  color: var(--bronce);
}

/* --------------------------------------------------------------------------
   14. Pie
   -------------------------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--linea);
  margin-top: var(--e8);
  padding: var(--e6) 0 var(--e7);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.pie p + p {
  margin-top: var(--e2);
}

/* --------------------------------------------------------------------------
   15. Revelado al hacer scroll (Diseño.md §5)
   -------------------------------------------------------------------------- */

/* Solo se oculta si hay JavaScript para volver a mostrarlo: sin JS el tour
   tiene que leerse entero (Diseño.md §8). */
.js .revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-lento) var(--curva),
    transform var(--t-lento) var(--curva);
}

.js .revelar.es-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   16. prefers-reduced-motion (obligatorio, Diseño.md §5)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* `transition-property: opacity` es imprescindible junto al `duration`: el
     valor inicial de la propiedad es `all`, así que fijar solo la duración
     encendería transiciones donde no las había y animaría los `transform` que
     el JS escribe (el arrastre y el pellizco del mapa). Restringirlo a la
     opacidad es además lo que pide Diseño.md §5 al pie de la letra:
     «sustituir todos los transforms por transiciones de opacidad ≤150ms». */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }

  .js .revelar {
    transform: none;
  }

  .sheet {
    transition-property: opacity;
    transform: none;
    opacity: 0;
  }

  .capa-modal.es-visible .sheet {
    transform: none;
    opacity: 1;
  }
}