/* ──────────────────────────────────────
   POLISH · View transitions + onboarding + bento
   ────────────────────────────────────── */

/* === View Transitions (Chrome/Edge/Safari 18+) === */
::view-transition-old(root) {
  animation: vt-fade-out .18s ease-out forwards;
}
::view-transition-new(root) {
  animation: vt-fade-in .28s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* === Sidebar nav smooth highlight === */
.sidebar-item {
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.sidebar-item:hover {
  transform: translateX(1px);
}

/* === Bento hero for dashboard === */
.bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
  margin-bottom: 24px;
}
.bento-cell {
  position: relative;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--s1);
  border: 1px solid var(--b1);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bento-cell:hover {
  border-color: var(--b2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
/* Hairline top accent — subtle pink fade, signature detail from prod portal */
.bento-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 164, 65,0.35), transparent);
  opacity: .55;
  pointer-events: none;
  display: block;
}
.bento-cell.feature {
  grid-row: span 2;
  background:
    radial-gradient(circle at 75% 20%, rgba(217, 164, 65,0.18) 0%, transparent 60%),
    linear-gradient(160deg, var(--s1), #181818);
  border-color: rgba(217, 164, 65,0.18);
}
/* Gold accent hairline on top of GGR hero (replaces pink) */
.bento-cell.feature::before {
  background: linear-gradient(90deg, transparent, rgba(217, 164, 65,0.55), transparent);
  opacity: 0.7;
}
.bento-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 10px;
}
.bento-val {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* Gold only for GGR hero (the primary KPI). Everything else keeps neutral ink. */
.bento-cell.feature .bento-val {
  font-size: 48px;
  letter-spacing: -0.03em;
  color: #D9A441;
}

/* Purple variant for the Budget hero (Stake projection). Same FX as the gold
   GGR feature on the dashboard, swapping the warm gold for a pale purple so
   the eye instantly tells "this is the budget page", not the dashboard. */
.bento-cell.feature--stake {
  background:
    radial-gradient(circle at 75% 20%, rgba(142, 130, 196,0.20) 0%, transparent 60%),
    linear-gradient(160deg, var(--s1), #181818);
  border-color: rgba(142, 130, 196,0.22);
}
.bento-cell.feature--stake::before {
  background: linear-gradient(90deg, transparent, rgba(142, 130, 196,0.60), transparent);
  opacity: 0.75;
}
.bento-cell.feature--stake .bento-val {
  color: #C4B5FD;
  text-shadow: 0 0 24px rgba(142, 130, 196,0.28);
}
/* "Mejores días del mes" cards — values in the same warm gold as GGR hero
   so the user instantly identifies them as record/highlight figures. */
.best-day-card .val,
.best-day-card .val.xl {
  color: #D9A441;
  text-shadow: 0 0 18px rgba(217, 164, 65, 0.25);
}
.bento-sub {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bento-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Geist Mono', 'SF Mono', monospace;
}
.bento-delta.up { color: #4ADE80; background: rgba(63, 185, 128, 0.1); }
.bento-delta.down { color: #FCA5A5; background: rgba(224, 87, 91, 0.1); }
.bento-spark {
  margin-top: 10px;
  height: 36px;
  width: 100%;
  display: block;
}
.bento-spark path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The svg is stretched horizontally, so without this the stroke ends up
     visibly fatter on the horizontal runs than on the vertical ones. */
  vector-effect: non-scaling-stroke;
}
.bento-spark .area {
  stroke: none;
  /* fill comes from the per-card gradient id set inline in _sparkSvg */
}
/* Marker dots. They are HTML, not <circle>, precisely so a wider viewport
   cannot stretch them: the svg around them scales freely, these keep their
   pixel size and stay round at any width. */
.spark-box {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 10px;
}
.spark-box .bento-spark {
  height: 100%;
  margin-top: 0;
}
.spark-pt {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
}
.spark-pt--max { opacity: .5; }
.spark-pt--last { box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
.spark-pt--open {
  background: var(--s1);
  border: 1.5px solid currentColor;
}

/* The hero cells are a flex column so the sparkline can sit at the BOTTOM.
   The GGR feature spans two rows and its content used to hug the top, which
   left roughly half the card empty. */
.bento-cell {
  display: flex;
  flex-direction: column;
}
.bento-spark-wrap {
  margin-top: auto;
  padding-top: 14px;
}
.bento-cell.feature .spark-box {
  height: 96px;
}
.bento-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t5);
}

/* Run context under the GGR number: best month and monthly average. Small,
   mono, right-aligned values so they read as reference and never compete
   with the hero figure. */
.bento-facts {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--b1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bento-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.bento-fact-k {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
}
.bento-fact-v {
  font-size: 13px;
  font-weight: 700;
  color: var(--t2);
  font-variant-numeric: tabular-nums;
}
.bento-fact-v em {
  font-style: normal;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t4);
  margin-left: 4px;
}

@media (max-width: 860px) {
  .bento {
    grid-template-columns: 1fr 1fr;
  }
  .bento-cell.feature {
    grid-row: auto;
    grid-column: span 2;
  }
}

/* Evolution view — top KPI strip (GGR / Stake / Depósitos / FTD).
   Hardcoded inline as a 4-col grid before, now responsive. */
.bento-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 860px) {
  .bento-kpi-strip {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .bento-kpi-strip .bento-cell.feature {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .bento-kpi-strip {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .bento-kpi-strip .bento-cell.feature {
    grid-column: auto;
  }
}

/* === Animated counter === */
.count-up {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* === Onboarding tour === */
.ob-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9996;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.ob-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.ob-backdrop.no-target {
  background: rgba(3, 6, 12, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ob-spotlight {
  position: fixed;
  z-index: 9997;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(3, 6, 12, 0.65);
  pointer-events: none;
  transition: top .32s cubic-bezier(.2, .7, .2, 1),
              left .32s cubic-bezier(.2, .7, .2, 1),
              width .32s cubic-bezier(.2, .7, .2, 1),
              height .32s cubic-bezier(.2, .7, .2, 1),
              opacity .22s ease;
  border: 2px solid rgba(217, 164, 65, .55);
  background: transparent;
  opacity: 0;
}
.ob-spotlight.on { opacity: 1; }
.ob-tip {
  position: fixed;
  z-index: 9998;
  width: 320px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, rgba(24, 28, 38, .98) 0%, rgba(16, 20, 28, .98) 100%);
  border: 1px solid rgba(217, 164, 65, .2);
  border-radius: 14px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(217, 164, 65, 0.06);
  color: var(--t1);
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0;
  transform: translateY(6px);
}
.ob-tip.open {
  opacity: 1;
  transform: translateY(0);
}
.ob-tip-step {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  font-family: 'Geist Mono', 'SF Mono', monospace;
}
.ob-tip-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--t1);
}
.ob-tip-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t2);
  margin-bottom: 14px;
}
.ob-tip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ob-tip-progress {
  display: flex;
  gap: 4px;
}
.ob-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  transition: background .2s ease, width .2s ease;
}
.ob-dot.active {
  background: var(--gold);
  width: 14px;
  border-radius: 3px;
}
.ob-btn {
  background: var(--gold);
  color: #0B1120;
  border: 0;
  padding: 6px 14px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .1s ease, box-shadow .1s ease;
}
.ob-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(217, 164, 65, .25);
}
.ob-btn.ghost {
  background: transparent;
  color: var(--t3);
  font-weight: 500;
}
.ob-btn.ghost:hover {
  color: var(--t1);
  transform: none;
  box-shadow: none;
}

/* === Toast (welcome + milestones) === */
.toast-wrap {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9500;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast {
  min-width: 240px;
  max-width: 360px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(24, 28, 38, .98) 0%, rgba(16, 20, 28, .98) 100%);
  border: 1px solid rgba(217, 164, 65, 0.2);
  border-radius: 10px;
  color: var(--t1);
  font-size: 13px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .24s ease, transform .24s cubic-bezier(.2,.7,.2,1);
}
.toast.open {
  opacity: 1;
  transform: translateX(0);
}
.toast-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}
.toast-body {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.4;
}