/* ============================================================
   LevelUp Finance · styles.css (Tailwind-first)
   Solo lo que Tailwind CDN no puede cubrir:
   - Variables CSS para theming (light/dark)
   - Animaciones @keyframes
   - Estilos SVG para charts
   - Helpers mínimos para componentes dinámicos
   ============================================================ */

/* === Theme tokens === */
:root {
  --background: #ffffff;
  --foreground: #020817;
  --card: #ffffff;
  --card-foreground: #020817;
  --primary: #0f172a;
  --primary-foreground: #f8fafc;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #F26A78;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #94a3b8;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --green: #21A67A;
  --red: #E24A5A;
  --blue: #2F6BFF;
  --amber: #f59e0b;
  --violet: #8b5cf6;
  --card2: #f1f5f9;
  --line: #e2e8f0;
  --fg: #020817;
}
[data-theme="dark"] {
  --background: #09090b;
  --foreground: #f8fafc;
  --card: #0f1117;
  --card-foreground: #f8fafc;
  --primary: #f8fafc;
  --primary-foreground: #020817;
  --secondary: #1e293b;
  --secondary-foreground: #f8fafc;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --accent: #1e293b;
  --accent-foreground: #f8fafc;
  --border: #1f2937;
  --input: #1f2937;
  --ring: #64748b;
  --shadow: 0 1px 2px rgba(0,0,0,.24), 0 14px 34px rgba(0,0,0,.28);
  --card2: #1e293b;
  --line: #1f2937;
  --fg: #f8fafc;
}

/* === Base reset === */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none !important}

/* === Form elements (global) === */
input,select,textarea{
  width:100%;height:42px;background:var(--card);color:var(--foreground);
  border:1px solid var(--input);border-radius:10px;padding:0 12px;outline:none;
}
textarea{height:86px;padding:10px 12px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(148,163,184,.18)}
label{font-size:12px;font-weight:650;color:var(--muted-foreground);display:block;margin-bottom:6px}

/* === Sidebar transition === */
.sidebar-transition{transition:width .2s ease,min-width .2s ease,max-width .2s ease,transform .22s ease}
.main-transition{transition:margin-left .2s ease}

