/* ═══════════════════════════════════════════════════════════════
   nox-charts.css — Refinamiento visual de gráficos (compartido
   móvil + escritorio). Capa aditiva: no cambia markup, solo estilo.
   ═══════════════════════════════════════════════════════════════ */
:root{ --noxc-ease:cubic-bezier(.22,1,.36,1); }

/* Cifras con dígitos tabulares: columnas y deltas alineados */
.rt-num,.rh-val,.rt-delta,.rh-delta,.ag2-stat .n,.hero-amount,.nb-chart .labs span{ font-variant-numeric:tabular-nums; }

/* ── Nox-Bot · barras del analista ── */
.nb-chart{ padding:13px 13px 10px; border-radius:14px; }
.nb-chart .bars{ position:relative; height:72px; gap:7px; }
.nb-chart .bars::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--nox-border) calc(25% - 1px), var(--nox-border) 25%); }
.nb-chart .bars span{ position:relative; z-index:1; border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg, var(--c19), var(--c7) 88%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 0 12px rgba(124,58,237,0.28); cursor:default; }
.nb-chart .labs{ margin-top:7px; }
.nb-chart .labs span{ font-size:9.5px; letter-spacing:.4px; }
@media (hover:hover){
  .nb-chart .bars span:hover{ filter:brightness(1.18) saturate(1.08); }
}

/* ── Reportes · tiles rápidos ── */
.rep-tile{ transition:transform .18s var(--noxc-ease), border-color .18s var(--noxc-ease), box-shadow .18s var(--noxc-ease); }
.rt-spark{ height:26px; }
.rt-spark span{ border-radius:3px 3px 1px 1px; cursor:default; }
.rt-num{ letter-spacing:.2px; }
@media (hover:hover){
  .rep-tile:hover{ transform:translateY(-2px); border-color:var(--nox-border-hi); box-shadow:0 12px 28px -16px rgba(0,0,0,0.55); }
  .rep-tile:hover .rt-spark span{ opacity:1 !important; }
  .rt-spark span:hover{ filter:brightness(1.22); }
}

/* ── Hero de reporte · sparkline + barra segmentada ── */
.rep-spark-svg{ filter:drop-shadow(0 3px 7px rgba(0,212,255,0.16)); }
.rh-seg-bar{ display:flex; gap:2px; height:10px; border-radius:99px; overflow:hidden; }
.rh-seg-bar i{ border-radius:2px; min-width:6px; }
.rh-seg-leg span{ display:inline-flex; align-items:center; gap:6px; }

