/* Paquete generado por herramientas/empaquetar-css.js a partir de las hojas numeradas. No se edita a mano. */
/* ===== css/0-movimiento.css ===== */
/*
 * Tokens de movimiento del atlas.
 * Es el único sitio donde se fijan duraciones, curvas y distancias de las animaciones: Las hojas numeradas, la hoja de las páginas estáticas (seo.css) y el código (js/interfaz/Movimiento.js) leen estas variables y no escriben cifras propias.
 * Va primera en el paquete de la aplicación y antes de seo.css en las páginas estáticas, de modo que las dos partes del sitio se mueven igual.
 *
 * Reglas del movimiento:
 *   - Solo se animan transform y opacity, que el navegador resuelve sin recalcular la disposición ni mover el contenido (sin CLS).
 *   - Interfaz entre 150 y 400 ms con curva de salida suave; la salida dura menos que la entrada.
 *   - El lienzo del visor DICOM no se anima nunca.
 *   - Con prefers-reduced-motion: reduce todo queda quieto: Las distancias pasan a cero y las duraciones a un instante.
 */

:root {
  /* Duraciones: Pulsación y estado (rápida), desplegables, tarjetas y cambio de sección (normal), ventanas, menú lateral y barras (lenta). */
  --mov-rapida: 150ms;
  --mov-normal: 220ms;
  --mov-lenta: 320ms;
  /* Cuenta de las cifras de la portada, el tope de la escala de duraciones. */
  --mov-cuenta: 400ms;
  /* Retardo entre tarjetas escalonadas; el escalón se corta en la sexta para que el total no pase de 400 ms. */
  --mov-escalon: 40ms;

  /* Curvas: La de salida es la firma del atlas (entrar y responder); la de dentro mueve algo que ya está en pantalla, como el marcador de una escala. */
  --mov-curva: cubic-bezier(0.16, 1, 0.3, 1);
  --mov-curva-dentro: cubic-bezier(0.65, 0, 0.35, 1);

  /* Distancias: Cuánto sube lo que entra, cuánto se eleva una tarjeta y cuánto se hunde un botón al pulsarlo. */
  --mov-desplazamiento: 8px;
  --mov-elevacion: -3px;
  --mov-pulsacion: 0.97;
}

/* Menos movimiento: Nada se desplaza ni se escala, y todo cambio de estado es inmediato. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-desplazamiento: 0px;
    --mov-elevacion: 0px;
    --mov-pulsacion: 1;
    --mov-escalon: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ===== css/1-base.css ===== */
/*
 * Cimientos de la hoja de estilo.
 * Reúne las variables de color y de espacio de los dos temas, la barra de desplazamiento y la barra de progreso de lectura.
 * Se carga en primer lugar porque todo lo demás depende de sus variables.
 */

/* ---------- Tokens ---------- */
:root {
  /* Marca */
  --marca-500: #0e7490;
  --marca-600: #0b6178;
  --marca-700: #155e6e;
  --marca-400: #22a6bd;
  /* La marca como tinta de texto o de ícono. Se separa de --marca-500 porque en el tema
     oscuro el teal de marca pierde contraste y hay que sustituirlo por el paso claro.
     Medido: 5.36 a 1 sobre superficie y 4.53 a 1 sobre el fondo de la pestaña activa. */
  --marca-tinta: #0e7490;
  /* Dirección «sala de lectura»: Las acciones son de un solo tono plano. El token se conserva con su nombre
     para no tocar cada regla que lo usa, pero ya no es un degradado. */
  --marca-grad: var(--marca-500);

  /* Superficies (claro) */
  --fondo: #eef2f7;
  --fondo-2: #e6ecf3;
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --superficie-3: #eef3f8;

  /* Texto: 16.5, 7.6 y 5.69 a 1 de contraste sobre superficie. La tinta terciaria
     se midió también sobre superficie 2 (5.39), fondo (5.06) y fondo 2 (4.78), que son
     los otros fondos donde aparece como texto, para no bajar de 4.5 a 1 en ninguno. */
  --tinta: #14202e;
  --tinta-2: #43566a;
  --tinta-3: #55697b;
  /* La tinta intensa coincide con la tinta en el tema claro y sube a blanco puro en el oscuro, para los rótulos que degradan hacia el color de marca. */
  --tinta-intensa: #14202e;

  /* Bordes y sombras */
  --borde: #dde5ee;
  --borde-2: #e9eef4;
  --anillo: rgba(14, 116, 144, 0.35);
  /* Superficies planas: El borde separa y la sombra solo marca lo que flota (menús, ventanas y botones flotantes). */
  --sombra-sm: none;
  --sombra-md: 0 2px 8px rgba(16, 40, 60, 0.12);
  --sombra-lg: 0 12px 32px rgba(16, 40, 60, 0.18);
  --sombra-marca: none;

  /* Estados. Cada tinta está medida sobre su fondo suave y sobre superficie,
     que son los dos fondos donde se usa como texto:
       exito   4.57 sobre suave, 5.02 sobre superficie
       alerta  4.51 sobre suave, 5.02 sobre superficie
       peligro 5.30 sobre suave, 6.47 sobre superficie
       info    6.41 sobre suave, 7.90 sobre superficie */
  --exito: #15803d;
  --exito-suave: #dcfce7;
  --alerta: #b45309;
  --alerta-suave: #fef3c7;
  --peligro: #b91c1c;
  --peligro-suave: #fee2e2;
  --info: #4338ca;
  --info-suave: #e0e7ff;
  /* Variante de la alerta pensada como tinta de texto, que se aclara en el tema oscuro porque el ámbar de base pierde contraste sobre las superficies oscuras. */
  --alerta-tinta: #b45309;
  /* Opacidad de la mezcla de las zonas de la escala de las calculadoras. Es un token
     para que el tema oscuro pueda subirla sin duplicar las reglas de las zonas. */
  --mezcla-zona: 55%;

  /* Modalidades (color por técnica) */
  --rx: #6d28d9;      --rx-suave: #ede9fe;
  --tc: #0369a1;      --tc-suave: #e0f2fe;
  --rm: #be185d;      --rm-suave: #fce7f3;
  --us: #047857;      --us-suave: #d1fae5;
  /* Tinta de la modalidad TC para texto e íconos, aclarada en el tema oscuro por la misma razón de contraste que la alerta. */
  --tc-tinta: #0369a1;

  /* Negro de negatoscopio: Reservado al marco de las imágenes radiológicas, que son lo único oscuro de la página clara. */
  --negatoscopio: #05090f;

  /* Escala tipográfica de seis pasos. El cuerpo va a 17 px y ningún texto baja de 13 px. */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.75rem;
  --t-2xl: clamp(2rem, 4vw, 3rem);
  /* Pila del sistema: No se declara ninguna fuente que no se cargue. */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Geometría y movimiento: Tres radios (pequeño, medio y píldora); lg y xl quedan como alias del medio y del de ventana. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;
  --max: 1180px;
}

/*
 * Tema oscuro.
 * Las tintas de estado no se heredan del tema claro sino que tienen su propio paso claro,
 * porque las tintas calculadas para fondo blanco caen a entre 1.97 y 2.77 a 1 sobre los
 * fondos suaves oscurecidos. Cada paso está medido con la luminancia relativa WCAG sobre
 * sus dos fondos:
 *
 *   exito   #6ee7b7   9.11 sobre suave, 11.17 sobre superficie
 *   alerta  #fcd34d   9.61 sobre suave, 11.81 sobre superficie
 *   peligro #fda4b8   8.67 sobre suave,  9.06 sobre superficie
 *   info    #a5b4fc   7.80 sobre suave,  8.54 sobre superficie
 *   marca   #22a6bd   5.88 sobre superficie, 4.91 sobre la pestaña activa
 *   tinta 3 #8496ad   5.63 sobre superficie, 4.67 sobre superficie 3
 *
 * El bloque rige solo bajo data-tema="oscuro", es decir, cuando quien usa la aplicación
 * eligió el oscuro a mano con el botón de tema. Nunca se consulta prefers-color-scheme:
 * sin elección guardada, el atlas se ve claro.
 */
:root[data-tema="oscuro"] {
  --fondo: #0b1220;
  --fondo-2: #0e1626;
  --superficie: #131c2e;
  --superficie-2: #18233a;
  --superficie-3: #1e2b45;

  --marca-tinta: #22a6bd;

  --tinta: #e8eef6;
  --tinta-2: #a7b6c9;
  --tinta-3: #8496ad;
  --tinta-intensa: #ffffff;
  --alerta-tinta: #e0a13d;
  --tc-tinta: #7cc7e8;

  --borde: #24334d;
  --borde-2: #1d2a40;
  --anillo: rgba(34, 166, 189, 0.45);
  --sombra-sm: none;
  --sombra-md: 0 2px 10px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 14px 40px rgba(0, 0, 0, 0.6);
  --sombra-marca: none;

  --exito: #6ee7b7;
  --exito-suave: #0d3320;
  --alerta: #fcd34d;
  --alerta-suave: #3a2a09;
  --peligro: #fda4b8;
  --peligro-suave: #3a1414;
  --info: #a5b4fc;
  --info-suave: #1e1f4a;
  --mezcla-zona: 75%;

  /* Las tintas de modalidad suben a su paso claro: Las del tema claro quedaban entre 2.2 y 2.7 a 1 sobre sus fondos suaves oscuros.
     Medido sobre su fondo suave: rx 9.0, tc 9.6, rm 8.6 y us 9.7 a 1. */
  --rx: #c4b5fd; --tc: #7dd3fc; --rm: #f9a8d4; --us: #6ee7b7;
  --rx-suave: #241a4a; --tc-suave: #0a2b42; --rm-suave: #3a1229; --us-suave: #0a3126;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  font-size: var(--t-base);
  /* Superficie plana y neutra: La sala de lectura deja el contraste dramático a las imágenes. */
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--mov-lenta) ease, color var(--mov-lenta) ease;
}

.oculta { display: none !important; }

/* ---------- Texto solo para lectores de pantalla ----------
   Recorte accesible en lugar de display none, porque una región viva
   que nace sin pintar no se registra y pierde su primer anuncio. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--marca-400); color: #fff; }

/* ---------- Foco visible ----------
   Solo aparece cuando se navega con teclado, gracias a :focus-visible,
   de modo que no molesta al usar el ratón. Sin esta regla, quien recorre
   la aplicación tabulando no sabe dónde está. */
:focus-visible {
  outline: 3px solid var(--marca-400);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.tarjeta:focus-visible, .tarjeta-texto:focus-visible, .tema-tarjeta:focus-visible { outline-offset: 2px; }

/* ---------- Saltar al contenido ----------
   Primer elemento enfocable de la página. Permite a quien usa teclado o
   lector de pantalla evitar la navegación en cada cambio de vista. */
.saltar-al-contenido {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 300;
  background: var(--marca-grad);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sombra-md);
  transition: transform var(--mov-normal) var(--mov-curva);
}
.saltar-al-contenido:focus { transform: translate(-50%, 0); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borde); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