/* === Balance featured card === */
.balanceFeatured{
  position:relative;overflow:hidden;color:#fff;border:0;
  background:radial-gradient(circle at 86% 18%,rgba(255,255,255,.26),transparent 24%),linear-gradient(135deg,#0f172a 0%,#1e293b 45%,#2563eb 140%);
}
.balanceFeatured:after{
  content:'';position:absolute;width:160px;height:160px;right:-70px;top:-70px;border-radius:999px;background:rgba(255,255,255,.12);
}
.balanceFeatured .cardTitle,.balanceFeatured .sub,.balanceFeatured .big,.balanceFeatured .balanceHint{color:#fff;position:relative;z-index:1}

/* === SVG Chart styles === */
.svgChart{width:100%;height:auto;display:block;overflow:visible}
.svgChart rect{transition:transform .18s ease,opacity .18s ease;transform-box:fill-box;transform-origin:center bottom;cursor:pointer}
.svgChart rect:hover{transform:scaleY(1.08);opacity:.92;filter:drop-shadow(0 8px 10px rgba(15,23,42,.18))}
.axisText{fill:var(--muted-foreground);font-size:11px}
.netPositive{fill:#21A67A;color:#21A67A}
.netNegative{fill:#E24A5A;color:#E24A5A}
.netLineSvg{width:100%;height:auto;display:block;overflow:visible}

/* Animated SVG bars */
.upgradedSvgChart .animatedSvgBar{
  transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0);
  animation:growSvgBar .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--delay);cursor:pointer;
}
.upgradedSvgChart .animatedSvgBar:hover{filter:brightness(1.08) drop-shadow(0 8px 8px rgba(15,23,42,.15));opacity:.95}
.monthlySvgGroup .netMonth{font-size:10px;font-weight:800}

/* Net line */
.netLinePath{stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawTrend 1.3s ease forwards}
.netDot{opacity:0;animation:popDot .45s ease 1s forwards;stroke:var(--card);stroke-width:2}
.netDot.positive{fill:#21A67A}
.netDot.negative{fill:#E24A5A}

/* Mini trend */
.miniTrend{width:100%;height:auto;display:block;overflow:visible}
.trendLine{stroke-dasharray:420;stroke-dashoffset:420;animation:drawTrend 1.3s ease forwards}
.trendArea{opacity:0;animation:fadeInChart .9s ease .25s forwards}
.trendDot{opacity:0;transform-origin:center;animation:popDot .5s ease 1.2s forwards}

/* Ring circle (conic-gradient) */
.ringCircle{
  --deg:calc(var(--pct) * 3.6deg);
  width:82px;height:82px;border-radius:50%;
  background:conic-gradient(var(--ring) 0deg,var(--ring) var(--deg),var(--card2) var(--deg) 360deg);
  display:grid;place-items:center;position:relative;flex:0 0 82px;animation:ringSpin .9s ease both;
}
.ringCircle:after{content:'';position:absolute;inset:10px;background:var(--card);border-radius:50%;border:1px solid var(--line)}
.ringCircle div{position:relative;z-index:1;text-align:center;line-height:1}

/* Progress bars with animation */
.metricProgress{height:9px;background:var(--card2);border-radius:999px;margin-top:14px;overflow:hidden}
.metricProgress i{display:block;width:var(--w);height:100%;border-radius:999px;transform:scaleX(0);transform-origin:left center;animation:growBar .9s cubic-bezier(.2,.8,.2,1) forwards}
.metricProgress-income i{background:#21A67A}
.metricProgress-expense i{background:#E24A5A}
.metricProgress-positive i{background:#21A67A}
.metricProgress-negative i{background:#E24A5A}
.metricProgress-debt i{background:var(--blue)}

/* Bar line (progress bars in lists) */
.barLine{height:10px;border-radius:999px;background:var(--muted);overflow:hidden}
.barLine span{display:block;height:100%;border-radius:999px;transition:width .35s ease}
.barLine:hover span{filter:brightness(1.08)}

/* Top expense animated rows */
.topExpenseRow{animation:fadeSlideUp .5s ease both;animation-delay:var(--delay)}
.topExpenseBar{height:10px;background:var(--card2);border-radius:999px;overflow:hidden}
.topExpenseBar i{display:block;width:var(--w);height:100%;border-radius:999px;transform:scaleX(0);transform-origin:left center;animation:growBar .85s cubic-bezier(.2,.8,.2,1) forwards}

/* Chart.js doughnut */
.chartJsDoughnutCard{min-height:0}
.chartJsCanvasBox{width:260px;height:260px;flex:0 0 260px;position:relative}
.chartJsCanvasBox canvas{width:100% !important;height:100% !important}
.chartJsFallback{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--muted-foreground)}

/* Legend rows (for doughnut charts) */
.chartJsLegendRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,1.1fr) 100px 54px;gap:10px;align-items:center;padding:6px 0;animation:fadeSlideUp .5s ease both;animation-delay:var(--delay)}
.chartJsLegendRow .legendLabel{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--fg);min-width:0}
.chartJsLegendRow .legendLabel i{width:10px;height:10px;border-radius:999px;background:var(--c);flex:0 0 10px}
.chartJsLegendRow .legendLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chartJsLegendRow .legendBar{height:9px;background:var(--card2);border-radius:999px;overflow:hidden}
.chartJsLegendRow .legendBar em{display:block;height:100%;width:var(--w,50%);background:var(--c);border-radius:999px;transform:scaleX(0);transform-origin:left;animation:growBar .85s cubic-bezier(.2,.8,.2,1) forwards}
.chartJsLegendRow .legendSub{font-size:12px;color:var(--muted-foreground);font-weight:700;grid-column:1/-1;padding-left:18px}
.chartJsLegendRow b{font-size:13px;text-align:right;color:var(--fg)}
.chartJsLegendRow small{font-size:12px;text-align:right;color:var(--muted-foreground);font-weight:800}

/* Debt card colored border */
.cardDebtSummaryCard{border-left:4px solid var(--cardColor)}

/* Actions menu (3-dot dropdown) */
.actionsMenuWrapper{position:relative}
.actionsIconsDesktop{display:flex}
.actionsMenuBtn{display:none}
@media(max-width:1024px){.actionsIconsDesktop{display:none !important}.actionsMenuBtn{display:flex !important}}
.actionsMenu{position:absolute;top:100%;right:0;min-width:180px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:100;margin-top:6px;overflow:hidden;animation:slideDown .15s ease-out}
.actionsMenuItem{display:block;width:100%;padding:10px 14px;border:0;background:transparent;color:inherit;text-align:left;font-size:13px;font-weight:500;cursor:pointer;transition:background .1s;white-space:nowrap;font-family:inherit}
.actionsMenuItem:hover:not([disabled]){background:var(--accent)}

/* Mobile backdrop */
.mobileBackdrop{display:none}
@media(max-width:900px){
  .mobileBackdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.54);z-index:900;backdrop-filter:blur(1px)}
}

/* Mobile hamburger hidden by default */
.mobileMenuIconBtn{display:none}
@media(max-width:900px){.mobileMenuIconBtn{display:grid}}

/* Mobile logo hidden on desktop */
.mobileTopLogo{display:none}
@media(max-width:900px){.mobileTopLogo{display:grid}}

/* Mobile sidebar drawer */
@media(max-width:900px){
  .sidebar-mobile{position:fixed;left:0;top:0;bottom:0;width:min(320px,80vw) !important;min-width:0 !important;max-width:min(320px,80vw) !important;z-index:1000;transform:translateX(-110%);transition:transform .22s ease;box-shadow:24px 0 70px rgba(15,23,42,.24)}
  .sidebar-mobile.mobile-open{transform:translateX(0) !important;}
  .sidebar-collapsed-mobile{width:min(320px,80vw) !important;min-width:0 !important;max-width:min(320px,80vw) !important}
  .mobileOnly{display:inline-flex !important}
}

/* === Keyframes === */
@keyframes growBar{to{transform:scaleX(1)}}
@keyframes growSvgBar{to{transform:scaleY(1)}}
@keyframes drawTrend{to{stroke-dashoffset:0}}
@keyframes fadeInChart{to{opacity:1}}
@keyframes popDot{to{opacity:1;transform:scale(1)}}
@keyframes ringSpin{from{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* === Responsive overrides === */
@media(max-width:900px){
  .main-transition {
    margin-left: 0 !important;
  }
  .cards-responsive{grid-template-columns:1fr !important}
  .grid-responsive{grid-template-columns:1fr !important}
  .row-responsive{grid-template-columns:1fr !important}
  .topbar-mobile{
    display:grid !important;
    grid-template-columns:42px minmax(36px,1fr) auto;
    grid-template-areas:"menu logo actions" "search search search" "tabs tabs tabs";
    column-gap:10px;row-gap:10px;
  }
  .topbar-mobile .topTabs-area{grid-area:tabs}
  .topbar-mobile .search-area{grid-area:search}
  .topbar-mobile .actions-area{grid-area:actions;justify-self:end}
}
@media(max-width:560px){
  .row-responsive-sm{grid-template-columns:1fr !important}
}

/* === Debt overview cards left border === */
.debt-border-blue{border-left:4px solid #2563eb}
.debt-border-amber{border-left:4px solid #f59e0b}