/* informes/activos/visual.css → /informes/visual.css
   Capa visual de los informes (la generan informes/visual-metodo.mjs y visual-componentes.mjs): portada ilustrada de
   cada parte, bloques con diagramas y animaciones. Va después de informe.css. Cada parte trae su color en --acento.
   Las animaciones de entrada solo se aplican con JS (clase .js en <html>, la pone idioma-inicial.js): sin JS se ve
   todo en su estado final. Con «reducir movimiento», todo quieto (al final del archivo). */

.parte {
  --acento: var(--primario);
  --acento-suave: color-mix(in srgb, var(--acento) 10%, var(--superficie));
  --acento-medio: color-mix(in srgb, var(--acento) 24%, var(--superficie));
}

/* ── Entrada animada ── */
.js .revelar .anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.js svg.revelar .anim {
  transform: translateY(8px);
  transform-box: fill-box;
}

.js .revelar.visto .anim {
  opacity: 1;
  transform: none;
}

.js .revelar .trazo {
  stroke-dasharray: var(--l, 600);
  stroke-dashoffset: var(--l, 600);
  transition: stroke-dashoffset 1.6s ease 0.2s;
}

.js .revelar.visto .trazo {
  stroke-dashoffset: 0;
}

/* ── Iconos ── */
.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico-mini {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}

.ico-caja {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 9px;
  border-radius: 11px;
  background: var(--acento-suave);
  color: var(--acento);
}

/* ── Portada de cada parte ── */
.parte-portada {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin: 0 0 32px;
  padding: 32px;
  border-radius: 22px;
  background: radial-gradient(circle at 85% 20%, var(--acento-medio), transparent 62%), var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

.parte-portada .parte-titulo {
  margin: 0;
  padding: 0;
  border: 0;
}

.parte-portada .parte-num {
  color: var(--acento);
}

.esencia {
  margin: 14px 0 0;
  color: var(--texto);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}

.pp-ilustracion {
  display: grid;
  place-items: center;
}

.ilustracion {
  width: 100%;
  max-width: 360px;
  height: auto;
  overflow: visible;
  font-family: inherit;
}

@media (max-width: 760px) {
  .parte-portada {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px;
  }

  .ilustracion {
    max-width: 300px;
  }
}

/* ── Bloques ── */
.bloque {
  margin: 0 0 40px;
}

.bloque-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--tinta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bloque-rotulo::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--acento);
}

.regla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--acento-suave);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.45;
}

.regla .ico {
  margin-top: 1px;
  color: var(--acento);
}

