/* ============================================================
   SCAE · El Caudal — visualización de la tubería comercial
   ------------------------------------------------------------
   Acompaña a js/tuberia-viz.js. Va SIEMPRE dentro de tarjeta
   clara: un dibujo sobre el verde es ilegible a los cinco
   minutos.

   Reparto de responsabilidades: el JS pone geometría y clases,
   el CSS pone identidad. Ningún color se calcula en JS.

   Un solo oro en la pieza: los nombres de etapa (--oro-texto) y
   el anillo de interacción y foco (--oro). El oro NO codifica
   dato: no dice "bueno" ni "alto".
   ============================================================ */

.tuberia-viz{
  position:relative;width:100%;

  /* Los cuatro colores del dibujo. Los mismos de js/grafico.js:
     ya pasaron las seis comprobaciones sobre #F8F8F5.          */
  --tub-agua:#12703F;      /* el caudal */
  --tub-corte:#8C2F2F;     /* la rotura */
  --tub-apriete:#B8791C;   /* el estrangulamiento */
  --tub-muerto:#6B7A73;    /* lo que ya no lleva presión */

  /* Tres velocidades y ninguna más: hay presión, va lenta, no
     llega nada. Si la velocidad codificara volumen, el dato
     estaría dicho dos veces y ninguna sería legible.           */
  --tub-ritmo:1600ms;
  --tub-lento:2800ms;
}

.tub-lienzo{position:relative;width:100%}

.tuberia-svg{width:100%;height:auto;display:block;overflow:visible}

/* La capa de texto va en HTML y no en <text>: dentro del viewBox,
   11 unidades serían 8,9 px en un modal ancho y la tipografía de
   la identidad quedaría rota. Aquí 32 px son 32 px siempre.    */
.tub-capa-texto{position:absolute;inset:0;pointer-events:none}

/* ---------- nodos: las cinco cámaras ---------- */

.tub-nodo-camara{fill:var(--tub-agua)}
.tub-nodo-camara.apagado{fill:var(--tub-muerto);fill-opacity:.45}
.tub-nodo-camara.vacia{fill:var(--tub-muerto);fill-opacity:.38}
.tub-nodo-camara.vacia-silueta{
  fill:none;stroke:var(--borde);stroke-width:1.2;stroke-dasharray:5 6;
}

.tub-nodo{position:absolute;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.tub-nodo-nombre{
  font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--oro-texto);line-height:1;
}
.tub-nodo-cifra{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;
  line-height:1.05;margin-top:5px;color:var(--verde);
  font-variant-numeric:tabular-nums;
}
/* El nodo siguiente al corte conserva el color pleno: es el caudal
   que sobrevivió y hay que leerlo. Los de más abajo, no.        */
.tub-nodo.apagado .tub-nodo-cifra{color:var(--neutro)}
.tub-nodo.apagado .tub-nodo-nombre{color:var(--neutro);opacity:.85}

/* ---------- la cinta ---------- */

.tub-ducto{fill:var(--tub-agua);stroke:none;transition:stroke .16s var(--ease)}

/* Aguas abajo del corte ya no es agua, es un tubo vacío. */
.tub-tramo.sin-presion .tub-ducto{
  fill:var(--tub-muerto);fill-opacity:.30;
  stroke:var(--tub-muerto);stroke-opacity:.55;stroke-width:1;
}

/* Grosor cero y "no lo sabemos" no pueden verse igual: lo segundo
   es una silueta, no una cinta aplastada.                      */
.tub-ducto-contorno{
  fill:none;stroke:var(--borde);stroke-width:1.2;stroke-dasharray:5 6;
}

/* ---------- textura: el caudal ----------
   Recortada con la propia cinta, así que se estrecha sola al pasar
   por el cono: el caudal muestra el estrangulamiento sin que haya
   que dibujarlo dos veces.                                      */

