/* Gráficos animados (graficos.js). Usa las variables de color de cada página.
   Sin JS (vista previa de WhatsApp) las animaciones arrancan al verse; con JS, cuando el gráfico entra en pantalla. */
.viz{background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:16px; margin:0 0 16px; font-family:Inter,system-ui,sans-serif}
.viz svg{display:block; overflow:visible}
.viz-head{display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; margin-bottom:14px}
.viz .ico{width:42px; height:42px; fill:none; stroke:var(--navy); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.viz-n{font-family:var(--serif); font-weight:800; font-size:44px; line-height:1; color:var(--navy); font-variant-numeric:tabular-nums}
.viz-u{font-family:var(--serif); font-weight:700; font-size:26px; color:var(--navy); margin-left:7px}
.viz-head small{display:block; margin-top:4px; font-size:14.5px; line-height:1.4; color:var(--ink-2)}
.viz-nota{margin:10px 0 0; font-size:13.5px; line-height:1.45; color:var(--ink-2)}
html:not(.js) .viz .solo-js{display:none}

/* pastillas: en el 1 marcan cifras en la grilla, en el 3 filtran la lista */
.viz-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); font:500 14px/1.2 Inter,system-ui,sans-serif; color:var(--ink-2); cursor:pointer; transition:transform .15s, box-shadow .2s, border-color .2s}
.pill b{font-family:var(--serif); font-size:16px; color:var(--navy)}
.pill i{width:10px; height:10px; border-radius:50%; background:var(--plan); flex:none}
.pill.oro i{background:var(--gold)}
.pill.on{border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); color:var(--ink)}
.pill:active{transform:scale(.96)}
html:not(.js) .pill{cursor:default}

/* 1 · Situación de calle: ¿alcanzan las camas? */
.viz{--cm-f:var(--gold); --cm-f2:var(--gold-d); --cm-t:#F2D392; --cm-s:#D98A7C}
.cm-t{margin:4px 0 10px !important; font:600 15px/1.4 Inter,system-ui,sans-serif; color:var(--navy); text-align:left !important}
.cm-filas{display:grid; gap:6px}
.cm-fila{display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; align-items:center; width:100%; padding:7px 8px; border:1px solid transparent; border-radius:12px; background:transparent; font:inherit; color:inherit; text-align:left; cursor:pointer; transition:background .25s, border-color .25s; animation:viz-aparece .5s calc(.2s + var(--k, 0) * .12s) both}
.cm-fila:nth-child(2){--k:1} .cm-fila:nth-child(3){--k:2}
.cm-fila:hover{background:rgba(255,255,255,.6)}
.cm-fila.on{background:var(--card); border-color:var(--line); box-shadow:0 4px 14px rgba(15,34,56,.07)}
.cm-q{font-size:12.5px; line-height:1.25; color:var(--ink-2)}
.cm-q b{display:block; font-family:var(--serif); font-size:21px; line-height:1.05; color:var(--navy); text-transform:none; letter-spacing:0; margin:0}
.cm-barra{display:flex; height:30px; border-radius:8px; overflow:hidden; background:var(--cream); animation:cm-llena 1s calc(.5s + var(--k, 0) * .15s) cubic-bezier(.2,.7,.2,1) both}
@keyframes cm-llena{from{clip-path:inset(0 100% 0 0)}}
.cm-barra i{display:grid; place-items:center; width:var(--w); font:700 12px/1 Inter,system-ui,sans-serif; font-style:normal; color:var(--navy);}
.cm-barra .f{background:var(--cm-f)}
.cm-barra .t{background:var(--cm-t)}
.cm-barra .s{background:repeating-linear-gradient(135deg, var(--cm-s) 0 6px, #E29C8F 6px 12px); color:#fff}
.cm-fila:not(.on) .cm-barra{opacity:.55; transition:opacity .25s}
.cm-ley{list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0 !important; padding:0 0 0 8px !important; font-size:13px; color:var(--ink-2)}
.viz .cm-ley li{display:flex; align-items:center; gap:6px; margin:0; text-align:left}
.cm-ley i{width:11px; height:11px; border-radius:3px; flex:none}
.cm-ley .f{background:linear-gradient(90deg, var(--cm-f) 50%, var(--cm-f2) 50%)} .cm-ley .t{background:var(--cm-t)} .cm-ley .s{background:var(--cm-s)}
.cm-dicho{margin:16px 0 0 !important; padding:12px 14px; border-left:3px solid var(--gold); background:var(--card); border-radius:0 12px 12px 0; font:500 15px/1.45 Inter,system-ui,sans-serif; color:var(--ink); text-align:left !important}
.viz .cm-dicho b{font-family:var(--serif); font-size:18px; color:var(--navy); text-transform:none; letter-spacing:0; display:inline; margin:0}
.cm-dicho span{display:block; margin-top:4px; color:#A5483A}
.viz .cm-dicho span b{font-size:15px; font-family:inherit; color:inherit}
.cm-cada{margin:16px 0 6px !important; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); text-align:left !important}
.cm-svg{width:100%; height:auto}
.cm-svg circle{transform-box:fill-box; transform-origin:center; animation:viz-pop .4s calc(.2s + var(--i) * 2ms) both}
.cm-svg .f{fill:var(--cm-f)} .cm-svg .f2{fill:var(--cm-f2)} .cm-svg .t{fill:var(--cm-t)} .cm-svg .s{fill:var(--cm-s); opacity:.8}
.cm-svg .f{animation:viz-pop .4s calc(.2s + var(--i) * 2ms) both, viz-respira 3.6s calc(2s + var(--i) * 40ms) ease-in-out infinite}
@media (max-width:420px){ .cm-fila{grid-template-columns:96px minmax(0,1fr); gap:8px} .cm-q b{font-size:19px} }

/* 2 · Estacionamientos: barra de 40 casilleros de 10 lugares */
.barra-cap{position:relative; height:28px; border-radius:7px; overflow:hidden;
  background:repeating-linear-gradient(90deg, var(--cream) 0 calc(2.5% - 2px), var(--bg) 0 2.5%)}
.barra-cap .lleno{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p)) 0 0);
  background:repeating-linear-gradient(90deg, var(--navy-2) 0 calc(2.5% - 2px), transparent 0 2.5%);
  animation:viz-llena 1.6s .3s cubic-bezier(.2,.7,.2,1) both}
