/* KairSun Web — pantalla Agua (mock 1:1 de la app Flutter).
 *
 * Fuente de verdad (KairSun-App, READ-ONLY):
 *   lib/features/water/presentation/water_screen.dart
 *   lib/features/water/presentation/widgets/habitat/neumorphic_water_tank.dart
 *   lib/features/water/presentation/widgets/habitat/water_volume_selector.dart
 *   lib/features/water/presentation/widgets/habitat/water_habitat_pill.dart
 *   lib/features/water/presentation/screens/water_performance_screen.dart
 *   lib/features/water/presentation/widgets/tracking/*.dart
 *   lib/features/water/presentation/water_tokens.dart
 *
 * Contrato de la base (`ks-screens-base.css`): --u = 1dp real (393dp base),
 * telefono .phone, toggle .ks-view, piezas .ks-*. Aca NO se redefinen esas
 * piezas: solo se viste la pantalla Agua.
 *
 * Sin JS, sin estilos inline, sin prioridades forzadas. Las animaciones apagan en
 * prefers-reduced-motion. Las simplificaciones (olas CSS en vez de CustomPaint,
 * sin acelerometro, sin mascota) se declaran en .screen-notes y en
 * docs/screens/41_agua.md.
 */

/* ── Tokens del modulo (water_tokens.dart:14-26) ───────────────────────── */
.ks-w {
  --w-accent: #2dc4ed;
  --w-accent-soft: #38bdf8;
  --w-accent-ink: #0284c7;
  --w-success: #10b981;
  --w-warning: #eab308;
  --w-tank-bg: rgba(13, 24, 42, 0.65);
  --w-tank-border: rgba(255, 255, 255, 0.18);
  --w-pill: #14233c;
  --w-well: #080f1e;
  --w-panel: #0a1d2d;
  position: relative;
  height: 100%;
  overflow: hidden;
  font-family: var(--ks-font);
}

/* ── Fondo animado (water_screen.dart:738-818) ─────────────────────────── */
.ks-w__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% 108%, rgba(45, 196, 237, 0.14), transparent 62%),
    linear-gradient(
      160deg,
      #0a1428 0%,
      #061017 22%,
      #0d1f2d 50%,
      #061017 78%,
      #0a1428 100%
    );
  background-size: 100% 130%, 100% 130%;
  animation: ks-w-bg-drift 8s ease-in-out infinite alternate;
}
@keyframes ks-w-bg-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 0 12%; }
}

/* Los controles del mock son botones reales: se les quita el chrome nativo
 * sin tocar tipografia ni colores que cada clase define. */
