/* ==========================================================
   Enciclopedia Interactiva sobre Calidad del Agua
   Estilos compartidos por todas las secciones
   ========================================================== */

:root {
  --agua-900: #0b3954;
  --agua-700: #087e8b;
  --agua-500: #1fa2c4;
  --agua-100: #e3f5fb;
  --arena: #fff8ec;
  --sol: #ffc857;
  --coral: #ff6f59;
  --hoja: #3bb273;
  --texto: #1f2d3a;
  --texto-suave: #4f6272;
  --blanco: #ffffff;
  --radio: 18px;
  --sombra: 0 6px 18px rgba(11, 57, 84, 0.12);
  --fuente: "Nunito", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--arena);
}

img { max-width: 100%; display: block; }

.contenedor {
  width: min(1040px, 100% - 32px);
  margin-inline: auto;
}

/* ---------- Barra de navegación ---------- */
.barra {
  position: relative;
  top: 0;
  z-index: 10;
  background: var(--agua-900);
  color: var(--blanco);
  box-shadow: var(--sombra);
}
.barra .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 8px;
}
.marca {
  font-weight: 800;
  white-space: nowrap;
  color: var(--blanco);
  text-decoration: none;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a,
.menu span {
  display: block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--blanco);
  text-decoration: none;
}
.menu a:hover { background: var(--agua-700); }
.menu a[aria-current="page"] { background: var(--sol); color: var(--agua-900); font-weight: 700; }
.menu .pendiente { opacity: 0.45; cursor: not-allowed; }

.progreso {
  height: 6px;
  background: var(--agua-700);
}
.progreso span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sol);
  transition: width 0.2s linear;
}

/* ---------- Portada de sección ---------- */
.portada {
  background: linear-gradient(160deg, var(--agua-500), var(--agua-900));
  color: var(--blanco);
  padding-block: 56px 72px;
  text-align: center;
}
.portada .etiqueta {
  display: inline-block;
  background: var(--sol);
  color: var(--agua-900);
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
}
.portada h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  margin: 16px 0 8px;
}
.portada p { font-size: 1.2rem; margin: 0; opacity: 0.92; }

/* ---------- Bloques de contenido ---------- */
.bloque { padding-block: 48px; }
.bloque:nth-of-type(even) { background: var(--agua-100); }
.bloque h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--agua-900);
  margin: 0 0 20px;
}
.instruccion {
  color: var(--texto-suave);
  font-weight: 700;
  margin-top: -8px;
}

/* Párrafo de lectura (máximo 90-95 palabras, lo revisa Opencode) */
.parrafo {
  background: var(--blanco);
  border-left: 6px solid var(--agua-500);
  border-radius: var(--radio);
  padding: 20px 24px;
  box-shadow: var(--sombra);
  max-width: 70ch;
}
.parrafo p { margin: 0; }
.parrafo + .parrafo { margin-top: 20px; }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}

/* ---------- Botón de audio ---------- */
.btn-audio {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--agua-100);
  color: var(--agua-900);
  cursor: pointer;
}
.btn-audio[hidden] { display: none; }

/* ---------- Imágenes con espacio reservado ---------- */
.imagen {
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 3;
}
.imagen img { width: 100%; height: 100%; object-fit: cover; }
.imagen.sin-imagen {
  display: grid;
  place-items: center;
  border: 3px dashed var(--agua-500);
  box-shadow: none;
  padding: 16px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.95rem;
}
.imagen.sin-imagen img { display: none; }
.imagen.sin-imagen::after { content: attr(data-pendiente); }
.ilustracion-explicada { margin: 0; min-width: 0; }
.ilustracion-explicada figcaption {
  margin-top: 12px;
  color: var(--texto-suave);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Mini-cómic ---------- */
.comic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: vineta;
}
.vineta {
  margin: 0;
  background: var(--blanco);
  border: 3px solid var(--agua-900);
  border-radius: 12px;
  overflow: hidden;
  counter-increment: vineta;
  position: relative;
}
.vineta::before {
  content: counter(vineta);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sol);
  color: var(--agua-900);
  font-weight: 800;
}
.vineta .imagen { border-radius: 0; box-shadow: none; aspect-ratio: 1; }
.vineta figcaption {
  padding: 12px;
  font-size: 1rem;
  border-top: 3px solid var(--agua-900);
}

.comic.tres { grid-template-columns: repeat(3, 1fr); }