/* Tarjetas */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tarjetas.cuatro {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tarjeta-v {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.tarjeta-v .ico-caja {
  margin-bottom: 6px;
}

.tarjeta-v strong {
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.3;
}

.tarjeta-v span {
  color: var(--texto);
  font-size: 14.5px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .tarjetas,
  .tarjetas.cuatro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .tarjetas,
  .tarjetas.cuatro {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Antes de empezar: mapa de partes y códigos ── */
.mapa-partes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.documento .parte-tesela {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-top: 4px solid var(--c);
  border-radius: 14px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 13.5px;
  line-height: 1.4;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.parte-tesela:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}

.tesela-num {
  color: var(--c);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.parte-tesela strong {
  color: var(--tinta);
  font-size: 16px;
}

.codigos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.codigo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 14px;
}

.documento .codigo code {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 12.5px;
}

.mapa-num {
  fill: #fff;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  text-anchor: middle;
}

/* ── Parte I: iceberg y principios ── */
.iceberg .agua {
  fill: color-mix(in srgb, var(--acento) 8%, var(--superficie));
}

.iceberg .ola {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  opacity: 0.5;
  animation: ola 6s linear infinite;
}

@keyframes ola {
  to {
    transform: translateX(60px);
  }
}

.iceberg .punta {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linejoin: round;
}

.iceberg .pantalla {
  fill: var(--tinta);
}

.iceberg .pantalla-lineas {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.8;
}

.iceberg .rotulo-punta {
  fill: var(--tinta);
  font-size: 14px;
  font-weight: 700;
}

.iceberg .flecha-punta {
  stroke: var(--tinta);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.iceberg .masa {
  opacity: 0.92;
}

.iceberg .capa-linea {
  stroke: #fff;
  stroke-width: 1;
  opacity: 0.45;
}

.iceberg .capa-texto {
  fill: #fff;
  font-size: 13px;
  font-weight: 650;
  text-anchor: middle;
}

.iceberg .rotulo-contexto {
  fill: var(--acento);
  font-size: 12px;
  font-weight: 700;
}

.principios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.principios li {
  margin: 0 !important;
}

.documento .principios a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-content: start;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 13.5px;
  line-height: 1.4;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.documento .principios a:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
}

.principio-num {
  grid-row: span 2;
  color: var(--acento);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.principios strong {
  color: var(--tinta);
  font-size: 14.5px;
}

@media (max-width: 900px) {
  .principios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .principios {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Ilustraciones (repos, rutas, hojas, ciclo, ventana, escudo, metro) ── */
.ilustracion .repo {
  fill: var(--acento-suave);
  stroke: var(--acento-medio);
  stroke-width: 1.5;
}

.ilustracion .repo-texto {
  fill: var(--tinta);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
}

.ilustracion .nota-mini {
  fill: var(--tenue);
  font-size: 11px;
  font-weight: 500;
  text-anchor: middle;
}

.ilustracion .nodo circle {
  fill: var(--acento);
}

.ilustracion .nodo-2 circle {
  fill: var(--tinta);
}

.ilustracion .nodo text {
  fill: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-anchor: middle;
}

.ilustracion .ruta {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  opacity: 0.6;
}

.ilustracion .ruta.trazo {
  stroke-dasharray: var(--l, 600);
}

.ilustracion .buzon {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2;
}

.ilustracion .buzon-tapa {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2;
}

.ilustracion .sobre {
  fill: var(--acento);
  stroke: #fff;
  stroke-width: 2;
}

.ilustracion .sobre-2 {
  fill: var(--tinta);
}

.ilustracion .po circle {
  fill: var(--tinta);
}

.ilustracion .po text {
  fill: var(--tinta);
  font-size: 12px;
  font-weight: 700;
}

.ilustracion .candado-mini rect {
  fill: var(--tinta);
}

.ilustracion .candado-mini path {
  stroke: var(--tinta);
  stroke-width: 3;
}

.ilustracion .hoja rect {
  fill: var(--superficie);
  stroke: var(--acento-medio);
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 10px rgba(10, 37, 64, 0.08));
}

.ilustracion .hoja path {
  stroke: var(--borde-fuerte);
  stroke-width: 3;
  stroke-linecap: round;
}

.ilustracion .hoja text {
  fill: var(--acento);
  font-size: 12px;
  font-weight: 700;
}

.ilustracion .anillo {
  fill: none;
  stroke: var(--acento-medio);
  stroke-width: 10;
}

.ilustracion .giro {
  transform-origin: 150px 150px;
  animation: giro 7s linear infinite;
}

@keyframes giro {
  to {
    transform: rotate(360deg);
  }
}

.ilustracion .punto-giro {
  fill: var(--acento);
}

.ilustracion .estacion {
  fill: var(--superficie);
  stroke: var(--acento);
  stroke-width: 2.5;
}

.ilustracion .estacion-texto {
  fill: var(--acento);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
}

.ilustracion .estacion-nombre {
  fill: var(--tinta);
  font-size: 12px;
  font-weight: 650;
  text-anchor: middle;
}

.ilustracion .centro-texto {
  fill: var(--tinta);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
}

.ilustracion .centro-sub {
  fill: var(--tenue);
  font-size: 11px;
  text-anchor: middle;
}

.ilustracion .ventana {
  fill: var(--superficie);
  stroke: var(--borde-fuerte);
  stroke-width: 1.5;
}

.ilustracion .ventana-barra {
  fill: var(--tinta);
}

.ilustracion .ventana-punto {
  fill: #fff;
  opacity: 0.6;
}

.ilustracion .ui {
  fill: var(--tinta);
}

.ilustracion .ui.suave {
  fill: var(--borde);
}

.ilustracion .boton-ui {
  fill: var(--acento);
}

.ilustracion .usuario-circulo {
  fill: var(--acento-suave);
}

.ilustracion .usuario-cabeza,
.ilustracion .usuario-cuerpo {
  fill: var(--acento);
}

.ilustracion .bocadillo {
  fill: var(--tinta);
}

.ilustracion .bocadillo-texto {
  fill: #fff;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
}

.ilustracion .bocadillo-sub {
  fill: #c7d2e3;
  font-size: 11px;
  text-anchor: middle;
}

.ilustracion .check-grande {
  fill: var(--acento);
  font-size: 14px;
  font-weight: 700;
}

.ilustracion .check-sub {
  fill: var(--tinta);
  font-size: 22px;
  font-weight: 800;
}

.ilustracion .escudo-forma {
  fill: var(--acento-suave);
  stroke: var(--acento);
  stroke-width: 3;
}

.ilustracion .escudo-huella {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.ilustracion .pastilla {
  fill: var(--acento);
}

.ilustracion .pastilla-clara {
  fill: var(--tinta);
}

.ilustracion .pastilla-texto {
  fill: #fff;
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
}

.ilustracion .metro-linea {
  stroke: var(--tinta);
  stroke-width: 6;
  stroke-linecap: round;
}

.ilustracion .metro-parada {
  fill: #fff;
  stroke: var(--tinta);
  stroke-width: 2.5;
}

.ilustracion .metro-texto {
  fill: var(--tinta);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.ilustracion .metro-grupo {
  font-size: 11.5px;
  font-weight: 700;
  text-anchor: middle;
}

.metro-parada.g0 { stroke: #635bff; }
.metro-parada.g1 { stroke: #d97706; }
.metro-parada.g2 { stroke: #0891b2; }
.metro-parada.g3 { stroke: #db2777; }
.metro-parada.g4 { stroke: #0e9f6e; }
.metro-grupo.g0 { fill: #635bff; }
.metro-grupo.g1 { fill: #d97706; }
.metro-grupo.g2 { fill: #0891b2; }
.metro-grupo.g3 { fill: #db2777; }
.metro-grupo.g4 { fill: #0e9f6e; }

/* ── Parte II: arquitectura ── */
.arq {
  display: grid;
  grid-template-columns: auto 36px minmax(0, 1fr) 36px auto 36px minmax(0, 1fr);
  align-items: center;
}

.arq-nodo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 13px;
  line-height: 1.4;
}

.arq-nodo strong {
  color: var(--tinta);
  font-size: 15px;
}

.arq-po {
  align-items: center;
  text-align: center;
}

.arq-repo,
.arq-buzon {
  padding: 10px;
  border-radius: 16px;
  background: var(--acento-suave);
  border: 1px dashed var(--acento);
}

.arq-repo-nombre {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 4px 10px;
  color: var(--acento);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arq-repo-nombre .ico {
  width: 15px;
  height: 15px;
}

.arq-buzon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 128px;
}

.arq-archivo {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
}

.arq-conector {
  position: relative;
  height: 2px;
  margin: 0 4px;
  background: repeating-linear-gradient(90deg, var(--acento) 0 5px, transparent 5px 10px);
}

.arq-conector small {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--tenue);
  font-size: 11px;
}

.viajero {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-medio);
  animation: viaje 2.4s ease-in-out infinite;
}

.viajero.vuelta {
  background: var(--tinta);
  animation-direction: reverse;
  animation-delay: 1.2s;
}

@keyframes viaje {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 10px); opacity: 0; }
}

@keyframes viaje-vertical {
  0% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: calc(100% - 10px); opacity: 0; }
}

@media (max-width: 1100px) {
  .arq {
    grid-template-columns: minmax(0, 1fr);
  }

  .arq-po {
    justify-self: center;
  }

  .arq-conector {
    justify-self: center;
    width: 2px;
    height: 34px;
    margin: 4px 0;
    background: repeating-linear-gradient(180deg, var(--acento) 0 5px, transparent 5px 10px);
  }

  .arq-conector small {
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
  }

  .viajero {
    top: 0;
    left: 50%;
    margin: 0 0 0 -5px;
    animation-name: viaje-vertical;
  }

  .arq-buzon {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .arq-buzon .arq-repo-nombre {
    width: 100%;
  }
}

.permisos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.permiso {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  background: var(--tinta);
  color: #c7d2e3;
  font-size: 14px;
  line-height: 1.5;
}

.documento .permiso strong {
  color: #fff;
  font-size: 15.5px;
}

.permiso .ico-caja {
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 760px) {
  .permisos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tronco {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tronco-caso {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
}

.tronco-caso > svg {
  width: 100%;
  height: auto;
}

.tronco-caso figcaption {
  margin-top: 8px;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
}

.t-linea {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 4;
  stroke-linecap: round;
}

.t-rama {
  fill: none;
  stroke: #db2777;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.7;
}

.t-punto {
  fill: #fff;
  stroke: var(--tinta);
  stroke-width: 2.5;
}

.t-punto.verde {
  fill: #0e9f6e;
  stroke: #fff;
}

.mal figcaption .ico {
  color: #db2777;
}

.bien figcaption .ico {
  color: #0e9f6e;
}

.modelos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.modelo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--acento-suave);
  font-size: 14px;
}

.modelo-tam {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--acento);
  font-size: 12.5px;
  font-weight: 700;
}

.modelo-tam.grande {
  background: var(--acento);
  color: #fff;
}

@media (max-width: 600px) {
  .tronco,
  .modelos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Parte III: cascada, estantería, confianza, stepper, clases, reloj ── */
.cascada ol {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.cascada ol::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  width: 2px;
  background: linear-gradient(var(--acento), var(--acento-medio));
  transform-origin: top;
  transition: transform 1.6s ease 0.2s;
}

.js .revelar:not(.visto) .cascada ol::before {
  transform: scaleY(0);
}

.cascada li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0 14px;
  align-items: center;
  margin: 0 !important;
}

.cascada li .ico-caja {
  grid-row: span 2;
  padding: 7px;
  border: 2px solid var(--acento);
  border-radius: 50%;
  background: var(--superficie);
}

.cascada li strong {
  color: var(--tinta);
  font-size: 15.5px;
}

.cascada li span {
  color: var(--tenue);
  font-size: 13.5px;
  line-height: 1.4;
}

.cascada-vuelta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--acento);
  font-size: 14px;
  font-weight: 600;
}

.estanteria {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.estante {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-bottom: 4px solid var(--acento);
}

.documento .estante strong {
  margin-bottom: 4px;
  color: var(--acento);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.estante span {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--tinta);
  font-size: 13.5px;
  line-height: 1.3;
}

.estante .ico {
  color: var(--tenue);
}

@media (max-width: 1000px) {
  .estanteria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .estanteria {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dice-hace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.dice-hace > div:not(.hueco) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 14.5px;
}

.dice-hace .hueco {
  color: var(--acento);
  font-size: 40px;
  font-weight: 800;
}

.confianza {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.confianza .regla {
  grid-column: 1 / -1;
}

.nivel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 13.5px;
  line-height: 1.45;
}

.nivel strong {
  font-size: 15px;
}

.barras {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.barras span {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--borde);
}

.barras span.llena {
  background: var(--c);
}

.barras span.aparte {
  background: repeating-linear-gradient(45deg, var(--c) 0 4px, transparent 4px 8px);
}

@media (max-width: 900px) {
  .confianza {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .confianza,
  .dice-hace {
    grid-template-columns: minmax(0, 1fr);
  }

  .dice-hace .hueco {
    justify-self: center;
  }
}

.stepper {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.stepper li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--tinta);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.stepper li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 2px;
  background: var(--acento-medio);
}

.paso-letra {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--acento-suave);
  border: 2px solid var(--acento);
  color: var(--acento);
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
}

.stepper li:last-child .paso-letra {
  background: var(--acento);
  color: #fff;
}

@media (max-width: 760px) {
  .stepper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 18px;
  }

  .stepper li:nth-child(4)::after {
    display: none;
  }
}

.clases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.clase {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 13.5px;
  line-height: 1.4;
}

.clase strong {
  font-size: 15px;
}

.clase-letra {
  width: fit-content;
  margin-bottom: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  color: #fff;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
}

.clase-0 .clase-letra { background: #0e9f6e; }
.clase-1 .clase-letra { background: #0891b2; }
.clase-2 .clase-letra { background: linear-gradient(90deg, #0e9f6e 50%, #0891b2 50%); }
.clase-3 .clase-letra { background: #64748b; }

@media (max-width: 760px) {
  .clases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.reloj-sim {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
}

.reloj-sim svg {
  width: 100%;
  height: auto;
}

.reloj-sim p {
  margin: 8px 0 0;
  font-size: 14.5px;
}

.reloj-linea {
  stroke: var(--borde-fuerte);
  stroke-width: 4;
  stroke-linecap: round;
}

.reloj-marca {
  stroke: var(--tenue);
  stroke-width: 2;
}

.reloj-texto {
  fill: var(--tenue);
  font-family: var(--mono);
  font-size: 15px;
  text-anchor: middle;
}

.reloj-hito circle {
  fill: var(--acento);
}

.reloj-hito text {
  fill: var(--acento);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
}

.reloj-cursor {
  animation: cursor-reloj 7s ease-in-out infinite;
}

.reloj-cursor circle {
  fill: var(--tinta);
  stroke: #fff;
  stroke-width: 3;
}

@keyframes cursor-reloj {
  0% { transform: translateX(60px); }
  45% { transform: translateX(510px); }
  55% { transform: translateX(510px); }
  100% { transform: translateX(60px); }
}

/* ── Parte IV: pregunta con opciones, cierre, modo continuo, latido ── */
.mock-pregunta {
  position: relative;
  max-width: 640px;
  padding: 18px;
  border-radius: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-hover);
}

.mock-cabeza {
  margin: 0 0 12px !important;
  color: var(--tinta);
  font-size: 16px;
  font-weight: 650;
}

.documento .mock-cabeza code {
  margin-right: 6px;
  background: var(--tinta);
  color: #fff;
  font-size: 12px;
}

.mock-pregunta ul {
  display: grid;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.mock-pregunta li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin: 0 !important;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  font-size: 14px;
  line-height: 1.4;
}

.mock-pregunta li strong {
  display: block;
}

.mock-pregunta li small {
  color: var(--tenue);
  font-size: 13px;
}

.radio {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--borde-fuerte);
  box-sizing: border-box;
}

.mock-pregunta .recomendada {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.recomendada .radio {
  border-color: var(--acento);
  background: radial-gradient(circle, var(--acento) 0 3px, transparent 4px);
  animation: marcar 4s ease infinite;
}

@keyframes marcar {
  0%, 34% { background: transparent; }
  38%, 100% { background: radial-gradient(circle, var(--acento) 0 3px, transparent 4px); }
}

.etiqueta-rec {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.mock-pie {
  margin: 12px 0 0 !important;
  color: var(--tenue);
  font-size: 12.5px;
}

.cursor {
  position: absolute;
  top: 72px;
  left: 22px;
  width: 18px;
  height: 22px;
  background: var(--tinta);
  clip-path: polygon(0 0, 0 80%, 28% 62%, 48% 100%, 62% 94%, 42% 57%, 78% 57%);
  animation: cursor-clic 4s ease infinite;
  pointer-events: none;
}

@keyframes cursor-clic {
  0% { transform: translate(220px, 130px); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translate(6px, 8px); }
  34% { transform: translate(6px, 8px) scale(0.85); }
  38% { transform: translate(6px, 8px) scale(1); }
  80% { transform: translate(6px, 8px); opacity: 1; }
  100% { transform: translate(6px, 8px); opacity: 0; }
}

.cierre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.cierre ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.cierre li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
}

.cierre li .ico {
  padding: 2px;
  border-radius: 50%;
  background: #0e9f6e;
  color: #fff;
  stroke-width: 3;
}

.cierre-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 22px;
  border-radius: 18px;
  background: #0e9f6e;
  color: #e7f8f1;
  font-size: 13px;
  text-align: center;
}

.documento .cierre-final strong {
  color: #fff;
  font-family: var(--mono);
  font-size: 18px;
}

.cierre-final .ico-caja {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

@media (max-width: 700px) {
  .cierre {
    grid-template-columns: minmax(0, 1fr);
  }
}

.continuo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mando {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 18px;
  background: var(--tinta);
  color: #c7d2e3;
  font-size: 14.5px;
}

.mando p {
  margin: 0 !important;
}

.mando-play {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.onda {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3dd598;
}

.onda::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #3dd598;
  animation: onda 1.8s ease-out infinite;
}

@keyframes onda {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

.mando-pausa {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 650;
}

.reservado {
  padding: 20px;
  border-radius: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
}

.reservado strong {
  font-size: 15.5px;
}

.reservado ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

.reservado li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  color: var(--tinta);
  font-size: 14px;
}

.reservado li .ico {
  color: var(--acento);
}

@media (max-width: 700px) {
  .continuo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.latido > svg {
  width: 100%;
  height: 70px;
}

.ecg {
  fill: none;
  stroke: var(--acento);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 160 1000;
  animation: ecg 3s linear infinite;
}

@keyframes ecg {
  from { stroke-dashoffset: 160; }
  to { stroke-dashoffset: -1000; }
}

.latido-textos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.latido-textos > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 14px;
}

@media (max-width: 760px) {
  .latido-textos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bucle {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 16px;
  background: var(--acento-suave);
}

.bucle p {
  margin: 0 !important;
  font-size: 15.5px;
}

.bucle-icono .ico-caja {
  background: var(--acento);
  color: #fff;
  animation: giro-lento 6s linear infinite;
}

@keyframes giro-lento {
  to {
    transform: rotate(-360deg);
  }
}

/* ── Parte V: pista, escalera, matriz, gravedad, checklist, prototipo ── */
.pista {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.pista li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--acento) calc(6% + var(--d) * 4%), var(--superficie));
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.pista-num {
  color: var(--acento);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .pista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.escalera {
  display: grid;
  gap: 6px;
}

.escalon {
  width: var(--w);
  min-width: 210px;
  max-width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--acento);
  color: #fff;
  font-size: 14.5px;
  font-weight: 650;
}

.escalon:nth-child(2) { background: color-mix(in srgb, var(--acento) 85%, #fff); }
.escalon:nth-child(3) { background: color-mix(in srgb, var(--acento) 70%, #fff); }
.escalon:nth-child(4) { background: color-mix(in srgb, var(--acento) 50%, #fff); color: var(--tinta); }
.escalon:nth-child(5) { background: color-mix(in srgb, var(--acento) 30%, #fff); color: var(--tinta); }

.escalon.tachado {
  background: var(--borde);
  color: var(--tenue);
  text-decoration: line-through;
}

.escalera-nota {
  margin: 4px 0 0 !important;
  color: var(--tenue);
  font-size: 13px;
}

.matriz {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.celda {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--c);
  font-size: 13.5px;
}

.celda .ico-caja {
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--c) 12%, var(--superficie));
  color: var(--c);
}

.celda strong {
  font-size: 15.5px;
}

@media (max-width: 760px) {
  .matriz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gravedad {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.grado {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.3;
}

.documento .grado strong {
  color: inherit;
  font-family: var(--mono);
  font-size: 22px;
}

.grado.g0 { background: #e7f8f1; color: #0b6b4b; }
.grado.g1 { background: #eef7d9; color: #4d6b0b; }
.grado.g2 { background: #fdf3d7; color: #8a5a00; }
.grado.g3 { background: #fde2d3; color: #9a3412; }
.grado.g4 { background: #fbd5dc; color: #9f1239; }

@media (max-width: 600px) {
  .gravedad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.4;
}

.tic {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
}

.tic .ico {
  stroke-width: 3;
}

@media (max-width: 600px) {
  .checklist {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mock-app {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  box-shadow: var(--sombra-hover);
}

.mock-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--tinta);
}

.mock-barra > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.mock-barra em {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fbbf24;
  color: #3b2a00;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.mock-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
}

.mock-pantalla {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.mock-explica {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--acento-suave);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
}

.mock-fila {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mock-bloque {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  background: var(--borde);
}

.mock-bloque.largo {
  height: 56px;
}

.mock-boton {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--acento);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.mock-chapa {
  position: relative;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--tinta);
  color: #fff;
  font-family: var(--mono);
  font-size: 11.5px;
}

.mock-chapa::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9px;
  border: 2px solid var(--acento);
  animation: pulso 2.2s ease-out infinite;
}

@keyframes pulso {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.25, 1.6);
    opacity: 0;
  }
}

.documento .mock-ver {
  width: fit-content;
  color: var(--acento);
  font-size: 13px;
  font-weight: 650;
}

.mock-consola {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: color-mix(in srgb, var(--tinta) 92%, var(--acento));
  color: #c7d2e3;
  font-size: 12.5px;
}

.documento .mock-consola strong {
  margin-bottom: 4px;
  color: #fff;
  font-size: 13px;
}

.mock-consola span {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 640px) {
  .mock-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Parte VI: quién toca qué, huellas ── */
.documento table.quien {
  min-width: 520px;
}

.documento .quien th,
.documento .quien td {
  text-align: center;
  vertical-align: middle;
}

.documento .quien tbody th {
  background: none;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.quien thead th {
  white-space: nowrap;
}

.punto-quien {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.punto-quien.p2,
.punto-quien.p3 {
  background: var(--acento-suave);
  color: var(--acento);
}

.huellas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.huella-paso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 120px;
  padding: 16px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
}

.huella-paso small {
  color: var(--tenue);
  font-size: 12.5px;
  line-height: 1.4;
}

.documento .huella-paso code {
  padding: 0;
  background: none;
  font-size: 15px;
  font-weight: 700;
}

.huella-paso.ok {
  border-color: #0e9f6e;
}

.huella-paso.ok .ico-caja {
  background: #e7f8f1;
  color: #0e9f6e;
}

.borroso {
  color: var(--tinta);
  font-size: 18px;
  letter-spacing: 1px;
  filter: blur(1.5px);
}

.flecha {
  color: var(--acento);
  font-size: 22px;
  font-weight: 800;
}

.franja {
  margin-top: 12px;
  padding: 8px;
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, #fbbf24 0 12px, #fcd34d 12px 24px);
  color: #3b2a00;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .huellas {
    grid-template-columns: minmax(0, 1fr);
  }

  .huellas .flecha {
    justify-self: center;
    transform: rotate(90deg);
  }
}

/* ── Parte VII: metro de 29 pasos y antipatrones ── */
.metro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.metro-tramo {
  padding: 14px 12px 14px 14px;
  border-radius: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 5px solid var(--c);
}

.metro-tramo-nombre {
  margin: 0 0 10px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.documento .metro-tramo-nombre a {
  color: var(--c);
}

.metro-tramo ol {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.metro-tramo ol::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 11px;
  width: 3px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0.35;
}

.metro-tramo li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  color: var(--tinta);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
}

.metro-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--superficie);
  border: 2.5px solid var(--c);
  color: var(--c);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 520px) {
  .metro {
    grid-template-columns: minmax(0, 1fr);
  }
}

.anti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.documento .anti-carta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 13.5px;
  line-height: 1.35;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.anti-carta:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-hover);
}

.sintoma,
.remedio {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.sintoma {
  color: var(--tinta);
  font-weight: 600;
}

.sintoma .ico {
  margin-top: 1px;
  color: #db2777;
}

.remedio {
  padding-top: 8px;
  border-top: 1px dashed var(--borde-fuerte);
  color: #0b6b4b;
  font-weight: 600;
}

.remedio .ico {
  margin-top: 1px;
  color: #0e9f6e;
}

@media (max-width: 900px) {
  .anti {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .anti {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── «Leer en detalle» ── */
.detalle {
  margin: 8px 0 0;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
}

.detalle > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

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

.detalle-icono {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--acento-suave);
}

.detalle-icono::before,
.detalle-icono::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--acento);
  transition: transform 0.25s ease;
}

.detalle-icono::after {
  transform: rotate(90deg);
}

.detalle[open] .detalle-icono::after {
  transform: rotate(0deg);
}

.detalle-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.detalle-texto strong {
  font-size: 15.5px;
}

.detalle-texto small {
  color: var(--tenue);
  font-size: 13px;
  line-height: 1.4;
}

.detalle-cuerpo {
  padding: 4px 24px 24px;
  border-top: 1px solid var(--borde);
}

@media (max-width: 600px) {
  .detalle-cuerpo {
    padding: 4px 16px 20px;
  }
}

/* La cadena de la portada entra paso a paso */
.js .cadena.revelar li.anim {
  transform: translateY(10px) scale(0.96);
}

/* ── Movimiento reducido: todo quieto y en su estado final ── */
@media (prefers-reduced-motion: reduce) {
  .js .revelar .anim,
  .js .cadena.revelar li.anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .js .revelar .trazo {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .js .revelar:not(.visto) .cascada ol::before {
    transform: none !important;
  }

  .ola,
  .giro,
  .viajero,
  .reloj-cursor,
  .ecg,
  .onda::after,
  .cursor,
  .recomendada .radio,
  .bucle-icono .ico-caja,
  .mock-chapa::after {
    animation: none !important;
  }

  .cursor {
    display: none;
  }
}

/* ══ Informe de componentes (/componentes/, informes/visual-componentes.mjs) ════════════════════════════════════════
   Clases c-…: lo que no estaba en el método. Los colores de nivel llegan en --c (átomos, moléculas, organismos,
   plantillas); el texto va siempre en tinta, nunca en el color del dato. */

/* Ilustraciones de portada */
.ilustracion .c-marco {
  fill: var(--superficie);
  stroke: var(--c);
  stroke-width: 2;
}

.ilustracion .c-caja {
  fill: color-mix(in srgb, var(--c) 8%, var(--superficie));
  stroke: var(--c);
  stroke-width: 1.6;
}

.ilustracion .c-caja-texto {
  fill: var(--tinta);
  font-size: 12px;
  font-weight: 600;
}

.ilustracion .c-atomo {
  fill: var(--c);
}

.ilustracion .c-atomo.suave {
  fill: color-mix(in srgb, var(--c) 35%, var(--superficie));
}

.ilustracion .c-leyenda-mini text,
.ilustracion .c-eje-texto {
  fill: var(--tenue);
  font-size: 11px;
}

.ilustracion .c-eje-texto {
  text-anchor: middle;
}

.ilustracion .c-losa {
  fill: color-mix(in srgb, var(--c) 12%, var(--superficie));
  stroke: var(--c);
  stroke-width: 1.6;
}

.ilustracion .c-losa-nombre {
  fill: var(--tinta);
  font-size: 12.5px;
  font-weight: 600;
}

.ilustracion .c-losa-detalle {
  fill: var(--texto);
  font-size: 11px;
}

.ilustracion .c-flecha {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ilustracion .c-flecha-texto {
  fill: var(--tenue);
  font-size: 11px;
  text-anchor: middle;
}

.ilustracion .c-capa {
  fill: color-mix(in srgb, var(--acento) calc(8% + var(--i) * 7%), var(--superficie));
  stroke: var(--acento);
  stroke-width: 1.4;
}

.ilustracion .c-capa-nombre {
  fill: var(--tinta);
  font-size: 13px;
  font-weight: 600;
}

.ilustracion .c-capa-detalle {
  fill: var(--texto);
  font-size: 11px;
}

.ilustracion .c-capa-cifra {
  fill: var(--tinta);
  font-size: 15px;
  font-weight: 700;
  text-anchor: end;
}

.ilustracion .c-marca {
  fill: var(--superficie);
  stroke: var(--acento);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}

.ilustracion .c-marca-texto,
.ilustracion .c-pintar {
  fill: var(--tinta);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}

.ilustracion .c-pintar {
  font-family: var(--mono);
  font-weight: 500;
}

.ilustracion .c-nodo {
  fill: var(--acento-suave);
  stroke: var(--acento);
  stroke-width: 1.6;
}

.ilustracion .c-nodo.suave {
  fill: var(--superficie);
}

.ilustracion .c-nodo-yo {
  fill: var(--tinta);
}

.ilustracion .c-nodo-texto {
  fill: var(--tinta);
  font-size: 12.5px;
  font-weight: 600;
  text-anchor: middle;
}

.ilustracion .c-nodo-texto.claro {
  fill: #fff;
}

.ilustracion .c-base {
  fill: var(--acento-medio);
}

.ilustracion .c-consola {
  fill: var(--diagrama-fondo);
}

.ilustracion .c-punto {
  fill: color-mix(in srgb, var(--diagrama-texto) 35%, transparent);
}

.ilustracion .c-consola-texto {
  fill: var(--diagrama-texto);
  font-family: var(--mono);
  font-size: 13px;
}

.ilustracion .c-consola-texto.tenue {
  fill: color-mix(in srgb, var(--diagrama-texto) 65%, transparent);
}

.ilustracion .c-consola-texto.ok {
  fill: #5ee6a8;
}

.ilustracion .c-eje {
  stroke: var(--borde-fuerte);
  stroke-width: 1;
}

.ilustracion .c-barra.antes {
  fill: #94a3b8;
}

.ilustracion .c-barra.hoy {
  fill: var(--acento);
}

.ilustracion .c-cifra {
  fill: var(--tinta);
  font-size: 18px;
  font-weight: 700;
  text-anchor: middle;
}

/* Cifras grandes enfrentadas (6.000 frente a 50) */
.c-cifras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.c-cifra-caja {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
}

.c-cifra-caja strong {
  color: var(--tinta);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.c-cifra-caja span {
  color: var(--texto);
  font-size: 14.5px;
}

.c-cifra-vs {
  color: var(--tenue);
  font-size: 14px;
  font-weight: 600;
}

/* Los niveles, con su número de piezas en barra */
.c-tabla-niveles {
  display: grid;
  gap: 8px;
}

.c-nivel {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 44px minmax(0, 1.3fr);
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--c);
  border-radius: 12px;
  background: var(--superficie);
}

.c-nivel-nombre {
  color: var(--tinta);
  font-weight: 600;
}

.c-nivel-barra {
  height: 8px;
  border-radius: 4px;
  background: var(--fondo);
}

.c-nivel-barra span {
  display: block;
  width: calc(var(--p) * 100%);
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--c);
}

.c-nivel strong {
  color: var(--tinta);
  font-size: 17px;
  text-align: right;
}

.c-nivel-detalle {
  color: var(--texto);
  font-size: 14px;
}

.c-nivel-pantallas {
  grid-template-columns: 110px minmax(0, 1fr);
  background: var(--fondo);
}

/* Las capas de variables, en fila con flechas */
.c-capas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.c-capa-v {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--acento-suave);
}

.c-capa-num {
  color: var(--tinta);
  font-size: 22px;
  font-weight: 700;
}

.c-capa-v strong {
  color: var(--tinta);
  font-size: 15px;
}

.c-capa-v span:last-child {
  color: var(--texto);
  font-size: 13.5px;
  line-height: 1.45;
}

.c-capa-flecha {
  align-self: center;
  color: var(--acento);
  font-weight: 700;
}

/* Árboles de anidado */
.c-cadenas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.c-cadena {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
}

.c-cadena figcaption {
  margin-top: 10px;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 600;
}

.c-arbol {
  display: grid;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.c-arbol li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 0 calc(var(--n) * 14px) !important;
  padding: 6px 10px;
  border-left: 3px solid var(--c);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--c) 7%, var(--superficie));
}

.c-arbol-nivel {
  color: var(--tenue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c-arbol code {
  padding: 0;
  background: none;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

.c-arbol-nota {
  flex-basis: 100%;
  color: var(--texto);
  font-size: 13px;
}

/* Las doce reglas */
.c-reglas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.c-regla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
}

.c-regla code {
  color: var(--tinta);
  font-weight: 600;
}

.c-regla span {
  color: var(--texto);
  font-size: 13.5px;
  line-height: 1.35;
}

.c-regla strong {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vivo-fondo);
  color: var(--vivo);
  text-align: center;
}

/* Presupuestos: de lo medido a 0 */
.c-presupuestos {
  display: grid;
  gap: 8px;
}

.c-presupuesto {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.c-presupuesto code {
  color: var(--tinta);
  font-weight: 600;
}

.c-presupuesto-pista {
  height: 22px;
  border-radius: 6px;
  background: var(--fondo);
}

.c-presupuesto-antes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(var(--p) * 100%);
  min-width: 28px;
  height: 100%;
  padding-right: 8px;
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(135deg, var(--acento-medio) 0 6px, var(--acento-suave) 6px 12px);
}

.c-presupuesto-antes b {
  color: var(--tinta);
  font-size: 13px;
}

.c-presupuesto strong {
  color: var(--vivo);
}

/* Gráficos de la parte VI (dataviz: columnas de 24 px como mucho, punta redondeada de 4 px, 2 px de separación, valor
   en la punta, leyenda siempre con dos series, texto en tinta y rejilla tenue; la tabla con los datos está en §11) */
.c-grafico {
  margin: 0;
}

/* En el móvil el gráfico no se encoge por debajo de un tamaño legible: se desplaza en horizontal */
.c-grafico-desplazable {
  overflow-x: auto;
}

.c-grafico svg {
  display: block;
  width: 100%;
  min-width: 540px;
  height: auto;
}

.c-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 10px;
  color: var(--texto);
  font-size: 13.5px;
}

.c-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.c-leyenda i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.c-leyenda i.antes {
  background: #94a3b8;
}

.c-col.antes {
  fill: #94a3b8;
}

.c-leyenda i.hoy {
  background: var(--acento);
}

.c-col.hoy {
  fill: var(--acento);
}

.c-col:hover {
  opacity: 0.85;
}

.c-grafico .c-valor {
  fill: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
}

.c-grafico .c-eje-texto {
  fill: var(--texto);
  font-size: 13px;
  text-anchor: middle;
}

.c-grafico .c-eje-texto.fin {
  fill: var(--tenue);
  font-size: 11px;
  text-anchor: end;
}

.c-grafico .c-rejilla {
  stroke: var(--borde);
  stroke-width: 1;
}

.c-leyenda i.atomos,
.c-prop-barra .atomos {
  background: #0891b2;
}

.c-leyenda i.moleculas,
.c-prop-barra .moleculas {
  background: #d97706;
}

.c-proporcion {
  display: grid;
  gap: 10px;
}

.c-prop-fila {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
}

.c-prop-nombre {
  color: var(--tinta);
  font-weight: 600;
}

.c-prop-barra {
  display: flex;
  gap: 2px;
  height: 22px;
}

.c-prop-barra span {
  flex: 0 1 var(--p);
  min-width: 3px;
  border-radius: 4px;
}

.c-prop-valor {
  grid-column: 2;
  color: var(--texto);
  font-size: 13.5px;
}

.c-prop-valor b {
  color: var(--tinta);
}

@media (max-width: 900px) {
  .c-capas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-capa-flecha {
    display: none;
  }

  .c-reglas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .c-cadenas,
  .c-reglas,
  .c-capas {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-cifras {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .c-nivel {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .c-nivel-barra,
  .c-nivel-detalle {
    grid-column: 1 / -1;
  }

  .c-nivel-pantallas {
    grid-template-columns: minmax(0, 1fr);
  }
}