.ks-w button {
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Barra de estado (decorativa) ──────────────────────────────────────── */
.ks-w__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(54 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(26 * var(--u)) 0 calc(30 * var(--u));
  color: #fff;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  z-index: 6;
}
.ks-w__status-icons {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
}
.ks-w__signal,
.ks-w__wifi,
.ks-w__battery {
  display: inline-block;
  background: rgba(255, 255, 255, 0.92);
}
.ks-w__signal {
  width: calc(15 * var(--u));
  height: calc(10 * var(--u));
  clip-path: polygon(0 100%, 18% 100%, 18% 66%, 0 66%, 0 100%, 28% 100%, 28% 44%, 46% 44%, 46% 100%, 56% 100%, 56% 22%, 74% 22%, 74% 100%, 84% 100%, 84% 0, 100% 0, 100% 100%);
}
.ks-w__wifi {
  width: calc(15 * var(--u));
  height: calc(11 * var(--u));
  clip-path: polygon(50% 100%, 0 38%, 12% 26%, 50% 62%, 88% 26%, 100% 38%);
}
.ks-w__battery {
  width: calc(22 * var(--u));
  height: calc(11 * var(--u));
  border-radius: calc(3 * var(--u));
  background: transparent;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.7);
  position: relative;
}
.ks-w__battery::before {
  content: "";
  position: absolute;
  inset: calc(1.6 * var(--u));
  width: 68%;
  border-radius: calc(1.6 * var(--u));
  background: #fff;
}
.ks-w__battery::after {
  content: "";
  position: absolute;
  right: calc(-3.4 * var(--u));
  top: 50%;
  translate: 0 -50%;
  width: calc(2 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  background: rgba(255, 255, 255, 0.7);
}

/* ── App bar del modulo (fallback _WaterHeader, water_screen.dart:2109-2215) */
.ks-w__appbar {
  position: absolute;
  top: calc(54 * var(--u));
  left: 0;
  right: 0;
  height: calc(58 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(14 * var(--u));
  background: linear-gradient(180deg, rgba(6, 16, 23, 0.72), rgba(6, 16, 23, 0));
  z-index: 5;
}
.ks-w__tabs {
  display: inline-flex;
  padding: calc(4 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  gap: calc(4 * var(--u));
}
.ks-w__tab {
  min-width: calc(96 * var(--u));
  min-height: calc(30 * var(--u));
  padding: 0 calc(14 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(13 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 500;
  letter-spacing: calc(0.3 * var(--u));
  color: rgba(255, 255, 255, 0.7);
}
.ks-w__tab--on {
  font-weight: 800;
  color: #062a38;
  background: linear-gradient(160deg, #38bdf8, #2dc4ed);
  box-shadow:
    0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.4),
    calc(-1 * var(--u)) calc(-1 * var(--u)) calc(1 * var(--u)) rgba(255, 255, 255, 0.3);
}
.ks-w__appbar-icon {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(14 * var(--u));
  color: var(--w-accent-soft);
}
.ks-w__appbar-icon svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}

/* ── Scroll principal ──────────────────────────────────────────────────── */
.ks-w__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(122 * var(--u)) 0 calc(124 * var(--u));
  scrollbar-width: none;
  z-index: 1;
}
.ks-w__scroll::-webkit-scrollbar { display: none; }

/* ── Tanque neumorfico (neumorphic_water_tank.dart) ────────────────────── */
.ks-w__tank-wrap {
  padding: 0 calc(16 * var(--u));
}
.ks-w__tank {
  --fill: 70%;
  position: relative;
  height: calc(310 * var(--u));
  border-radius: calc(40 * var(--u));
  border: calc(3 * var(--u)) solid var(--w-tank-border);
  background: var(--w-tank-bg);
  box-shadow:
    0 calc(15 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.55),
    calc(-2 * var(--u)) calc(-2 * var(--u)) calc(10 * var(--u)) rgba(255, 255, 255, 0.05);
}
.ks-w--goal .ks-w__tank { --fill: 100%; }
.ks-w--empty .ks-w__tank { --fill: 0%; }
.ks-w__tank-inner {
  position: absolute;
  inset: 0;
  border-radius: calc(37 * var(--u));
  overflow: hidden;
}

/* Liquido: ola trasera + ola frontal + cuerpo (painter, lineas 1707-1923). */
.ks-w__liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fill, 70%);
  overflow: hidden;
}
.ks-w__liquid-body {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(10 * var(--u));
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(45, 196, 237, 0.88) 0%,
    rgba(23, 123, 169, 0.93) 42%,
    rgba(0, 51, 102, 0.95) 100%
  );
}
.ks-w__wave {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(24 * var(--u));
  background-repeat: repeat-x;
  background-position: 0 50%;
}
.ks-w__wave--back {
  top: calc(-2 * var(--u));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='24'%3E%3Cpath d='M0,12Q18.75,6,37.5,12T75,12T112.5,12T150,12L150,24L0,24Z' fill='%232dc4ed' fill-opacity='.20'/%3E%3C/svg%3E");
  background-size: calc(150 * var(--u)) 100%;
  animation: ks-w-wave-back 3.4s linear infinite;
}
.ks-w__wave--front {
  top: calc(-6 * var(--u));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cpath d='M0,12Q15,4,30,12T60,12T90,12T120,12L120,24L0,24Z' fill='%232dc4ed' fill-opacity='.88'/%3E%3C/svg%3E");
  background-size: calc(120 * var(--u)) 100%;
  animation: ks-w-wave-front 2.67s linear infinite;
}
@keyframes ks-w-wave-front {
  from { background-position: 0 50%; }
  to { background-position: calc(-120 * var(--u)) 50%; }
}
@keyframes ks-w-wave-back {
  from { background-position: 0 50%; }
  to { background-position: calc(-150 * var(--u)) 50%; }
}

/* Menisco especular sobre la cresta (lineas 1906-1923). */
.ks-w__meniscus {
  position: absolute;
  left: calc(8 * var(--u));
  right: calc(8 * var(--u));
  bottom: var(--fill, 70%);
  height: calc(1.3 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 calc(3.4 * var(--u)) rgba(255, 255, 255, 0.12);
}

/* Burbujas: 15 en reposo (lineas 61-68, 1929-1958). */
.ks-w__bubble {
  position: absolute;
  bottom: calc(3 * var(--u));
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: inset calc(-1 * var(--u)) calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.5);
  animation: ks-w-bubble 7s linear infinite;
  opacity: 0;
  /* --rs = recorrido en dp (sin unidad); --rise lo vuelve longitud real. */
  --rs: 120;
  --rise: calc(var(--rs) * var(--u));
}
@keyframes ks-w-bubble {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  12% { opacity: 0.75; }
  72% { opacity: 0.65; }
  100% { transform: translateY(calc(-1 * var(--rise))) scale(1); opacity: 0; }
}
.ks-w__bubble:nth-child(1) { left: 18%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); --rs: 95; animation-duration: 6.4s; animation-delay: 0.2s; }
.ks-w__bubble:nth-child(2) { left: 30%; width: calc(5 * var(--u)); height: calc(5 * var(--u)); --rs: 70; animation-duration: 7.6s; animation-delay: 1.4s; }
.ks-w__bubble:nth-child(3) { left: 44%; width: calc(10 * var(--u)); height: calc(10 * var(--u)); --rs: 110; animation-duration: 8.4s; animation-delay: 3.1s; }
.ks-w__bubble:nth-child(4) { left: 58%; width: calc(6 * var(--u)); height: calc(6 * var(--u)); --rs: 85; animation-duration: 6.9s; animation-delay: 4.6s; }
.ks-w__bubble:nth-child(5) { left: 72%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); --rs: 100; animation-duration: 7.2s; animation-delay: 2.2s; }
.ks-w__bubble:nth-child(6) { left: 24%; width: calc(4 * var(--u)); height: calc(4 * var(--u)); --rs: 60; animation-duration: 5.8s; animation-delay: 5.3s; }
.ks-w__bubble:nth-child(7) { left: 38%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); --rs: 105; animation-duration: 8.1s; animation-delay: 0.9s; }
.ks-w__bubble:nth-child(8) { left: 52%; width: calc(5 * var(--u)); height: calc(5 * var(--u)); --rs: 75; animation-duration: 6.2s; animation-delay: 3.8s; }
.ks-w__bubble:nth-child(9) { left: 66%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); --rs: 92; animation-duration: 7.8s; animation-delay: 5.9s; }
.ks-w__bubble:nth-child(10) { left: 80%; width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); --rs: 78; animation-duration: 6.6s; animation-delay: 1s; }
.ks-w__bubble:nth-child(11) { left: 21%; width: calc(6.5 * var(--u)); height: calc(6.5 * var(--u)); --rs: 88; animation-duration: 7.4s; animation-delay: 2.7s; }
.ks-w__bubble:nth-child(12) { left: 35%; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); --rs: 55; animation-duration: 5.4s; animation-delay: 4.2s; }
.ks-w__bubble:nth-child(13) { left: 49%; width: calc(7.5 * var(--u)); height: calc(7.5 * var(--u)); --rs: 96; animation-duration: 8s; animation-delay: 6.1s; }
.ks-w__bubble:nth-child(14) { left: 63%; width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); --rs: 66; animation-duration: 6s; animation-delay: 0.5s; }
.ks-w__bubble:nth-child(15) { left: 76%; width: calc(9.5 * var(--u)); height: calc(9.5 * var(--u)); --rs: 108; animation-duration: 8.6s; animation-delay: 3.5s; }