.barra-cap .lleno::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform:translateX(-100%); animation:viz-brillo 6s 2.4s ease-in-out infinite}
.barra-ejes{display:flex; justify-content:space-between; gap:12px; margin-top:7px; font-size:13.5px; line-height:1.35; color:var(--ink-2)}
.barra-ejes span:last-child{text-align:right}
.barra-ejes b{font-family:var(--serif); font-size:16px; color:var(--navy)}
.ruta{width:100%; height:auto; margin-top:18px}
.ruta .ic{fill:none; stroke:var(--navy); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ruta .ic.auto{animation:viz-anda 2.8s ease-in-out infinite}
.ruta .tramo{stroke:#B9AE9A; stroke-width:2; stroke-dasharray:3 5; stroke-linecap:round; animation:viz-fluye 1s linear infinite}
.ruta .viaje{fill:var(--gold); animation:viz-viaje 4.5s 1.2s ease-in-out infinite both}
.ruta-txt{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:6px; text-align:center;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.ruta-txt small{display:block; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--gold-d)}

/* 3 · Estado de las gestiones */
.barra-est{display:flex; gap:3px; height:40px; border-radius:10px; overflow:hidden}
.barra-est .seg{position:relative; flex:var(--n) 1 0; min-width:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:15.5px; animation:viz-crece .9s calc(.25s + var(--k) * .3s) cubic-bezier(.2,.7,.2,1) both}
.s-logrado{--c:var(--ok)} .s-curso{--c:var(--gold-d)} .s-planteado{--c:var(--plan)} .s-sin{--c:var(--no)}
.barra-est .seg{background:var(--c)}
.est-pills .pill i{background:var(--c)}
.barra-est .s-logrado::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform:translateX(-100%); animation:viz-brillo 5s 2.2s ease-in-out infinite}

/* Novedades */
.nov{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.nov li{display:grid; grid-template-columns:1fr; gap:4px; align-items:start; align-content:start; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:14px; padding:14px 16px}
.nov-f{font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-d); white-space:nowrap; padding-top:3px}
.nov b{display:block; color:var(--navy); font-size:16.5px; line-height:1.3}
.nov p{margin:4px 0 0; font-size:15px; line-height:1.5; color:var(--ink-2); text-align:justify; -webkit-hyphens:auto; hyphens:auto}
.nov-mas{margin-top:10px}
@media (min-width:860px){ .nov{grid-template-columns:repeat(2,1fr)} }
[hidden]{display:none !important}

@keyframes viz-aparece{from{opacity:0; transform:translateY(5px)}}
@keyframes viz-pop{from{transform:scale(0)} 65%{transform:scale(1.45)}}
@keyframes viz-respira{50%{opacity:.5}}
@keyframes viz-late{50%{transform:scale(1.5)}}
@keyframes viz-llena{from{clip-path:inset(0 100% 0 0)}}
@keyframes viz-brillo{0%,55%{transform:translateX(-100%)} 100%{transform:translateX(100%)}}
@keyframes viz-crece{from{flex-grow:0; opacity:.2}}
@keyframes viz-fluye{to{stroke-dashoffset:-16}}
@keyframes viz-anda{50%{transform:translateY(-2px)}}
@keyframes viz-viaje{
  0%{transform:translateX(0); opacity:0} 6%{opacity:1}
  30%{transform:translateX(61px); opacity:1} 33%{transform:translateX(66px); opacity:0}
  62%{transform:translateX(118px); opacity:0} 65%{transform:translateX(123px); opacity:1}
  92%{transform:translateX(182px); opacity:1} 100%{transform:translateX(182px); opacity:0}}

/* con JS, quieto hasta que se ve */
.js .viz:not(.vis) *, .js .viz:not(.vis) *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){
  .viz *, .viz *::after{animation:none !important; transition:none !important}
}