/* ============================================================================
 * Zirkel · Viento y Sismo — aspecto
 * ----------------------------------------------------------------------------
 * El mismo lenguaje que Planta, Clima y Evaluar (neón sobre azul profundo),
 * con un color propio por módulo: cian para el viento, ámbar para el sismo.
 * Poco texto, números grandes, dibujos que explican.
 * ========================================================================== */

.zl-modal,
.zt-modal {
  --zl-fondo: #030a1e;
  --zl-panel: rgba(8, 24, 48, .55);
  --zl-borde: rgba(72, 226, 255, .22);
  --zl-texto: #d6ecff;
  --zl-suave: #8fb2d4;
  --zl-tenue: #5f7fa3;
  --zl-cian: #38e7ff;
  --zl-magenta: #ff43d7;
  --zl-verde: #37f5a8;
  --zl-ambar: #ffc857;
  --zl-naranja: #ff8a3d;
  --zl-rojo: #ff5c7a;
  --zl-azul: #4da3ff;
  --zl-acento: var(--zl-cian);
}
.zl-modal {
  position: fixed; inset: 0; z-index: 10010;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 70% 15%, rgba(56, 231, 255, .12), transparent 35%),
              radial-gradient(circle at 25% 25%, rgba(21, 120, 196, .28), transparent 40%), rgba(0, 2, 12, .86);
  backdrop-filter: blur(14px);
  font-family: inherit;
}
.zl-modal[data-tipo="sismo"] {
  --zl-acento: var(--zl-ambar);
  background: radial-gradient(circle at 70% 15%, rgba(255, 170, 60, .13), transparent 35%),
              radial-gradient(circle at 25% 25%, rgba(120, 60, 20, .28), transparent 40%), rgba(6, 2, 8, .86);
}
.zl-modal[hidden] { display: none; }

.zl-shell {
  position: relative; display: flex; flex-direction: column;
  width: min(1280px, 97vw); height: min(860px, 95vh); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--zl-acento) 45%, transparent);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(3, 8, 30, .98), rgba(5, 24, 46, .97));
  box-shadow: 0 0 80px color-mix(in srgb, var(--zl-acento) 28%, transparent), inset 0 0 50px rgba(31, 222, 255, .04);
  color: var(--zl-texto);
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.zl-cab {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 64px 12px 18px;
  border-bottom: 1px solid var(--zl-borde);
  background: linear-gradient(90deg, rgba(14, 31, 78, .9), rgba(10, 52, 87, .6));
}
.zl-marca { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.zl-marca-icono {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: color-mix(in srgb, var(--zl-acento) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--zl-acento) 50%, transparent);
}
.zl-marca-icono svg { width: 26px; height: 26px; }
.zl-marca p { margin: 0; color: var(--zl-acento); font-size: .62rem; font-weight: 900; letter-spacing: .18em; }
.zl-marca h3 { margin: 2px 0 0; font-size: 1rem; font-weight: 700; color: #eaf7ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-dir { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, .35); border: 1px solid var(--zl-borde); }
.zl-dir button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--zl-suave); font-weight: 800; font-size: .74rem;
}
.zl-dir button.activo { background: var(--zl-acento); color: #03101f; }
.zl-dir svg { width: 16px; height: 16px; }
.zl-boton {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--zl-acento) 45%, transparent); background: rgba(10, 32, 62, .7);
  color: #eaf7ff; font-weight: 800; font-size: .74rem; white-space: nowrap;
}
.zl-boton:hover { border-color: var(--zl-acento); background: color-mix(in srgb, var(--zl-acento) 14%, transparent); }
.zl-boton.lleno { background: var(--zl-acento); color: #03101f; border-color: transparent; }
.zl-boton.lleno:hover { filter: brightness(1.08); }
.zl-boton:disabled { opacity: .55; cursor: progress; }
.zl-sello { color: var(--zl-tenue); font-size: .6rem; font-weight: 700; }

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */
.zl-cuerpo { display: grid; grid-template-columns: 300px 1fr; flex: 1; min-height: 0; }
.zl-lado { overflow-y: auto; padding: 14px 14px 20px; border-right: 1px solid var(--zl-borde); background: rgba(2, 10, 28, .5); }
.zl-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 18px 10px; gap: 12px; }