/* ---------- Pestañas ---------- */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.pestanas [role="tab"] {
  border: 3px solid var(--agua-700);
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-weight: 800;
  background: var(--blanco);
  color: var(--agua-900);
  cursor: pointer;
}
.pestanas [role="tab"][aria-selected="true"] { background: var(--agua-700); color: var(--blanco); }
.panel-ciclo { display: grid; gap: 24px; }
.panel-ciclo[hidden] { display: none; }

/* ---------- Actividad de ordenar ---------- */
.ordenar {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
}
.etapas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.etapa {
  position: relative;
  border: 3px solid var(--agua-100);
  border-radius: 12px;
  padding: 14px 12px;
  font: inherit;
  font-weight: 800;
  background: var(--blanco);
  color: var(--agua-900);
  cursor: pointer;
}
.etapa small { display: block; font-weight: 400; color: var(--texto-suave); }
.etapa:hover:not(:disabled) { border-color: var(--agua-500); }
.etapa.hecha { border-color: var(--hoja); background: #e8f7ee; cursor: default; }
.etapa.hecha::before {
  content: attr(data-puesto);
  position: absolute;
  top: -12px;
  left: -12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hoja);
  color: var(--blanco);
}
.etapa.fallo { border-color: var(--coral); background: #ffeeea; }
.btn-reiniciar {
  margin-top: 12px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--agua-700);
  text-decoration: underline;
  cursor: pointer;
}
.reto + .reto { margin-top: 20px; }

/* ---------- Clasificar ---------- */
.clasificar {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
}
.clasificar .items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.clasificar .item {
  border: 3px solid var(--agua-100);
  border-radius: 12px;
  padding: 14px;
}
.clasificar .item > p { margin: 0 0 10px; font-weight: 700; }
.clasificar .item.correcto { border-color: var(--hoja); background: #e8f7ee; }
.clasificar .item.incorrecto { border-color: var(--coral); }
.clasificar .botones { display: flex; gap: 8px; }
.clasificar [data-opcion] {
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  background: var(--agua-100);
  color: var(--agua-900);
}
.clasificar [data-opcion]:disabled { opacity: 0.55; cursor: default; }
.clasificar .retro-item { margin: 8px 0 0; font-size: 0.95rem; min-height: 1.2em; }
.clasificar .marcador { font-weight: 800; color: var(--agua-700); margin-bottom: 0; }

/* ---------- Simulador de concentración ---------- */
.simulador {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  align-items: center;
}
.simulador label { font-weight: 800; display: block; margin-bottom: 8px; }
.simulador input[type="range"] { width: 100%; accent-color: var(--agua-700); }
.simulador .lectura { font-size: 1.1rem; margin: 16px 0 4px; }
.simulador .conc { font-size: 2.2rem; color: var(--agua-900); }
.simulador .mensaje { font-weight: 700; min-height: 1.6em; margin: 0; }
.simulador .nota { font-size: 0.85rem; color: var(--texto-suave); margin: 12px 0 0; }
.tanque {
  position: relative;
  height: 240px;
  border: 4px solid var(--agua-900);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: var(--arena);
  overflow: hidden;
}
.agua {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(var(--agua-500), var(--agua-700));
  opacity: 0.85;
  transition: height 0.15s;
}
.agua span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px var(--blanco);
}

/* ---------- Cómic completo (imagen grande que se abre en otra pestaña) ---------- */
.comic-completo { margin: 0; }
.comic-completo a { display: block; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.comic-completo img { width: 100%; height: auto; }
.comic-completo figcaption { margin-top: 10px; color: var(--texto-suave); font-size: 0.95rem; }

/* ---------- Tarjetas-enlace (índice de parámetros) ---------- */
.enlaces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.enlace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra);
  border-top: 8px solid var(--agua-500);
  color: var(--texto);
  text-decoration: none;
  transition: transform 0.15s;
}
.enlace:hover { transform: translateY(-4px); }
.enlace .icono { font-size: 2.4rem; line-height: 1; }
.enlace strong { font-size: 1.25rem; color: var(--agua-900); }
.enlace span { color: var(--texto-suave); font-size: 1rem; }

/* ---------- Flujo de pasos (diagrama simple) ---------- */
.flujo {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: paso;
}
.flujo li {
  position: relative;
  background: var(--blanco);
  border: 3px solid var(--agua-700);
  border-radius: var(--radio);
  padding: 44px 14px 16px;
  text-align: center;
  font-size: 1rem;
  counter-increment: paso;
}
.flujo li::before {
  content: counter(paso);
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sol);
  color: var(--agua-900);
  font-weight: 800;
}
.flujo li:not(:last-child)::after {
  content: "➜";
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--agua-700);
  font-size: 1.3rem;
}
.flujo strong { display: block; color: var(--agua-900); }