/* ---------- Barra de progreso de scroll ---------- */
.barra-progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--marca-grad);
  z-index: 200;
  /* La barra se estira con transform y no con width, de modo que seguir el desplazamiento no recalcula la disposición.
     Va pegada al dedo: Sin transición, porque una barra que sigue al scroll con retraso parece rota. */
  transform: scaleX(var(--progreso, 0));
  transform-origin: left;
}

/* ===== css/2-cabecera.css ===== */
/*
 * Cabecera, íconos y pestañas.
 * Agrupa lo que queda fijo en la parte superior de la página, que es la marca, el botón de instalar, el conmutador de tema y la barra de secciones.
 */

/* ============================================================
   Cabecera
   ============================================================ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Superficie plana y opaca: Sin desenfoque detrás, que costaba pintado en cada desplazamiento. */
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  transition: transform var(--mov-lenta) var(--mov-curva);
}
/* Retirada durante la lectura: El menú lateral aparta la cabecera con una transformación
   y no con display, porque así la animación es suave y reversible al volver arriba. */
.cabecera.retirada { transform: translateY(-100%); }
.cabecera-superior {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.marca-icono {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--marca-grad);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-marca);
}
.marca-icono .ico-logo { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Íconos SVG ---------- */
.ico {
  width: 1.15em; height: 1.15em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: none; vertical-align: -0.22em;
}
.marca-texto { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.marca-texto strong { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; }
.marca-texto small { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 500; white-space: nowrap; }

.boton-tema {
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--t-base);
  display: grid; place-items: center;
  transition: transform var(--mov-normal) var(--mov-curva), border-color var(--mov-normal), background var(--mov-normal);
  position: relative;
}
.boton-tema:hover { border-color: var(--marca-400); color: var(--marca-tinta); }
.boton-tema:active { transform: translateY(0) scale(0.94); }
.boton-tema .ico { width: 20px; height: 20px; }
.boton-tema .icono-luna { display: none; }
/* El ícono refleja el tema en pantalla: Sol en claro y luna en oscuro. El
   claro es el punto de partida, así que la luna solo aparece bajo
   data-tema="oscuro". */
:root[data-tema="oscuro"] .boton-tema .icono-sol { display: none; }
:root[data-tema="oscuro"] .boton-tema .icono-luna { display: block; }
.pestana .ico { width: 17px; height: 17px; }

/* Navegación en pestañas */
.pestanas {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 0.75rem 0.5rem;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--tinta-2);
  border: none;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: transform var(--mov-rapida) var(--mov-curva), color var(--mov-normal), background var(--mov-normal);
}
.pestana-icono { font-size: var(--t-base); }
.pestana:hover { color: var(--tinta); background: var(--superficie-2); }
.pestana:active { background: color-mix(in srgb, var(--marca-500) 16%, transparent); }
.pestana.activa { color: var(--marca-tinta); background: color-mix(in srgb, var(--marca-500) 12%, transparent); }
.pestana.activa::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: -0.5rem;
  height: 3px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--marca-grad);
}


/* La barra de secciones se desplaza en horizontal cuando no cabe. Navegacion.js enciende
   hay-mas-derecha y hay-mas-izquierda, y un desvanecido en ese borde avisa de que la barra sigue. */
.pestanas.hay-mas-derecha { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.pestanas.hay-mas-izquierda { mask-image: linear-gradient(90deg, transparent, #000 15%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); }
.pestanas.hay-mas-izquierda.hay-mas-derecha {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Botón «Instalar app»: Solo aparece si el navegador permite instalar (js/interfaz/InstalarApp.js). */
.cabecera-superior { position: relative; }
.boton-instalar {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--marca-tinta);
  font: 600 var(--t-sm) / 1 var(--fuente);
  cursor: pointer;
}
.boton-instalar[hidden] { display: none; }
.boton-instalar:hover { border-color: var(--marca-400); }
.boton-instalar .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.instalar-ios {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 1rem;
  z-index: 160;
  width: min(320px, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  font-size: var(--t-sm);
}
.instalar-ios[hidden] { display: none; }
.instalar-ios-titulo { font-weight: 700; margin-bottom: 0.4rem; }
.instalar-ios ol { padding-left: 1.2rem; display: grid; gap: 0.25rem; margin-bottom: 0.75rem; }
@media (max-width: 640px) {
  .boton-instalar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .boton-instalar { padding: 0 0.6rem; }
}

/* ===== css/3-contenido.css ===== */
/*
 * Armazón del contenido.
 * Cubre el ancho de las vistas, el encabezado común de las secciones, las cifras del inicio y el bloque de buscador con sus chips de filtro.
 */

/* ============================================================
   Contenido
   ============================================================ */
.vista {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem;
  flex: 1;
}
/* La entrada de la vista la pone js/interfaz/Movimiento.js al cambiar de sección cuando el navegador no tiene View Transitions; sin código la vista se ve tal cual. */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(var(--mov-desplazamiento)); }
  to { opacity: 1; transform: none; }
}

/*
 * Encabezado común de las secciones: Icono, nombre de la sección, titular y lema, alineados a la izquierda.
 * Todas las vistas usan las mismas clases, de modo que el titular de Catálogo, el de Signos y el de DICOM se ven iguales; los textos salen de "encabezados" en seo.json, que comparten las páginas estáticas.
 */
.encabezado-seccion { display: flex; align-items: flex-start; gap: 1rem; padding: 0.5rem 0 1.75rem; }
.encabezado-seccion-icono {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem;
  margin-top: 0.2rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--marca-500) 12%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--marca-500) 22%, var(--borde));
  color: var(--marca-tinta);
}
.encabezado-seccion-icono .ico { width: 1.6rem; height: 1.6rem; }
.encabezado-seccion-texto { min-width: 0; }
.encabezado-seccion-nombre {
  margin: 0 0 0.3rem;
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marca-tinta);
}
.encabezado-seccion-titular {
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  /* Titular en tinta plana: El degradado recortado al texto era un rasgo de plantilla y no aportaba lectura. */
  color: var(--tinta);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.encabezado-seccion-lema { color: var(--tinta-2); max-width: 62ch; margin-top: 0.6rem; font-size: var(--t-base); }
/* Nota propia de una sección (unidades de las calculadoras, compromiso del apoyo, aviso del visor), siempre justo debajo del encabezado. */
.nota-seccion { margin: -0.75rem 0 1.5rem; max-width: 62rem; color: var(--tinta-2); font-size: var(--t-sm); }
@media (max-width: 560px) {
  .encabezado-seccion { gap: 0.75rem; padding-bottom: 1.4rem; }
  .encabezado-seccion-icono { width: 2.6rem; height: 2.6rem; margin-top: 0; }
  .encabezado-seccion-icono .ico { width: 1.3rem; height: 1.3rem; }
}

/* Cifras del atlas: Resumen de todas las colecciones que solo muestra el inicio. */
.metricas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.metrica {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.95rem;
  font-size: var(--t-sm);
  color: var(--tinta-2);
  box-shadow: var(--sombra-sm);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.metrica strong { color: var(--marca-tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.metrica .ico { width: 15px; height: 15px; color: var(--marca-tinta); }

/* Encabezado de la vista legal, que conserva sus migas y su entrada propias. */
.encabezado-vista { padding: 0.5rem 0 1.5rem; }
.encabezado-vista h1 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.025em; }
.encabezado-vista p { color: var(--tinta-2); margin-top: 0.35rem; max-width: 62rem; }
.nota-unidades {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0.6rem 0.9rem;
  background: var(--tc-suave);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.nota-unidades .ico { color: var(--tc-tinta); flex: none; margin-top: 0.1rem; }
/* La nota de unidades de las calculadoras también es la nota de su sección: Gana el margen de la nota común para quedar a la misma distancia del encabezado que las demás. */
.nota-unidades.nota-seccion { margin-top: -0.75rem; }

/* ---------- Buscador ---------- */
.buscador { margin-bottom: 1.75rem; }
.campo-busqueda-envoltorio { position: relative; }
.icono-busqueda {
  position: absolute;
  left: 1.05rem; top: 50%;
  transform: translateY(-50%);
  font-size: var(--t-base);
  opacity: 0.6;
  pointer-events: none;
}
/*
 * Los buscadores se estilan por su envoltorio y no nombrando uno por uno sus identificadores.
 * La razón es que antes esta regla llevaba una lista de identificadores escrita a mano, motivo por el cual la pestaña de temas se publicó con su buscador sin ningún estilo en cuanto se añadió.
 * De este modo, una pestaña nueva queda estilizada sin tocar la hoja de estilo.
 */
.campo-busqueda-envoltorio input[type="search"] {
  width: 100%;
  padding: 0.95rem 1.1rem 0.95rem 2.8rem;
  font-size: var(--t-base);
  font-family: inherit;
  color: var(--tinta);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  /* El outline se retira porque el foco de este campo ya se ve: el borde cambia
     de color y aparece el anillo de sombra de la regla de abajo. */
  outline: none;
  box-shadow: var(--sombra-sm);
  transition: border-color var(--mov-normal), background var(--mov-normal);
}
.campo-busqueda-envoltorio input[type="search"]::placeholder { color: var(--tinta-3); }
.campo-busqueda-envoltorio input[type="search"]:focus {
  border-color: var(--marca-400);
  box-shadow: 0 0 0 4px var(--anillo);
}

.filtros { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.grupo-filtro { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.etiqueta-filtro {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tinta-3); min-width: 74px;
}
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  border: 1.5px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta-2);
  padding: 0.32rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--mov-rapida) var(--mov-curva), opacity var(--mov-rapida) var(--mov-curva), color var(--mov-rapida), background-color var(--mov-rapida), border-color var(--mov-rapida);
}
.chip:hover { border-color: var(--marca-400); color: var(--marca-tinta); }
.chip:active { transform: translateY(0) scale(0.97); }
.chip.activo { background: var(--marca-grad); border-color: transparent; color: #fff; box-shadow: var(--sombra-marca); }
/* El recuento del chip hereda el color del propio chip y solo baja de intensidad, de modo que
   funciona igual sobre el fondo normal y sobre el degradado del chip activo. */
/* El conteo usa la tinta secundaria sin opacidad: Con opacidad quedaba en 3.2 a 1 (claro) y 4.2 a 1 (oscuro). En el chip activo hereda el blanco. */
.chip-cuenta { color: var(--tinta-2); font-weight: 600; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.chip.activo .chip-cuenta { color: inherit; }

.contador { margin-top: 0.9rem; font-size: var(--t-sm); color: var(--tinta-3); font-weight: 500; }

/* ===== css/4-tarjetas.css ===== */
/*
 * Tarjetas de las rejillas.
 * Contiene la galería de fichas con imagen, las insignias y las tarjetas de solo texto que usan signos, clasificaciones y calculadoras.
 */

/* ============================================================
   Galería de fichas
   ============================================================ */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
}
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform var(--mov-normal) var(--mov-curva), border-color var(--mov-normal);
  animation: aparecer var(--mov-normal) var(--mov-curva) backwards;
}
.tarjeta:hover {
  box-shadow: var(--sombra-lg);
  border-color: color-mix(in srgb, var(--marca-400) 45%, var(--borde));
}
.tarjeta-marco {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 40%, #16263a, #060b14);
}
.tarjeta-imagen {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mov-lenta) var(--mov-curva);
}
.tarjeta:hover .tarjeta-imagen { transform: scale(1.06); }
.tarjeta-marco::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 10, 20, 0.5), transparent 45%);
  opacity: 0.85;
}
.etiqueta-estado {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  z-index: 2;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-pill);
  color: #fff;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.etiqueta-estado.normal { background: rgba(21, 128, 61, 0.85); }