.zl-paso { margin: 0 0 14px; }
.zl-paso-cab { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.zl-paso-cab b {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--zl-acento) 20%, transparent); color: var(--zl-acento); font-size: .7rem; font-weight: 900;
}
.zl-paso-cab span { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--zl-suave); }
.zl-paso-cab em { margin-left: auto; font-style: normal; font-size: .62rem; color: var(--zl-tenue); }

.zl-mapa { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; }
.zl-mapa svg { width: 112px; height: 200px; display: block; }
.zl-mapa svg .punto { cursor: pointer; transition: r .15s; }
.zl-mapa svg .punto:hover { stroke: #fff; stroke-width: 1.4; }
.zl-grande { font-size: 1.9rem; font-weight: 900; line-height: 1; color: #fff; letter-spacing: -.02em; }
.zl-grande small { font-size: .8rem; font-weight: 700; color: var(--zl-suave); margin-left: 3px; letter-spacing: 0; }
.zl-rotulo { font-size: .64rem; color: var(--zl-suave); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.zl-escala { display: flex; height: 6px; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.zl-escala i { flex: 1; }
.zl-select {
  width: 100%; margin-top: 8px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--zl-borde);
  background: rgba(3, 12, 30, .9); color: #eaf7ff; font-size: .76rem;
}

.zl-opciones { display: grid; gap: 6px; }
.zl-opciones.c4 { grid-template-columns: repeat(4, 1fr); }
.zl-opciones.c5 { grid-template-columns: repeat(5, 1fr); }
.zl-opciones.c3 { grid-template-columns: repeat(3, 1fr); }
.zl-opciones.c2 { grid-template-columns: repeat(2, 1fr); }
.zl-opcion {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--zl-borde); background: rgba(8, 24, 48, .45); color: var(--zl-suave); font-size: .6rem; font-weight: 800; line-height: 1.1; text-align: center;
}
.zl-opcion svg { width: 100%; height: 30px; }
.zl-opcion .emoji { font-size: 1.25rem; line-height: 1.2; filter: saturate(.8); }
.zl-opcion b { font-size: .95rem; color: #eaf7ff; }
.zl-opcion:hover { border-color: color-mix(in srgb, var(--zl-acento) 60%, transparent); }
.zl-opcion.activo { border-color: var(--zl-acento); background: color-mix(in srgb, var(--zl-acento) 15%, transparent); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--zl-acento) 30%, transparent); }

.zl-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zl-num { padding: 7px 9px; border-radius: 10px; border: 1px solid var(--zl-borde); background: rgba(8, 24, 48, .45); }
.zl-num label { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--zl-tenue); }
.zl-num .fila { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.zl-num button {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--zl-borde); background: rgba(0, 0, 0, .3);
  color: var(--zl-acento); font-weight: 900; cursor: pointer; line-height: 1; padding: 0;
}
.zl-num output { flex: 1; text-align: center; font-size: 1.05rem; font-weight: 900; color: #fff; }
.zl-num output small { font-size: .62rem; color: var(--zl-suave); font-weight: 700; }
.zl-num.fijo output { text-align: left; }
.zl-num.cambiado { border-color: color-mix(in srgb, var(--zl-ambar) 60%, transparent); }
.zl-deslizador { width: 100%; accent-color: var(--zl-acento); margin: 6px 0 0; }
.zl-mini-acciones { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.zl-mini {
  padding: 4px 8px; border-radius: 7px; border: 1px solid var(--zl-borde); background: rgba(0, 0, 0, .25);
  color: var(--zl-suave); font-size: .62rem; font-weight: 800; cursor: pointer;
}
.zl-mini:hover { color: #fff; border-color: var(--zl-acento); }
.zl-mini.activo { color: #03101f; background: var(--zl-acento); border-color: transparent; }

.zl-barra-peso { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 6px 0 4px; background: rgba(0, 0, 0, .3); }
.zl-barra-peso i { display: block; height: 100%; }
.zl-leyenda { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .6rem; color: var(--zl-suave); }
.zl-leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ── Tarjetas de resultado ──────────────────────────────────────────────── */
.zl-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.zl-kpi {
  position: relative; padding: 10px 12px 11px; border-radius: 14px; border: 1px solid var(--zl-borde);
  background: var(--zl-panel); min-width: 0; overflow: hidden;
}
.zl-kpi .zl-rotulo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-kpi .valor { margin-top: 4px; font-size: 1.55rem; font-weight: 900; color: #fff; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; }
.zl-kpi .valor small { font-size: .72rem; color: var(--zl-suave); font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.zl-kpi .sub { margin-top: 3px; font-size: .64rem; color: var(--zl-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-kpi.ok { border-color: color-mix(in srgb, var(--zl-verde) 50%, transparent); }
.zl-kpi.mal { border-color: color-mix(in srgb, var(--zl-rojo) 60%, transparent); }
.zl-kpi.principal { background: linear-gradient(140deg, color-mix(in srgb, var(--zl-acento) 22%, transparent), rgba(8, 24, 48, .55)); border-color: color-mix(in srgb, var(--zl-acento) 55%, transparent); }
.zl-kpi .sello {
  position: absolute; top: 9px; right: 10px; padding: 2px 7px; border-radius: 20px; font-size: .58rem; font-weight: 900; letter-spacing: .05em;
}
.zl-kpi.ok .sello { background: var(--zl-verde); color: #03101f; }
.zl-kpi.mal .sello { background: var(--zl-rojo); color: #fff; }
.zl-medidor { height: 6px; margin-top: 7px; border-radius: 4px; background: rgba(255, 255, 255, .08); position: relative; overflow: visible; }
.zl-medidor i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.zl-medidor u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; opacity: .8; text-decoration: none; }

/* ── Pestañas y vista ───────────────────────────────────────────────────── */
.zl-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--zl-borde); padding-bottom: 6px; }
.zl-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  background: transparent; color: var(--zl-suave); font-weight: 800; font-size: .74rem;
}
.zl-tab svg { width: 15px; height: 15px; }
.zl-tab:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.zl-tab.activo { color: #03101f; background: var(--zl-acento); }
.zl-vista { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 250px; gap: 12px; }
.zl-vista.ancha { grid-template-columns: 1fr; }
.zl-lienzo {
  position: relative; min-height: 0; border-radius: 14px; border: 1px solid var(--zl-borde);
  background: radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--zl-acento) 8%, transparent), transparent 60%), rgba(1, 7, 20, .55);
  overflow: hidden;
}
.zl-lienzo > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zl-lienzo-pie { position: absolute; left: 12px; bottom: 8px; right: 12px; display: flex; gap: 10px; align-items: center; font-size: .62rem; color: var(--zl-tenue); pointer-events: none; }
.zl-lienzo-pie .zl-boton { pointer-events: auto; }
.zl-lateral { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.zl-nota {
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--zl-borde); background: var(--zl-panel);
  font-size: .72rem; line-height: 1.45; color: var(--zl-suave);
}
.zl-nota h5 { margin: 0 0 6px; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zl-acento); }
.zl-nota b { color: #fff; }
.zl-nota .formula { display: block; margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .3); font-family: ui-monospace, Consolas, monospace; font-size: .72rem; color: #eaf7ff; }
.zl-nota.ok { border-color: color-mix(in srgb, var(--zl-verde) 45%, transparent); }
.zl-nota.mal { border-color: color-mix(in srgb, var(--zl-rojo) 55%, transparent); }
.zl-nota.aviso { border-color: color-mix(in srgb, var(--zl-ambar) 50%, transparent); }
.zl-veredicto { display: flex; align-items: center; gap: 10px; }
.zl-veredicto .circulo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; font-weight: 900; font-size: 1rem; }
.zl-veredicto.ok .circulo { background: var(--zl-verde); color: #03101f; }
.zl-veredicto.mal .circulo { background: var(--zl-rojo); color: #fff; }
.zl-veredicto.aviso .circulo { background: var(--zl-ambar); color: #03101f; }
.zl-veredicto b { display: block; font-size: .9rem; color: #fff; }
.zl-veredicto span { font-size: .68rem; color: var(--zl-suave); }

/* Paso a paso: la cadena de la cuenta */
.zl-cadena { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 16px; align-content: flex-start; overflow-y: auto; position: absolute; inset: 0; }
.zl-eslabon {
  position: relative; flex: 0 0 auto; width: 150px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--zl-borde); background: rgba(8, 24, 48, .6);
}
.zl-eslabon .n { position: absolute; top: -8px; left: 10px; padding: 0 6px; border-radius: 8px; background: var(--zl-acento); color: #03101f; font-size: .6rem; font-weight: 900; }
.zl-eslabon .que { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--zl-suave); }
.zl-eslabon .cuanto { margin: 4px 0 3px; font-size: 1.25rem; font-weight: 900; color: #fff; white-space: nowrap; }
.zl-eslabon .cuanto small { font-size: .66rem; color: var(--zl-suave); font-weight: 700; }
.zl-eslabon .como { font-family: ui-monospace, Consolas, monospace; font-size: .62rem; color: var(--zl-tenue); line-height: 1.35; }
.zl-eslabon.clave { border-color: var(--zl-acento); background: color-mix(in srgb, var(--zl-acento) 12%, rgba(8, 24, 48, .6)); }
.zl-flecha { align-self: center; color: var(--zl-acento); font-weight: 900; opacity: .7; }

/* Tabla de columnas */
.zl-barras { position: absolute; inset: 0; padding: 14px 16px 30px; overflow-y: auto; }
.zl-barra-fila { display: grid; grid-template-columns: 44px 1fr 92px; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .7rem; }
.zl-barra-fila .nom { font-weight: 900; color: #fff; }
.zl-barra-fila .pista { position: relative; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, .04); }
.zl-barra-fila .pista i { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; }
.zl-barra-fila .pista u { position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: #fff; text-decoration: none; }
.zl-barra-fila .val { text-align: right; color: var(--zl-suave); font-variant-numeric: tabular-nums; }
.zl-barra-fila .val b { color: #fff; }
.zl-barra-fila.maxima .nom { color: var(--zl-acento); }

/* Pie */
.zl-pie { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-top: 1px solid var(--zl-borde); background: rgba(2, 8, 22, .7); font-size: .62rem; color: var(--zl-tenue); flex-wrap: wrap; }
.zl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--zl-borde); background: rgba(0, 0, 0, .25); white-space: nowrap; }
.zl-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--zl-verde); }
.zl-chip.supuesto i { background: var(--zl-ambar); }
.zl-pie .espacio { flex: 1; }
.zl-aviso { font-size: .68rem; color: var(--zl-suave); }
.zl-aviso.ok { color: var(--zl-verde); }
.zl-aviso.mal { color: var(--zl-rojo); }

/* Los reparos de una norma de otro pais: lo que quedo supuesto o leido de un
   mapa. Va en una lista comoda de leer, no en un globo de ayuda, porque hay
   que leerlo entero antes de discutir un numero con un alumno. */
.zl-reparos { margin: 0; padding-left: 1.05em; display: grid; gap: 5px; }
.zl-reparos li { font-size: .72rem; line-height: 1.45; color: var(--zl-suave); }
.zl-reparos li::marker { color: var(--zl-rojo); }
.zl-reparos li b, .zl-reparos li strong { color: var(--zl-texto); }

/* Fuentes */
.zl-fuentes { position: absolute; inset: 60px 20px 50px auto; width: min(420px, 90%); z-index: 3; overflow-y: auto; padding: 16px; border-radius: 14px; border: 1px solid var(--zl-acento); background: rgba(3, 10, 26, .97); box-shadow: 0 10px 50px rgba(0, 0, 0, .6); }
.zl-fuentes[hidden] { display: none; }
.zl-fuentes h4 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zl-acento); }
.zl-fuentes li { margin: 0 0 10px; font-size: .74rem; line-height: 1.45; color: var(--zl-suave); }
.zl-fuentes li b { display: block; color: #fff; }
.zl-fuentes ul { margin: 0; padding-left: 16px; }

/* Dibujos */
.zl-svg-texto { font: 700 11px system-ui, sans-serif; fill: var(--zl-suave); }
.zl-svg-num { font: 800 12px system-ui, sans-serif; fill: #fff; }
.zl-svg-chico { font: 700 9.5px system-ui, sans-serif; fill: var(--zl-tenue); }
.zl-svg-grande { font: 900 16px system-ui, sans-serif; fill: #fff; }
@keyframes zl-rafaga { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -120; } }
.zl-corriente { stroke-dasharray: 26 94; animation: zl-rafaga linear infinite; }
@media (prefers-reduced-motion: reduce) { .zl-corriente { animation: none; } }

@media (max-width: 1000px) {
  .zl-cuerpo { grid-template-columns: 1fr; overflow-y: auto; }
  .zl-lado { border-right: 0; border-bottom: 1px solid var(--zl-borde); }
  .zl-kpis { grid-template-columns: repeat(2, 1fr); }
  .zl-vista { grid-template-columns: 1fr; min-height: 520px; }
  .zl-lienzo { min-height: 380px; }
  .zl-cab { flex-wrap: wrap; }
}

/* ── Túnel de viento ───────────────────────────────────────────────────────
   Ventana propia: el panel de Viento es una columna de pasos y una vista
   chica, y acá la vista 3D tiene que ser lo más grande posible. Reusa las
   clases de los pasos y los chips, que ya saben cómo verse. */
.zt-modal { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center;
  background: rgba(2, 7, 22, .78); backdrop-filter: blur(3px); padding: 2vh 2vw; }
.zt-modal[hidden] { display: none; }
.zt-caja { width: min(1500px, 96vw); height: min(92vh, 980px); display: grid;
  grid-template-rows: auto 1fr auto; background: var(--zl-fondo, #071127);
  border: 1px solid var(--zl-borde, #143055); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.zt-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--zl-borde, #143055); }
.zt-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zt-icono { font-size: 1.5rem; line-height: 1; }
.zt-marca p { margin: 0; font-size: .64rem; letter-spacing: .12em; color: var(--zl-cian, #38e7ff); }
.zt-marca h3 { margin: 0; font-size: 1rem; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.zt-cab-der { display: flex; align-items: center; gap: 8px; position: relative; }
.zt-cab-der .modal-close { position: static; }
.zt-cuerpo { display: grid; grid-template-columns: 286px 1fr; min-height: 0; }
.zt-lado { overflow: auto; padding: 12px; display: grid; gap: 10px; align-content: start;
  border-right: 1px solid var(--zl-borde, #143055); }
.zt-escena { position: relative; min-width: 0; min-height: 0; }
.zt-lienzo { position: absolute; inset: 0; }
.zt-tapa { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
  background: rgba(5, 11, 24, .85); color: var(--zl-cian, #38e7ff); font-weight: 700; text-align: center; padding: 20px; }
.zt-descargo { position: absolute; left: 14px; right: 14px; bottom: 10px; margin: 0; z-index: 4;
  font-size: .7rem; color: var(--zl-suave, #7fa8d4); background: rgba(7, 17, 39, .72);
  border-left: 2px solid var(--zl-cian, #38e7ff); padding: 6px 10px; border-radius: 0 6px 6px 0; }
.zt-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px;
  border-top: 1px solid var(--zl-borde, #143055); }
.zt-pie .espacio { flex: 1 1 auto; }
/* La leyenda de velocidad, arriba a la derecha de la escena. */
.tunel-leyenda { position: absolute; right: 14px; top: 14px; z-index: 4;
  background: rgba(7, 17, 39, .82); border: 1px solid var(--zl-borde, #143055);
  border-radius: 8px; padding: 8px 10px; font-size: .7rem; font-variant-numeric: tabular-nums; }
.tunel-ley-tit { color: var(--zl-suave, #a9cbe8); margin-bottom: 6px; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .07em; }
.tunel-ley-fila { display: flex; align-items: center; gap: 6px; }
.tunel-ley-fila i { width: 16px; height: 10px; border-radius: 2px; display: block; }
@media (max-width: 900px) {
  .zt-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .zt-lado { border-right: 0; border-bottom: 1px solid var(--zl-borde, #143055); max-height: 38vh; }
}

/* ── Cartel de la persona del túnel ─────────────────────────────────────────
   Va sobre el lienzo y no en la barra lateral: los números cambian decenas de
   veces por segundo mientras se arrastra la figura, y ahí es donde se está
   mirando. Ancho fijo para que el texto no baile al cambiar las cifras. */
.zt-persona { position: absolute; left: 14px; top: 14px; z-index: 5; width: 232px;
  padding: 10px 12px 9px; border-radius: 10px; background: rgba(8, 17, 32, 0.88);
  border: 1px solid var(--zl-borde, #143055); backdrop-filter: blur(6px);
  color: #dbe6f5; font-size: 12px; line-height: 1.35; }
.zt-persona[hidden] { display: none; }
.zt-persona-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.zt-persona-cab b { font-size: 11px; letter-spacing: .3px; text-transform: uppercase; opacity: .8; }
.zt-persona-ico { font-size: 15px; }
.zt-persona-x { margin-left: auto; background: none; border: 0; color: #8ea4c0;
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.zt-persona-x:hover { color: #dbe6f5; }
.zt-persona-v { margin: 2px 0 0; display: flex; align-items: baseline; gap: 4px; }
.zt-persona-v b { font-size: 26px; font-weight: 700; color: #38e7ff;
  font-variant-numeric: tabular-nums; }
.zt-persona-v span { font-size: 12px; opacity: .7; }
.zt-persona-v em { margin-left: auto; font-style: normal; font-size: 11px; opacity: .65;
  font-variant-numeric: tabular-nums; }
.zt-persona-b { margin: 3px 0 0; font-weight: 600; color: #ffd257; }
.zt-persona-d { margin: 2px 0 0; font-size: 11px; color: #8ea4c0; min-height: 2.4em; }
.zt-persona-pie { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.zt-persona-pie span { font-size: 10.5px; color: #8ea4c0; font-variant-numeric: tabular-nums; }
.zt-persona-oir { padding: 3px 8px; font-size: 11px; }
.zt-persona-nota { margin: 6px 0 0; font-size: 10px; color: #6f8099; }
@media (max-width: 760px) {
  .zt-persona { position: static; width: auto; margin: 8px; }
}

/* Barra de nivel del viento en el cartel de la persona. El degradado va del
   cian del sitio al rojo de las cargas: el mismo criterio de color que la
   leyenda de velocidades del túnel, para que no haya que aprender dos. */
.zt-persona-nivel { height: 6px; margin: 5px 0 3px; border-radius: 3px;
  background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.zt-persona-nivel i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #38e7ff, #ffd257 55%, #ff6b5a);
  border-radius: 3px; transition: width .12s ease; }
.zt-persona-son { margin: 0; font-size: 10.5px; color: #8ea4c0; }