/* ── Tooltip de valor (lo posiciona nox-charts.js) ── */
.noxc-tip{ position:fixed; z-index:2000; display:none; transform:translate(-50%, calc(-100% - 7px)); padding:4px 9px; border-radius:8px;
  background:var(--nox-card-hi, #1a2130); border:1px solid var(--nox-border-hi, rgba(255,255,255,0.14)); color:var(--ink-1, #fff);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.3px; pointer-events:none; white-space:nowrap;
  box-shadow:0 8px 22px -10px rgba(0,0,0,0.6); opacity:0; transition:opacity .12s ease; }
.noxc-tip.on{ opacity:1; }

/* ── Entrada animada sutil ── */
@media (prefers-reduced-motion: no-preference){
  @keyframes noxcGrow{ from{ transform:scaleY(0); } }
  .nb-chart .bars span, .rt-spark span{ transform-origin:bottom; animation:noxcGrow .55s var(--noxc-ease) backwards; }
  .nb-chart .bars span:nth-child(2), .rt-spark span:nth-child(2){ animation-delay:.045s; }
  .nb-chart .bars span:nth-child(3), .rt-spark span:nth-child(3){ animation-delay:.09s; }
  .nb-chart .bars span:nth-child(4), .rt-spark span:nth-child(4){ animation-delay:.135s; }
  .nb-chart .bars span:nth-child(5), .rt-spark span:nth-child(5){ animation-delay:.18s; }
  .nb-chart .bars span:nth-child(6), .rt-spark span:nth-child(6){ animation-delay:.225s; }
  .nb-chart .bars span:nth-child(7), .rt-spark span:nth-child(7){ animation-delay:.27s; }
  .nb-chart .bars span:nth-child(n+8), .rt-spark span:nth-child(n+8){ animation-delay:.31s; }

  @keyframes noxcRise{ from{ opacity:0; transform:translateY(6px); } }
  .rep-hero, .rep-tile, .ag2-stat{ animation:noxcRise .4s var(--noxc-ease) backwards; }
  .rep-tile:nth-child(2), .ag2-stat:nth-child(2){ animation-delay:.05s; }
  .rep-tile:nth-child(3), .ag2-stat:nth-child(3){ animation-delay:.1s; }
  .rep-tile:nth-child(4){ animation-delay:.15s; }
  .rep-tile:nth-child(n+5){ animation-delay:.2s; }
}

/* ── Ventas · embudo con barras proporcionales ── */
.av-row .vfun-bar{ display:block; margin-top:7px; }
@media (hover:hover){ .av-row:hover .vfun-bar span{ filter:brightness(1.15); } }
@media (prefers-reduced-motion: no-preference){
  @keyframes noxcGrowX{ from{ transform:scaleX(0); } }
  .vfun-bar span{ transform-origin:left; animation:noxcGrowX .6s var(--noxc-ease) backwards; }
  .av-row:nth-child(2) .vfun-bar span{ animation-delay:.05s; }
  .av-row:nth-child(3) .vfun-bar span{ animation-delay:.1s; }
  .av-row:nth-child(4) .vfun-bar span{ animation-delay:.15s; }
  .av-row:nth-child(5) .vfun-bar span{ animation-delay:.2s; }
  .av-row:nth-child(6) .vfun-bar span{ animation-delay:.25s; }
}

/* ── Proyección · barra de composición del monto ── */
.noxc-seg{ margin-top:14px; }
.noxc-seg-bar{ display:flex; gap:2px; height:10px; border-radius:99px; overflow:hidden; }
.noxc-seg-bar i{ display:block; border-radius:2px; min-width:6px; }
.noxc-seg-leg{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px; font-family:var(--font-body); font-size:11.5px; color:var(--nox-text-2); }
.av-hero .noxc-seg-leg{ justify-content:center; }
.noxc-seg-leg span{ display:inline-flex; align-items:center; gap:6px; }
.noxc-seg-leg b{ width:8px; height:8px; border-radius:3px; flex-shrink:0; }
.noxc-seg-leg em{ font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-1); font-variant-numeric:tabular-nums; }
@media (hover:hover){ .noxc-seg-bar i:hover{ filter:brightness(1.18); } }
@media (prefers-reduced-motion: no-preference){
  .noxc-seg-bar i{ transform-origin:left; animation:noxcGrowX .6s var(--noxc-ease) backwards; }
  .noxc-seg-bar i:nth-child(2){ animation-delay:.07s; }
  .noxc-seg-bar i:nth-child(3){ animation-delay:.14s; }
  .av-bar > span{ transform-origin:left; animation:noxcGrowX .55s var(--noxc-ease) backwards; }
}

/* ── Reportes completos · tablas ── */
.rep-table{ border-radius:14px; }
.rep-tr span{ font-variant-numeric:tabular-nums; }
.rep-tr:nth-child(even):not(.rep-th):not(.rep-total){ background:rgba(var(--surf),0.025); }
.rep-tr.rep-total{ background:rgba(var(--acc-rgb),0.07); border-top:1px solid var(--nox-border-hi); }
.rep-tr.rep-total span{ color:var(--ink-1); font-weight:700; }
.rep-tr .rep-up{ color:var(--c21) !important; }
.rep-tr .rep-down{ color:var(--c28) !important; }
@media (hover:hover){
  .rep-tr:not(.rep-th):hover{ background:rgba(var(--acc-rgb),0.06); }
}

