/* ==========================================================================
   MiCiudad.uy · Salto Grande — VISTA "RÍO EN VIVO"
   Pantalla completa, sin scroll. El agua sube desde abajo según el nivel
   real (escala 0–20 m). Regla a la derecha con marcador flotante.
   ========================================================================== */
:root{
  /* Forzar tema claro SIEMPRE: bloquea el "modo oscuro automático" de
     Chrome Android, Samsung Internet y otros que invierten los colores */
  color-scheme:only light;
  forced-color-adjust:none;

  --azul:#003F8A;
  --azul2:#0057BE;
  --azulclaro:#EBF3FF;
  --celeste:#00AEEF;
  --rojo:#D62839;
  --texto:#0F172A;
  --regla-w:56px;              /* ancho reservado a la regla (nada la tapa) */
  --sombra:0 6px 18px rgba(0,63,138,.10);
  --vidrio:rgba(240,247,255,.6);
  --vidrio-borde:rgba(255,255,255,.5);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;padding:0;
  height:100dvh;
  overflow:hidden;                 /* SIN SCROLL */
  font-family:'Quicksand',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:500;color:var(--texto);
  background:#04275c;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ============ APP: columna centrada, alto completo ============ */
.app{
  position:relative;
  height:100dvh;width:100%;
  max-width:560px;margin:0 auto;
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,10,40,.5);
}

