/* Recalculando: el panel se atenúa y NUNCA cambia de alto, para que la
   página no se mueva bajo el usuario mientras llega el resultado. */
.hv-ocupado { opacity:.55; transition:opacity 180ms ease; }
@media (prefers-reduced-motion:reduce) { .hv-ocupado { transition:none; } }
/* Acentos de datos: mismo acabado que los anillos del dashboard. */
:root { --viz-violet: #8250f5; --viz-teal: #13a995; --viz-coral: #ea704d; }
.hv-visual { display:grid; grid-template-columns:minmax(150px,.9fr) minmax(170px,1fr); align-items:center; gap:16px; padding:18px 0 4px; border-top:1px solid #eae4dc; min-width:0; }
.hv-drawing { min-width:0; display:flex; justify-content:center; }
.hv-drawing svg { width:100%; max-width:300px; height:auto; overflow:visible; }
/* Lámina: ilustración de catálogo usada tal cual. Entra como máscara alfa y el
   color lo pone background-color, así toma el acento del módulo sin que un
   filtro lo aproxime. La proporción es la del recorte del original. */
.hv-lamina { width:100%; max-width:300px; aspect-ratio:700/487; margin:0 auto;
  -webkit-mask:var(--hv-lamina) center/contain no-repeat; mask:var(--hv-lamina) center/contain no-repeat; }
.hv-caption { min-width:0; }
.hv-caption dl { margin:0; display:flex; flex-direction:column; gap:9px; }
.hv-metric { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.hv-metric dt { color:#62594e; font-size:11px; }
.hv-metric dd { margin:0; color:#302a25; font:500 12px 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.hv-chosen dt { color:#302a25; font-weight:600; }
.hv-chosen dd { font-size:17px; font-weight:600; }
.hv-note { font-size:12px; line-height:1.6; color:#62594e; margin:12px 0 0; overflow-wrap:anywhere; }
.hv-note[data-state="menor"], .hv-note[data-state="advertencia"] { color:#a13f20; }
.hv-note[data-state="suficiente"] { color:#136d63; }
.hv-footnote { color:#6d6459; font-size:10px; line-height:1.6; margin:8px 0 0; }
.hv-empty { grid-column:1/-1; min-height:90px; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1.6; color:#6d6459; text-align:center; padding:16px; }
.hv-units { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:13px; font-size:11px; }
.hv-units i { width:12px; height:12px; border:1.5px solid currentColor; border-radius:50%; background:color-mix(in srgb,currentColor 14%,white); }
.app-frame .ap-tanque-cuerpo { border-color:#d7d2e0; background:#fdfcff; box-shadow:0 6px 18px #65449708; padding:4px 3px; overflow:visible; }
/* El agua se recorta con la MISMA curva del contorno gris (radio exterior 30
   menos el borde de 2 y el relleno: 25 en horizontal, 24 en vertical). Antes
   la curva se le pedía a cada banda de los extremos, pero el navegador achica
   los radios cuando no caben en el alto de la caja: la banda de zonas sociales
   es corta (~9 % del tanque) y su esquina superior quedaba casi cuadrada
   contra el gris. Recortando el conjunto, la curva deja de depender del alto
   de cada banda y arriba y abajo quedan iguales. */
.app-frame .ap-tanque-agua { position:relative; gap:2px; overflow:hidden; padding:0; border-radius:25px / 24px; }
.app-frame .ap-tanque-agua i { flex-shrink:1; min-height:0; border:1.5px solid var(--band); background:color-mix(in srgb,var(--band) 18%,white); box-shadow:inset 0 0 8px color-mix(in srgb,var(--band) 20%,transparent); border-radius:7px; }
/* El recorte da la forma pero se lleva por delante el trazo de las bandas de
   los extremos, porque su borde se dibuja sobre su propia caja y no sobre la
   curva. Estos dos anillos ocupan el tanque entero —así el radio se dibuja
   completo, sin que el navegador lo achique por el poco alto de la banda— y
   se recortan a la franja de arriba y la de abajo, que app.js publica en
   --h-tope / --h-base junto con los colores. */
.app-frame .ap-tanque-agua::before,
.app-frame .ap-tanque-agua::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
/* El recorte del anillo lleva los mismos 7px del canto de la banda en el lado
   que da al gap: así el anillo se detiene justo donde arranca esa curva y los
   dos trazos cierran en el mismo punto, en vez de que el anillo siga de largo
   por el costado. */
.app-frame .ap-tanque-agua::before { border:1.5px solid var(--tope,transparent); clip-path:inset(0 0 calc(100% - var(--h-tope,0px)) 0 round 0 0 7px 7px); }
.app-frame .ap-tanque-agua::after { border:1.5px solid var(--base,transparent); clip-path:inset(calc(100% - var(--h-base,0px)) 0 0 0 round 7px 7px 0 0); }
/* Las bandas de los extremos solo pierden la curva del lado del contorno —esa
   la pone el recorte del tanque—; el canto que da al gap conserva sus 7px,
   igual que la banda del medio. */
.app-frame .ap-tanque-agua i:first-child { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.app-frame .ap-tanque-agua i:last-child { border-top-left-radius:0; border-top-right-radius:0; }
.app-frame .ap-tanque figcaption { color:#4d4264; }
.app-frame .ap-leyenda i { border-radius:50%; box-shadow:0 0 6px color-mix(in srgb,var(--band) 35%,transparent); }
.app-frame .ap-visual-cuerpo { flex-wrap:wrap; gap:20px; }
.app-frame .ap-leyenda { flex-shrink:1; min-width:0; }
.app-frame .ap-leyenda span { flex-wrap:wrap; }
.app-frame .ap-pipe svg { width:100%; max-width:250px; height:auto; }
.app-frame .ap-pt-com { background:#13a9951f; border-color:var(--viz-teal); }
.app-frame .ap-pt-req { border-color:#766d61; }
.app-frame .ap-aporte-alt { background:#8250f56b; box-shadow:inset 0 0 0 1px #8250f5; }
.app-frame .ap-aporte-fri { background:#13a9955c; box-shadow:inset 0 0 0 1px #139b8a; }
.app-frame .ap-aporte-bar { height:8px; background:#f0ece7; }
.app-frame .ap-tramo-chip:not(.ap-eq-chip) { color:#665087; border-color:#d9cbed; background:#8250f507; }
.app-frame .ap-eq-chip { color:#986049; border-color:#e9d3c5; background:#ea704d08; }
.app-frame .ap-linea-tab.on:not(.warn) { border-color:#cec2e6; background:#faf8ff; }
.app-frame .hv-aporte-key { display:flex; gap:12px; flex-wrap:wrap; color:#62594e; font-size:10px; margin-top:9px; }
.hv-aporte-key span { display:inline-flex; align-items:center; gap:5px; }
.hv-aporte-key i { width:7px; height:7px; border-radius:50%; background:var(--key-color); }
@media (max-width:600px) {
  .hv-visual { grid-template-columns:minmax(0,1fr); gap:8px; }
  .hv-drawing svg { max-width:250px; }
  .hv-caption { padding:0 2px 8px; }
  .app-frame .ap-visual-cuerpo { flex-direction:column; }
  .app-frame .ap-tanque-cuerpo { width:112px; height:182px; }
}
@media (prefers-reduced-motion:reduce) {
  .app-frame .ap-tanque-agua i, .app-frame .ap-aporte-bar i { transition:none; }
}
/* La fórmula pasó de una línea suelta encima del dibujo a un bloque dentro
   del pie: es el dato principal de la tarjeta y ahora tiene sitio. */
.hv-formula { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 8px; padding:0 0 12px; margin:0 0 12px; border-bottom:1px solid #efe9e1; }
.hv-formula-exp { font:500 12px 'JetBrains Mono',monospace; color:#62594e; }
.hv-formula-exp i { font-style:normal; font-size:9.5px; opacity:.75; }
.hv-formula-eq { color:#b3a894; font-size:12px; }
.hv-formula-res { font:600 19px 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:var(--hv-accent,#7a5813); }
.hv-formula-res u { text-decoration:none; font:500 10px 'Plus Jakarta Sans',sans-serif; color:#6d6459; margin-left:5px; }
.hv-visual { --hv-accent:#7a5813; }
/* Corte técnico: necesita ancho para leerse, así que manda sobre la grilla
   de dos columnas y el pie pasa debajo. */
.hv-visual:has(.hv-drawing-wide) { grid-template-columns:minmax(0,1fr); gap:4px; }
.hv-drawing-wide { justify-content:flex-start; }
.hv-drawing-wide svg { max-width:100%; width:100%; }
/* Los tres criterios normativos, con el que manda resaltado. */
.hv-crits { display:flex; flex-direction:column; gap:2px; margin:14px 0 0; }
.hv-crit { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; align-items:baseline; gap:4px 10px; padding:7px 10px; border-radius:10px; font-size:11.5px; color:#62594e; }
.hv-crit.on { background:color-mix(in srgb,var(--hv-accent) 9%,white); color:#302a25; }
.hv-crit-s { font:600 11px 'JetBrains Mono',monospace; color:var(--hv-accent); }
.hv-crit-n { min-width:0; }
.hv-crit-e { font:500 11px 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:#6d6459; white-space:nowrap; }
.hv-crit-v { font:600 14px 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:#302a25; }
.hv-crit.on .hv-crit-v { color:var(--hv-accent); }
.hv-crit-tag { font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hv-accent); }
.hv-crits + .hv-note b { color:#302a25; }
@media (max-width:640px) {
  .hv-crit { grid-template-columns:auto minmax(0,1fr) auto; row-gap:2px; }
  .hv-crit-e { grid-column:2/-1; }
}
/* Campo de cantidad dentro del panel del gráfico. */
.hv-campo { display:flex; flex-direction:column; gap:5px; margin:0 0 14px; }
.hv-campo label { font-size:11px; font-weight:700; letter-spacing:.03em; color:#5a5248; }
.hv-campo input { width:100%; max-width:190px; border:1px solid #C49A50; background:#fff; border-radius:9999px; padding:8px 15px; font:500 13px 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:#1F1B16; }
.hv-campo input:hover { border-color:#7A5813; }
.hv-campo input:focus { outline:none; border-color:#7A5813; box-shadow:0 0 0 3px rgba(196,154,80,.18); }
.hv-campo span { font-size:10.5px; color:#6d6459; }
/* Criterios con la fórmula en notación real. */
.hv-crit { grid-template-columns:auto minmax(0,1fr) auto auto; padding:9px 10px; }
.hv-crit-tex { font-size:11px; color:#4e463c; }
.hv-crit-tex .katex { font-size:1.08em; }
.hv-crit.on .hv-crit-tex .katex { color:var(--hv-accent); }
.hv-tex-plano { font:500 11px 'JetBrains Mono',monospace; color:#62594e; }
.hv-formula-exp .katex { font-size:1.1em; }
@media (max-width:640px) { .hv-crit { grid-template-columns:minmax(0,1fr) auto auto; } .hv-crit-tex { grid-column:1/-1; } }
/* --- Ajustes pedidos: campos en gris claro, fórmula legible --- */
/* Los campos van al FINAL del pie, después del desarrollo: primero se lee de
   dónde sale el número y con eso a la vista se responde. La línea de arriba
   separa "esto es lo que dice el cálculo" de "esto es lo que tú decides". */
.hv-campos { display:flex; flex-direction:column; gap:12px; margin:16px 0 0;
  padding-top:15px; border-top:1px solid #efe9e1; }
.hv-campos:empty { display:none; }
.hv-campos::before, .hv-decision::before { content:'Tu decisión'; font-size:9.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:#8A8172; }
/* Los campos de las líneas de diámetro viven en la tarjeta, no dentro del
   panel, pero se leen con la misma regla: van después del dibujo. */
.hv-decision { display:flex; flex-direction:column; gap:8px; padding-top:14px;
  border-top:1px solid #efe9e1; }
.hv-campo { margin:0; }
.hv-campo input, .hv-campo select {
  width:100%; max-width:230px; border:1px solid #D8D2C7; background:#fff; border-radius:9999px;
  padding:9px 16px; font:500 13px 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:#1F1B16;
}
.hv-campo select { font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23807667'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:34px; }
.hv-campo input:hover, .hv-campo select:hover { border-color:#B9B1A3; }
.hv-campo input:focus, .hv-campo select:focus { outline:none; border-color:#8A8172; box-shadow:0 0 0 3px rgba(138,129,114,.14); }
/* La fórmula manda: se lee grande y oscura, y el resultado la acompaña sin taparla. */
.hv-formula { align-items:center; gap:4px 10px; padding-bottom:14px; margin-bottom:14px; }
.hv-formula-exp { color:#2F2A24; }
.hv-formula-exp .katex { font-size:1.32em; }
.hv-formula-res { font-size:16px; font-weight:600; }
.hv-crit-tex .katex { font-size:1.2em; color:#2F2A24; }
.hv-crit-v { font-size:13px; font-weight:600; }
.hv-crit.on .hv-crit-tex .katex { color:var(--hv-accent); }
/* El acento del panel manda: resaltados y avisos toman el color del gráfico
   (morado en el dren, turquesa en el skimmer, coral en la boquilla). */
.hv-visual { --hv-accent:#7a5813; }
.hv-formula-res { color:var(--hv-accent); }
.hv-note[data-state="suficiente"] { color:var(--hv-accent); }
.hv-note[data-state="menor"], .hv-note[data-state="advertencia"] { color:#a13f20; }
.hv-crit.on { background:color-mix(in srgb,var(--hv-accent) 10%,white); }
.hv-crit.on .hv-crit-v { color:var(--hv-accent); }
.hv-crits { --hv-accent:inherit; }

/* ---- Desarrollo paso a paso del dren de fondo -----------------------------
   Cada paso muestra fórmula, sustitución con números y resultado, para que el
   cálculo se pueda auditar de arriba abajo sin salir de la tarjeta. */
.hv-cadena { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.hv-cadena-t { margin:12px 0 4px; font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#8A8172; }
.hv-paso { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:2px 12px; padding:8px 10px; border-radius:10px; }
.hv-paso.on { background:color-mix(in srgb,var(--hv-accent) 9%,white); }
.hv-paso-t { grid-column:1/-1; font-size:10.5px; color:#8A8172; }
.hv-paso-f { min-width:0; font-size:11px; color:#2F2A24; }
.hv-paso-f .katex { font-size:1.14em; }
.hv-paso.on .hv-paso-f .katex { color:var(--hv-accent); }
/* La sustitución numérica va debajo, más discreta: se consulta al verificar,
   no se lee de corrido. */
/* overflow:visible a propósito. Con overflow-x:auto el navegador calcula
   overflow-y como auto (no puede quedar visible si el otro eje no lo está), y
   como las fracciones de KaTeX son más altas que la línea, aparecía una barra
   de scroll vertical con flechitas al lado del resultado — parecía un control
   para subir y bajar la fórmula. Espacio hay de sobra: no hace falta recortar. */
.hv-paso-s { grid-column:1/-1; min-width:0; overflow:visible; font-size:10.5px; color:#6d6459; }
.hv-paso-s .katex { font-size:1.02em; }
.hv-paso-v { grid-row:2; grid-column:2; justify-self:end; white-space:nowrap;
  font:600 14px 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:#302a25; }
.hv-paso.on .hv-paso-v { color:var(--hv-accent); font-size:15px; }
.hv-paso-v u { text-decoration:none; margin-left:4px;
  font:500 9.5px 'Plus Jakarta Sans',sans-serif; }
/* Área y diámetro se leían seguidos y se confundían — que es justo el error
   que este desarrollo viene a evitar. Cada valor lleva delante su magnitud
   (Área, Ø, Q, V). No se distingue por el color de la unidad: el morado ya es
   el acento del panel y competiría con el resaltado del paso que manda. */
.hv-paso-v b { font:700 8.5px 'Plus Jakarta Sans',sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:#8A8172; margin-right:7px; vertical-align:1.5px; }
.hv-paso[data-tipo="area"] .hv-paso-v b { color:#8250F5; }
.hv-paso[data-tipo="diam"] .hv-paso-v b { color:#13A995; }
.hv-paso.on .hv-paso-v b { opacity:.7; }
.hv-paso-v u { color:#6d6459; }
.hv-aviso { margin:8px 0 0; padding:9px 11px; border-radius:10px; font-size:10.5px; line-height:1.5;
  color:#5c5347; background:#FBF7F1; border-left:2.5px solid var(--hv-accent); }
.hv-aviso b { color:#2F2A24; }
/* El dren usa todo el ancho: el dibujo no comparte altura con la cadena. */
[data-hv="drain"].hv-dren { display:flex; flex-direction:column; align-items:stretch; gap:24px; container-type:inline-size; }
.hv-dren-cabecera { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:28px; align-items:center; }
.hv-dren-cabecera .hv-dibujo-zona { display:flex; justify-content:center; min-width:0; }
.hv-dren-cabecera svg { width:100%; max-width:290px; height:auto; }
.hv-dren-desarrollo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.hv-dren-bloque { min-width:0; }
/* Si el desarrollo solo trae un bloque, ocupa el ancho entero en vez de
   dejar media tarjeta en blanco. */
.hv-dren-desarrollo:has(.hv-dren-bloque:only-child) { grid-template-columns:minmax(0,1fr); }
/* El tercer bloque (verificaciones con la elección hecha) cruza las dos
   columnas y reparte sus pasos adentro, en vez de quedarse en media fila. */
.hv-dren-desarrollo > .hv-dren-bloque:nth-child(3) { grid-column:1/-1; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; align-content:start; }
.hv-dren-desarrollo > .hv-dren-bloque:nth-child(3) > h4,
.hv-dren-desarrollo > .hv-dren-bloque:nth-child(3) > .hv-cadena-t,
.hv-dren-desarrollo > .hv-dren-bloque:nth-child(3) > .hv-note,
.hv-dren-desarrollo > .hv-dren-bloque:nth-child(3) > .hv-sub { grid-column:1/-1; }
.hv-sub { margin:-4px 0 12px; font-size:11px; line-height:1.6; color:#7d7266; }
.hv-dren-bloque h4 { font-size:13px; font-weight:700; color:#44394f; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid #e7e0ed; }
.hv-dren-bloque .hv-paso { margin-bottom:5px; }
.hv-dren-bloque .hv-paso-t { color:#62594e; }
.hv-dren-bloque .hv-paso-s { overflow:visible; padding:4px 0; }
.hv-dren-bloque .hv-paso-v { white-space:normal; max-width:150px; text-align:right; }
.hv-dren-bloque .hv-paso-v u { display:inline; }
.hv-dren > .hv-campos { margin-top:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:12px 24px; }
.hv-dren > .hv-campos::before { grid-column:1/-1; }
.hv-dren > .hv-campos:empty { display:none; }
@container (max-width:620px) {
  .hv-dren-cabecera, .hv-dren-desarrollo { grid-template-columns:minmax(0,1fr); gap:20px; }
  .hv-dren-cabecera svg { max-width:250px; }
  .hv-dren > .hv-campos { grid-template-columns:minmax(0,1fr); }
  .hv-dren-bloque .hv-paso-v { max-width:none; }
}
@media (max-width:640px) {
  .hv-paso { grid-template-columns:minmax(0,1fr); }
  .hv-paso-v { grid-row:auto; grid-column:1; justify-self:start; }
}

/* ---- Ficha del filtro de arena ------------------------------------------
   El corte del filtro es alto y estrecho, al revés que el resto de dibujos,
   así que su columna es más angosta y el pie se lleva el espacio. */
.hv-filtro { grid-template-columns:minmax(0,.72fr) minmax(0,1fr); align-items:start; }
.hv-filtro .hv-dibujo-zona { align-items:flex-end; }
.filtro-tabla { width:100%; border-collapse:collapse; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.filtro-tabla th, .filtro-tabla td { border:1px solid #ece5dc; padding:5px 4px; text-align:center;
  font:500 11.5px 'JetBrains Mono',monospace; color:#4e4538; }
.filtro-tabla th { font-size:10px; font-weight:700; color:#8A8172; background:#FBF7F1; letter-spacing:.03em; }
/* La columna del tiempo que usa el cálculo: es el dato que se va a leer. */
.filtro-tabla .filtro-hora-on { background:color-mix(in srgb,var(--hv-accent) 12%,white);
  color:var(--hv-accent); font-weight:700; }
.filtro-tabla th.filtro-hora-on { color:var(--hv-accent); }
@media (max-width:640px) {
  .hv-filtro { grid-template-columns:minmax(0,1fr); }

}

/* ---- Calidad de filtración: dial ----------------------------------------
   Mismo lenguaje que los anillos del tablero: pista clara con las bandas
   pintadas tenues, y encima el tramo lleno con doble halo neón. La aguja no
   aparece puesta: el arco se llena en 2,2 s y el punto entra al final. */
.hv-calidad { display:flex; align-items:center; justify-content:space-between; gap:24px;
  border:1px solid #eae4dc; border-radius:16px; padding:18px 22px; background:#fff; }
.hv-cal-txt { min-width:0; }
.hv-cal-t { margin:0; font:700 15px 'Plus Jakarta Sans',sans-serif; color:#1F1B16; }
.hv-cal-s { margin:2px 0 0; font-size:11.5px; color:#8A8172; }
.hv-cal-bandas { list-style:none; margin:16px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 20px; }
.hv-cal-bandas li { display:flex; align-items:center; gap:8px; font-size:10.5px; color:#8A8172; }
.hv-cal-bandas i { width:6px; height:6px; border-radius:50%; background:var(--c); flex-shrink:0; }
.hv-cal-bandas b { font:600 10.5px 'JetBrains Mono',monospace; color:#4E4538; }
.hv-cal-aviso { margin:12px 0 0; font-size:10.5px; color:#a13f20; }
.hv-cal-dial { flex-shrink:0; }
.hv-cal-svg { display:block; width:250px; height:auto; overflow:visible; }
.hv-cal-relleno { stroke-dasharray:var(--L); stroke-dashoffset:var(--L);
  animation:hv-cal-llenar 2200ms cubic-bezier(.16,.84,.3,1) forwards; }
@keyframes hv-cal-llenar { to { stroke-dashoffset:var(--off); } }
.hv-cal-punta { opacity:0; transform-box:fill-box; transform-origin:center;
  animation:hv-cal-punta-in 420ms cubic-bezier(.22,1,.36,1) 1800ms forwards; }
@keyframes hv-cal-punta-in { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
  .hv-cal-relleno { animation:none; stroke-dashoffset:var(--off); }
  .hv-cal-punta { animation:none; opacity:1; }
}

/* ---- Corte del filtro: la ilustración de Gabriel, tal cual --------------
   Va como máscara alfa (assets/filtro-corte.png) para que tome el morado del
   módulo. El ancho lo fija --hv-escala, que sale del Ø del modelo contra el
   mayor del catálogo: así se ve crecer al cambiar de filtro. */
.hv-filtro-corte { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; }
.hv-filtro-lamina { width:var(--hv-escala,100%); max-width:100%; margin:0 auto;
  -webkit-mask:var(--hv-lamina) center/contain no-repeat; mask:var(--hv-lamina) center/contain no-repeat;
  transition:width 420ms cubic-bezier(.22,1,.36,1); }
.hv-filtro-cota { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:0; }
.hv-filtro-cota span { font:600 12px 'JetBrains Mono',monospace; color:#4e4538;
  background:#FBF7F1; border:1px solid #ece5dc; border-radius:9999px; padding:3px 11px; }
@media (prefers-reduced-motion:reduce) { .hv-filtro-lamina { transition:none; } }

/* ---- Fórmulas del paso de filtro ----------------------------------------
   La tarjeta ocupa el ancho completo, así que acá las fórmulas se leen
   grandes en vez de apretadas: es el dato principal del paso. */
.filtro-formulas .hv-paso { padding:12px 14px; }
.filtro-formulas .hv-paso-t { font-size:11.5px; margin-bottom:2px; }
.filtro-formulas .hv-paso-f .katex { font-size:1.5em; }
.filtro-formulas .hv-paso-s .katex { font-size:1.2em; }
.filtro-formulas .hv-paso-v { font-size:17px; }
.filtro-formulas .hv-paso.on .hv-paso-v { font-size:19px; }
.filtro-formulas .hv-cadena { gap:6px; }
.hv-cal-aviso { margin:0 0 8px; font-size:11px; color:#a13f20; }
/* ---- Filtro: desarrollo, decisión y plano de las tres vistas -------------
   Todo el color del paso sale de --neon: cambiarlo acá lo cambia en las
   fórmulas, las cotas, el equipo dibujado y el chip elegido. */
.filtro-panel {
  --neon:#101318; --neon-tinta:#101318; --neon-suave:#1013180f; --neon-linea:#10131866;
  --hv-accent:var(--neon);
  display:flex; flex-direction:column; gap:20px; container-type:inline-size;
}
.filtro-intro { font:400 12px/1.7 'Plus Jakarta Sans',sans-serif; color:#62594e; margin:0; }

/* Fórmulas: el resultado va AL COSTADO de la fórmula, no en un bloque debajo,
   así la tarjeta ocupa el alto que necesita y nada más. */
.filtro-formulas { --hv-accent:var(--neon); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.filtro-formulas:empty, #filtro-calidad:empty, #filtro-ficha:empty { display:none; }
.filtro-formulas .hv-cadena { gap:6px; }
.filtro-formulas .hv-paso { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 18px;
  padding:14px 16px; background:#fff; border:1px solid #eae4dc; border-radius:12px; min-width:0; }
.filtro-formulas .hv-paso.on { background:#fff; }
.filtro-formulas .hv-paso-t { font:600 10.5px/1.4 'Plus Jakarta Sans',sans-serif; color:#8A8172; }
.filtro-formulas .hv-paso-f { font-size:12px; color:#2F2A24; }
.filtro-formulas .hv-paso-f .katex { font-size:1.35em; }
.filtro-formulas .hv-paso.on .hv-paso-f .katex { color:var(--neon-tinta); }
.filtro-formulas .hv-paso-s { overflow:visible; padding:2px 0 0; font-size:10.5px; max-width:100%; }
.filtro-formulas .hv-paso-s .katex { font-size:1.05em; }
.filtro-formulas .hv-paso-v,
.filtro-formulas .hv-paso.on .hv-paso-v { font-size:19px; color:var(--neon-tinta); white-space:nowrap; }
.filtro-formulas .hv-paso-v b,
.filtro-formulas .hv-paso[data-tipo] .hv-paso-v b { color:var(--neon-tinta); opacity:.45; }
.filtro-formulas > .hv-calidad { grid-column:1/-1; }

/* Plano: la retícula va de lado a lado de la tarjeta y las tres vistas se
   centran como grupo sobre una misma línea de suelo. El ancho de cada lámina
   lo calcula el JS a partir del Ø, y las cotas se anclan a fracciones medidas
   sobre el PNG, así que quedan pegadas al equipo a cualquier tamaño. */
.filtro-panel .hv-filtro { display:flex; flex-direction:column; align-items:stretch; gap:14px; border-top:0; padding:0; }
.filtro-plano { align-self:stretch; display:flex; align-items:flex-end; justify-content:center; gap:clamp(18px,6cqi,64px);
  margin-inline:-17px; padding:30px 16px 14px; border-block:1px solid #efe9e2;
  background-color:#fdfcfb;
  background-image:linear-gradient(#00000008 1px,transparent 1px),linear-gradient(90deg,#00000008 1px,transparent 1px);
  background-size:30px 30px,30px 30px; }
.filtro-vista { margin:0; min-width:0; display:flex; flex-direction:column; align-items:center; }
.filtro-vista-marco { height:var(--alto,240px); display:flex; align-items:flex-end; justify-content:center; }
.filtro-vista:nth-child(2) .filtro-vista-marco { padding-right:44px; }
.filtro-vista-equipo { position:relative; width:var(--ancho); max-width:100%; aspect-ratio:var(--proporcion);
  transition:width 520ms cubic-bezier(.22,1,.36,1); }
.filtro-vista-lamina { position:absolute; inset:0; background:var(--neon);
  -webkit-mask:var(--hv-lamina) center/contain no-repeat; mask:var(--hv-lamina) center/contain no-repeat; }
.filtro-vista figcaption { display:flex; align-items:center; gap:7px; margin-top:38px;
  font:600 9.5px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:#8a8073; }
.filtro-vista figcaption b { font:600 9px/1 'JetBrains Mono',monospace; letter-spacing:0;
  color:var(--neon-tinta); background:var(--neon-suave); border-radius:999px; padding:4px 6px; }

/* Cotas. Los extremos salen de --x0/--x1 (y --y0/--y1 en el alzado), medidos
   sobre la lámina, no estimados a ojo. */
.filtro-cota-h { position:absolute; left:calc(var(--x0) * 100%); right:calc((1 - var(--x1)) * 100%);
  bottom:-20px; border-top:1px solid var(--neon-linea); }
.filtro-cota-h:before, .filtro-cota-h:after { content:''; position:absolute; top:-5px; height:11px; border-left:1px solid var(--neon-linea); }
.filtro-cota-h:before { left:0; } .filtro-cota-h:after { right:0; }
.filtro-cota-h span { position:absolute; left:50%; top:5px; transform:translateX(-50%); white-space:nowrap;
  font:600 10px/1 'JetBrains Mono',monospace; color:var(--neon-tinta); }
.filtro-cota-v { position:absolute; top:calc(var(--y0) * 100%); bottom:calc((1 - var(--y1)) * 100%);
  left:calc(100% + 16px); border-left:1px solid var(--neon-linea); }
.filtro-cota-v:before, .filtro-cota-v:after { content:''; position:absolute; left:-5px; width:11px; border-top:1px solid var(--neon-linea); }
.filtro-cota-v:before { top:0; } .filtro-cota-v:after { bottom:0; }
.filtro-cota-v span { position:absolute; top:50%; left:7px; transform:translateY(-50%); writing-mode:vertical-rl;
  white-space:nowrap; font:600 10px/1 'JetBrains Mono',monospace; color:var(--neon-tinta); }
.filtro-vistas-nota { margin:0 2px; font-size:10.5px; line-height:1.6; color:#8a8073; }
.filtro-panel .hv-filtro .hv-note { margin:0; }

/* Decisión */
.filtro-decision { display:flex; flex-direction:column; gap:16px; border-top:1px solid #ded5c9; padding-top:20px; }
.filtro-decision h3 { font-size:15px; font-weight:700; margin:0; }
.filtro-decision > p { font-size:12px; color:#62594e; margin:0; }
.filtro-decision-fila { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px 28px; align-items:start; }
.filtro-decision .tipo-chip[aria-pressed="true"] { color:#fff; background:var(--neon); border-color:transparent;
  box-shadow:0 2px 10px #10131833; }

/* Calidad dentro del paso de filtro */
.filtro-panel .hv-calidad { padding:16px 20px; }
.filtro-panel .hv-cal-svg { width:230px; }
@media (prefers-reduced-motion:reduce) { .filtro-vista-equipo { transition:none; } }

@container (max-width:620px) {
  .filtro-formulas { grid-template-columns:minmax(0,1fr); }
  .filtro-plano { flex-wrap:wrap; row-gap:14px; }
  .filtro-decision-fila { grid-template-columns:minmax(0,1fr); gap:16px; }
  .hv-calidad { flex-direction:column; align-items:stretch; gap:8px; }
  .hv-cal-dial { align-self:center; }
  .filtro-decision > .grid { grid-template-columns:minmax(0,1fr); }
}