.etiqueta-estado.patologico { background: rgba(180, 83, 9, 0.9); }

.tarjeta-cuerpo { padding: 0.95rem 1.05rem 1.1rem; flex: 1; display: flex; flex-direction: column; gap: 0.55rem; }
.tarjeta h3 { font-size: var(--t-base); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.tarjeta-resumen { font-size: var(--t-sm); color: var(--tinta-2); flex: 1; }

/* Insignias */
.insignias { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.insignia {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--superficie-3);
  color: var(--tinta-2);
  border: 1px solid var(--borde-2);
}
.insignia.modalidad { border: none; background: var(--rx-suave); color: var(--rx); }
.insignia.mod-rx { background: var(--rx-suave); color: var(--rx); }
.insignia.mod-tc { background: var(--tc-suave); color: var(--tc); }
.insignia.mod-rm { background: var(--rm-suave); color: var(--rm); }
.insignia.mod-us { background: var(--us-suave); color: var(--us); }
.insignia.categoria { background: var(--info-suave); color: var(--info); border: none; }
.insignia.nivel { text-transform: uppercase; font-size: var(--t-xs); }
.insignia.nivel.básico { background: var(--us-suave); color: var(--us); border: none; }
.insignia.nivel.intermedio { background: var(--alerta-suave); color: var(--alerta); border: none; }
.insignia.nivel.avanzado { background: var(--peligro-suave); color: var(--peligro); border: none; }

.sin-resultados {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--tinta-3);
}
.emoji-grande { font-size: var(--t-2xl); margin-bottom: 0.5rem; }
.emoji-grande .ico { width: 46px; height: 46px; color: var(--tinta-3); stroke-width: 1.6; }

/* Salida rápida del estado vacío: Un solo botón devuelve el buscador y los chips a su estado inicial. */
.boton-limpiar {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.1rem;
  background: color-mix(in srgb, var(--marca-500) 12%, transparent);
  color: var(--marca-tinta);
  border: 1px solid color-mix(in srgb, var(--marca-500) 35%, transparent);
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: transform var(--mov-normal) var(--mov-curva), opacity var(--mov-normal) var(--mov-curva), color var(--mov-normal), background-color var(--mov-normal), border-color var(--mov-normal);
}
.boton-limpiar:hover { background: var(--marca-grad); color: #fff; border-color: transparent; box-shadow: var(--sombra-marca); }
.boton-limpiar:active { transform: translateY(0) scale(0.98); box-shadow: none; }

/* Coincidencias de la búsqueda realzadas en las tarjetas. El realce usa la marca en vez del
   amarillo del navegador, porque ese amarillo ignora el tema oscuro y pelea con los acentos. */
.tarjeta mark, .tarjeta-texto mark, .tema-tarjeta mark, .termino mark {
  background: color-mix(in srgb, var(--marca-400) 26%, transparent);
  color: inherit;
  border-radius: var(--r-sm);
  padding: 0 0.1em;
}

/* ============================================================
   Tarjetas de solo texto (signos, clasificaciones, calculadoras)
   ============================================================ */
.galeria-texto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tarjeta-texto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--mov-normal) var(--mov-curva), border-color var(--mov-normal);
  animation: aparecer var(--mov-normal) var(--mov-curva) backwards;
}
.tarjeta-texto::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--marca-grad);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--mov-lenta) var(--mov-curva);
}
.tarjeta-texto:hover { box-shadow: var(--sombra-lg); border-color: color-mix(in srgb, var(--marca-400) 40%, var(--borde)); }
.tarjeta-texto:hover::before { transform: scaleY(1); }
.tarjeta-texto h3 { font-size: var(--t-base); margin: 0.55rem 0 0.4rem; font-weight: 700; letter-spacing: -0.01em; }
.tarjeta-texto p { font-size: var(--t-sm); color: var(--tinta-2); }

/* ===== css/5-modales.css ===== */
/*
 * Ventanas de detalle.
 * Recoge el fondo, la tarjeta y los bloques destacados de las cinco ventanas, además de las tablas y las listas que aparecen dentro de ellas.
 */

/* ============================================================
   Modales
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-fondo {
  position: absolute; inset: 0;
  background: rgba(8, 16, 28, 0.62);
  backdrop-filter: blur(6px);
  animation: fundido var(--mov-normal) var(--mov-curva);
}
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
.modal-tarjeta {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  max-width: 780px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--sombra-lg);
  animation: surgir var(--mov-lenta) var(--mov-curva);
}
@keyframes surgir {
  from { opacity: 0; transform: translateY(calc(var(--mov-desplazamiento) * 2)) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.cerrar {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  z-index: 3;
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  backdrop-filter: blur(8px);
  color: var(--tinta);
  border: 1px solid var(--borde);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: var(--t-sm);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--mov-normal) var(--mov-curva), background var(--mov-normal);
}
.cerrar:hover { transform: rotate(90deg); background: var(--peligro-suave); color: var(--peligro); border-color: var(--peligro); }
.cerrar:active { transform: rotate(90deg) scale(0.9); }

/* Navegación entre fichas. Los botones viven fuera de la tarjeta desplazable para quedarse
   fijos a media altura de la ventana mientras el contenido se desplaza por debajo. */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--superficie) 82%, transparent);
  backdrop-filter: blur(8px);
  color: var(--tinta);
  border: 1px solid var(--borde);
  cursor: pointer;
  transition: transform var(--mov-normal) var(--mov-curva), background var(--mov-normal), opacity var(--mov-normal);
}
.modal-nav.anterior { left: 0.6rem; }
.modal-nav.siguiente { right: 0.6rem; }
.modal-nav:hover:not(:disabled) { background: var(--marca-grad); color: #fff; border-color: transparent; transform: translateY(-50%) scale(1.08); }
.modal-nav:active:not(:disabled) { transform: translateY(-50%) scale(0.94); }
/* El extremo de la lista deja el botón visible pero apagado, porque desaparecer y reaparecer
   movería el resto de controles bajo el puntero. */
.modal-nav:disabled { opacity: 0.35; cursor: default; }
.modal-nav .ico { width: 20px; height: 20px; }

.modal-imagen-marco {
  background: radial-gradient(circle at 50% 30%, #16263a, #05090f);
  text-align: center;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}
.modal-imagen-marco img { max-width: 100%; max-height: 48vh; object-fit: contain; display: inline-block; }
/* Figura del signo: el mismo marco que la imagen de la ficha, con la leyenda debajo. */
.modal-figura { margin: 0; }
.pie-figura {
  font-size: var(--t-xs); color: var(--tinta-3);
  padding: 0.6rem 1.75rem 0; margin: 0;
}

.modal-cuerpo { padding: 1.5rem 1.75rem 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.modal-cuerpo h2 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.2rem; }
/* El encabezado se dispone en fila para que el ícono que lo acompaña quede alineado con el texto. */
.modal-cuerpo > h3 {
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-3); font-weight: 700;
  margin-top: 1.1rem; padding-bottom: 0.15rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.modal-cuerpo > h3 .ico { color: var(--marca-tinta); }
.modal-cuerpo > p { color: var(--tinta); font-size: var(--t-sm); }
.modal-cuerpo ul { padding-left: 1.25rem; font-size: var(--t-sm); }
.modal-cuerpo li { margin-bottom: 0.35rem; }
.modal-cuerpo li::marker { color: var(--marca-400); }
.modal-insignias { margin-bottom: 0.3rem; }
.credito {
  font-size: var(--t-xs); color: var(--tinta-3);
  border-top: 1px solid var(--borde); padding-top: 0.85rem; margin-top: 1rem;
}

/* Bloques destacados */
.bloque-perla, .bloque-error, .bloque-clave {
  border-radius: var(--r-md);
  padding: 0.95rem 1.15rem;
  margin-top: 1rem;
}
.bloque-perla h3, .bloque-error h3, .bloque-clave h3 {
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; margin-bottom: 0.35rem;
  display: flex; align-items: center; gap: 0.5rem;
}
/* El ícono de cada bloque hereda el color de alerta, peligro o información de su encabezado. */
.bloque-perla { background: var(--alerta-suave); border-left: 3px solid #f59e0b; }
.bloque-perla h3 { color: var(--alerta); }
.bloque-perla h3 .ico { color: var(--alerta); }
.bloque-error { background: var(--peligro-suave); border-left: 3px solid var(--peligro); }
.bloque-error h3 { color: var(--peligro); }
.bloque-error h3 .ico { color: var(--peligro); }
.bloque-clave { background: var(--info-suave); border-left: 3px solid var(--info); }
.bloque-clave h3 { color: var(--info); }
.bloque-clave h3 .ico { color: var(--info); }

.boton-enlace {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: color-mix(in srgb, var(--marca-500) 12%, transparent);
  color: var(--marca-tinta);
  border: 1px solid color-mix(in srgb, var(--marca-500) 35%, transparent);
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; font-family: inherit;
  cursor: pointer; margin-top: 0.5rem;
  transition: transform var(--mov-normal) var(--mov-curva), opacity var(--mov-normal) var(--mov-curva), color var(--mov-normal), background-color var(--mov-normal), border-color var(--mov-normal);
}
.boton-enlace:hover { background: var(--marca-grad); color: #fff; border-color: transparent; box-shadow: var(--sombra-marca); }
.boton-enlace:active { transform: translateY(0) scale(0.98); box-shadow: none; }

/* Lista de modalidades */
.lista-modalidad { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.lista-modalidad dt {
  display: inline-block;
  font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.03em;
  color: #fff; background: var(--tc); padding: 0.12rem 0.55rem; border-radius: var(--r-sm);
  margin-bottom: 0.15rem;
}
.lista-modalidad dd { margin: 0 0 0.35rem; font-size: var(--t-sm); color: var(--tinta); }

/* Tablas */
.tabla-envoltorio { overflow-x: auto; margin-top: 0.5rem; border: 1px solid var(--borde); border-radius: var(--r-md); }
.tabla-grados, .tabla-diferencial { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 440px; }
.tabla-grados thead th, .tabla-diferencial thead th {
  background: var(--superficie-3);
  color: var(--tinta-2);
  text-align: left; padding: 0.6rem 0.8rem;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  position: sticky; top: 0;
}
.tabla-grados td, .tabla-diferencial td {
  padding: 0.6rem 0.8rem; border-top: 1px solid var(--borde); vertical-align: top; color: var(--tinta);
}
.tabla-grados tbody tr:nth-child(odd), .tabla-diferencial tbody tr:nth-child(odd) { background: var(--superficie-2); }
.tabla-grados tbody tr:hover, .tabla-diferencial tbody tr:hover { background: color-mix(in srgb, var(--marca-400) 8%, transparent); }


/* Lectura de textos médicos largos: Cuerpo de 17 px, interlineado holgado y renglones de 68 caracteres como máximo,
   que es el ancho cómodo de lectura (a 722 px el texto llegaba a unos 95 caracteres por renglón). */
.modal-cuerpo p, .modal-cuerpo li, .tema-seccion p, .tema-resumen, .legal-cuerpo p, .legal-cuerpo li {
  font-size: var(--t-base);
  line-height: 1.65;
  max-width: 68ch;
}

/* ===== css/6-temas-quiz-calculadoras.css ===== */
/*
 * Temas, glosario, modo estudio y calculadoras.
 * Reúne las vistas con estilo propio que no comparten las tarjetas genéricas, en el mismo orden de cascada en que se cargaban como hojas separadas.
 * Las calculadoras son la parte más extensa porque su ventana pinta un formulario con deslizadores, una escala visual de zonas y la frase de margen hasta el umbral vecino.
 */

/* ============================================================
   Temas
   ============================================================ */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.tema-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.45rem;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform var(--mov-normal) var(--mov-curva), border-color var(--mov-normal);
  animation: aparecer var(--mov-normal) var(--mov-curva) backwards;
}
.tema-tarjeta::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--marca-grad); transform: scaleX(0); transform-origin: left; transition: transform var(--mov-lenta) var(--mov-curva);
}
.tema-tarjeta:hover { box-shadow: var(--sombra-lg); border-color: color-mix(in srgb, var(--marca-400) 40%, var(--borde)); }
.tema-tarjeta:hover::after { transform: scaleX(1); }
.tema-tarjeta h3 { font-size: var(--t-base); margin: 0.6rem 0 0.45rem; font-weight: 700; letter-spacing: -0.015em; }
.tema-tarjeta p { font-size: var(--t-sm); color: var(--tinta-2); }
.tema-meta { margin-top: 0.85rem; font-size: var(--t-xs); color: var(--tinta-3); font-weight: 600; }
.tema-resumen { font-style: italic; color: var(--tinta-2); font-size: var(--t-base); }
.tema-seccion { margin-top: 1.4rem; }
/* El encabezado se dispone en fila para que el ícono que lo acompaña quede alineado con el texto. */
.tema-seccion h3 { color: var(--marca-tinta); font-size: var(--t-base); font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.tema-seccion p { margin-bottom: 0.65rem; font-size: var(--t-sm); color: var(--tinta); }

/* ============================================================
   Glosario
   ============================================================ */
.glosario { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.85rem; }
.termino {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--sombra-sm);
  border-left: 3px solid var(--marca-400);
  transition: transform var(--mov-normal) var(--mov-curva);
  animation: aparecer var(--mov-normal) var(--mov-curva) backwards;
}
.termino:hover { box-shadow: var(--sombra-md); }
.termino h3 { font-size: var(--t-base); color: var(--tinta); font-weight: 700; margin-top: 0.35rem; }
.termino p { font-size: var(--t-sm); color: var(--tinta-2); margin-top: 0.3rem; }


/* ============================================================
   Modo estudio (quiz)
   ============================================================ */
.quiz-panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-md);
  padding: 2.5rem 1.75rem;
  max-width: 680px;
  /* Alineado a la izquierda bajo el encabezado común, como el buscador y las listas de las demás secciones. */
  margin: 0 0 1rem;
  text-align: center;
}
.quiz-hero-icono {
  font-size: var(--t-2xl);
  width: 88px; height: 88px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--marca-500) 12%, transparent);
  border-radius: 50%;
}
.quiz-hero-icono .ico { width: 40px; height: 40px; color: var(--marca-tinta); stroke-width: 1.8; }
.quiz-panel h2 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.quiz-panel > div > p { color: var(--tinta-2); max-width: 460px; margin: 0 auto; }