/* Gloss plate + rim light (lineas 819-863). */
.ks-w__gloss {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.ks-w__rim {
  position: absolute;
  top: 0;
  left: calc(37 * var(--u));
  right: calc(37 * var(--u));
  height: calc(2 * var(--u));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Tubo medidor: 6 marcas calibradas a la meta (lineas 956-1090). */
.ks-w__gauge {
  position: absolute;
  left: 0;
  top: calc(14 * var(--u));
  bottom: 0;
  width: calc(44 * var(--u));
  margin: 0;
  padding: 0 calc(2 * var(--u));
  list-style: none;
  background: rgba(13, 24, 42, 0.55);
  border: calc(1.2 * var(--u)) solid rgba(255, 255, 255, 0.25);
  border-top-right-radius: calc(16 * var(--u));
  border-bottom-right-radius: calc(16 * var(--u));
  border-bottom-left-radius: calc(37 * var(--u));
  box-shadow: calc(2 * var(--u)) 0 calc(10 * var(--u)) rgba(0, 0, 0, 0.3);
}
.ks-w__mark {
  position: absolute;
  left: calc(2 * var(--u));
  right: calc(2 * var(--u));
  height: calc(16 * var(--u));
  bottom: calc((100% - 16 * var(--u)) * var(--p, 0));
  display: flex;
  align-items: center;
}
.ks-w__mark-val {
  flex: 1;
  text-align: right;
  font-size: calc(10 * var(--u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.54);
}
.ks-w__mark-line {
  flex: none;
  width: calc(8 * var(--u));
  height: calc(1.5 * var(--u));
  margin-left: calc(3 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}
.ks-w__mark--on .ks-w__mark-val {
  font-weight: 900;
  color: var(--w-accent-soft);
  text-shadow:
    0 0 calc(10 * var(--u)) var(--w-accent-soft),
    0 0 calc(4 * var(--u)) rgba(56, 189, 248, 0.8);
}
.ks-w__mark--on .ks-w__mark-line {
  width: calc(14 * var(--u));
  height: calc(2.5 * var(--u));
  background: var(--w-accent-soft);
  box-shadow: 0 0 calc(8 * var(--u)) calc(1 * var(--u)) var(--w-accent-soft);
}

/* Pildora habitat "TEMPLO DE HIDRATACION" (water_habitat_pill.dart). */
.ks-w__habitat {
  position: absolute;
  top: calc(40 * var(--u));
  left: calc(52 * var(--u));
  right: calc(52 * var(--u));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.ks-w__habitat-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  background: linear-gradient(160deg, #1b3340, #0e1014);
  border: calc(1.2 * var(--u)) solid rgba(56, 189, 248, 0.38);
  box-shadow:
    0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.38),
    0 0 calc(14 * var(--u)) calc(-4 * var(--u)) rgba(56, 189, 248, 0.16);
  font-size: calc(10 * var(--u));
  font-weight: 900;
  letter-spacing: calc(1.5 * var(--u));
  color: #fff;
}
.ks-w__habitat-pill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(12 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}
.ks-w__radar {
  flex: none;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--w-success);
  box-shadow: 0 0 calc(6 * var(--u)) calc(1 * var(--u)) rgba(16, 185, 129, 0.8);
  animation: ks-w-radar 2.67s ease-in-out infinite;
}
@keyframes ks-w-radar {
  0%, 100% { box-shadow: 0 0 calc(6 * var(--u)) calc(1 * var(--u)) rgba(16, 185, 129, 0.8); }
  50% { box-shadow: 0 0 calc(10 * var(--u)) calc(2.5 * var(--u)) rgba(16, 185, 129, 0.35); }
}
.ks-w__habitat-leaf {
  font-size: calc(12 * var(--u));
  line-height: 1;
}

/* Boton de feedback del habitat (lineas 887-891, 1318-1454). */
.ks-w__feedback {
  position: absolute;
  top: calc(32 * var(--u));
  right: calc(4 * var(--u));
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--w-accent-soft);
  z-index: 3;
}
.ks-w__feedback i {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.75);
  border: calc(1.2 * var(--u)) solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.4),
    0 0 calc(14 * var(--u)) calc(1 * var(--u)) rgba(45, 196, 237, 0);
}
.ks-w__feedback svg {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}