/* ============ ESCENA (cielo + agua). Ocupa todo bajo el header ============ */
.escena{
  position:absolute;inset:0;
  z-index:0;
  /* cielo */
  background:
    radial-gradient(120% 55% at 50% -10%, #ffffff 0%, transparent 60%),
    linear-gradient(180deg,#8FC7F2 0%,#B8DDF8 34%,#DDF0FD 55%,#EAF6FF 68%);
}
/* nubes suaves */
.escena::before{
  content:"";position:absolute;left:0;right:0;top:6%;height:34%;
  background:
    radial-gradient(180px 52px at 18% 30%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(230px 60px at 62% 12%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(150px 44px at 86% 42%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(200px 50px at 38% 58%, rgba(255,255,255,.7), transparent 70%);
  filter:blur(2px);
  animation:nubes 60s linear infinite alternate;
  pointer-events:none;
}
@keyframes nubes{0%{transform:translateX(-2%)}100%{transform:translateX(3%)}}

/* silueta de la represa en el horizonte (donde toca el agua) */
.horizonte{
  position:absolute;left:0;right:var(--regla-w);
  bottom:var(--nivel-pct,34%);
  height:34px;z-index:1;pointer-events:none;
  transition:bottom 2.4s cubic-bezier(.45,.05,.25,1);
  background-repeat:no-repeat;background-position:center bottom;background-size:contain;
  opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34'><g fill='%235d7fa6'><rect x='30' y='18' width='340' height='9'/><rect x='60' y='8' width='10' height='19'/><rect x='120' y='8' width='10' height='19'/><rect x='180' y='4' width='14' height='23'/><rect x='250' y='8' width='10' height='19'/><rect x='310' y='8' width='10' height='19'/><rect x='0' y='24' width='400' height='4' opacity='.6'/></g></svg>");
}

/* ============ EL AGUA (altura = nivel real, 0–20 m -> 0–100%) ============ */
.agua{
  position:absolute;left:0;right:0;bottom:0;
  z-index:1;
  height:var(--nivel-pct,34%);
  min-height:5%;max-height:100%;
  transition:height 2.4s cubic-bezier(.45,.05,.25,1);
  background:
    linear-gradient(180deg,
      #3D9BE0 0%,
      #1F78C8 18%,
      #0F5DAF 45%,
      #084A93 70%,
      #063B78 100%);
  overflow:hidden;
  pointer-events:none;
}
/* reflejos del sol: banda de brillo vertical */
.agua::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 30% at 50% 0%, rgba(255,255,255,.30), transparent 70%),
    linear-gradient(90deg, transparent 30%, rgba(255,255,255,.08) 46%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.08) 54%, transparent 70%);
}
/* textura de oleaje real: líneas horizontales brillantes que derivan */
.agua .textura{
  position:absolute;inset:-40px 0 0 0;
  background:
    repeating-linear-gradient(178deg,
      transparent 0 9px,
      rgba(255,255,255,.10) 9px 10.5px,
      transparent 10.5px 24px,
      rgba(160,215,255,.10) 24px 25px,
      transparent 25px 42px);
  animation:deriva 11s linear infinite;
  mix-blend-mode:screen;
}
.agua .textura.b{
  background:
    repeating-linear-gradient(182deg,
      transparent 0 14px,
      rgba(255,255,255,.07) 14px 15.5px,
      transparent 15.5px 34px);
  animation:deriva 17s linear infinite reverse;
}
@keyframes deriva{0%{transform:translateY(0)}100%{transform:translateY(42px)}}
/* destellos que se mueven a lo ancho */
.agua .destellos{
  position:absolute;inset:0;
  background:
    radial-gradient(90px 8px at 20% 22%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(120px 9px at 65% 40%, rgba(255,255,255,.25), transparent 70%),
    radial-gradient(70px 7px at 45% 62%, rgba(255,255,255,.28), transparent 70%),
    radial-gradient(110px 8px at 82% 78%, rgba(255,255,255,.2), transparent 70%);
  animation:destello 8s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes destello{
  0%{transform:translateX(-14px);opacity:.75}
  100%{transform:translateX(14px);opacity:1}
}

/* superficie: dos olas que se desplazan Y suben-bajan levemente (vaivén real) */
.ola{
  position:absolute;left:0;top:-15px;width:200%;height:24px;
  background-repeat:repeat-x;background-size:50% 100%;
}
.ola-1{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'><path d='M0 13 C 18 5 34 21 60 13 C 86 5 102 21 120 13 L120 24 L0 24 Z' fill='%233D9BE0'/></svg>");
  animation:olaMove 7s linear infinite, olaBob 4.5s ease-in-out infinite;
}
.ola-2{
  top:-9px;height:20px;opacity:.7;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'><path d='M0 13 C 22 21 40 5 60 13 C 80 21 98 5 120 13 L120 24 L0 24 Z' fill='%235FB3EC'/></svg>");
  animation:olaMove 11s linear infinite reverse, olaBob 6s ease-in-out infinite .8s;
}
@keyframes olaMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes olaBob{0%,100%{margin-top:0}50%{margin-top:3px}}

/* cáusticas: manchas de luz que se deforman y derivan, como agua real */
.agua .caustica{
  position:absolute;inset:0;
  background:
    radial-gradient(140px 46px at 15% 20%, rgba(180,230,255,.22), transparent 70%),
    radial-gradient(180px 60px at 55% 45%, rgba(160,220,255,.18), transparent 70%),
    radial-gradient(120px 40px at 85% 30%, rgba(190,235,255,.2), transparent 70%),
    radial-gradient(160px 55px at 35% 75%, rgba(150,215,255,.16), transparent 70%);
  animation:caustica 13s ease-in-out infinite alternate;
  mix-blend-mode:screen;
  filter:blur(1px);
}
.agua .caustica.b{
  background:
    radial-gradient(110px 36px at 70% 15%, rgba(200,240,255,.18), transparent 70%),
    radial-gradient(150px 50px at 25% 50%, rgba(170,225,255,.15), transparent 70%),
    radial-gradient(130px 44px at 60% 80%, rgba(185,232,255,.17), transparent 70%);
  animation:caustica 17s ease-in-out infinite alternate-reverse;
}
@keyframes caustica{
  0%  {transform:translate(-16px,0) scale(1)}
  50% {transform:translate(8px,6px) scale(1.06)}
  100%{transform:translate(18px,-4px) scale(.97)}
}

/* ============ FAUNA DEL RÍO (dorados que saltan, teros que cruzan) ===== */
/* pez dorado: salta en arco desde la superficie del agua */
.dorado{
  position:absolute;z-index:2;
  width:46px;height:24px;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FFDF6B'/><stop offset='.55' stop-color='%23F5B32B'/><stop offset='1' stop-color='%23D98A0F'/></linearGradient></defs><path d='M4 16 C 13 5 40 3 52 14 L 62 6 L 58 16 L 62 26 L 52 18 C 40 29 13 27 4 16 Z' fill='url(%23g)'/><path d='M26 7 L 34 1 L 36 9 Z' fill='%23E8960B'/><path d='M28 25 L 34 31 L 37 23 Z' fill='%23E8960B'/><circle cx='13' cy='13' r='2.2' fill='%23202020'/><path d='M20 11 C 26 15 26 19 20 22' stroke='%23C97E08' stroke-width='1.6' fill='none' opacity='.7'/></svg>");
  pointer-events:none;
  animation:saltoIzq 1.7s cubic-bezier(.35,.02,.6,1) forwards;
  filter:drop-shadow(0 2px 3px rgba(0,30,70,.4));
}
/* El pez del SVG mira a la IZQUIERDA. Salto por defecto: hacia la izquierda.
   Nariz arriba al salir (+rot), nariz abajo al caer (-rot). */
@keyframes saltoIzq{
  0%  {transform:translate(0,10px)      rotate(55deg);opacity:0}
  12% {opacity:1}
  50% {transform:translate(-46px,-72px) rotate(-8deg)}
  88% {opacity:1}
  100%{transform:translate(-92px,14px)  rotate(-70deg);opacity:0}
}
/* Versión espejada: el pez mira a la DERECHA y salta hacia la derecha.
   El scaleX(-1) invierte también el eje X y el sentido de giro, por eso
   los mismos valores producen el movimiento simétrico correcto. */
.dorado.espejado{animation-name:saltoDer}
@keyframes saltoDer{
  0%  {transform:scaleX(-1) translate(0,10px)      rotate(55deg);opacity:0}
  12% {opacity:1}
  50% {transform:scaleX(-1) translate(-46px,-72px) rotate(-8deg)}
  88% {opacity:1}
  100%{transform:scaleX(-1) translate(-92px,14px)  rotate(-70deg);opacity:0}
}
/* salpicadura al caer */
.splash{
  position:absolute;z-index:2;
  width:36px;height:14px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.85);
  border-top-color:transparent;
  pointer-events:none;
  animation:splashAnim .8s ease-out forwards;
}
@keyframes splashAnim{
  0%  {transform:scale(.2);opacity:.95}
  100%{transform:scale(1.7);opacity:0}
}

/* teros / aves: siluetas que cruzan el cielo aleteando */
.bandada{
  position:absolute;left:-18%;z-index:2;
  display:flex;gap:16px;align-items:flex-end;
  pointer-events:none;
  animation:vuelo linear forwards;
}
@keyframes vuelo{
  0%  {left:-18%;}
  100%{left:112%;}
}
.tero{
  width:30px;height:16px;
  background-repeat:no-repeat;background-size:contain;
  animation:aleteo .5s steps(1) infinite, planeo 3.5s ease-in-out infinite;
}
.tero:nth-child(2){width:24px;height:13px;margin-bottom:9px;animation-delay:.15s,.6s}
.tero:nth-child(3){width:26px;height:14px;margin-bottom:4px;animation-delay:.3s,1.2s}
@keyframes aleteo{
  0%,100%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'><path d='M2 6 C 8 1 13 2 16 8 C 19 2 24 1 30 6 L 28 8 C 23 5 19 6 16 11 C 13 6 9 5 4 8 Z' fill='%233a4656'/></svg>")}
  50%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'><path d='M3 12 C 8 15 13 13 16 8 C 19 13 24 15 29 12 L 28 10 C 23 12 19 11 16 6 C 13 11 9 12 4 10 Z' fill='%233a4656'/></svg>")}
}
@keyframes planeo{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ============ REGLA 0–20 m (derecha, nada la tapa) ============ */
.regla{
  position:absolute;top:0;right:0;bottom:0;
  width:var(--regla-w);
  z-index:6;                        /* SIEMPRE por encima de tarjetas */
  background:linear-gradient(270deg, rgba(2,26,64,.55), rgba(2,26,64,.28));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border-left:1px solid rgba(255,255,255,.25);
  pointer-events:none;
}
/* marcas menores cada 0,5 m */
.regla::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:10px;
  background:repeating-linear-gradient(to top,
    rgba(255,255,255,.45) 0 1.5px,
    transparent 1.5px 2.5%);
}
.regla-tick{
  position:absolute;left:0;
  width:100%;height:0;
  font-size:.68rem;font-weight:700;color:#fff;
  text-shadow:0 1px 4px rgba(0,10,40,.7);
}
.regla-tick::before{
  content:"";position:absolute;left:0;top:0;width:18px;height:2px;
  background:rgba(255,255,255,.9);
}
.regla-tick b{
  position:absolute;left:24px;top:0;transform:translateY(-50%);
  font-weight:700;
}
/* marcador AMARILLO: SOLO una línea dentro de la regla, a la altura del agua.
   Vive fuera de la escena, con z-index alto: nada la tapa y ella no tapa nada. */
.marcador{
  position:absolute;right:0;
  width:var(--regla-w);height:4px;
  bottom:var(--nivel-pct,34%);
  transform:translateY(50%);
  z-index:20;
  background:linear-gradient(90deg,#FFE14D,#FFC400);
  border-radius:2px;
  box-shadow:0 0 10px rgba(255,214,10,.9), 0 0 22px rgba(255,214,10,.5);
  transition:bottom 2.4s cubic-bezier(.45,.05,.25,1);
  pointer-events:none;
}

/* ============ CAPA DE INTERFAZ (todo lo demás flota sobre la escena) ==== */
.ui{
  position:absolute;inset:0;
  z-index:4;
  display:flex;flex-direction:column;
  padding:0 12px 10px 12px;
  padding-right:calc(var(--regla-w) + 10px);   /* la regla no se tapa */
  pointer-events:none;                         /* solo los hijos reciben toques */
}
.ui > *{pointer-events:auto}

/* ---- header vidrio ---- */
.brandbar{
  flex:none;
  display:flex;align-items:center;gap:.55rem;
  margin:0 -12px 0 -12px;
  margin-right:calc(-1 * (var(--regla-w) + 10px));
  padding:calc(env(safe-area-inset-top,0px) + .6rem) 64px .6rem 1rem;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,63,138,.12);
  z-index:8;position:relative;
}
.brand-logo{display:flex;align-items:center;gap:.5rem;min-width:0}
.brand-img{height:30px;width:auto;max-width:150px;object-fit:contain}
.brand-mark{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--azul),var(--celeste));
  position:relative;
}
.brand-mark::after{
  content:"";position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);
  height:3px;background:#fff;border-radius:2px;opacity:.85;
}
.brand-name{font-weight:700;font-size:1.02rem;color:var(--azul);white-space:nowrap}
.brand-tld{color:var(--rojo);font-weight:700}
.brand-sub{
  font-size:.78rem;color:#41537a;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:.25rem;
}
.brand-sub::before{content:"📍";font-size:.8rem}

/* ---- tarjeta NIVEL (compacta, translúcida: se ve la fauna detrás) ---- */
.card-nivel{
  flex:none;
  margin-top:clamp(6px,1.5dvh,14px);
  align-self:center;
  width:min(100%,310px);
  text-align:center;
  background:rgba(240,247,255,.52);
  border:1px solid var(--vidrio-borde);
  border-radius:20px;
  padding:.55rem .9rem .65rem;
  box-shadow:0 8px 24px rgba(0,30,80,.14);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.nivel-lbl{font-size:1rem;font-weight:700;color:var(--azul);line-height:1.2;margin:0}
.nivel-val{
  font-size:clamp(2.6rem,9dvh,3.6rem);
  font-weight:700;color:var(--azul);line-height:1.05;letter-spacing:-1px;
}
.nivel-val small{font-size:.45em;font-weight:700;margin-left:.15em}
.nivel-sub{
  font-size:.78rem;font-weight:600;color:#41537a;margin-top:.2rem;
  display:flex;align-items:center;justify-content:center;gap:.3rem;
}
.nivel-sub:not(:empty)::before{content:"🕐";font-size:.8rem}

/* ---- espacio flexible: acá se ve el agua/paisaje ---- */
.respiro{flex:1 1 auto;min-height:14px}

/* ---- banners publicitarios (marquee vidrio, sin degradados blancos) ---- */
.adstrip{
  flex:none;
  margin:0 0 8px 0;
  overflow:hidden;
  border-radius:16px;
  background:rgba(240,247,255,.5);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:6px 0;
  box-shadow:var(--sombra);
}
.adstrip:empty{display:none}
.adstrip-b{margin-top:10px;margin-bottom:8px}
.adstrip-b .ads-track{animation-direction:reverse;animation-duration:42s}
.ads-track{
  display:flex;gap:10px;align-items:center;
  width:max-content;
  animation:scrollLeft 35s linear infinite;
}
.ads-track:hover{animation-play-state:paused}
.ad{
  display:block;flex:0 0 auto;
  width:232px;height:68px;
  border-radius:12px;overflow:hidden;
  box-shadow:0 3px 10px rgba(0,40,110,.18);
  background:#fff;
}
.ad img{width:100%;height:100%;object-fit:cover}
@keyframes scrollLeft{
  0%  {transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ---- datos del complejo (2 columnas, vidrio) ---- */
.detalle-grid{
  flex:none;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.detalle-card{
  display:flex;align-items:center;gap:.55rem;
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  border-radius:16px;
  padding:.5rem .6rem;
  box-shadow:var(--sombra);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  min-width:0;
}
.d-ico{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,var(--azul),var(--azul2) 60%,var(--celeste));
  box-shadow:0 3px 8px rgba(0,40,110,.3);
}
.d-txt{min-width:0}
.d-lbl{
  font-size:.68rem;color:#41537a;font-weight:700;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.d-val{
  font-size:clamp(.95rem,2.4dvh,1.12rem);
  font-weight:700;color:var(--azul);line-height:1.15;white-space:nowrap;
}

/* ---- fuente ---- */
.fuente{
  flex:none;text-align:center;
  font-size:.72rem;font-weight:700;color:#eaf3ff;
  text-shadow:0 1px 6px rgba(0,20,60,.6);
  margin:.45rem 0;
}
.fuente a{color:#9FDCFF;font-weight:700}

/* ---- acciones (3 botones vidrio) ---- */
.acciones{
  flex:none;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--sombra);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  margin-bottom:calc(env(safe-area-inset-bottom,0px) + 2px);
}
.cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;text-align:center;
  padding:.65rem .3rem .7rem;
  border-right:1px solid rgba(0,63,138,.12);
  cursor:pointer;transition:background .15s;
  min-width:0;
}
.cell:last-child{border-right:0}
.cell:active{background:rgba(0,87,190,.1)}
.cell-ico{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font-size:1.05rem;color:#fff;
  background:linear-gradient(135deg,var(--azul),var(--azul2) 60%,var(--celeste));
  box-shadow:0 3px 8px rgba(0,40,110,.3);
}
.cell-lbl{
  font-size:.68rem;font-weight:700;color:var(--texto);line-height:1.2;
}

/* ============ MODALES ============ */
.modal-bg{
  position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:9600;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.modal-bg.show{opacity:1;pointer-events:auto}
.modal{
  background:#fff;border-radius:18px 18px 0 0;
  padding:1.4rem 1.2rem calc(env(safe-area-inset-bottom,0px) + 1.6rem);
  max-width:560px;width:100%;
  max-height:80dvh;overflow:auto;
  box-shadow:0 -8px 30px rgba(0,0,0,.2);
  font-family:'Quicksand',system-ui,sans-serif;
}
.modal h3{margin:.2rem 0 .8rem;color:var(--azul);font-weight:700}
.modal p{margin:.4rem 0;line-height:1.5}
.modal-close{
  margin-top:1rem;
  background:var(--azul2);color:#fff;border:0;border-radius:12px;
  padding:.7rem 1.4rem;font-family:inherit;font-weight:600;font-size:1rem;
  cursor:pointer;width:100%;
}

/* pantallas muy bajas: achicar un poco */
@media (max-height:640px){
  .card-nivel{padding:.6rem .9rem .7rem;border-radius:18px}
  .nivel-val{font-size:2.4rem}
  .cell-ico{width:34px;height:34px}
  .detalle-card{padding:.4rem .5rem}
  .ad{width:190px;height:54px}
  .adstrip{padding:4px 0}
}