.boton-primario {
  background: var(--marca-grad);
  color: #fff;
  border: none;
  padding: 0.85rem 2.2rem;
  font-size: var(--t-base);
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--r-pill);
  cursor: pointer;
  margin-top: 1.4rem;
  box-shadow: var(--sombra-marca);
  transition: transform var(--mov-normal) var(--mov-curva);
}
.boton-primario:hover { filter: brightness(1.05); box-shadow: var(--sombra-md); }
.boton-primario:active { transform: translateY(0); }

.quiz-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.quiz-numero { font-size: var(--t-sm); color: var(--tinta-3); font-weight: 600; }
.quiz-marcador { font-size: var(--t-sm); color: var(--tinta-2); }
.quiz-marcador strong { color: var(--marca-tinta); font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.quiz-barra { height: 6px; background: var(--superficie-3); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 1.2rem; }
/* El relleno ocupa toda la pista y se estira con transform (var --progreso, de 0 a 1) para no recalcular la disposición en cada respuesta. */
.quiz-barra-relleno { height: 100%; width: 100%; background: var(--marca-grad); transform: scaleX(var(--progreso, 0)); transform-origin: left; transition: transform var(--mov-lenta) var(--mov-curva); }

.quiz-imagen-marco {
  background: radial-gradient(circle at 50% 30%, #16263a, #05090f);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
}
.quiz-imagen-marco img { max-width: 100%; max-height: 100%; object-fit: contain; }
.quiz-instruccion { font-weight: 700; font-size: var(--t-base); margin: 1.1rem 0 0.85rem; }
.quiz-opciones { display: flex; flex-direction: column; gap: 0.6rem; }
.quiz-opcion {
  border: 1.5px solid var(--borde);
  background: var(--superficie-2);
  color: var(--tinta);
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 500; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: transform var(--mov-rapida) var(--mov-curva), opacity var(--mov-rapida) var(--mov-curva), color var(--mov-rapida), background-color var(--mov-rapida), border-color var(--mov-rapida);
}
.quiz-opcion:hover:not(:disabled) { border-color: var(--marca-400); background: color-mix(in srgb, var(--marca-400) 8%, var(--superficie-2)); transform: translateX(4px); }
.quiz-opcion:disabled { cursor: default; }
.quiz-opcion.correcta { border-color: var(--exito); background: var(--exito-suave); color: var(--exito); font-weight: 700; }
.quiz-opcion.incorrecta { border-color: var(--peligro); background: var(--peligro-suave); color: var(--peligro); }
/* La retroalimentación se dispone en fila para que su ícono quede alineado con la primera línea del texto. */
.quiz-retro { margin-top: 1rem; padding: 0.85rem 1.1rem; border-radius: var(--r-md); font-size: var(--t-sm); text-align: left; animation: aparecer var(--mov-normal) var(--mov-curva); display: flex; align-items: flex-start; gap: 0.6rem; }
.quiz-retro .ico { width: 20px; height: 20px; margin-top: 0.1rem; }
.quiz-retro.bien { background: var(--exito-suave); color: var(--exito); }
.quiz-retro.mal { background: var(--peligro-suave); color: var(--peligro); }
.quiz-resultado { font-size: var(--t-lg); margin-top: 0.5rem; color: var(--tinta); }


/* ============================================================
   Calculadoras
   ============================================================ */
.calc-formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
  margin: 0.7rem 0 0.4rem;
}
.calc-grupo { display: flex; flex-direction: column; gap: 0.3rem; }
.calc-etiqueta { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.calc-input, .calc-select {
  padding: 0.65rem 0.8rem;
  font-size: var(--t-sm); font-family: inherit;
  color: var(--tinta);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  /* El outline se retira porque el foco de estos campos ya se ve: el borde
     cambia de color y aparece el anillo de sombra de la regla de abajo. */
  outline: none; width: 100%;
  transition: border-color var(--mov-rapida);
}
.calc-input:focus, .calc-select:focus { border-color: var(--marca-400); box-shadow: 0 0 0 3px var(--anillo); }
.calc-referencia { font-size: var(--t-xs); line-height: 1.35; color: var(--tinta-3); }

/* Error visible de formulario: Un campo problemático no puede comunicarse solo ocultando la
   salida; el borde de peligro y el mensaje bajo el campo dicen qué falta, y aria-invalid con
   aria-describedby se lo cuentan al lector de pantalla. */
.calc-input.invalido { border-color: var(--peligro); }
.calc-input.invalido:focus {
  border-color: var(--peligro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--peligro) 28%, transparent);
}
.calc-aviso {
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--peligro);
}

/* Deslizador sincronizado con la casilla, para tantear valores sin teclear */
.calc-rango {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0.1rem 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
/* El outline se retira porque el foco del deslizador ya se ve: su pulgar recibe
   el anillo de sombra en las reglas de focus-visible de más abajo. */
.calc-rango:focus { outline: none; }
.calc-rango::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--borde);
  background: var(--superficie-3);
}
.calc-rango::-moz-range-track {
  height: 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--borde);
  background: var(--superficie-3);
}
/* El pulgar toma su borde de la tinta de marca y su fondo de la superficie 2,
   que en claro es casi blanca y en oscuro un paso más clara que la pista, de
   modo que el tema oscuro queda resuelto desde los tokens. */
.calc-rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px; height: 15px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid var(--marca-tinta);
  background: var(--superficie-2);
  box-shadow: var(--sombra-sm);
  transition: transform var(--mov-rapida) var(--mov-curva);
}
.calc-rango::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--marca-tinta);
  background: var(--superficie-2);
  box-shadow: var(--sombra-sm);
  transition: transform var(--mov-rapida) var(--mov-curva);
}
.calc-rango:hover::-webkit-slider-thumb { transform: scale(1.15); }
.calc-rango:hover::-moz-range-thumb { transform: scale(1.15); }
.calc-rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--anillo); }
.calc-rango:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--anillo); }

/* Botón de caso de muestra, bajo el formulario */
.calc-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.calc-ejemplo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--superficie);
  color: var(--tinta-2);
  border: 1.5px solid var(--borde);
  padding: 0.5rem 1rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: transform var(--mov-rapida) var(--mov-curva), opacity var(--mov-rapida) var(--mov-curva), color var(--mov-rapida), background-color var(--mov-rapida), border-color var(--mov-rapida);
}
.calc-ejemplo .ico { width: 16px; height: 16px; }
.calc-ejemplo:hover { border-color: var(--marca-400); color: var(--marca-tinta); }
.calc-ejemplo:active { transform: translateY(0) scale(0.98); }
.calc-ejemplo.cargado { border-color: var(--exito); color: var(--exito); background: var(--exito-suave); }

