/* =========================================================
   FleTrack — gráficos animados (src/site/viz.mjs)
   · Panel en vivo bajo el título de páginas internas (.banner--stage)
   · Sección bento con tarjetas de datos (.bento)
   Las animaciones corren cuando el bloque tiene .is-live (main.js lo agrega
   al entrar en pantalla). Sin JS o con "Reducir movimiento" se ve el estado final.
   ========================================================= */

/* ---------- Panel en vivo (banner) ---------- */
.banner--stage {
  position: relative; overflow: hidden; height: 540px; margin: 0 var(--gutter);
  border-radius: 32px; border: 1px solid rgba(17, 19, 22, .06); background: #eef1f6;
  box-shadow: 0 40px 80px -40px rgba(17, 19, 22, .35);
  animation: media-in 1.1s var(--ease-out) .35s both;
}
.banner--stage[style*="--slot-img"] .stage { display: none; }   /* una foto subida desde el panel manda */
.stage { position: absolute; inset: 0; }
.stage__card {
  position: absolute; z-index: 1; text-align: left;
  background: #fff; border: 1px solid rgba(17, 19, 22, .06);
  border-radius: 20px; padding: 18px 20px; box-shadow: 0 20px 40px -20px rgba(17, 19, 22, .3);
  animation: fade-up .9s var(--ease-out) both;
}
.stage__card--main { left: 32px; bottom: 32px; width: min(440px, calc(100% - 64px)); animation-delay: .9s; }
.stage__card--kpi { right: 32px; top: 32px; width: 220px; animation-delay: 1.1s; }
.stage__card--kpi small { display: block; font-size: 12.5px; color: var(--ink-2); }
.stage__card--kpi b { display: block; margin-top: 2px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stage__card--kpi .live__bar i { width: var(--w); animation: v-width 1.4s var(--ease-out) 1.4s both; }
.stage__card--alert { right: 32px; bottom: 32px; display: flex; gap: 12px; align-items: center; max-width: 340px; animation-delay: 1.3s; }
.stage__card--alert b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.stage__card--alert small { display: block; font-size: 12.5px; color: var(--ink-2); }
.stage__card--alert .live__icon { animation: v-ring 2.4s ease-in-out 2.4s infinite; }

/* ---------- Piezas comunes ---------- */
.vw { text-align: left; color: var(--ink); }
.vhead small, .vring__text > small, .vlist__label, .vsteps__head small { display: block; font-size: 12.5px; color: var(--ink-2); }
.vhead__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.vhead__row b { font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vpill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt--ok   { background: #e8f8dc; color: #2f6f12; }
.vt--warn { background: #fff1d1; color: #7a4f00; }
.vt--bad  { background: #fde7e7; color: #a11d25; }
.vt--info { background: #e8eefc; color: #284682; }

/* Línea */
.vline__plot { position: relative; height: 128px; margin-top: 16px; }
.vline__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vline__band { fill: rgba(63, 163, 22, .1); }
.vline__area { fill: rgba(172, 198, 255, .32); }
.vline__path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vline__dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(172, 198, 255, .7);
}
.vline__tip {
  position: absolute; transform: translate(var(--tx, -50%), calc(-100% - 14px));
  padding: 5px 9px; border-radius: 8px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Barras */
.vbars__plot { display: flex; align-items: stretch; gap: 10px; height: 148px; margin-top: 16px; }
.vbars__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vbars__track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.vbars__bar { display: block; width: 100%; max-width: 40px; border-radius: 9px 9px 4px 4px; background: #dfe5f0; transform-origin: 50% 100%; }
.vbars__col.is-hi .vbars__bar { background: var(--ink); }
.vbars__col small { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }

/* Anillo */
.vring { display: flex; align-items: center; gap: 22px; }
.vring__dial { position: relative; flex: none; width: 116px; height: 116px; }
.vring__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vring__track { fill: none; stroke: #eef0f3; stroke-width: 10; }
.vring__arc { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--pct)); }
.vring__dial b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vring__text { min-width: 0; }
.vring__text p { margin-top: 4px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.vring__text dl { display: flex; gap: 20px; margin: 12px 0 0; }
.vring__text dt { font-size: 12px; color: var(--ink-2); }
.vring__text dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Lista */
.vlist ul { list-style: none; margin: 8px 0 0; padding: 0; }
.vlist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eef0f3; }
.vlist li:last-child { border-bottom: 0; padding-bottom: 0; }
.vlist__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vlist__dot.vt--ok { color: #3fa316; } .vlist__dot.vt--warn { color: #d99100; } .vlist__dot.vt--bad { color: #d6323b; } .vlist__dot.vt--info { color: #4a6fc2; }
.vlist__main { min-width: 0; }
.vlist__main b { display: block; font-size: 14px; font-weight: 600; }
.vlist__main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }

/* Etapas */
.vsteps__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vsteps__title { margin-top: 6px; font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.vsteps__track { position: relative; margin-top: 18px; }
.vsteps__line { position: absolute; top: 10px; left: 11px; right: calc(100% / var(--n) - 11px); height: 2px; background: #e3e7ee; }
.vsteps__line i { display: block; width: var(--done); height: 100%; background: var(--ink); transform-origin: 0 50%; }
.vsteps ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.vsteps li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vsteps__node { display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #cfd5df; }
.vsteps li.is-done .vsteps__node { background: var(--ink); box-shadow: none; }
.vsteps li.is-now .vsteps__node { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px rgba(172, 198, 255, .6); }
.vsteps__node svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vsteps li b { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.vsteps li small { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Sección bento ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.bento__card {
  display: flex; flex-direction: column; gap: 28px; overflow: hidden;
  padding: 36px 36px 0; border-radius: 28px; background: #eef1f6;
  border: 1px solid rgba(17, 19, 22, .04);
}
.bento__text h3 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.bento__text p { margin-top: 8px; max-width: 44ch; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.bento__stage { position: relative; margin-top: auto; }
.bento__panel {
  padding: 24px 24px 28px; border-radius: 20px 20px 0 0; background: #fff;
  border: 1px solid rgba(17, 19, 22, .05); border-bottom: 0;
  box-shadow: 0 24px 50px -30px rgba(17, 19, 22, .35);
}
.bento__float { display: none; }

.bento__card--wide {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: center; gap: 48px; padding: 44px;
}
.bento__card--wide .bento__text h3 { font-size: clamp(26px, 2.2vw, 34px); }
.bento__card--wide .bento__stage { margin: 0 0 0 auto; width: min(100%, 620px); padding: 0 0 0 40px; }
.bento__card--wide .bento__panel { border-radius: 20px; border-bottom: 1px solid rgba(17, 19, 22, .05); }
.bento__card--wide .bento__float {
  display: block; position: relative; margin: -28px 0 0 -40px; width: 280px; z-index: 1;
  padding: 18px 20px; border-radius: 18px; background: #fff;
  border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 24px 50px -22px rgba(17, 19, 22, .4);
}
.bento__float .vline__plot { height: 72px; }
.bento__float .vbars__plot { height: 90px; }
.bento__float .vring__dial { width: 84px; height: 84px; }
.bento__float .vring__dial b { font-size: 18px; }
.bento__float .vring { gap: 16px; }
.bento__float .vhead__row b { font-size: 22px; }

/* ---------- Animaciones (solo con .is-live) ---------- */
@keyframes v-clip  { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes v-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes v-pop   { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes v-tip   { from { opacity: 0; transform: translate(var(--tx, -50%), calc(-100% - 6px)); } to { opacity: 1; transform: translate(var(--tx, -50%), calc(-100% - 14px)); } }
@keyframes v-grow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes v-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v-arc   { from { stroke-dashoffset: 100; } }
@keyframes v-row   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v-width { from { width: 0; } }
@keyframes v-pulse { 50% { box-shadow: 0 0 0 9px rgba(172, 198, 255, .25); } }
@keyframes v-ring  { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-12deg); } 85% { transform: rotate(10deg); } 92% { transform: rotate(-4deg); } }

.is-live .vline__plot svg { animation: v-clip 1.6s var(--ease-out) .25s both; }
.is-live .vline__band { animation: v-fade 1.2s ease .6s both; }
.is-live .vline__dot { animation: v-pop .5s var(--ease-out) 1.4s both, v-pulse 2.4s ease-in-out 2s infinite; }
.is-live .vline__tip { animation: v-tip .5s var(--ease-out) 1.6s both; }
.is-live .vbars__bar { animation: v-grow 1s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + .2s); }
.is-live .vring__arc { animation: v-arc 1.6s var(--ease-out) .3s both; }
.is-live .vlist li { animation: v-row .6s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + .2s); }
.is-live .vsteps__line i { animation: v-grow-x 1.4s var(--ease-out) .4s both; }
.is-live .vsteps li { animation: v-row .6s var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + .2s); }
.is-live .vsteps li.is-now .vsteps__node { animation: v-pulse 2.4s ease-in-out 1.6s infinite; }
/* En el banner, el contenido arranca después de que aparece su tarjeta */
.stage .vline__plot svg, .stage .vline__band, .stage .vring__arc, .stage .vsteps__line i { animation-delay: 1.2s !important; }
.stage .vlist li, .stage .vsteps li { animation-delay: calc(var(--i) * 120ms + 1.2s) !important; }
.stage .vbars__bar { animation-delay: calc(var(--i) * 70ms + 1.2s) !important; }
.stage .vline__dot { animation-delay: 2.2s, 3s !important; }
.stage .vline__tip { animation-delay: 2.4s !important; }

/* Bento: tarjetas que entran escalonadas */
.has-viz .bento:not(.is-live) .bento__card { opacity: 0; transform: translateY(24px); }
.bento__card { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.bento__card:nth-child(2) { transition-delay: .1s; }
.bento__card:nth-child(3) { transition-delay: .2s; }
.bento__card--wide .bento__float { transition: opacity .7s var(--ease-out) .7s, transform .7s var(--ease-out) .7s; }
.has-viz .bento:not(.is-live) .bento__float { opacity: 0; transform: translateY(16px); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bento__card--wide { grid-template-columns: 1fr; gap: 28px; padding: 36px 36px 0; }
  .bento__card--wide .bento__stage { margin: 0; width: 100%; padding: 0 0 0 0; }
  .bento__card--wide .bento__panel { border-radius: 20px 20px 0 0; border-bottom: 0; }
  .bento__card--wide .bento__float { position: absolute; margin: 0; right: 20px; top: -24px; width: 240px; }
}
@media (max-width: 1024px) {
  .banner--stage { height: 460px; border-radius: 28px; }
  .stage__card--alert { display: none; }
  .bento { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .banner--stage { height: 400px; border-radius: 24px; }
  .stage__card--kpi { display: none; }
  .stage__card--main { left: 14px; right: 14px; bottom: 14px; width: auto; padding: 16px; }
  .stage .vbars__plot { height: 110px; gap: 6px; }
  .stage .vline__plot { height: 100px; }
  .bento { margin-top: 32px; gap: 14px; }
  .bento__card, .bento__card--wide { padding: 26px 20px 0; border-radius: 24px; gap: 22px; }
  .bento__panel { padding: 18px 16px 22px; }
  .bento__card--wide .bento__float { display: none; }
  .vring { gap: 16px; }
  .vring__dial { width: 96px; height: 96px; }
  .vbars__plot { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .banner--stage, .stage__card, .stage__card *, .vw, .vw * { animation: none !important; }
  .bento__card, .bento__float { transition: none !important; opacity: 1 !important; transform: none !important; }
}