/* ════════════════════════════════════════════════════════════════════
   NV Gestor 6.2 · Panel principal (nv-panel-620.css)
   Solo tokens del tema (--bg…, --text…, --border, --accent, --green,
   --amber, --red, --nv-accent-rgb). Animaciones con transform/opacity.
   ════════════════════════════════════════════════════════════════════ */
#page-dashboard {
  --nv62-ease: cubic-bezier(.2, .8, .2, 1);
  --nv62-spring: cubic-bezier(.34, 1.36, .64, 1);
  --nv62-soft: rgba(var(--nv-accent-rgb, 139, 147, 255), .10);
  --nv62-line: rgba(var(--nv-accent-rgb, 139, 147, 255), .22);
}

/* 1 · Tarjetas de arriba: brillo que sigue al puntero y número que sube */
#dashboard-stats .p4-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--nv62-mx, 50%) var(--nv62-my, 50%), color-mix(in srgb, var(--c, var(--accent)) 16%, transparent), transparent 70%);
  transition: opacity .3s var(--nv62-ease);
}
#dashboard-stats .p4-card:hover::after { opacity: 1; }
#dashboard-stats .p4-card > * { position: relative; z-index: 1; }
#dashboard-stats .p4-num { font-variant-numeric: tabular-nums; }

/* 2 · Pulso de hoy */
.nv62-pulso {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: stretch;
  margin: 0 28px 18px; min-width: 0;
}
.nv62-p {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; cursor: pointer;
  padding: 13px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2);
  font: inherit; overflow: hidden;
  transition: border-color .2s, background .2s, transform .22s var(--nv62-spring), box-shadow .22s;
}
.nv62-p:hover { border-color: var(--nv62-line); transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(var(--nv-accent-rgb, 139, 147, 255), .6); }
.nv62-p:active { transform: translateY(0) scale(.99); }
.nv62-p:focus-visible, .nv62-ref:focus-visible, .nv62-fold:focus-visible { outline: 2px solid var(--nv62-line); outline-offset: 2px; }
.nv62-p-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--text3); min-width: 0; }
.nv62-p-h > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv62-p-h svg { color: var(--accent2, var(--accent)); flex-shrink: 0; }
.nv62-p-v { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.nv62-p-v b { font-size: 22px; font-weight: 800; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.nv62-p-v small { font-size: 11.5px; color: var(--text3); min-width: 0; }
.nv62-bar { display: block; height: 5px; border-radius: 99px; background: var(--bg3, rgba(127,127,127,.15)); overflow: hidden; margin-top: auto; }
.nv62-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--green, var(--accent)); transform-origin: left; animation: nv62Grow .7s var(--nv62-ease) both; }
@keyframes nv62Grow { from { transform: scaleX(0); } }
.nv62-spark { display: block; width: 100%; height: 30px; margin-top: auto; overflow: visible; }
.nv62-spark .a { fill: var(--nv62-soft); stroke: none; }
.nv62-spark .l { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; animation: nv62Draw .9s var(--nv62-ease) both; }
.nv62-spark circle { fill: var(--accent); }
@keyframes nv62Draw { from { stroke-dashoffset: 1; } }
.nv62-live {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 92px; padding: 10px 8px;
  border-radius: 16px; border: 1px dashed var(--border); color: var(--text3); font-size: 11px; font-weight: 600; text-align: center;
}
.nv62-live > i { width: 7px; height: 7px; border-radius: 50%; background: var(--green, var(--accent)); animation: nv62Pulse 2.4s ease-out infinite; }
.nv62-live-ic { display: none; }
@keyframes nv62Pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green, #3c9) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.nv62-ref { width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text2); display: grid; place-items: center; cursor: pointer; transition: background .16s, color .16s; }
.nv62-ref:hover { background: var(--nv62-soft); color: var(--accent2, var(--accent)); }
.nv62-ref.gira svg { animation: nv62Spin .6s var(--nv62-ease); }
@keyframes nv62Spin { to { transform: rotate(360deg); } }
.nv62-nuevo .nv62-p, .nv62-nuevo .nv62-live { animation: nv62In .46s var(--nv62-ease) both; animation-delay: calc(var(--i, 4) * 45ms); }
@keyframes nv62In { from { opacity: 0; transform: translateY(8px); } }

/* 3 · Secciones plegables */
.nv62-fold {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2);
  display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; margin-left: 6px; align-self: center;
  transition: background .16s, color .16s, transform .16s var(--nv62-spring);
}
.nv62-fold:hover { background: var(--nv62-soft); color: var(--accent2, var(--accent)); }
.nv62-fold svg { transition: transform .3s var(--nv62-spring); }
.nv62-plegada .nv62-fold svg { transform: rotate(-90deg); }
#nvp-analisis.nv62-plegada > :not(.nvp-hd), #nvx-neg.nv62-plegada > :not(.nvx-neg-h) { display: none !important; }
#nvp-analisis.nv62-plegada .nvp-hd-act .nvp-btn { display: none; }
.nv62-abre > :not(header) { animation: nv62In .36s var(--nv62-ease) both; }
.nvx-neg-h { display: flex; align-items: center; }
.nvx-neg-h > div { flex: 1; min-width: 0; }

/* Tamaños */
@media (max-width: 1100px) {
  .nv62-pulso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv62-live { grid-column: 1 / -1; flex-direction: row; min-width: 0; padding: 6px 10px; }
}
@media (max-width: 600px) {
  .nv62-pulso { gap: 8px; margin: 0 14px 14px; }
  .nv62-p { padding: 11px 12px; border-radius: 14px; }
  .nv62-p-v b { font-size: 20px; }
  .nv62-p-v small { font-size: 11px; }
}
@media (pointer: coarse) { .nv62-ref, .nv62-fold { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .nv62-p, .nv62-fold, .nv62-fold svg, #dashboard-stats .p4-card::after { transition: none !important; }
}
@media (max-width: 600px) {
  #nvp-analisis > .nvp-hd { position: relative; }
  #nvp-analisis > .nvp-hd > .nv62-fold { position: absolute; top: 0; right: 0; margin: 0; }
  #nvp-analisis > .nvp-hd > div:first-child { padding-right: 48px; }
}