.calc-salida {
  background: linear-gradient(135deg, color-mix(in srgb, var(--marca-500) 10%, var(--superficie-2)), var(--superficie-2));
  border: 1px solid color-mix(in srgb, var(--marca-400) 30%, var(--borde));
  border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
  margin-top: 0.7rem;
  animation: aparecer var(--mov-normal) var(--mov-curva);
}
.calc-resultado {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--borde-2);
}
.calc-resultado:last-child { border-bottom: none; }
.calc-resultado-etiqueta { font-size: var(--t-sm); color: var(--tinta-2); }
.calc-resultado-valor { font-size: var(--t-xl); font-weight: 800; color: var(--marca-tinta); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.calc-resultado-valor small { font-size: var(--t-xs); font-weight: 600; opacity: 0.7; }

.calc-copiar {
  margin-top: 0.9rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--superficie);
  color: var(--marca-tinta);
  border: 1.5px solid color-mix(in srgb, var(--marca-500) 35%, transparent);
  padding: 0.5rem 1rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: transform var(--mov-rapida) var(--mov-curva), opacity var(--mov-rapida) var(--mov-curva), color var(--mov-rapida), background-color var(--mov-rapida), border-color var(--mov-rapida);
}
.calc-copiar .ico { width: 16px; height: 16px; }
.calc-copiar:hover { background: var(--marca-grad); color: #fff; border-color: transparent; }
.calc-copiar:active { transform: translateY(0) scale(0.98); }
.calc-copiar.copiado { background: var(--exito-suave); color: var(--exito); border-color: var(--exito); }

/* Escala visual de referencia */
.calc-escala { margin-top: 1rem; }
.calc-escala-titulo {
  display: block;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tinta-3);
  margin-bottom: 0.45rem;
}
.calc-escala-titulo small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--tinta-2); }
.calc-escala-barra { position: relative; }
.calc-escala-pista {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--superficie);
}
.calc-escala-zona {
  position: absolute; top: 0; bottom: 0;
  opacity: 0.42;
  transition: opacity var(--mov-lenta) var(--mov-curva);
}
.calc-escala-zona.activa { opacity: 1; }
/* La proporción de la mezcla sale del token de base.css, que el tema oscuro
   sube en oscuro, de modo que estas reglas no se duplican. */
.calc-escala-zona.nivel-normal { background: color-mix(in srgb, var(--exito) var(--mezcla-zona), transparent); }
.calc-escala-zona.nivel-medio { background: color-mix(in srgb, var(--alerta) var(--mezcla-zona), transparent); }
.calc-escala-zona.nivel-alto { background: color-mix(in srgb, var(--peligro) var(--mezcla-zona), transparent); }
/* La guía ocupa todo el ancho de la barra, así que su translateX en tanto por ciento es la posición en la escala.
   El marcador se desliza moviendo la guía con transform, sin animar left. */
.calc-escala-guia {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 0;
  pointer-events: none;
  transition: transform var(--mov-lenta) var(--mov-curva-dentro);
}
.calc-escala-marca {
  position: absolute;
  left: 0;
  top: -4px; height: 22px; width: 3px;
  border-radius: var(--r-sm);
  background: var(--tinta);
  box-shadow: 0 0 0 2px var(--superficie-2);
  transform: translateX(-50%);
}
.calc-escala-cifras { position: relative; height: 1.1rem; margin-top: 0.5rem; }
.calc-escala-cifra {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Margen hasta el umbral vecino, bajo la barra */
.calc-escala-margen {
  display: flex; align-items: flex-start; gap: 0.45rem;
  margin-top: 0.6rem;
  font-size: var(--t-xs); line-height: 1.45;
  color: var(--tinta-2);
}
.calc-escala-margen .ico { width: 15px; height: 15px; color: var(--tinta-3); margin-top: 0.2rem; }
.calc-escala-margen.cerca { color: var(--alerta-tinta); font-weight: 600; }
.calc-escala-margen.cerca .ico { color: var(--alerta-tinta); }

@media (prefers-reduced-motion: reduce) {
  .calc-escala-guia, .calc-escala-zona { transition: none; }
}

.calc-interpretacion { margin-top: 0.9rem; padding: 0.7rem 1rem; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; }
.calc-interpretacion.nivel-normal { background: var(--exito-suave); color: var(--exito); }
.calc-interpretacion.nivel-medio { background: var(--alerta-suave); color: var(--alerta); }
.calc-interpretacion.nivel-alto { background: var(--peligro-suave); color: var(--peligro); }

.calc-formula { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-md); padding: 0.85rem 1.1rem; margin-top: 1rem; }
.calc-formula h3 { color: var(--tinta-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem; }
.calc-formula p { font-family: "SF Mono", "Consolas", "Courier New", monospace; font-size: var(--t-sm); color: var(--tinta); }


/* Aviso fijo bajo cada resultado: Las calculadoras son de estudio y el aviso va junto a la cifra, no solo en el pie. */
.calc-aviso-educativo {
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--alerta-tinta);
  background: var(--superficie-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--tinta-2);
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* ===== css/7-interfaz.css ===== */
/*
 * Interfaz y diseño adaptable.
 * Junta el pie, el color de acento por sistema, la paginación, los cargadores esqueleto, el menú lateral y las reglas responsivas.
 * Se carga en penúltimo lugar, antes de la hoja de impresión, porque sus reglas responsivas ajustan lo definido en las hojas anteriores.
 */

/* ============================================================
   Pie y utilidades flotantes
   ============================================================ */
.pie {
  text-align: center;
  padding: 1.75rem 1.25rem;
  font-size: var(--t-xs);
  color: var(--tinta-3);
  border-top: 1px solid var(--borde);
  background: var(--superficie);
}
.pie p { max-width: 760px; margin: 0 auto; }
/* Tinta secundaria sin opacidad, que da 7.6 a 1 en claro y 7.4 a 1 en oscuro; con opacidad quedaba por debajo de 3.5. */
.estado-origen { margin-top: 0.5rem; color: var(--tinta-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

.ir-arriba {
  position: fixed;
  /* Encima de la casita y del café, que ocupan la esquina. */
  bottom: calc(142px + env(safe-area-inset-bottom, 0px)); right: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--marca-tinta);
  font-size: var(--t-lg); font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: transform var(--mov-lenta) var(--mov-curva), opacity var(--mov-lenta) var(--mov-curva), color var(--mov-lenta), background-color var(--mov-lenta), border-color var(--mov-lenta);
}
.ir-arriba.visible { opacity: 1; visibility: visible; transform: none; }
.ir-arriba:hover { background: var(--marca-grad); color: #fff; border-color: transparent; box-shadow: var(--sombra-marca); }

/* ============================================================
   Botón flotante de vuelta al sitio principal
   ------------------------------------------------------------
   Va en todas las páginas, también en las estáticas. Se apila
   con el «ir arriba»: la casita abajo del todo y el «ir arriba»
   justo encima, de modo que nunca se solapan.
   ============================================================ */
.boton-casa {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marca-grad);
  color: #fff;
  box-shadow: var(--sombra-marca);
  transition: transform var(--mov-normal) var(--mov-curva);
}
.boton-casa svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boton-casa:hover { box-shadow: var(--sombra-md); }
.boton-casa:focus-visible { outline: 3px solid var(--anillo); outline-offset: 3px; }

/* ============================================================
   Botón flotante del café
   ------------------------------------------------------------
   Lleva a donar: Al enlace de Stripe de js/apoyo.config.js o,
   mientras no exista, a la sección Apoyo. Va entre la casita y
   el «ir arriba», en el ámbar de la paleta, que con el blanco
   del icono pasa el contraste AA.
   ============================================================ */
.boton-cafe {
  position: fixed;
  right: 22px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #9c520f 0%, #b45309 100%);
  color: #fff;
  box-shadow: var(--sombra-md);
  transition: transform var(--mov-normal) var(--mov-curva);
}
.boton-cafe svg {
  width: 23px; height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boton-cafe:hover { box-shadow: var(--sombra-md); }
.boton-cafe:focus-visible { outline: 3px solid rgba(156, 82, 15, 0.45); outline-offset: 3px; }
/* En la sección DICOM el café taparía la barra del visor en el teléfono, así que se retira mientras está a la vista. */
body.en-visor .boton-cafe { display: none; }

/* ============================================================
   Color de acento por familia anatómico funcional
   ------------------------------------------------------------
   La clase la genera claseSistema() en el JavaScript, con el
   patrón sis-<slug>.

   El problema: Diez sistemas con diez colores dejaban pares a una
   distancia perceptual de 1.3 con daltonismo, es decir, colores
   indistinguibles para buena parte de quienes estudian con esto.

   La solución es no codificar el sistema con el color, sino la
   FAMILIA ANATÓMICO FUNCIONAL, que además agrupa lo que se estudia
   junto:

     teal     tórax               respiratorio y cardiovascular
     violeta  neuro               nervioso y cabeza y cuello
     magenta  abdomen y pelvis    digestivo, urinario, reproductor y mama
     ámbar    estructural         óseo y endocrino

   Dentro de cada familia, el sistema se distingue por dos vías que
   no dependen del color: la insignia lleva siempre su nombre
   escrito y el borde superior de la tarjeta cambia de trazo.

   Los cuatro tonos están comprobados a todos los pares y en los
   dos temas con la revisión paleta del arnés, que también lee
   paleta.config.json de la raíz:

     node revisiones/paleta.js "#007a5f, #4348c4, #870d49, #9c520f" --fondo "#ffffff"
     node revisiones/paleta.js "#52dcc4, #a8a4ff, #ee68a3, #e4a53c" --fondo "#131c2e"

   Peor separación con visión normal 17.4 en claro (abdomen contra
   estructural) y 18.9 en oscuro (neuro contra abdomen), y con
   daltonismo 9.7 en claro y 10.9 en oscuro (tórax contra abdomen,
   en deuteranopia ambas). Contraste como texto sobre la
   superficie: 5.32, 7.09, 9.62 y 5.79 a 1 en claro; 10.05, 7.64,
   5.79 y 7.90 a 1 en oscuro; sobre el fondo de su propia insignia
   ningún tono baja de 4.64 en claro ni de 5.08 en oscuro. Los
   umbrales exigidos quedan en paleta.config.json; si un tono se
   ajusta hay que volver a medir.
   ============================================================ */
:root {
  --fam-torax: #007a5f;
  --fam-neuro: #4348c4;
  --fam-abdomen: #870d49;
  --fam-estructural: #9c520f;
}

/* Los pasos oscuros de las familias. Solo se aplican cuando el visitante
   eligió el oscuro a mano: sin data-tema el atlas se ve claro. */
:root[data-tema="oscuro"] {
  --fam-torax: #52dcc4;
  --fam-neuro: #a8a4ff;
  --fam-abdomen: #ee68a3;
  --fam-estructural: #e4a53c;
}

.sis-respiratorio { --acento-sis: var(--fam-torax); }
.sis-cardiovascular { --acento-sis: var(--fam-torax); }
.sis-nervioso { --acento-sis: var(--fam-neuro); }
.sis-cabeza-y-cuello { --acento-sis: var(--fam-neuro); }
.sis-digestivo { --acento-sis: var(--fam-abdomen); }
.sis-urinario { --acento-sis: var(--fam-abdomen); }
.sis-reproductor { --acento-sis: var(--fam-abdomen); }
.sis-mama { --acento-sis: var(--fam-abdomen); }
.sis-oseo { --acento-sis: var(--fam-estructural); }
.sis-endocrino { --acento-sis: var(--fam-estructural); }

.tarjeta[class*="sis-"], .tarjeta-texto[class*="sis-"] { border-top: 3px solid var(--acento-sis, var(--marca-400)); }

/* Trazo del borde superior por sistema dentro de la familia, para que dos
   sistemas hermanos no dependan del color: el primero de cada familia
   conserva el trazo continuo y los demás cambian de patrón. Los selectores
   repiten la clase de tarjeta para igualar la especificidad de la regla del
   borde y ganar por orden de aparición. */
.tarjeta.sis-cardiovascular, .tarjeta-texto.sis-cardiovascular,
.tarjeta.sis-cabeza-y-cuello, .tarjeta-texto.sis-cabeza-y-cuello,
.tarjeta.sis-urinario, .tarjeta-texto.sis-urinario,
.tarjeta.sis-endocrino, .tarjeta-texto.sis-endocrino { border-top-style: dashed; }
.tarjeta.sis-reproductor, .tarjeta-texto.sis-reproductor { border-top-style: dotted; }
.tarjeta.sis-mama, .tarjeta-texto.sis-mama { border-top-style: double; border-top-width: 4px; }

.insignia.sistema {
  background: color-mix(in srgb, var(--acento-sis, var(--marca-tinta)) 10%, transparent);
  color: var(--acento-sis, var(--marca-tinta));
  border: none;
}

/* ============================================================
   Paginación
   ============================================================ */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.paginacion:empty { display: none; }
.pag-info { font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pag-botones { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.pag-btn {
  min-width: 38px; height: 38px;
  padding: 0 0.6rem;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta-2);
  border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 600; font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--mov-rapida) var(--mov-curva), opacity var(--mov-rapida) var(--mov-curva), color var(--mov-rapida), background-color var(--mov-rapida), border-color var(--mov-rapida);
}
.pag-btn:hover:not(:disabled):not(.activo) { border-color: var(--marca-400); color: var(--marca-tinta); }
.pag-btn:active:not(:disabled):not(.activo) { transform: translateY(0) scale(0.95); }
.pag-btn.activo { background: var(--marca-grad); border-color: transparent; color: #fff; box-shadow: var(--sombra-marca); cursor: default; }
.pag-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pag-flecha .ico { width: 18px; height: 18px; }
.pag-elipsis { color: var(--tinta-3); padding: 0 0.2rem; align-self: flex-end; }

/* ============================================================
   Cargadores esqueleto
   ============================================================ */
.esqueleto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.esqueleto-img { aspect-ratio: 4 / 3; background: var(--superficie-3); }
.esqueleto-cuerpo { padding: 0.95rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.esqueleto-linea { height: 12px; border-radius: var(--r-sm); background: var(--superficie-3); }
.esqueleto-linea.corta { width: 45%; }
.esqueleto-linea.media { width: 75%; }
.esqueleto::after, .esqueleto-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tinta) 6%, transparent), transparent);
  transform: translateX(-100%);
  animation: brillo 1.4s infinite;
}
.esqueleto { position: relative; }
@keyframes brillo { 100% { transform: translateX(100%); } }

/* ============================================================
   Menú lateral
   ============================================================ */
/* Botón flotante y panel que sustituyen a la cabecera cuando esta se retira durante la
   lectura. El botón vive en el borde izquierdo a media altura para no chocar con el botón
   de volver arriba, que ocupa la esquina inferior derecha, ni con la barra de progreso,
   que corre pegada al borde superior. La regla global de menos movimiento vuelve
   instantáneas estas transiciones, de modo que con esa preferencia no hay animación. */
.boton-menu-lateral {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translate(-110%, -50%);
  z-index: 110;
  min-width: 46px;
  min-height: 46px;
  border: 1px solid var(--borde);
  border-left: none;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--superficie);
  color: var(--marca-tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-md);
  visibility: hidden;
  transition: transform var(--mov-lenta) var(--mov-curva), visibility var(--mov-lenta), background var(--mov-normal), color var(--mov-normal);
}
.boton-menu-lateral.visible { visibility: visible; transform: translate(0, -50%); }
.boton-menu-lateral:hover { background: var(--marca-grad); color: #fff; border-color: transparent; }
.boton-menu-lateral .ico { width: 20px; height: 20px; }

/* El fondo atenuado recoge el clic fuera del panel, para que cerrar no active por
   accidente lo que quede debajo. */
.menu-lateral-fondo {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: color-mix(in srgb, var(--tinta) 25%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mov-lenta), visibility var(--mov-lenta);
}
.menu-lateral-fondo.abierto { opacity: 1; visibility: visible; }

/* El ancho del panel se limita para que en escritorio nunca cubra todo el contenido,
   mientras que en pantallas estrechas puede tomar casi todo el ancho. */
.menu-lateral {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 120;
  width: min(320px, 86vw);
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  box-shadow: var(--sombra-lg);
  padding: 1rem 0.85rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform var(--mov-lenta) var(--mov-curva), visibility var(--mov-lenta);
}
.menu-lateral.abierto { transform: none; visibility: visible; }

.menu-lateral-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.35rem 0.6rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0.5rem;
}
.menu-lateral-titulo {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
}
.menu-lateral-cerrar {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--tinta-2);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--mov-normal), color var(--mov-normal);
}
.menu-lateral-cerrar:hover { border-color: var(--marca-400); color: var(--marca-tinta); }
.menu-lateral-cerrar:active { transform: scale(0.94); }