/* ── Reportes completos · gráfica de columnas ── */
.rep-col.is-top .rep-bar2{ background:linear-gradient(180deg, var(--c31), var(--c7)); box-shadow:0 0 18px -3px var(--c19); }
.rep-col.is-top .rep-colval{ color:var(--c31); font-weight:700; }
@media (hover:hover){ .rep-bar2:hover{ filter:brightness(1.15); } }

@media (prefers-reduced-motion: no-preference){
  .rep-tr{ animation:noxcRise .35s var(--noxc-ease) backwards; }
  .rep-tr:nth-child(2){ animation-delay:.04s; }
  .rep-tr:nth-child(3){ animation-delay:.08s; }
  .rep-tr:nth-child(4){ animation-delay:.12s; }
  .rep-tr:nth-child(5){ animation-delay:.16s; }
  .rep-tr:nth-child(6){ animation-delay:.2s; }
  .rep-tr:nth-child(n+7){ animation-delay:.24s; }
}

/* ── Nox-Bot · análisis: valores sobre las barras + ranking de fuentes ── */
.nb-chart .vals{ display:flex; gap:7px; margin-bottom:5px; }
.nb-chart .vals span{ flex:1; text-align:center; font-family:var(--font-mono); font-size:9.5px; color:var(--nox-text-3); font-variant-numeric:tabular-nums; }
.nb-chart .vals span.top{ color:var(--c31); font-weight:700; }
.nb-chart .bars span.top{ background:linear-gradient(180deg, var(--c31), var(--c7) 88%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 0 16px rgba(124,58,237,0.45); }
.nb-rank-bar{ height:6px; background:rgba(var(--surf),0.06); border-radius:3px; overflow:hidden; }
.nb-rank-bar div{ height:100%; border-radius:3px; }
@media (hover:hover){ .nb-rank-bar div:hover{ filter:brightness(1.18); } }
@media (prefers-reduced-motion: no-preference){
  .nb-rank-bar div{ transform-origin:left; animation:noxcGrowX .6s var(--noxc-ease) backwards; }
  .nb-chart .vals span{ animation:noxcRise .4s var(--noxc-ease) backwards; }
}

/* ── Equipo · Desempeño ── */
.perf-card{ transition:border-color .18s var(--noxc-ease); }
.perf-lead{ border-color:rgba(var(--acc-rgb),0.35); background:linear-gradient(160deg, rgba(var(--acc-rgb),0.06), var(--nox-card) 55%); }
.noxc-num{ font-variant-numeric:tabular-nums; }
@media (hover:hover){ .perf-card:hover{ border-color:var(--nox-border-hi); } }
@media (prefers-reduced-motion: no-preference){
  .perf-card{ animation:noxcRise .4s var(--noxc-ease) backwards; }
  .perf-card:nth-of-type(2){ animation-delay:.06s; }
  .perf-card:nth-of-type(3){ animation-delay:.12s; }
}

/* ── LIGHT MODE · sombras y glows adaptados ── */
:root[data-theme="light"] .rep-tile:hover{ box-shadow:0 10px 24px -14px rgba(15,23,42,0.28); }
:root[data-theme="light"] .noxc-tip{ box-shadow:0 8px 20px -10px rgba(15,23,42,0.30); }
:root[data-theme="light"] .nb-chart .bars span{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 0 8px rgba(58,9,205,0.18); }
:root[data-theme="light"] .nb-chart .bars span.top{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 0 10px rgba(58,9,205,0.28); }
:root[data-theme="light"] .rep-col.is-top .rep-bar2{ box-shadow:0 0 12px -3px rgba(58,9,205,0.35); }
:root[data-theme="light"] .rt-spark span:last-child{ box-shadow:0 0 6px -1px currentColor; }
:root[data-theme="light"] .rt-spark span{ filter:saturate(1.1) brightness(0.94); }
:root[data-theme="light"] .rep-spark-svg{ filter:drop-shadow(0 2px 4px rgba(15,23,42,0.14)); }