/* ========================= */
/*   TUBO DE ENSAYO ANIMADO  */
/* ========================= */

.tube-liquid .wave {
  background: url("../images/wave-amarillo.svg") repeat-x;
  opacity: 0.8;
}

.tube-indicador {
  /* Por si quieres ajustar espacio vertical */
  min-height: 140px;
}

/* Contenedor del tubo */
.tube-container {
  position: relative;
  width: clamp(38px, 7vw, 100px);
  aspect-ratio: 2 / 4;        /* alto y delgado */
  min-height: 140px;
  max-height: 190px;
}

/* Vidrio exterior del tubo */
.tube-outline {
  position: absolute;
  inset: 0;
  border-radius: 18px 18px 28px 28px;
  box-sizing: border-box;
  border: 4px solid #27A3FF; /* azul vidrio */
  background:
    linear-gradient(to right, rgba(255,255,255,0.55), rgba(255,255,255,0)) 0 0 / 35% 100% no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.4) inset,
    0 6px 10px rgba(0,0,0,0.25);
}

/* Borde superior más ancho (boca del tubo) */
.tube-outline::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 12px;
  border-radius: 999px;
  border: 4px solid #27A3FF;
  border-bottom: none;
  background: radial-gradient(circle at 50% 0%, #ffffff, rgba(255,255,255,0.2));
}

/* Zona interior donde va el líquido */
.tube-liquid {
  position: absolute;
  inset: 8px 7px 10px 7px; /* deja vidrio visible */
  border-radius: 12px 12px 22px 22px;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.2), transparent 40%);
}

/* Waves dentro del tubo (reutiliza tus .wave y .wave-below) */
.tube-liquid .wave,
.tube-liquid .wave-below {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Color del líquido en el tubo (solo aquí) */
.tube-liquid .wave-below {
  background-color: #FFC95A; /* amarillo/suero */
}



/* Pequeño brillo vertical adelante del líquido */
.tube-liquid::after {
  content: "";
  position: absolute;
  inset: 8% 70% 10% 8%;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.75),
    rgba(255,255,255,0.1)
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ========================= */
/*  TEXTO AL LADO DEL TUBO   */
/* ========================= */

.tube-info {
  display: flex;
  flex-direction: column;
  
}

.tube-valor {
  font-size: clamp(3rem, 2rem, 4rem);
  font-weight: 700;
  color: #060A3D;
  line-height: 1;
  margin-bottom: 0.25rem;
  color:#00ACDF;
}

.tube-valor span {
  font-size: 0.7em;
}

.tube-label {
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  color: #4a4a6a;
  margin-bottom: 0;
}

/* Responsive: en pantallas chicas, tubo arriba y texto abajo centrado */
@media (max-width: 575.98px) {
  .tube-indicador {
    flex-direction: column;
    align-items: center;
    
  }

  .tube-info {
    margin-top: 0.5rem;
    align-items: center;
  }
}





/* POSICIONES (niveles de agua) */
.tube-liquid .wave._0 {
  background-position: 0% 110%;
}

.tube-liquid .wave-below._0 {
  clip-path: polygon(0% 110%, 0% 110%, 110% 110%, 110% 110%);
}

.tube-liquid .wave._25 {
  background-position: 0% 87%;
}

.tube-liquid .wave-below._25 {
  clip-path: polygon(0% 110%, 0% 80%, 110% 80%, 110% 110%);
}

.tube-liquid .wave._50 {
  background-position: 0% 57%;
}

.tube-liquid .wave-below._50 {
  clip-path: polygon(0% 110%, 0% 58%, 110% 58%, 110% 110%);
}

.tube-liquid .wave._75 {
  background-position: 0% 31%;
}


.tube-liquid .wave._88 {
  background-position: 0% 21%;
}


.tube-liquid .wave-below._75 {
  clip-path: polygon(0% 110%, 0% 35%, 110% 35%, 110% 110%);
}

.tube-liquid .wave-below._88 {
  clip-path: polygon(0% 110%, 0% 25%, 110% 25%, 110% 110%);
}



.tube-liquid .wave._100 {
  background-position: 0% 5%;
}

.tube-liquid .wave-below._100 {
  clip-path: polygon(0% 110%, 0% 15%, 110% 15%, 110% 110%);
}

/* ANIMACIÓN DEL LLENADO */
@keyframes fill-wave {
  from {
    background-position: -1200px 110%;
  }
}

@keyframes fill-below {
  from {
    clip-path: polygon(0% 110%, 0% 110%, 110% 110%, 110% 110%);
  }
}

/* ANIMACIÓN DEL MOVIMIENTO DE OLAS */
@keyframes wave-0 {
  to {
    background-position: 1200px 110%;
  }
}

@keyframes wave-25 {
  to {
    background-position: 1200px 87%;
  }
}

@keyframes wave-50 {
  to {
    background-position: 1200px 57%;
  }
}

@keyframes wave-75 {
  to {
    background-position: 1200px 31%;
  }
}



@keyframes wave-88 {
  to {
    background-position: 1200px 21%;
  }
}



@keyframes wave-100 {
  to {
    background-position: 1200px 5%;
  }
}

/* APLICAR ANIMACIONES */
:root {
  --ease-in: cubic-bezier(0.58, 0.42, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.42, 0.58);
}

.wave {
  animation-name: fill-wave, wave-0;
  animation-duration: 5s, 7s;
  animation-delay: 0s, 5s;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--ease-in), var(--ease-out);
}

.wave._25 {
  animation-name: fill-wave, wave-25;
}

.wave._50 {
  animation-name: fill-wave, wave-50;
}

.wave._75 {
  animation-name: fill-wave, wave-75;
}

.wave._88 {
  animation-name: fill-wave, wave-88;
}


.wave._100 {
  animation-name: fill-wave, wave-100;
}

/* Distintos tiempos para las capas (efecto realista) */
.wave:nth-child(2) {
  animation-duration: 5s, 11s;
}

.wave:nth-child(3) {
  animation-duration: 5s, 13s;
}

.wave-below {
  animation: 5s var(--ease-in) forwards fill-below;
}

.wave-below._50 {
  animation: 7s -2s var(--ease-in) forwards fill-below;
}

.wave-below._75,.wave-below._88,
.wave-below._100 {
  animation: 6s -1s var(--ease-in) forwards fill-below;
}