/* =====================================================================
   Curvas: rejilla, doble escala, curva S y globo de datos.
   Versión "cristal": sombras, halos, barrido de luz y entrada animada.
   ===================================================================== */
.svgwrap { overflow-x:auto; overflow-y:hidden; margin:14px 0 12px; position:relative; }
/* Centrado: con pocos períodos el gráfico no llena el panel y pegado a la
   izquierda dejaba todo el hueco de un lado. Si no entra, los márgenes
   automáticos se anulan solos y el wrap scrollea como siempre. */
.svgchart { display:block; margin:0 auto; overflow:visible; }
.svgplano { fill:transparent; }

/* ---------- Rejilla ---------- */
.svg-grid { stroke:#4d6690; stroke-width:1; opacity:.22; stroke-dasharray:2 6;
  animation:svgAparece .5s ease-out both; }
.svg-grid.base { opacity:.85; stroke:#5f7ba8; stroke-dasharray:none; stroke-width:1.2; }
.svgyt { fill:#93a6c4; font-size:10.5px; font-variant-numeric:tabular-nums;
  letter-spacing:.01em; }
.svgyt.l { text-anchor:end; }
.svgyt.r { text-anchor:start; fill:#d2ab63; }
.svgtick { stroke:#4a628a; stroke-width:1; }
.svgt { fill:#8ea2c0; font-size:10.5px; letter-spacing:.01em; }

/* ---------- Cebra y eje base ---------- */
.svgcebra { fill:#8fb0dd; fill-opacity:.028; }
.svgbasal { stroke:#8fb0dd; stroke-width:1.4; opacity:.75;
  filter:drop-shadow(0 0 4px rgba(143,176,221,.5)); }

/* ---------- Columna bajo el puntero ---------- */
.svgcolbg { fill:transparent; }
/* La banda del período se enciende con un degradé que se apoya en el eje: se
   lee como un reflector, no como un rectángulo gris. */
.svgband { fill:#9dbde8; fill-opacity:.07; opacity:0; transition:opacity .13s; }

/* ---------- Barras ---------- */
/* El crecimiento se escalona con --ret (cada barra arranca un poquito después
   que la de su izquierda). El transform-origin abajo hace que "nazcan" del eje. */
@keyframes svgCrece {
  from { transform:translateY(10px) scaleY(.35); opacity:0; }
  60%  { opacity:1; }
  to   { transform:none; opacity:1; }
}
@keyframes svgAparece { from { opacity:0; } to { opacity:1; } }

.svgcol .barra, .svgcol .filo {
  transform-box:fill-box; transform-origin:50% 100%;
  animation:svgCrece .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--ret, 0ms);
}

/* El barrido de luz: una banda blanca inclinada que cruza el área del gráfico
   una sola vez al dibujarse. Es el detalle que hace que el tablero "se encienda". */
@keyframes svgBarre {
  from { transform:translateX(0); opacity:0; }
  18%  { opacity:.9; }
  85%  { opacity:.55; }
  to   { transform:translateX(calc(100% + 320px)); opacity:0; }
}
.svgshine { animation:svgBarre 1.5s cubic-bezier(.3,.6,.3,1) .35s both;
  transform:skewX(-14deg); }

/* ---------- Curva S ---------- */
/* El trazo se dibuja de izquierda a derecha con dasharray/dashoffset sobre
   pathLength=1: no hace falta medir el largo del camino. */
@keyframes svgTraza { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }

.svgarea { opacity:0; animation:svgAparece .9s ease-out .55s both; }

.svgline-halo { fill:none; stroke:#f59e0b; stroke-width:9; opacity:.5;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  filter:blur(4px);
  animation:svgTraza 1.25s cubic-bezier(.4,0,.2,1) .2s both; }

.svgline { fill:none; stroke:#fbbf24; stroke-width:2.8;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  filter:drop-shadow(0 0 5px rgba(251,191,36,.55));
  animation:svgTraza 1.25s cubic-bezier(.4,0,.2,1) .2s both; }

/* Punto que late en la punta de la curva: marca el último dato acumulado. */
@keyframes svgLate {
  0%   { r:5;   opacity:.55; }
  70%  { r:13;  opacity:0; }
  100% { r:13;  opacity:0; }
}
.svgpulse { fill:#fbbf24; opacity:.5; animation:svgLate 2.4s ease-out 1.6s infinite; }
.svgnucleo { fill:#fff7e6; stroke:#f59e0b; stroke-width:2.4;
  filter:drop-shadow(0 0 6px rgba(251,191,36,.9)); }

/** Punto de las líneas. Lo usa también la curva S de la pestaña Control, que se
    dibuja con otro código: si le saco el estilo, esos puntos quedan sin color. */
.svgpt { fill:#f5c451; stroke:#0b1220; stroke-width:1.4; }

/* ---------- Rótulos de valor sobre las barras ---------- */
/* El halo del color del fondo evita que la curva S tache el número. */
.svgvb { fill:#e6eefc; font-size:10.5px; font-weight:600; paint-order:stroke;
  stroke:#0b1220; stroke-width:3px; stroke-linejoin:round;
  animation:svgAparece .5s ease-out both; animation-delay:var(--ret, 0ms); }

/* ---------- Marca de HOY ---------- */
.svghoy-halo { stroke:#38bdf8; stroke-width:7; opacity:.14; stroke-linecap:round; }
.svghoy { stroke:#38bdf8; stroke-width:1.6; stroke-dasharray:5 4; opacity:1; }
.svghoytxt { fill:#eaf7ff; font-size:9.5px; font-weight:800; letter-spacing:.09em; }

/* ---------- Seguimiento del mouse ---------- */
.svgcruz { stroke:#a8c8ee; stroke-width:1; stroke-dasharray:3 4; opacity:0;
  transition:opacity .1s; }
.svgband { transition:opacity .1s; }
.svgcurpt { fill:#fff; stroke:#fbbf24; stroke-width:2.6; opacity:0;
  filter:drop-shadow(0 0 7px rgba(251,191,36,.95)); transition:opacity .1s; }
.svgdot { fill:#e2f2ff; stroke:#38bdf8; stroke-width:1.6; opacity:0;
  filter:drop-shadow(0 0 6px rgba(56,189,248,.9)); transition:opacity .1s; }

/* ---------- Franja de números ---------- */
.svg-hud { display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 14px; }
.svg-hud .sh { position:relative; flex:1 1 150px; min-width:142px;
  padding:11px 14px 12px; border:1px solid rgba(120,150,200,.26);
  border-radius:13px; overflow:hidden;
  background:linear-gradient(160deg, rgba(125,175,235,.13), rgba(125,175,235,.03) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px -12px rgba(0,0,0,.9); }
/* Filo de luz arriba de cada tarjeta: el detalle que las separa del fondo. */
.svg-hud .sh::before { content:''; position:absolute; left:14px; right:14px; top:0;
  height:1px; background:linear-gradient(90deg, transparent,
    rgba(160,200,255,.55), transparent); }
.svg-hud .sh > span { display:block; font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:#8fa3c2; margin-bottom:5px; }
.svg-hud .sh > b { font-size:17.5px; color:#f2f7ff; font-variant-numeric:tabular-nums;
  letter-spacing:-.015em; }
.svg-hud .sh > i { display:inline-block; margin-left:8px; font-size:10.5px;
  font-style:normal; padding:1.5px 8px; border-radius:999px;
  background:rgba(56,189,248,.16); color:#8fd8ff; white-space:nowrap;
  border:1px solid rgba(56,189,248,.28); }
.svg-hud .shbar { height:4px; border-radius:999px; background:rgba(125,175,235,.16);
  margin-top:9px; overflow:hidden; }
.svg-hud .shbar span { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#38bdf8,#7dd3fc);
  box-shadow:0 0 10px rgba(56,189,248,.7);
  animation:svgBarraHud 1.1s cubic-bezier(.16,1,.3,1) both; }
.svg-hud .shbar.alt span { background:linear-gradient(90deg,#f59e0b,#fbbf24,#fde68a);
  box-shadow:0 0 10px rgba(251,191,36,.6); }
@keyframes svgBarraHud { from { width:0; } }

/* ---------- Globo de datos ---------- */
.svgtip { position:absolute; z-index:6; min-width:196px; max-width:280px;
  padding:11px 13px 12px; border-radius:13px;
  border:1px solid rgba(130,175,235,.34);
  background:linear-gradient(165deg, rgba(20,32,52,.98), rgba(10,17,30,.98));
  box-shadow:0 20px 44px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.35);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  pointer-events:none; font-size:12px; color:#c7d3e6; line-height:1.5;
  animation:svgTipIn .14s ease-out both; }
@keyframes svgTipIn { from { opacity:0; transform:translateY(4px) scale(.98); } }
.svgtip[hidden] { display:none; }
.svgtip::after { content:''; position:absolute; left:50%; bottom:-5px;
  width:9px; height:9px; margin-left:-4.5px; transform:rotate(45deg);
  background:#0a111e; border-right:1px solid rgba(130,175,235,.34);
  border-bottom:1px solid rgba(130,175,235,.34); }
.svgtip .sthead { font-size:12.5px; font-weight:700; color:#eef5ff;
  margin-bottom:8px; padding-bottom:7px; display:flex; justify-content:space-between;
  gap:10px; border-bottom:1px solid rgba(125,175,235,.18); }
.svgtip .sthead span { font-weight:400; color:#8fa3c2; font-size:11px; }
.svgtip .strow { display:flex; align-items:center; gap:8px; padding:2px 0; }
.svgtip .strow i { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.svgtip .strow span { flex:1; color:#9fb0c9; }
.svgtip .strow b { font-variant-numeric:tabular-nums; color:#eef5ff; }
.svgtip .strow.tot { border-top:1px solid rgba(125,175,235,.2); margin-top:7px;
  padding-top:7px; }
.svgtip .strow.tot i, .svgtip .strow.ac i { background:transparent; }
.svgtip .strow.tot span { color:#c7d3e6; }
.svgtip .strow.ac b { color:#fbbf24; }
.svgtip .stbar { height:4px; border-radius:999px; background:rgba(125,175,235,.2);
  margin-top:8px; overflow:hidden; }
.svgtip .stbar span { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  box-shadow:0 0 9px rgba(251,191,36,.75); }
.svgtip .stpct { text-align:right; font-size:10.5px; color:#dcb86e; margin-top:5px; }

/* Sin animaciones cuando el sistema lo pide (o en equipos lentos). */
@media (prefers-reduced-motion:reduce) {
  .svgcol .barra, .svgcol .filo, .svgline, .svgline-halo, .svgarea, .svgvb,
  .svg-grid, .svgshine, .svgpulse, .svg-hud .shbar span, .svgtip {
    animation:none !important; }
  .svgline, .svgline-halo { stroke-dasharray:none; stroke-dashoffset:0; }
}