.menu-lateral-lista { display: flex; flex-direction: column; gap: 0.25rem; }
/* Las opciones repiten el lenguaje visual de las pestañas y garantizan un blanco táctil
   de al menos 44 píxeles de alto. */
.menu-lateral-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--mov-rapida) var(--mov-curva), color var(--mov-normal), background var(--mov-normal);
}
.menu-lateral-item .ico { width: 18px; height: 18px; }
.menu-lateral-item:hover { color: var(--tinta); background: var(--superficie-2); }
.menu-lateral-item.activa { color: var(--marca-tinta); background: color-mix(in srgb, var(--marca-500) 12%, transparent); }
.menu-lateral-item:active { background: color-mix(in srgb, var(--marca-500) 16%, transparent); }

/* ============================================================
   Responsivo
   ------------------------------------------------------------
   Los ajustes de pantalla estrecha viven juntos en lugar de
   repartirse por las hojas anteriores, porque tocan componentes
   de varias de ellas y leerlos de corrido es la única forma de
   ver la página estrecha completa.
   ============================================================ */
@media (max-width: 640px) {
  .cabecera-superior { padding: 0.7rem 1rem; }
  .marca-texto small { display: none; }
  .marca-texto strong { font-size: var(--t-base); }
  .vista { padding: 1.25rem 1rem 3.5rem; }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.85rem; }
  .galeria-texto, .temas, .glosario { grid-template-columns: 1fr; }
  .tarjeta h3 { font-size: var(--t-sm); }
  .etiqueta-filtro { min-width: 100%; margin-bottom: -0.2rem; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-tarjeta { max-height: 94vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .modal-imagen-marco { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .modal-cuerpo { padding: 1.25rem 1.25rem 2rem; }
  .quiz-panel { padding: 1.75rem 1.25rem; }
  .boton-casa svg { width: 22px; height: 22px; }
  .boton-cafe svg { width: 22px; height: 22px; }
  .paginacion { justify-content: center; }
  .pag-info { width: 100%; text-align: center; order: 2; }
  .pag-botones { margin: 0 auto; }
  .pag-btn { min-width: 34px; height: 34px; }
}

/* ============================================================
   Botones flotantes: Fuera del visor y de las ventanas, y barra inferior en el móvil
   ------------------------------------------------------------
   En la sección DICOM la imagen necesita toda la pantalla, y sobre una ventana abierta
   cualquier botón flotante tapa su texto; en los dos casos se retiran. En Apoyo el café
   se retira también, porque la página ya tiene su propio botón de donar.
   ============================================================ */
body.en-visor :is(.boton-casa, .boton-cafe, .ir-arriba, .boton-menu-lateral),
body:has(#vista-dicom:not([hidden])) :is(.boton-casa, .boton-cafe, .ir-arriba, .boton-menu-lateral),
body:has(.modal:not(.oculta)) :is(.boton-casa, .boton-cafe, .ir-arriba, .boton-menu-lateral),
body:has(#vista-apoyo:not([hidden])) .boton-cafe { display: none; }

/* En el móvil los flotantes forman una barra inferior fija de 60 px, con el menú a la
   izquierda y la casa, el café y el «ir arriba» a la derecha, de modo que nunca se
   apilan sobre el contenido; el cuerpo reserva ese alto al final para que nada quede debajo. */
@media (max-width: 640px) {
  body:not(.en-visor)::after {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    z-index: 100;
  }
  body:has(#vista-dicom:not([hidden]))::after, body:has(.modal:not(.oculta))::after { display: none; }
  body:not(.en-visor) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .pie { padding-bottom: 1.75rem; padding-left: 1.25rem; padding-right: 1.25rem; }
  .boton-casa, .boton-cafe, .ir-arriba, .boton-menu-lateral {
    position: fixed;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    box-shadow: none;
  }
  .boton-casa { right: 12px; }
  .boton-cafe { right: 66px; }
  .ir-arriba { right: 120px; transform: none; }
  .boton-menu-lateral {
    left: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    visibility: visible;
    transform: none;
  }
  .boton-menu-lateral.visible { transform: none; }
}

/* En pantalla táctil los blancos suben al mínimo recomendado de 44 píxeles,
   porque un dedo no tiene la precisión de un puntero. */
@media (pointer: coarse) {
  .chip { min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .pag-btn { min-width: 44px; min-height: 44px; }
}

/* La preferencia de menos movimiento se aplica en css/0-movimiento.css, junto a los tokens que apaga. */


/* Enlaces dentro de notas y textos de las vistas: Sin esta regla heredaban el azul por omisión del navegador, que en el tema oscuro da 1.8 a 1. */
.apoyo-nota a, :where(.vista p) a:not([class]) { color: var(--marca-tinta); }

/* ===== css/10-legal.css ===== */
/* ============================================================
   Sección legal y enlaces legales del pie
   ------------------------------------------------------------
   Las cinco páginas comparten el marcado que genera
   js/legal/ContenidoLegal.js; las páginas estáticas de la
   carpeta legal usan el mismo marcado con css/seo.css.
   ============================================================ */

/* La pestaña legal existe solo para que las rutas tengan qué encender: Nunca se ve en la cabecera. */
.pestana.pestana-legal { display: none !important; }

.legal-migas { font-size: var(--t-sm); margin-bottom: 0.3rem; }
.legal-migas a { color: var(--tinta-3); text-decoration: none; }
.legal-migas a:hover { color: var(--marca-tinta); text-decoration: underline; }

.legal-cuerpo { display: grid; gap: 1rem; max-width: 62rem; padding-bottom: 2rem; color: var(--tinta-2); line-height: 1.65; }
.legal-cuerpo > p { max-width: 62rem; }
.legal-cuerpo a { color: var(--marca-tinta); }
.legal-cuerpo code { font-size: 0.85em; background: var(--superficie-3); padding: 0.05rem 0.3rem; border-radius: var(--r-sm); }
.legal-fecha { font-size: var(--t-sm); color: var(--tinta-3); }

.legal-bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: 1.2rem 1.4rem;
  display: grid; gap: 0.6rem;
}
.legal-bloque h2 { font-size: var(--t-base); font-weight: 800; letter-spacing: -0.01em; color: var(--tinta); }
.legal-bloque h2 small { font-weight: 600; color: var(--tinta-3); font-size: var(--t-sm); }
.legal-bloque ul { display: grid; gap: 0.35rem; padding-left: 1.2rem; }
.legal-condicional { border-style: dashed; }
.legal-estado, .legal-destacado, .legal-aviso-creditos {
  background: var(--info-suave);
  color: var(--tinta);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.9rem;
}
.legal-destacado { font-weight: 600; }
.legal-aviso-creditos { display: grid; gap: 0.5rem; background: var(--alerta-suave); }

.legal-lista { list-style: none; display: grid; gap: 0.75rem; }
.legal-lista li a {
  display: grid; gap: 0.2rem; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 1rem 1.2rem; box-shadow: var(--sombra-sm);
}
.legal-lista li a:hover { border-color: var(--marca-400); }
.legal-lista li strong { color: var(--tinta); }
.legal-lista li span { color: var(--tinta-2); font-size: var(--t-sm); }

.legal-autor { display: grid; gap: 0.3rem; }
.legal-autor-nombre { font-size: var(--t-lg); font-weight: 800; color: var(--tinta); }
.legal-autor ul { list-style: none; color: var(--tinta-2); }

.legal-indice ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: var(--t-sm); margin-top: 0.3rem; }

.legal-tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-sm); }
.legal-tabla table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.legal-tabla th {
  background: var(--superficie-2); text-align: left; padding: 0.5rem 0.7rem;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-2);
}
.legal-tabla td { padding: 0.5rem 0.7rem; border-top: 1px solid var(--borde-2); vertical-align: top; }
.legal-tabla td small { color: var(--tinta-3); }
.legal-carencia { color: var(--alerta-tinta); font-size: var(--t-xs); }
.legal-total { font-size: var(--t-sm); color: var(--tinta-3); }

/* Enlaces discretos del pie. */
.pie-legal { max-width: 760px; margin: 0.6rem auto 0; font-size: var(--t-xs); }
.pie-legal a { color: var(--tinta-3); text-decoration: none; }
.pie-legal a:hover { color: var(--marca-tinta); text-decoration: underline; }

@media (max-width: 640px) {
  .legal-bloque { padding: 1rem; }
  .legal-tabla table { font-size: var(--t-xs); }
}

@media print {
  .pie-legal { display: none; }
  .legal-bloque { box-shadow: none; break-inside: avoid; }
}

/* ===== css/11-inicio.css ===== */
/*
 * Página de inicio.
 * Reutiliza los tokens de color, las sombras y los radios de las demás vistas, así que se ve bien en los dos temas sin reglas propias para el oscuro.
 * Las rejillas se apilan en una sola columna en el teléfono, y ningún bloque fija un ancho que pueda desbordar a 390 píxeles.
 */

/* El atributo hidden debe ganar a las reglas de display de las tarjetas, porque el arranque oculta la de una sección vacía. */
.vista-inicio [hidden] { display: none !important; }

.inicio-portada { text-align: center; padding: 1.25rem 0 1.5rem; }
.inicio-buscador { max-width: 640px; margin: 1.4rem auto 0; }
/* Las cifras se pintan al llegar el índice de la portada: El alto reservado evita que el bloque salte. */
.inicio-heroe .metricas { list-style: none; padding: 0; min-height: 2.3rem; }

.inicio-bloque { margin-top: 2.25rem; }
.inicio-titulo-bloque {
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}

/* ---------- Tarjetas de las secciones ---------- */
.inicio-rejilla {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}
.inicio-tarjeta {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  height: 100%;
  padding: 1rem 1.05rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  color: var(--tinta);
  text-decoration: none;
  transition: transform var(--mov-normal) var(--mov-curva), border-color var(--mov-normal);
}
.inicio-tarjeta:hover {
  box-shadow: var(--sombra-md);
  border-color: color-mix(in srgb, var(--marca-400) 45%, var(--borde));
}
.inicio-tarjeta:focus-visible { outline-offset: 2px; }
.inicio-tarjeta-icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--marca-500) 12%, var(--superficie));
  color: var(--marca-tinta);
}
.inicio-tarjeta-icono .ico { width: 22px; height: 22px; }
.inicio-tarjeta-texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.inicio-tarjeta-nombre { font-weight: 800; font-size: var(--t-base); letter-spacing: -0.01em; }
.inicio-cifra { font-weight: 700; font-size: var(--t-sm); color: var(--marca-tinta); font-variant-numeric: tabular-nums; }
.inicio-cifra:empty { display: none; }
.inicio-tarjeta-descripcion { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45; }