.tub-textura-caja{pointer-events:none}
.tub-textura{opacity:.13;pointer-events:none;transition:opacity .16s var(--ease)}
.tub-marca{fill:#F8F8F5}

/* Los BUCLES van en linear y es la única excepción de la curva
   única del proyecto: una cubic-bezier en un bucle infinito
   produce un tirón visible en cada vuelta. Las TRANSICIONES de
   estado (entrada, hover, pulso) sí usan var(--ease).           */
.tub-textura{animation:tub-fluir-x var(--tub-ritmo) linear infinite}
.tub-textura.eje-y{animation-name:tub-fluir-y}
.tub-textura.lenta{animation-duration:var(--tub-lento)}
.tub-textura.detenida{animation:none;opacity:.05}

@keyframes tub-fluir-x{from{transform:translateX(0)}to{transform:translateX(26px)}}
@keyframes tub-fluir-y{from{transform:translateY(0)}to{transform:translateY(26px)}}

/* ---------- entrada: el caudal llena la tubería una sola vez ---------- */

.tuberia-viz.animando .tub-entrada{
  animation:tub-entrada-x 900ms var(--ease) backwards;
}
.tuberia-viz.animando .tub-entrada.eje-y{animation-name:tub-entrada-y}
@keyframes tub-entrada-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tub-entrada-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.tuberia-viz.animando .tub-nodo,
.tuberia-viz.animando .tub-valvula-caja{
  animation:tub-aparecer 420ms var(--ease) backwards;
}
.tuberia-viz.animando .tub-nodo-cifra{
  animation:tub-subir 420ms var(--ease) backwards;
  animation-delay:inherit;   /* hereda el retardo escalonado del nodo */
}
@keyframes tub-aparecer{from{opacity:0}to{opacity:1}}
@keyframes tub-subir{from{transform:translateY(8px)}to{transform:translateY(0)}}

/* ---------- el corte ----------
   La tubería se parte al inicio del cono, o sea a caudal pleno:
   el flujo llega entero y ahí se acaba el tubo.                */

.tub-corte-labio{fill:var(--tub-corte)}
.tub-corte-hilo{fill:var(--tub-agua);fill-opacity:.5}
.tub-corte-guia{
  stroke:var(--tub-corte);stroke-opacity:.30;stroke-width:1;stroke-dasharray:3 4;
}

/* Alerta: no se rompe, se aprieta. Contorno solo en el cono. */
.tub-estrangulamiento{
  fill:none;stroke:var(--tub-apriete);stroke-width:1.6;stroke-linecap:round;
}

/* ---------- derrame ----------
   Se dibuja la pérdida en TODOS los pasos, porque en todos se cae
   gente. Solo la del cuello lleva color y movimiento: la caída es
   normal en todas partes, esta es la que está fuera de banda.   */

.tub-derrame{stroke:none;pointer-events:none}
.tub-derrame.leve{fill:var(--tub-muerto);fill-opacity:.16}
.tub-derrame.mudo{fill:var(--tub-muerto);fill-opacity:.10}
.tub-derrame.aviso{fill:var(--tub-apriete);fill-opacity:.42}
.tub-derrame.grave{fill:var(--tub-corte);fill-opacity:.62}

.tub-charco{pointer-events:none}
.tub-charco.aviso{fill:var(--tub-apriete);fill-opacity:.30}
.tub-charco.grave{
  fill:var(--tub-corte);fill-opacity:.45;
  animation:tub-pulso 1900ms var(--ease) infinite;
}
@keyframes tub-pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.tub-gota{
  fill:var(--tub-corte);fill-opacity:.62;pointer-events:none;
  animation:tub-gota-y 1900ms linear infinite;
}
.tub-gota.eje-y{animation-name:tub-gota-x}
/* Lineal a propósito: velocidad constante es honesta para una marca
   de dato; simular la aceleración de la gravedad sería adorno.   */
@keyframes tub-gota-y{
  0%{transform:translateY(0);opacity:1}
  85%{opacity:1}
  100%{transform:translateY(var(--tub-caida,40px));opacity:0}
}
@keyframes tub-gota-x{
  0%{transform:translateX(0);opacity:1}
  85%{opacity:1}
  100%{transform:translateX(var(--tub-caida,40px));opacity:0}
}

/* ---------- válvulas ---------- */

.tub-guia-valvula{stroke:var(--borde);stroke-width:1}

.tub-valvula-caja{position:absolute;transform:translate(-50%,-50%)}
.tub-valvula{
  display:inline-flex;align-items:center;height:22px;padding:0 11px;
  border-radius:var(--r-pill);background:var(--blanco);
  border:1.2px solid var(--borde);color:var(--verde);
  font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:var(--s-1);
}
/* El texto nunca se pinta de ámbar sobre claro (3,4:1 a 12 px no
   pasa). El estado lo llevan el grosor del anillo y el relleno,
   que sí superan 3:1 como objeto gráfico.                      */
.tub-valvula.alerta{border-width:2px;border-color:var(--tub-apriete)}
.tub-valvula.critica{background:var(--tub-corte);border:none;color:var(--blanco)}
.tub-valvula.apagada{color:var(--neutro)}
.tub-valvula.sin-base{border-style:dashed;color:var(--neutro)}

/* ---------- consecuencias ---------- */

.tub-consecuencias-linea{
  fill:none;stroke:var(--tub-muerto);stroke-opacity:.55;stroke-width:1;
}
.tub-consecuencias-linea.punteada{stroke-dasharray:3 5}
.tub-consecuencias-texto{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--neutro);
}
/* En vertical el rotulo arranca pegado al borde izquierdo en vez de ir
   centrado. A 375px la frase entera mide ~356px con su tracking y el
   lienzo mide 320: con `nowrap` heredado se perdia el final —
   "…NO SE ARREGLA AQU" — cortado por el `overflow-x:clip` del
   .principal. Se deja partir en dos lineas: el tracking y el cuerpo se
   respetan, y la frase se lee entera. */
.tub-consecuencias-texto.izq{
  transform:translate(0,0);
  white-space:normal;
  max-width:calc(100% - 16px);
  line-height:1.45;
}
/* Anclado por el pie: se posiciona con `bottom`, asi que si el texto
   creciera lo hace hacia ARRIBA, alejandose del nodo en vez de
   invadirlo. `top:auto` anula el que trae la clase base. */