/* ---------- Curva de calibración interactiva ---------- */
.curva {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: center;
}
.curva svg { width: 100%; height: auto; }
.curva label { font-weight: 800; display: block; margin-bottom: 8px; }
.curva input[type="range"] { width: 100%; accent-color: var(--coral); }
.curva .resultado { font-size: 1.1rem; margin: 16px 0 4px; }
.curva .resultado strong { font-size: 2rem; color: var(--agua-900); }
.curva .mensaje { font-weight: 700; min-height: 3.2em; margin: 0; }
.curva .fuera { color: #b3402f; }

/* ---------- Enlace para volver al índice de una sección ---------- */
.volver {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--blanco);
  font-weight: 700;
  text-decoration: none;
  opacity: 0.9;
}
.volver:hover { text-decoration: underline; }
.entre-parametros {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 32px 56px;
}

/* ---------- Escala de pH ---------- */
.escala-ph {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
}
.escala-ph input[type="range"] {
  width: 100%;
  height: 22px;
  appearance: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #e03c31, #f28c28, #f5d130, #7bc043, #2e9e5b, #2a8fbd, #3d5ca8, #6a3d9a);
}
.escala-ph input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blanco);
  border: 4px solid var(--agua-900);
  cursor: pointer;
}
.escala-ph input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blanco);
  border: 4px solid var(--agua-900);
  cursor: pointer;
}
.escala-ph .extremos { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--texto-suave); }
.escala-ph .lectura { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.escala-ph .valor { font-size: 2.4rem; font-weight: 800; color: var(--agua-900); }
.escala-ph .tipo { font-weight: 800; font-size: 1.2rem; }
.escala-ph .ejemplo { margin: 6px 0 0; }

/* ---------- Titulación virtual ---------- */
.titulacion {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
}
.titulacion svg { width: 100%; height: auto; }
.titulacion .liquido { transition: fill 0.4s; }
.titulacion .lectura { font-size: 1.1rem; margin-top: 0; }
.titulacion .lectura strong { font-size: 1.8rem; color: var(--agua-900); }
.titulacion .botones { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-gota {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 800;
  background: var(--agua-700);
  color: var(--blanco);
  cursor: pointer;
}
.btn-gota:disabled { opacity: 0.5; cursor: default; }
.titulacion .mensaje { font-weight: 700; min-height: 3.2em; }
.titulacion .nota { font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 0; }

/* ---------- Barra de clasificación ---------- */
.barra-clases {
  display: grid;
  grid-template-columns: 75fr 75fr 150fr 100fr;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  text-align: center;
  font-size: 0.95rem;
}
.barra-clases div { padding: 14px 8px; color: var(--agua-900); }
.barra-clases strong { display: block; }
.barra-clases div:nth-child(1) { background: #d9f2e4; }
.barra-clases div:nth-child(2) { background: #fff1c4; }
.barra-clases div:nth-child(3) { background: #ffd9c2; }
.barra-clases div:nth-child(4) { background: #ffc2b8; }
.barra-clases.cinco { grid-template-columns: 5fr 9fr 21fr 45fr 20fr; }
.barra-clases.cinco div:nth-child(1) { background: #c9eed8; }
.barra-clases.cinco div:nth-child(2) { background: #e6f4c4; }
.barra-clases.cinco div:nth-child(3) { background: #fff1c4; }
.barra-clases.cinco div:nth-child(4) { background: #ffd2b8; }
.barra-clases.cinco div:nth-child(5) { background: #f7a8a0; }

/* ---------- Comparador de tipos de agua ---------- */
.comparador {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
}
.comparador .tipos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.comparador [data-tipo] {
  border: 3px solid var(--agua-700);
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-weight: 800;
  background: var(--blanco);
  color: var(--agua-900);
  cursor: pointer;
}
.comparador [data-tipo][aria-pressed="true"] { background: var(--agua-700); color: var(--blanco); }
.comparador .fila {
  display: grid;
  grid-template-columns: 150px 1fr 110px;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.comparador .nombre { font-weight: 800; }
.comparador .pista-barra { height: 22px; border-radius: 999px; background: var(--agua-100); overflow: hidden; }
.comparador .relleno { display: block; height: 100%; background: var(--coral); border-radius: 999px; transition: width 0.5s; }
.comparador .cifra { font-weight: 800; text-align: right; }
.comparador .nota { font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 0; }

/* ---------- Tarjetas volteables ---------- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tarjetas.dos { grid-template-columns: repeat(2, 1fr); }
.tarjeta {
  display: block;
  width: 100%;
  perspective: 1000px;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 230px;
  text-align: center;
}
.tarjeta-interior {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 230px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.tarjeta[aria-pressed="true"] .tarjeta-interior { transform: rotateY(180deg); }
.cara {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  backface-visibility: hidden;
}
.cara.frente { background: var(--agua-700); color: var(--blanco); }
.cara.reverso { background: var(--blanco); transform: rotateY(180deg); }
.cara .icono { font-size: 3rem; line-height: 1; }
.cara strong { font-size: 1.3rem; }
.cara small { opacity: 0.85; }

/* ---------- Botones de descubrir ---------- */
.descubrir {
  display: grid;
  gap: 16px;
  max-width: 70ch;
}
.btn-descubrir {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--radio);
  padding: 16px 20px;
  font: inherit;
  font-weight: 800;
  background: var(--sol);
  color: var(--agua-900);
  cursor: pointer;
  box-shadow: var(--sombra);
}
.btn-descubrir::before { content: "💡 "; }
.btn-descubrir[aria-expanded="true"] { border-radius: var(--radio) var(--radio) 0 0; }
.revelado {
  background: var(--blanco);
  padding: 16px 20px;
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: var(--sombra);
}
.revelado p { margin: 0; }

/* ---------- Mini-reto ---------- */
.reto {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
  max-width: 70ch;
}
.reto p.pregunta { font-weight: 800; margin-top: 0; }
.opciones { display: grid; gap: 10px; }
.opcion {
  text-align: left;
  border: 3px solid var(--agua-100);
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  background: var(--blanco);
  cursor: pointer;
}
.opcion:hover { border-color: var(--agua-500); }
.opcion.correcta { border-color: var(--hoja); background: #e8f7ee; }
.opcion.incorrecta { border-color: var(--coral); background: #ffeeea; }
.retro { min-height: 1.6em; font-weight: 700; margin-bottom: 0; }

/* ---------- Pie y navegación entre secciones ---------- */
.siguiente {
  display: flex;
  justify-content: flex-end;
  padding-block: 32px 56px;
}
.btn-siguiente {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--agua-900);
  color: var(--blanco);
  font-weight: 800;
  text-decoration: none;
}
.btn-siguiente[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

:focus-visible { outline: 4px solid var(--sol); outline-offset: 3px; }

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 800px) {
  .duo { grid-template-columns: 1fr; }
  .comic, .comic.tres { grid-template-columns: repeat(2, 1fr); }
  .etapas { grid-template-columns: repeat(2, 1fr); }
  .clasificar .items { grid-template-columns: 1fr; }
  .simulador { grid-template-columns: 1fr; }
  .enlaces { grid-template-columns: 1fr; }
  .titulacion { grid-template-columns: 1fr; }
  .titulacion svg { max-width: 160px; justify-self: center; }
  .barra-clases, .barra-clases.cinco { grid-template-columns: 1fr 1fr; }
  .comparador .fila { grid-template-columns: 1fr 90px; }
  .comparador .pista-barra { grid-column: 1 / -1; grid-row: 2; }
  .curva { grid-template-columns: 1fr; }
  .flujo { grid-auto-flow: row; gap: 30px; }
  .flujo li:not(:last-child)::after { content: "⬇"; right: auto; left: 50%; top: auto; bottom: -28px; transform: translateX(-50%); }
  .tarjetas, .tarjetas.dos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tarjeta-interior { transition: none; }
}

/* ==========================================================
   Laboratorios virtuales, calculadoras, tablas y ejemplos
   ========================================================== */
.lab {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.2fr;
  gap: 24px;
  align-items: start;
}
.lab > script { display: none; }
.lab-escena svg { width: 100%; height: auto; background: #f4fbfd; border-radius: 14px; }
.lab-escena .equipo-caja { fill: #dfe7ec; stroke: var(--agua-900); stroke-width: 3; }
.lab-escena .pantalla-fondo { fill: #173b2f; }
.lab-escena .pantalla-texto { fill: #7cf7a8; font: 800 26px "Courier New", monospace; text-anchor: middle; }
.lab-escena .pantalla-chica { font-size: 17px; }
.lab-escena .equipo-nombre { fill: var(--agua-900); font: 800 14px var(--fuente); text-anchor: middle; }
.lab-escena .equipo-unidad { fill: var(--texto-suave); font: 700 12px var(--fuente); text-anchor: middle; }
.lab-escena .etiqueta { fill: var(--agua-900); font: 700 11.5px var(--fuente); text-anchor: middle; }
.lab-escena .etiqueta-izq { text-anchor: start; }
.lab-escena .cable { fill: none; stroke: #3b4a54; stroke-width: 4; }
.lab-escena .electrodo { fill: #cfd9df; stroke: var(--agua-900); stroke-width: 2; }
.lab-escena .vaso { fill: rgba(255,255,255,0.5); stroke: var(--agua-900); stroke-width: 3; stroke-linejoin: round; }
.lab-escena .liquido { transition: fill 0.4s; }
.lab-escena .soporte { fill: #6b7b86; }
.lab-escena .bureta { fill: rgba(255,255,255,0.7); stroke: var(--agua-900); stroke-width: 2; }
.lab-escena .bureta-liquido { fill: #bfe3f3; }
.lab-escena .gota { fill: #1fa2c4; }
.lab-escena .placa { fill: #f5f7f8; stroke: var(--agua-900); stroke-width: 3; }
.lab-escena .colonia { fill: #e9735a; stroke: #fff; stroke-width: 1.5; }
.lab-escena .colonia-azul { fill: #283593; }
.lab-pasos { margin: 0 0 14px; padding-left: 22px; font-size: 0.95rem; color: var(--texto-suave); }
.lab-pasos li { margin-bottom: 3px; }
.lab-pasos li.actual { color: var(--agua-900); font-weight: 800; }
.lab-pasos li.hecho { color: var(--hoja); }
.lab-pasos li.hecho::marker { content: "✔ "; }
.lab-actual { background: var(--agua-100); border-radius: 12px; padding: 14px; }
.lab-texto { margin: 0 0 10px; }
.lab-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.lab-boton { border: 0; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 800; background: var(--agua-700); color: var(--blanco); cursor: pointer; }
.lab-boton:disabled { opacity: 0.5; }
.lab-cuaderno { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 0.95rem; }
.lab-cuaderno caption { text-align: left; font-weight: 800; color: var(--agua-900); margin-bottom: 4px; }
.lab-cuaderno th, .lab-cuaderno td { border-bottom: 1px dashed #b9d3de; padding: 5px 4px; text-align: left; }
.lab-resultado:not(:empty) { margin-top: 12px; background: #e8f7ee; border-left: 5px solid var(--hoja); border-radius: 10px; padding: 12px 14px; }

.calculadora, .irca, .calc-ph, .ica {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
  border-top: 8px solid var(--sol);
}
.calculadora > script, .irca > script, .ica > script { display: none; }
.calc-titulo { font-weight: 800; font-size: 1.15rem; color: var(--agua-900); margin-top: 0; }
.calc-entradas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.calc-campo { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 0.95rem; }
.calc-valor { display: flex; align-items: center; gap: 6px; }
.calc-valor input, .irca input[type="number"] { width: 100%; max-width: 150px; font: inherit; padding: 6px 10px; border: 2px solid var(--agua-500); border-radius: 10px; }
.calc-valor small { color: var(--texto-suave); }
.calc-pasos { background: var(--arena); border-radius: 12px; padding: 12px 12px 12px 34px; font-family: "Courier New", monospace; font-size: 0.95rem; }
.calc-pasos li { margin: 3px 0; }
.calc-resultado { font-size: 1.15rem; margin-bottom: 4px; }
.calc-resultado strong { font-size: 1.6rem; color: var(--agua-900); }
.calc-interpretacion { font-weight: 700; margin: 0; }
.calc-ph .h-decimal { font: 800 1.5rem "Courier New", monospace; color: var(--agua-900); word-break: break-all; }
.calc-ph input[type="range"] { width: 100%; accent-color: var(--agua-700); }

.tabla-desplazable { overflow-x: auto; }
.tabla-datos { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); font-size: 0.95rem; }
.tabla-datos th, .tabla-datos td { padding: 9px 12px; border-bottom: 1px solid var(--agua-100); text-align: left; vertical-align: top; }
.tabla-datos thead th { background: var(--agua-900); color: var(--blanco); }
.tabla-datos tbody tr:nth-child(even) { background: #f5fbfd; }
.irca-tabla tr.inactiva { opacity: 0.45; }
.irca-niveles div.activo, .ica-niveles div.activo { outline: 4px solid var(--agua-900); outline-offset: -4px; font-weight: 800; }

.ejemplo {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 20px 24px;
  box-shadow: var(--sombra);
  border-left: 8px solid var(--sol);
}
.ejemplo > strong:first-child { display: block; color: var(--agua-900); margin-bottom: 6px; }
.ejemplo ol { margin: 8px 0 0; padding-left: 22px; }
.ejemplo .cuenta { font-family: "Courier New", monospace; background: var(--arena); border-radius: 8px; padding: 2px 6px; }

.caso {
  background: #fff4e8;
  border: 3px solid var(--coral);
  border-radius: var(--radio);
  padding: 20px 24px;
}
.caso > strong:first-child { display: block; color: #a8321f; font-size: 1.1rem; margin-bottom: 6px; }
.caso p { margin: 0 0 10px; }
.caso p:last-child { margin: 0; }

.comparacion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.comparacion > div { background: var(--blanco); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); border-top: 8px solid var(--agua-500); }
.comparacion > div:nth-child(2) { border-top-color: var(--coral); }
.comparacion > div:nth-child(3) { border-top-color: var(--sol); }
.comparacion h3 { margin: 0 0 6px; color: var(--agua-900); }
.comparacion dl { margin: 0; }
.comparacion dt { font-weight: 800; font-size: 0.85rem; color: var(--texto-suave); margin-top: 8px; }
.comparacion dd { margin: 0; }

@media (max-width: 800px) {
  .lab { grid-template-columns: 1fr; }
  .comparacion { grid-template-columns: 1fr; }
}

@media (min-width: 900px) { .barra { position: sticky; top: 0; } }
.flujo.vertical { grid-auto-flow: row; gap: 30px; }
.flujo.vertical li:not(:last-child)::after { content: "⬇"; right: auto; left: 50%; top: auto; bottom: -28px; transform: translateX(-50%); }
.revelado .imagen, .revelado .ejemplo, .revelado svg, .revelado .tabla-desplazable { margin-top: 14px; }

/* ---------- Línea de tiempo de normas ---------- */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 5px solid var(--agua-500); display: grid; gap: 18px; }
.linea-tiempo li { position: relative; background: var(--blanco); border-radius: var(--radio); padding: 16px 20px; box-shadow: var(--sombra); }
.linea-tiempo li::before { content: attr(data-anio); position: absolute; left: -84px; top: 14px; width: 62px; text-align: center; background: var(--agua-900); color: var(--blanco); font-weight: 800; border-radius: 999px; padding: 4px 0; font-size: 0.9rem; }
.linea-tiempo h3 { margin: 0 0 6px; color: var(--agua-900); font-size: 1.1rem; }
.linea-tiempo .tipo { display: inline-block; font-size: 0.8rem; font-weight: 800; background: var(--agua-100); color: var(--agua-700); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.linea-tiempo dl { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; margin: 0; font-size: 0.97rem; }
.linea-tiempo dt { font-weight: 800; color: var(--texto-suave); }
.linea-tiempo dd { margin: 0; }
.linea-tiempo .verificar { font-size: 0.85rem; color: #a8321f; font-weight: 700; margin: 8px 0 0; }
.linea-tiempo-envoltura { padding-left: 64px; }
.escalera { display: grid; gap: 8px; max-width: 640px; margin: 0 auto; text-align: center; }
.escalera div { background: var(--agua-700); color: var(--blanco); border-radius: 12px; padding: 12px; font-weight: 700; }
.escalera div:nth-child(1) { width: 40%; margin: 0 auto; background: var(--agua-900); }
.escalera div:nth-child(2) { width: 60%; margin: 0 auto; }
.escalera div:nth-child(3) { width: 80%; margin: 0 auto; background: var(--agua-500); }
.escalera div:nth-child(4) { width: 100%; background: var(--sol); color: var(--agua-900); }
.escalera small { display: block; font-weight: 400; opacity: 0.9; }
@media (max-width: 800px) {
  .linea-tiempo dl { grid-template-columns: 1fr; }
  .linea-tiempo-envoltura { padding-left: 0; }
  .linea-tiempo { padding-left: 16px; }
  .linea-tiempo li::before { position: static; display: inline-block; margin-bottom: 6px; width: auto; padding: 3px 12px; }
}