/* ---------- Sistemas y modalidades ---------- */
.inicio-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 1.5rem; }
.inicio-lista-enlaces {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.55rem;
}
.inicio-lista-modalidades { grid-template-columns: minmax(0, 1fr); }
.inicio-enlace-sistema, .inicio-enlace-modalidad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--mov-normal), transform var(--mov-normal) var(--mov-curva);
}
.inicio-enlace-sistema { border-left: 4px solid var(--acento-sis, var(--marca-400)); }
.inicio-enlace-sistema:hover, .inicio-enlace-modalidad:hover {
  border-color: color-mix(in srgb, var(--marca-400) 55%, var(--borde));
  box-shadow: var(--sombra-sm);
}
.inicio-enlace-sistema:hover { border-left-color: var(--acento-sis, var(--marca-400)); }
.inicio-enlace-nombre { font-weight: 700; font-size: var(--t-sm); flex: 1; min-width: 0; }
.inicio-enlace-cuenta { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inicio-enlace-modalidad .insignia { min-width: 2.6rem; justify-content: center; }

/* ---------- Ficha del día ---------- */
.inicio-dia-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1.25rem;
  padding: 1rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
}
.inicio-dia-marco {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  /* Negro de negatoscopio: El único fondo oscuro de la portada clara es el de la imagen. */
  background: var(--negatoscopio);
}
.inicio-dia-imagen { width: 100%; height: 100%; object-fit: contain; display: block; }
.inicio-dia-texto { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.inicio-dia-titulo { font-size: var(--t-base); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.inicio-dia-titulo a { color: var(--tinta); text-decoration: none; }
.inicio-dia-titulo a:hover { color: var(--marca-tinta); text-decoration: underline; }
.inicio-dia-subtitulo {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tinta-3);
}
.inicio-dia-subtitulo .ico { width: 16px; height: 16px; color: var(--marca-tinta); }
.inicio-dia-lista { display: grid; gap: 0.3rem; padding-left: 1.2rem; color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.5; }
.inicio-dia-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: auto; padding-top: 0.3rem; }
.inicio-boton { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0; text-decoration: none; }
.inicio-boton-secundario { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0; text-decoration: none; }
.inicio-boton-secundario .ico { width: 16px; height: 16px; }

/* ---------- Bloque principal: Titular a la izquierda y ficha del día en grande a la derecha ---------- */
.inicio-heroe { display: grid; gap: 1.5rem; align-items: start; text-align: left; }
/* El titular y el lema del inicio usan las clases del encabezado común de las secciones. */
.inicio-heroe .inicio-buscador { margin-left: 0; margin-right: 0; }
.inicio-heroe-dia .inicio-titulo-bloque { font-size: var(--t-sm); text-transform: none; color: var(--tinta-2); margin-bottom: 0.5rem; }
.inicio-heroe-dia .inicio-dia-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 0.75rem; }
.inicio-heroe-dia .inicio-dia-marco { aspect-ratio: 16 / 10; border-radius: var(--r-sm); }
/* En el bloque principal bastan dos puntos de «qué observar», para que «Abrir en DICOM» quede en la primera pantalla; el resto está en la ficha. */
.inicio-heroe-dia .inicio-dia-lista li:nth-child(n + 3) { display: none; }
.inicio-heroe-dia .inicio-dia-titulo { font-size: var(--t-lg); }
@media (min-width: 900px) {
  .inicio-heroe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem; padding-top: 2rem; }
  .inicio-heroe-texto { padding-top: 2.25rem; }
}