/* Tipografia central: ml 54px w900 con gradiente + pildora "/ N ML". */
.ks-w__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 calc(52 * var(--u));
  pointer-events: none;
}
.ks-w__ml {
  font-size: calc(54 * var(--u));
  font-weight: 900;
  line-height: 1;
  letter-spacing: calc(-0.5 * var(--u));
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #e0f7fa 55%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* drop-shadow pinta DESPUES del texto (a diferencia de text-shadow, que
   * tapaba el degradado por delante del background-clip). */
  filter:
    drop-shadow(0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(13, 24, 42, 0.9))
    drop-shadow(0 calc(6 * var(--u)) calc(9 * var(--u)) rgba(45, 196, 237, 0.5));
}
.ks-w__of {
  margin-top: calc(4 * var(--u));
  padding: calc(3 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(0, 0, 0, 0.25);
  font-size: calc(12 * var(--u));
  font-weight: 800;
  letter-spacing: calc(2 * var(--u));
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Pildora inferior "% DE LA META DIARIA" (lineas 1176-1313). */
.ks-w__pct {
  position: absolute;
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  bottom: calc(16 * var(--u));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.ks-w__pct-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: rgba(20, 35, 60, 0.8);
  border: calc(1.4 * var(--u)) solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.ks-w__pct-dot {
  flex: none;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--w-accent-soft);
  box-shadow: 0 0 calc(7 * var(--u)) calc(1 * var(--u)) rgba(56, 189, 248, 0.55);
  animation: ks-w-radar-cyan 2.67s ease-in-out infinite;
}
@keyframes ks-w-radar-cyan {
  0%, 100% { box-shadow: 0 0 calc(7 * var(--u)) calc(1 * var(--u)) rgba(56, 189, 248, 0.55); }
  50% { box-shadow: 0 0 calc(12 * var(--u)) calc(2.5 * var(--u)) rgba(56, 189, 248, 0.25); }
}
.ks-w--goal .ks-w__pct-dot {
  background: var(--w-success);
  animation: ks-w-radar 2.67s ease-in-out infinite;
  box-shadow: 0 0 calc(7 * var(--u)) calc(1 * var(--u)) rgba(16, 185, 129, 0.8);
}
.ks-w__pct-num {
  font-size: calc(13 * var(--u));
  font-weight: 900;
  letter-spacing: calc(0.4 * var(--u));
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ks-w__pct-label {
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.1 * var(--u));
  color: rgba(255, 255, 255, 0.78);
}

/* ── Selector de volumen (water_volume_selector.dart) ──────────────────── */
.ks-w__selector {
  margin: calc(18 * var(--u)) calc(16 * var(--u)) 0;
  height: calc(72 * var(--u));
  padding: calc(4 * var(--u));
  border-radius: calc(56 * var(--u));
  background: var(--w-well);
  box-shadow:
    calc(4 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.85),
    calc(-4 * var(--u)) calc(-4 * var(--u)) calc(14 * var(--u)) rgba(22, 36, 68, 0.55);
}
.ks-w__well {
  position: relative;
  height: 100%;
  border-radius: calc(24 * var(--u));
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #030712 0%,
    #0a1222 25%,
    #0a1222 75%,
    #111d35 100%
  );
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(56, 189, 248, 0.15);
}
.ks-w__pills {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(12 * var(--u));
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.ks-w__pills::-webkit-scrollbar { display: none; }
.ks-w__sip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  min-height: calc(52 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(20 * var(--u));
  scroll-snap-align: center;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: calc(1.2 * var(--u)) solid rgba(255, 255, 255, 0.12);
  box-shadow:
    calc(2 * var(--u)) calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.45),
    calc(-1.5 * var(--u)) calc(-1.5 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-0.3 * var(--u));
  font-variant-numeric: tabular-nums;
}
.ks-w__sip svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  color: var(--w-accent-soft);
}
.ks-w__sip--on {
  transform: scale(1.06);
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
  font-weight: 900;
  box-shadow:
    0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(56, 189, 248, 0.45),
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(2, 132, 199, 0.35);
}
.ks-w__sip--on svg {
  color: #fff;
}