.tub-consecuencias-texto.izq.arriba{ top:auto; }

/* ---------- zonas de interacción ----------
   El oro es interacción, jamás dato.                           */

.tub-zona-area,.tub-zona-nodo{fill:rgba(0,0,0,0);cursor:pointer}
.tub-zona{outline:none}
.tub-zona:focus-visible .tub-zona-area{stroke:var(--oro);stroke-width:2}
.tub-tramo.activo .tub-textura{opacity:.20}
.tub-tramo.activo .tub-ducto{stroke:var(--oro);stroke-width:1.2}

/* ---------- globo ---------- */

.gtip-tuberia{white-space:normal;max-width:240px}
.gtip-tuberia .gtip-tit{font-size:12.5px;font-weight:700;line-height:1.25}
.gtip-tuberia .gtip-cifra{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;
  line-height:1.15;margin-top:1px;font-variant-numeric:tabular-nums;
}
.gtip-tuberia .gtip-mut{font-size:11px;opacity:.72;line-height:1.4;margin-top:2px}
.gtip-tuberia .gtip-banda{
  display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;opacity:.9;
}
.gtip-tuberia .gtip-accion{margin-top:6px;font-size:11.5px;font-weight:600}
/* Las etiquetas de estado viven aquí sobre verde oscuro, no sobre
   tarjeta clara: mismo significado, tinte legible en ese fondo. */
.gtip-tuberia .et{
  background:rgba(248,248,245,.10);border-color:rgba(248,248,245,.28);
  color:#F3F5F1;font-size:9.5px;padding:2px 7px;
}
.gtip-tuberia .et.ok{color:#8FD3B0;border-color:rgba(143,211,176,.45)}
.gtip-tuberia .et.alerta{color:#F0C578;border-color:rgba(240,197,120,.45)}
.gtip-tuberia .et.error{color:#F0A3A3;border-color:rgba(240,163,163,.50)}
.gtip-tuberia .et.neutro{color:#C3CCC7;border-color:rgba(195,204,199,.40)}

/* ---------- estado sin datos ----------
   Silueta de calibre constante: desconocemos los volúmenes y una
   silueta que se estrecha insinuaría una forma que nadie cargó.  */

/* Sin padding a propósito: la capa de texto se posiciona en
   porcentajes del mismo rectángulo que ocupa el SVG, y un relleno
   desplazaría una respecto del otro.                           */
.tuberia-viz.sin-datos .tub-lienzo{
  background:var(--crema);border-radius:var(--r-box);overflow:hidden;
}
.tuberia-viz.sin-datos .tub-lienzo::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--metal);opacity:.7;
}
.tub-vacio-texto{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;color:var(--neutro);
}
.tub-pie{margin-top:12px;display:flex;justify-content:center}

/* ---------- lectura alterna ----------
   Solo cuando el dibujo va sin su tabla al lado. Con la tabla
   delante, esto sería una lectura doble.                       */
.tuberia-lectura{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;
}

/* ---------- vertical (contenedor angosto) ---------- */

/* El dibujo vertical guarda la proporción 360:640, así que en un
   contenedor de 600 px se estiraría a 1000 px de alto. Se le pone
   tope y se centra: la columna de texto y el SVG viven en el mismo
   .tub-lienzo, así que los dos se recortan juntos y los porcentajes
   de la capa de texto siguen cuadrando.                          */
.tuberia-viz.vertical .tub-lienzo{max-width:440px;margin:0 auto}

.tuberia-viz.vertical .tub-nodo{transform:translate(-100%,-50%);text-align:right}
.tuberia-viz.vertical .tub-valvula-caja{transform:translate(-100%,-50%)}
.tuberia-viz.vertical .tub-nodo-cifra{font-size:30px}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------
   Se apaga TODO el movimiento y la pieza sigue diciendo lo mismo,
   porque el diagnóstico nunca dependió de él: vano de 12 u, dos
   labios, derrame con charco, chip macizo, cinta neutra aguas
   abajo y corchete de consecuencias son todos estáticos.

   La oposición texturado / liso sustituye a en movimiento /
   detenido.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .tub-textura,.tub-gota,.tub-charco,
  .tuberia-viz.animando .tub-entrada,
  .tuberia-viz.animando .tub-nodo,
  .tuberia-viz.animando .tub-nodo-cifra,
  .tuberia-viz.animando .tub-valvula-caja{
    animation:none !important;
  }
  .tub-textura{opacity:.10}
  .tub-tramo.sin-presion .tub-textura{display:none}
  .tub-gota{display:none}
  /* Única adición en este modo: la línea que ata el corte con su
     consecuencia deja de apoyarse en el derrame animado.        */
  .tub-corte-guia{stroke-opacity:.55}
}

/* ---------- impresión ---------- */
@media print{
  .tub-textura,.tub-gota,.tub-charco{animation:none !important}
  .tub-gota{display:none}
}