/* ---------- Enlace final al apoyo ---------- */
.inicio-apoyo { margin-top: 2.25rem; text-align: center; font-size: var(--t-sm); }
.inicio-apoyo a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--tinta-2); text-decoration: none; }
.inicio-apoyo a:hover { color: var(--marca-tinta); text-decoration: underline; }
.inicio-apoyo .ico { width: 16px; height: 16px; color: var(--peligro); }

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 860px) {
  .inicio-columnas { grid-template-columns: minmax(0, 1fr); }
  .inicio-dia-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .inicio-rejilla { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .inicio-tarjeta { padding: 0.85rem 0.9rem; }
  .inicio-lista-enlaces { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .inicio-lista-modalidades { grid-template-columns: minmax(0, 1fr); }
  .inicio-enlace-sistema { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .inicio-tarjeta, .inicio-enlace-sistema, .inicio-enlace-modalidad { transition: none; }
  .inicio-tarjeta:hover, .inicio-enlace-sistema:hover, .inicio-enlace-modalidad:hover { transform: none; }
}

@media print {
  .inicio-buscador, .inicio-apoyo { display: none !important; }
}

/* ===== css/14-visor3d.css ===== */
/*
 * Modos avanzados del visor (js/visor3d): 3D, slab, oblicuo, fusión, PET/TC, CPR, resta y superficie.
 * Todo vive dentro de #visor-modo-extra; las vistas son negras como el visor y los controles usan los colores del sitio.
 * Va al final del paquete de la portada (herramientas/empaquetar-css.js); no se enlaza aparte.
 */

.visor3d {
  display: flex; flex-direction: column; gap: 0.5rem;
  width: 100%;
  color: var(--tinta, inherit);
}
.visor3d:focus { outline: none; }
.visor3d:focus-visible { outline: 2px solid var(--marca-500, #2563eb); outline-offset: 2px; }

.visor3d-estado {
  margin: 0; min-height: 1.4em;
  /* Va sobre el fondo negro del visor en los dos temas: El gris del texto del sitio apenas se leía. */
  font-size: 0.85rem; color: #c9d4e2; padding: 0.2rem 0.5rem;
}
.visor3d-error {
  margin: 0; padding: 0.75rem 1rem;
  border: 1px solid var(--borde, #ccc); border-radius: var(--r-sm, 6px);
  background: var(--superficie-2, #f5f5f5);
}

.visor3d-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: 0.75rem;
  align-items: start;
}
.visor3d-rejilla { display: grid; gap: 4px; min-width: 0; }
.visor3d-rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visor3d-rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.visor3d-vista {
  position: relative; min-width: 0;
  height: var(--visor-alto, 70vh); min-height: 280px;
  background: var(--visor-fondo, #000);
  border-radius: var(--r-sm, 6px); overflow: hidden;
  border-top: 3px solid var(--color-plano, transparent);
}
.visor3d-rejilla .visor3d-vista { height: calc(var(--visor-alto, 70vh) * 0.75); }
.visor3d-lienzo { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.visor3d-lienzo-3d { cursor: grab; }
.visor3d-lienzo-3d:active { cursor: grabbing; }
.visor3d-rotulo, .visor3d-lectura {
  position: absolute; left: 0.5rem;
  padding: 0.1rem 0.35rem; border-radius: 4px;
  background: rgba(0, 0, 0, 0.55); color: var(--visor-rotulo, #e5e7eb);
  font: 600 0.75rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: none;
}
.visor3d-rotulo { top: 0.4rem; }
.visor3d-lectura { bottom: 0.4rem; }
.visor3d-lectura:empty { display: none; }

.visor3d-lateral {
  display: flex; flex-direction: column; gap: 0.6rem;
  max-height: var(--visor-alto, 70vh); overflow-y: auto;
  padding: 0.6rem; border: 1px solid var(--borde, #ddd); border-radius: var(--r-md, 8px);
  background: var(--superficie, #fff);
}
.visor3d-controles { display: flex; flex-direction: column; gap: 0.55rem; }
.visor3d-control { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.5rem; align-items: center; font-size: 0.82rem; }
.visor3d-control label { grid-column: 1 / -1; font-weight: 600; color: var(--tinta-2, inherit); }
.visor3d-control input[type="range"], .visor3d-control select, .visor3d-control input[type="number"], .visor3d-control input[type="time"] {
  width: 100%; min-height: 32px; min-width: 0;
}
.visor3d-control select, .visor3d-control input[type="number"], .visor3d-control input[type="time"] {
  padding: 0.25rem 0.4rem; border: 1px solid var(--borde, #ccc); border-radius: var(--r-sm, 6px);
  background: var(--superficie, #fff); color: inherit; font: inherit;
}
.visor3d-control select { grid-column: 1 / -1; }
.visor3d-casilla { grid-template-columns: auto 1fr; }
.visor3d-casilla label { grid-column: auto; font-weight: 500; }
.visor3d-valor, .visor3d-unidad { font-variant-numeric: tabular-nums; color: var(--tinta-3, inherit); white-space: nowrap; }

.visor3d-grupo { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.visor3d-boton {
  min-height: 32px; padding: 0.3rem 0.6rem;
  border: 1px solid var(--borde, #ccc); border-radius: var(--r-sm, 6px);
  background: var(--superficie-2, #f3f4f6); color: inherit;
  font: 600 0.8rem/1.1 inherit; cursor: pointer;
}
.visor3d-boton:hover { border-color: var(--marca-500, #2563eb); }
.visor3d-boton:focus-visible { outline: 2px solid var(--marca-500, #2563eb); outline-offset: 1px; }
.visor3d-boton:disabled { opacity: 0.5; cursor: not-allowed; }

.visor3d-recorte {
  display: flex; flex-direction: column; gap: 0.45rem;
  margin: 0; padding: 0.5rem; border: 1px solid var(--borde, #ddd); border-radius: var(--r-sm, 6px);
}
.visor3d-recorte legend { padding: 0 0.25rem; font-weight: 700; font-size: 0.82rem; }
.visor3d-nota { margin: 0; font-size: 0.8rem; color: var(--tinta-3, inherit); }

@media (max-width: 900px) {
  .visor3d-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .visor3d-lateral { max-height: none; }
  .visor3d-rejilla-3 { grid-template-columns: minmax(0, 1fr); }
  .visor3d-rejilla .visor3d-vista, .visor3d-vista { height: 58vh; min-height: 240px; }
}
@media (max-width: 600px) {
  .visor3d-rejilla-2 { grid-template-columns: minmax(0, 1fr); }
  .visor3d-rejilla .visor3d-vista, .visor3d-vista { height: 48vh; }
}
@media (prefers-reduced-motion: reduce) {
  .visor3d * { transition: none !important; }
}

/* ===== css/15-movimiento.css ===== */
/*
 * Movimiento de la aplicación.
 * Reúne las entradas, el escalonado de las tarjetas, la elevación al pasar el ratón, el cierre de ventanas y desplegables, los acordeones y la respuesta de los botones.
 * Todo usa los tokens de css/0-movimiento.css y solo anima transform y opacity, de modo que nada recalcula la disposición ni mueve el contenido.
 * Los estados de partida que esconden algo (barra en cero, cifra transparente) solo rigen bajo la clase mov-activo, que pone js/interfaz/Movimiento.js:
 * Sin código, el contenido se ve en su estado final.
 * Va al final del paquete; las hojas del visor (9, 12 y 13) siguen después y no se tocan aquí, porque el lienzo DICOM no se anima.
 */

/* ---------- Escalonado de tarjetas ----------
   Cada rejilla numera sus primeros hijos y el número se hereda hasta la tarjeta, esté suelta o dentro de un li.
   El escalón se corta en el sexto: Con 40 ms el último empieza a los 240 ms y todo termina antes de medio segundo. */
:is(.galeria, .galeria-texto, .temas, .glosario, .inicio-rejilla, .inicio-lista-enlaces, .inicio-lista-modalidades) > :nth-child(2) { --orden: 1; }
:is(.galeria, .galeria-texto, .temas, .glosario, .inicio-rejilla, .inicio-lista-enlaces, .inicio-lista-modalidades) > :nth-child(3) { --orden: 2; }
:is(.galeria, .galeria-texto, .temas, .glosario, .inicio-rejilla, .inicio-lista-enlaces, .inicio-lista-modalidades) > :nth-child(4) { --orden: 3; }
:is(.galeria, .galeria-texto, .temas, .glosario, .inicio-rejilla, .inicio-lista-enlaces, .inicio-lista-modalidades) > :nth-child(5) { --orden: 4; }
:is(.galeria, .galeria-texto, .temas, .glosario, .inicio-rejilla, .inicio-lista-enlaces, .inicio-lista-modalidades) > :nth-child(6) { --orden: 5; }
:is(.galeria, .galeria-texto, .temas, .glosario, .inicio-rejilla, .inicio-lista-enlaces, .inicio-lista-modalidades) > :nth-child(n+7) { --orden: 6; }

/* La entrada rellena solo hacia atrás (backwards): Al terminar suelta transform y la elevación del hover vuelve a funcionar. */
:is(.tarjeta, .tarjeta-texto, .tema-tarjeta, .termino, .inicio-tarjeta, .inicio-enlace-sistema, .inicio-enlace-modalidad) {
  animation: aparecer var(--mov-normal) var(--mov-curva) backwards;
  animation-delay: calc(var(--orden, 0) * var(--mov-escalon));
}

/* ---------- Elevación al pasar el ratón o con foco ----------
   Con puntero fino solamente: En una pantalla táctil el hover se queda pegado tras el toque. El foco de teclado eleva igual. */
@media (hover: hover) and (pointer: fine) {
  :is(.tarjeta, .tarjeta-texto, .tema-tarjeta, .termino, .inicio-tarjeta, .inicio-enlace-sistema, .inicio-enlace-modalidad):hover {
    transform: translateY(var(--mov-elevacion));
  }
}
:is(.tarjeta, .tarjeta-texto, .tema-tarjeta, .termino, .inicio-tarjeta, .inicio-enlace-sistema, .inicio-enlace-modalidad):focus-visible {
  transform: translateY(var(--mov-elevacion));
}

/* ---------- Cambio de sección ----------
   Con View Transitions el navegador funde la página entera; la salida dura menos que la entrada. */
::view-transition-old(root) {
  animation-duration: var(--mov-rapida);
  animation-timing-function: var(--mov-curva);
}
::view-transition-new(root) {
  animation-duration: var(--mov-normal);
  animation-timing-function: var(--mov-curva);
}
/* Alternativa sin View Transitions: Movimiento.entrarVista pone la clase al mostrar la vista y la quita al terminar. */
.vista.mov-entrando { animation: aparecer var(--mov-normal) var(--mov-curva); }

/* Encabezados de sección: Entran un poco después del fundido cada vez que la vista se muestra (pasar de display none a visible reinicia la animación). */
.encabezado-seccion { animation: aparecer var(--mov-lenta) var(--mov-curva) backwards; }

/* ---------- Barras y medidores que crecen desde cero ----------
   La escala de las calculadoras y la pista del modo estudio llevan mov-crece. El observador añade mov-visto cuando la barra entra en pantalla. */
.mov-crece {
  transform-origin: left center;
  transition: transform var(--mov-lenta) var(--mov-curva);
}
.mov-activo .mov-crece:not(.mov-visto) { transform: scaleX(0); }

/* ---------- Cifras que cuentan ----------
   El ancho final se reserva antes de contar y los dígitos son tabulares, así que el texto de al lado no se mueve. */
.mov-cifra {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--mov-rapida) var(--mov-curva);
}
.mov-activo .mov-cifra-pendiente { opacity: 0; }

/* ---------- Ventanas de detalle ----------
   Abren con la animación surgir de 5-modales.css y cierran con la salida de js/nucleo/Modal.js (Web Animations, tiempo rápido).
   Se hizo en código porque .oculta lleva display none !important y Chrome no difiere display con allow-discrete sobre esa regla.
   Durante la salida la ventana ya no capta clics. */
.modal.saliendo { pointer-events: none; }

/* ---------- Menú lateral ----------
   Entra en el tiempo lento y sale en el normal: Lo que se va importa menos que lo que llega. */
.menu-lateral,
.menu-lateral-fondo { transition-duration: var(--mov-normal); }
.menu-lateral.abierto,
.menu-lateral-fondo.abierto { transition-duration: var(--mov-lenta); }

/* ---------- Desplegable de instalar en iOS ----------
   Nace desde el botón con @starting-style y se va con display diferido. */
.instalar-ios {
  transform-origin: top right;
  transition: opacity var(--mov-normal) var(--mov-curva), transform var(--mov-normal) var(--mov-curva), display var(--mov-normal) allow-discrete;
}
.instalar-ios[hidden] {
  opacity: 0;
  transform: translateY(calc(var(--mov-desplazamiento) * -0.5)) scale(0.98);
  transition-duration: var(--mov-rapida);
}
@starting-style {
  .instalar-ios:not([hidden]) { opacity: 0; transform: translateY(calc(var(--mov-desplazamiento) * -0.5)) scale(0.98); }
}

/* ---------- Acordeones ----------
   El contenido de un details se funde al abrir y al cerrar; la altura cambia de golpe porque animarla recalcularía la disposición en cada fotograma.
   Un navegador sin ::details-content descarta la regla y abre como siempre. */
details::details-content {
  opacity: 0;
  transition: opacity var(--mov-normal) var(--mov-curva), content-visibility var(--mov-normal) allow-discrete;
}
details[open]::details-content { opacity: 1; }

/* ---------- Respuesta al pulsar ----------
   Botones y chips se hunden un poco al pulsarlos. Quedan fuera los que ya se colocan con transform (flechas de la ventana, ir arriba y el botón del menú lateral). */
:is(.chip, .pestana, .boton-primario, .boton-enlace, .boton-limpiar, .boton-tema, .boton-instalar, .boton-casa, .boton-cafe,
    .calc-ejemplo, .calc-copiar, .quiz-opcion:not(:disabled), .pag-btn:not(:disabled):not(.activo), .menu-lateral-item, .menu-lateral-cerrar):active {
  transform: scale(var(--mov-pulsacion));
}
.boton-instalar { transition: transform var(--mov-rapida) var(--mov-curva), border-color var(--mov-normal); }

/* Al imprimir, todo en su estado final aunque la página no llegara a mostrarlo. */
@media print {
  .mov-activo .mov-crece { transform: none; }
  .mov-activo .mov-cifra-pendiente { opacity: 1; }
}