/* ── Hoja de insights (water_insights_recommendations.dart) ────────────── */
.ks-w__sheet {
  margin-top: calc(20 * var(--u));
  padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
  border-top: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background: linear-gradient(180deg, rgba(17, 31, 48, 0.96), rgba(8, 15, 25, 0.98));
  box-shadow: 0 calc(-8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
}
.ks-w__insights-head {
  position: relative;
  overflow: hidden;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(42 * var(--u));
  border-radius: calc(16 * var(--u));
  background: linear-gradient(120deg, #6fd4f8, #2dc4ed 48%, #2599ba);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(45, 196, 237, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #06303f;
  font-size: calc(13 * var(--u));
  font-weight: 900;
  letter-spacing: calc(1.2 * var(--u));
}
.ks-w__insights-head::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  animation: ks-w-shimmer 5.4s ease-in-out infinite;
}
@keyframes ks-w-shimmer {
  0%, 55% { left: -40%; }
  85%, 100% { left: 120%; }
}
.ks-w__gather {
  margin-top: calc(12 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(18 * var(--u)) calc(16 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--w-panel);
  border: 1px solid rgba(56, 189, 248, 0.16);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(2, 132, 199, 0.08);
}
.ks-w__gather-ico {
  flex: none;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(45, 196, 237, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.32);
  color: var(--w-accent-soft);
}
.ks-w__gather-ico svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.ks-w__gather-title {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 800;
  color: #fff;
}
.ks-w__gather-body {
  margin: calc(3 * var(--u)) 0 0;
  font-size: calc(11.5 * var(--u));
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.68);
}

/* ── Dock del CTA (kairsun_cta_panel.dart, kairsun_cta_button.dart) ────── */
.ks-w__dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(180deg, rgba(6, 16, 23, 0), rgba(6, 16, 23, 0.88) 42%, #061017 100%);
  z-index: 4;
}
.ks-w__dock-row {
  display: flex;
  align-items: stretch;
  gap: calc(10 * var(--u));
}
.ks-w__minus {
  flex: none;
  width: calc(48 * var(--u));
  min-height: calc(48 * var(--u));
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(22 * var(--u));
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: calc(1.5 * var(--u)) solid rgba(56, 189, 248, 0.65);
  color: var(--w-accent-soft);
  box-shadow:
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.45),
    0 0 calc(14 * var(--u)) calc(-2 * var(--u)) rgba(56, 189, 248, 0.3);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1;
}
.ks-w__add {
  flex: 1;
  min-width: 0;
  height: calc(72 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(135deg, #6fd4f8 0%, #2dc4ed 45%, #1aa9d6 100%);
  border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(45, 196, 237, 0.35),
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(56, 189, 248, 0.45);
  color: #06303f;
  text-align: left;
}
.ks-w__add-ico {
  flex: none;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(15 * var(--u));
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.ks-w__add-ico svg {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}
.ks-w__add-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.ks-w__add-label {
  font-size: calc(16 * var(--u));
  font-weight: 900;
  letter-spacing: calc(0.3 * var(--u));
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ks-w__add-sub {
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  color: rgba(6, 48, 63, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Estados: meta lograda y 0 ml real ─────────────────────────────────── */
.ks-w--goal .ks-w__tank {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow:
    0 calc(10 * var(--u)) calc(34 * var(--u)) calc(1 * var(--u)) rgba(16, 185, 129, 0.38),
    0 calc(15 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.55),
    calc(-2 * var(--u)) calc(-2 * var(--u)) calc(10 * var(--u)) rgba(255, 255, 255, 0.05);
}
.ks-w--goal .ks-w__liquid-body {
  background: linear-gradient(
    180deg,
    #5cc9f9 0%,
    rgba(14, 96, 138, 0.95) 42%,
    rgba(0, 51, 102, 0.95) 100%
  );
}
.ks-w--goal .ks-w__wave--front {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cpath d='M0,12Q15,4,30,12T60,12T90,12T120,12L120,24L0,24Z' fill='%235cc9f9' fill-opacity='1'/%3E%3C/svg%3E");
}
.ks-w--goal .ks-w__wave--back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='24'%3E%3Cpath d='M0,12Q18.75,6,37.5,12T75,12T112.5,12T150,12L150,24L0,24Z' fill='%235cc9f9' fill-opacity='.20'/%3E%3C/svg%3E");
}
.ks-w--goal .ks-w__meniscus {
  background: rgba(16, 185, 129, 0.75);
  box-shadow:
    0 0 calc(5 * var(--u)) rgba(16, 185, 129, 0.35),
    0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.6);
}
.ks-w--goal .ks-w__pct-pill {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow:
    0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.35),
    0 0 calc(14 * var(--u)) rgba(16, 185, 129, 0.3);
}
.ks-w--goal .ks-w__bubble {
  --rise: calc(var(--rs) * var(--u) * 1.4);
}
.ks-w--empty .ks-w__liquid,
.ks-w--empty .ks-w__meniscus {
  display: none;
}
.ks-w--empty .ks-w__minus {
  opacity: 0.35;
}

/* ── Cara Tracking (water_performance_screen.dart) ─────────────────────── */
/* Dos tomas del mismo scroll: arriba (chart+tiles) y desplazada hasta el
 * calendario liquido + historial. No hay JS: el desplazamiento es un margen
 * negativo estatico sobre el primer bloque del scroll. */
.ks-w-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 28px;
  align-items: start;
}
.ks-w--scrolled .ks-w__scroll > :first-child {
  margin-top: calc(-552 * var(--u));
}
/* El header fijo tapa el contenido que sube por detras: sin esta placa, el
 * texto del scroll se lee a traves del appbar y de los rangos. */
.ks-w--scrolled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(178 * var(--u));
  background: linear-gradient(180deg, #071119 0%, #071119 76%, rgba(7, 17, 25, 0) 100%);
  pointer-events: none;
  z-index: 5;
}
.ks-w--track .ks-w__appbar {
  justify-content: flex-start;
  gap: calc(10 * var(--u));
}
.ks-w__track-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
}
.ks-w__track-title {
  font-size: calc(15 * var(--u));
  font-weight: 900;
  letter-spacing: calc(0.6 * var(--u));
  color: #fff;
}
.ks-w__track-sub {
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.ks-w--track .ks-w__scroll {
  padding: calc(176 * var(--u)) 0 calc(28 * var(--u));
}
.ks-w__trackbar {
  position: absolute;
  top: calc(112 * var(--u));
  left: 0;
  right: 0;
  z-index: 5;
  padding: calc(2 * var(--u)) 0 calc(8 * var(--u));
  background: linear-gradient(180deg, rgba(6, 16, 23, 0.72), rgba(6, 16, 23, 0));
}
.ks-w__ranges {
  display: flex;
  gap: calc(3 * var(--u));
  margin: 0 calc(16 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(45, 196, 237, 0.28);
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.3);
}
.ks-w__range {
  flex: 1;
  min-height: calc(38 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  border-radius: 999px;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.6 * var(--u));
  color: rgba(255, 255, 255, 0.62);
}
.ks-w__range--on {
  color: #062a38;
  background: linear-gradient(135deg, #38bdf8, #2dc4ed);
  box-shadow:
    0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(45, 196, 237, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ks-w__range-lock {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  color: rgba(255, 255, 255, 0.5);
}
.ks-w__range--on .ks-w__range-lock { color: #06303f; }

/* Chart: barras + meta (water_tracking_chart.dart, alto 236, eje 46). */
.ks-w__chart {
  display: flex;
  height: calc(236 * var(--u));
  margin: calc(12 * var(--u)) calc(16 * var(--u)) 0;
}
.ks-w__chart-axis {
  position: relative;
  flex: none;
  width: calc(46 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.62);
}
.ks-w__chart-unit {
  position: absolute;
  top: calc(1 * var(--u));
  left: calc(4 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 900;
  color: var(--w-accent);
}
.ks-w__chart-tick {
  position: absolute;
  right: calc(6 * var(--u));
  translate: 0 -50%;
}
.ks-w__chart-plot {
  position: relative;
  flex: 1;
  min-width: 0;
}
.ks-w__grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
/* Carriles Y de la grilla y del eje: plot de 236, top 20, base 210. */
.ks-y0 { top: calc(20 * var(--u)); }
.ks-y1 { top: calc(51.7 * var(--u)); }
.ks-y2 { top: calc(83.3 * var(--u)); }
.ks-y3 { top: calc(115 * var(--u)); }
.ks-y4 { top: calc(146.7 * var(--u)); }
.ks-y5 { top: calc(178.3 * var(--u)); }
.ks-y6 { top: calc(210 * var(--u)); }
.ks-w__goal-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(51.7 * var(--u));
  height: calc(1.3 * var(--u));
  background-image: repeating-linear-gradient(90deg, var(--w-warning) 0 calc(5 * var(--u)), transparent calc(5 * var(--u)) calc(9 * var(--u)));
}
.ks-w__goal-tick {
  position: absolute;
  right: 0;
  top: calc(47.7 * var(--u));
  width: calc(2.4 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 999px;
  background: var(--w-warning);
}
.ks-w__goal-pill {
  position: absolute;
  top: calc(30 * var(--u));
  right: calc(6 * var(--u));
  padding: calc(2 * var(--u)) calc(5 * var(--u));
  border-radius: calc(7 * var(--u));
  background: rgba(20, 22, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: calc(9 * var(--u));
  font-weight: 900;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}
.ks-w__bars {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
}
.ks-w__bar {
  position: relative;
  flex: 1;
  min-width: 0;
}
.ks-w__bar-value {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(20 * var(--u));
  translate: 0 -100%;
  text-align: center;
  font-size: calc(9 * var(--u));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}
.ks-w__bar-body {
  position: absolute;
  left: 50%;
  bottom: calc(26 * var(--u));
  translate: -50% 0;
  width: calc(16 * var(--u));
  height: calc(190 * var(--u) * var(--p, 0));
  max-height: calc(190 * var(--u));
  border-radius: calc(6 * var(--u)) calc(6 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
  background: linear-gradient(180deg, #38bdf8, #2dc4ed 55%, #0284c7);
  box-shadow: 0 0 calc(8 * var(--u)) rgba(45, 196, 237, 0.25);
}
.ks-w__bar--goal .ks-w__bar-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(3 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}
.ks-w__bar--today .ks-w__bar-body {
  box-shadow:
    0 0 calc(10 * var(--u)) rgba(56, 189, 248, 0.55),
    0 0 calc(3 * var(--u)) rgba(255, 255, 255, 0.9);
}
.ks-w__bar--today::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(20 * var(--u));
  translate: -50% 0;
  width: calc(26 * var(--u));
  height: calc(204 * var(--u));
  border-radius: calc(10 * var(--u));
  border: calc(1.2 * var(--u)) solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 calc(10 * var(--u)) rgba(56, 189, 248, 0.18);
  pointer-events: none;
}
.ks-w__bar-date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(8 * var(--u));
  text-align: center;
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
}
.ks-w__legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(12 * var(--u));
  margin: calc(10 * var(--u)) calc(16 * var(--u)) 0;
}
.ks-w__legend-item {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
}
.ks-w__legend-dot {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--w-accent);
}
.ks-w__legend-dash {
  width: calc(14 * var(--u));
  height: calc(2 * var(--u));
  background-image: repeating-linear-gradient(90deg, var(--w-warning) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(5 * var(--u)));
}
.ks-w__legend-cap {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: calc(2.5 * var(--u));
  background: rgba(255, 255, 255, 0.92);
}
.ks-w__legend-hollow {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: calc(2.5 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* 4 tiles de performance (water_tracking_stats.dart). */
.ks-w__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(10 * var(--u));
  margin: calc(12 * var(--u)) calc(16 * var(--u)) 0;
}
.ks-w__stat {
  min-height: calc(96 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--w-panel);
  border: 1px solid rgba(56, 189, 248, 0.16);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(2, 132, 199, 0.08);
}
.ks-w__stat-top {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.ks-w__stat-ico {
  flex: none;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(45, 196, 237, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.32);
  color: var(--w-accent);
}
.ks-w__stat-ico svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.ks-w__stat-label {
  font-size: calc(9.5 * var(--u));
  font-weight: 900;
  letter-spacing: calc(0.8 * var(--u));
  color: rgba(255, 255, 255, 0.62);
}
.ks-w__stat-value {
  margin-top: calc(10 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ks-w__stat-hint {
  margin-top: calc(3 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
}

/* Seccion explorar el ano: calendario liquido mensual (water_year_explore.dart). */
.ks-w__section-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: calc(22 * var(--u)) calc(16 * var(--u)) 0;
}
.ks-w__section-title {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 900;
  letter-spacing: calc(1 * var(--u));
  color: #fff;
}
.ks-w__section-note {
  margin-left: auto;
  font-size: calc(9 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.6 * var(--u));
  color: var(--w-accent-soft);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 999px;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
}
.ks-w__month {
  margin: calc(10 * var(--u)) calc(16 * var(--u)) 0;
  padding: calc(9 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u));
  border-radius: calc(18 * var(--u));
  background: linear-gradient(135deg, #102639, #0a1a29);
  border: 1px solid rgba(45, 196, 237, 0.16);
  box-shadow: 0 calc(7 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.26);
}
.ks-w__month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ks-w__month-name {
  font-size: calc(13 * var(--u));
  font-weight: 900;
  color: #fff;
}
.ks-w__month-year {
  font-size: calc(9 * var(--u));
  font-weight: 800;
  color: rgba(255, 255, 255, 0.62);
}
.ks-w__month-metric {
  margin-top: calc(3 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}
.ks-w__month-check {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  color: var(--w-accent-soft);
}
.ks-w__meter {
  position: relative;
  height: calc(4 * var(--u));
  margin-top: calc(7 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ks-w__meter > i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, #2dc4ed, #38bdf8);
}
.ks-w__cal {
  margin-top: calc(8 * var(--u));
}
.ks-w__cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(3 * var(--u));
  margin-bottom: calc(3 * var(--u));
}
.ks-w__cal-dow {
  text-align: center;
  font-size: calc(7 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.4 * var(--u));
  color: rgba(255, 255, 255, 0.42);
}
.ks-w__cal-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(4.6 * var(--u));
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ks-w__cal-cell--future {
  background: rgba(255, 255, 255, 0.025);
}
.ks-w__cal-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--p, 0) * 100%);
  background: rgba(45, 196, 237, 0.58);
}
.ks-w__cal-cell--near .ks-w__cal-fill {
  background: rgba(234, 179, 8, 0.85);
}
.ks-w__cal-cell--goal .ks-w__cal-fill {
  background: rgba(45, 196, 237, 0.92);
  box-shadow: inset 0 calc(1.6 * var(--u)) 0 rgba(255, 255, 255, 0.92);
}
.ks-w__cal-num {
  position: relative;
  z-index: 1;
  font-size: calc(8 * var(--u));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(4, 12, 20, 0.8);
}
.ks-w__cal-cell--today {
  box-shadow: inset 0 0 0 calc(1.3 * var(--u)) var(--w-accent-soft);
}
.ks-w__cal-cell--today .ks-w__cal-num {
  font-weight: 900;
  color: var(--w-accent-soft);
}

/* Historial por mes (water_performance_screen.dart:1120-1184, 2290-2470). */
.ks-w__logday {
  display: flex;
  gap: calc(6 * var(--u));
  margin: calc(8 * var(--u)) calc(16 * var(--u)) 0;
}
.ks-w__log-rail {
  flex: none;
  width: calc(28 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ks-w__log-node {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: calc(1.2 * var(--u)) solid;
  font-size: calc(11 * var(--u));
  font-weight: 900;
}
.ks-w__log-node svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}
.ks-w__log-line {
  flex: 1;
  width: calc(2 * var(--u));
  margin: calc(2 * var(--u)) 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45, 196, 237, 0.45), rgba(45, 196, 237, 0.06));
}
.ks-w__log-card {
  flex: 1;
  min-width: 0;
  padding: calc(11 * var(--u)) calc(14 * var(--u));
  border-radius: calc(18 * var(--u));
  background: #14161c;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ks-w__log-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.ks-w__log-date {
  font-size: calc(12.5 * var(--u));
  font-weight: 800;
  color: #fff;
}
.ks-w__log-ml {
  font-size: calc(12 * var(--u));
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ks-w__log-meta {
  margin-top: calc(8 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}
.ks-w__log-bar {
  flex: 1;
  height: calc(5 * var(--u));
  border-radius: 999px;
  overflow: hidden;
  background: rgba(45, 196, 237, 0.14);
}
.ks-w__log-bar > i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(45, 196, 237, 0.55), #2dc4ed);
}
.ks-w__log-pct,
.ks-w__log-status {
  font-size: calc(10.5 * var(--u));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.ks-w__log-status {
  font-size: calc(9.5 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
}
.ks-w--ok { color: #22c55e; }
.ks-w--near { color: var(--w-warning); }
.ks-w--prog { color: var(--w-accent); }
.ks-w__log--ok .ks-w__log-node { border-color: rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.ks-w__log--near .ks-w__log-node { border-color: rgba(234, 179, 8, 0.55); background: rgba(234, 179, 8, 0.2); color: var(--w-warning); }
.ks-w__log--prog .ks-w__log-node { border-color: rgba(45, 196, 237, 0.55); background: rgba(45, 196, 237, 0.2); color: var(--w-accent); }
.ks-w__log--ok .ks-w__log-bar { background: rgba(34, 197, 94, 0.14); }
.ks-w__log--ok .ks-w__log-bar > i { background: linear-gradient(90deg, rgba(34, 197, 94, 0.55), #22c55e); }
.ks-w__log--near .ks-w__log-bar { background: rgba(234, 179, 8, 0.14); }
.ks-w__log--near .ks-w__log-bar > i { background: linear-gradient(90deg, rgba(234, 179, 8, 0.55), var(--w-warning)); }
.ks-w__month-sep {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin: calc(14 * var(--u)) calc(16 * var(--u)) 0;
  color: #fff;
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.4 * var(--u));
}
.ks-w__month-sep-metric {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  color: #22c55e;
  font-size: calc(10 * var(--u));
  font-weight: 900;
}
.ks-w__month-sep-metric svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

/* ── Escala de relleno compartida (barras, celdas, historial) ──────────────
 * --p es una razon 0–1: los consumidores la vuelven % con * 100% o dp con
 * * var(--u). Un solo valor sirve para alto (celdas) y ancho (barras). */
.ks-p5 { --p: 0.05; }
.ks-p10 { --p: 0.1; }
.ks-p15 { --p: 0.15; }
.ks-p20 { --p: 0.2; }
.ks-p25 { --p: 0.25; }
.ks-p30 { --p: 0.3; }
.ks-p35 { --p: 0.35; }
.ks-p40 { --p: 0.4; }
.ks-p45 { --p: 0.45; }
.ks-p50 { --p: 0.5; }
.ks-p55 { --p: 0.55; }
.ks-p60 { --p: 0.6; }
.ks-p65 { --p: 0.65; }
.ks-p70 { --p: 0.7; }
.ks-p75 { --p: 0.75; }
.ks-p80 { --p: 0.8; }
.ks-p85 { --p: 0.85; }
.ks-p90 { --p: 0.9; }
.ks-p95 { --p: 0.95; }
.ks-p100 { --p: 1; }

/* ── Toggle de la pagina + galeria de estados ──────────────────────────── */
/* La base define --u en .phone; el toggle vive fuera del telefono, asi que
 * hereda la misma escala desde su propio scope (393dp base). El ancho del
 * telefono se ata al ancho util real (100vw - 40 del padding de .screen-page)
 * para que no desborde en 320-500px. */
.ks-w-view,
.ks-w-view .phone,
.ks-w-states .phone {
  --u: calc(min(380px, calc(100vw - 40px)) / 393);
}
.ks-w-view .phone,
.ks-w-states .phone {
  width: min(380px, calc(100vw - 40px));
}
.ks-w-view .ks-view__tabs { margin-bottom: calc(18 * var(--u)); }

/* ── Galeria de estados + leyenda de la pagina ─────────────────────────── */
/* Los identificadores de codigo del doc no pueden desbordar en 320-430px. */
.screen-notes li { overflow-wrap: break-word; }
.screen-notes code { overflow-wrap: anywhere; }
.ks-w-states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
  align-items: start;
}
.ks-w-states__title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--ks-display);
  font-size: 1.15rem;
  color: var(--ks-text);
}
.ks-w-states__title span {
  font-family: var(--ks-font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ks-text-2);
}

/* ── Movimiento reducido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ks-w__bg,
  .ks-w__wave,
  .ks-w__bubble,
  .ks-w__radar,
  .ks-w__insights-head::after {
    animation: none;
  }
  .ks-w__bubble { opacity: 0.5; }
}