/* ============================================================
   Lucent — sistema visual v2
   iOS-friendly: fondo agrupado, tarjetas redondeadas, control
   segmentado con thumb deslizante, chips de color por categoría
   y cuenta. Modo claro / oscuro automático. El color aporta
   energía; el verde/rojo siguen comunicando estado.
   ============================================================ */

:root{
  color-scheme: light dark;

  --bg:          #F2F2F7;
  --surface:     #FFFFFF;
  --text:        #1C1C1E;
  --text-dim:    #8A8A8E;
  --text-faint:  #AEAEB4;
  --separator:   rgba(60,60,67,0.11);

  --accent:      #5B5BD6;
  --positive:    #34C759;
  --negative:    #FF3B30;
  --positive-bg: rgba(52,199,89,0.14);
  --negative-bg: rgba(255,59,48,0.12);

  --hero-grad: linear-gradient(145deg,#5A5AE6 0%,#7A5CF0 40%,#B45CEF 74%,#F06CB0 116%);

  --shadow:      0 1px 2px rgba(0,0,0,0.04), 0 12px 30px -16px rgba(0,0,0,0.18);
  --card-border: 1px solid rgba(0,0,0,0.035);

  --fill:        rgba(118,118,128,0.12);
  --seg-thumb:   #FFFFFF;
  --seg-shadow:  0 1px 4px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.04);

  --radius-card: 22px;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:          #000000;
    --surface:     #1C1C1E;
    --text:        #FFFFFF;
    --text-dim:    #98989F;
    --text-faint:  #6B6B70;
    --separator:   rgba(255,255,255,0.09);

    --positive:    #30D158;
    --negative:    #FF453A;
    --positive-bg: rgba(48,209,88,0.18);
    --negative-bg: rgba(255,69,58,0.18);

    --shadow:      0 1px 2px rgba(0,0,0,0.5), 0 14px 34px -16px rgba(0,0,0,0.7);
    --card-border: 1px solid rgba(255,255,255,0.07);

    --fill:        rgba(118,118,128,0.24);
    --seg-thumb:   #636366;
    --seg-shadow:  0 1px 4px rgba(0,0,0,0.45);
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}

button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }

.page{
  max-width:480px;
  margin:0 auto;
  padding:0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
}

/* ---------- Header (translúcido, fijo) ---------- */
.top{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 4px 12px;
  margin-bottom:6px;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
}
.brand{ display:flex; align-items:center; gap:8px; }
.logo-dot{
  width:16px; height:16px; border-radius:6px;
  background:var(--hero-grad);
  box-shadow:0 2px 10px -1px rgba(123,92,240,0.6);
}
.wordmark{
  font-family:var(--serif);
  font-size:1.12rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.greeting{ font-size:0.8rem; color:var(--text-dim); font-weight:500; }

/* ---------- Ritmo de secciones ---------- */
section{ margin-bottom:14px; }

.card{
  background:var(--surface);
  border:var(--card-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  padding:18px;
}

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.section-head h2{ font-size:1.02rem; font-weight:700; letter-spacing:-0.01em; }
.sub{ font-size:0.75rem; color:var(--text-faint); font-weight:500; white-space:nowrap; }

.label{
  font-size:0.78rem;
  color:var(--text-dim);
  font-weight:500;
}

/* ---------- Control segmentado (periodo + cuenta) ---------- */
.segmented{
  position:relative;
  display:flex;
  gap:2px;
  padding:3px;
  background:var(--fill);
  border-radius:12px;
  margin-bottom:14px;
}
.segmented.small{ margin:2px 0 14px; }
.segmented-thumb{
  position:absolute;
  left:0; top:3px; bottom:3px;
  width:0;
  border-radius:9px;
  background:var(--seg-thumb);
  box-shadow:var(--seg-shadow);
  transition:transform .30s cubic-bezier(.32,.72,0,1), width .30s cubic-bezier(.32,.72,0,1);
  z-index:0;
}
.segmented button{
  position:relative;
  z-index:1;
  flex:1 1 0;
  padding:7px 4px;
  font-size:0.8rem;
  font-weight:600;
  color:var(--text-dim);
  border-radius:9px;
  white-space:nowrap;
  transition:color .25s ease, transform .12s ease;
}
.segmented button.active{ color:var(--text); }
.segmented button:active{ transform:scale(0.93); }

/* ---------- Hero: patrimonio neto ---------- */
.hero-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:26px;
  padding:22px 22px 24px;
  background:var(--hero-grad);
  color:#fff;
  box-shadow:0 18px 40px -18px rgba(123,92,240,0.65);
}
.hero-card .label{ color:rgba(255,255,255,0.82); }
.hero-glow{ position:absolute; inset:0; z-index:-1; }
.hero-glow::before,
.hero-glow::after{ content:''; position:absolute; border-radius:50%; filter:blur(46px); }
.hero-glow::before{
  width:220px; height:220px; top:-120px; right:-70px;
  background:rgba(255,255,255,0.35);
}
.hero-glow::after{
  width:200px; height:200px; bottom:-130px; left:-60px;
  background:rgba(255,120,190,0.45);
}
.hero-number{
  margin-top:6px;
  font-size:clamp(2.5rem, 11vw, 3.25rem);
  font-weight:700;
  letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums;
  line-height:1.04;
}
.hero-delta{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:999px;
  font-size:0.82rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* ---------- Ingresos / Gastos ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.stat-card{
  background:var(--surface);
  border:var(--card-border);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:15px 15px 16px;
}
.stat-icon{
  width:32px; height:32px;
  border-radius:10px;
  display:grid; place-items:center;
  margin-bottom:10px;
  color:#fff;
}
.stat-card.income .stat-icon{ background:linear-gradient(160deg,#3ddc72,#28ab4c); }
.stat-card.spending .stat-icon{ background:linear-gradient(160deg,#ffb14a,#f7852b); }
.stat-icon svg{ width:18px; height:18px; }
.split-number{
  margin-top:6px;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.split-delta{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:999px;
  font-size:0.72rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.split-delta.positive{ color:var(--positive); background:var(--positive-bg); }
.split-delta.negative{ color:var(--negative); background:var(--negative-bg); }

/* ---------- Barras por categoría ---------- */
.bar-list{ display:flex; flex-direction:column; gap:15px; }
.bar-row{ display:flex; flex-direction:column; gap:8px; }
.bar-row-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.88rem;
}
.bar-row-head .cat-name{ font-weight:500; }
.bar-row-head .amount{
  margin-left:auto;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.chip{
  width:30px; height:30px;
  flex-shrink:0;
  border-radius:9px;
  display:grid; place-items:center;
  color:#fff;
  background:var(--c);
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
}
.chip svg{ width:17px; height:17px; }
.bar-track{
  height:8px;
  background:var(--fill);
  border-radius:999px;
  overflow:hidden;
}
.bar-fill{
  width:0;
  height:100%;
  border-radius:999px;
  background:var(--c);
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
  transition:width .75s cubic-bezier(.32,.72,0,1);
}

/* ---------- Gráfico ---------- */
.chart-box{ position:relative; height:190px; margin-top:2px; }

/* ---------- Filas (cuentas / actividad) ---------- */
.row-list{ display:flex; flex-direction:column; }
.row{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  transition:opacity .2s ease;
}
.row:not(:last-child)::after{
  content:'';
  position:absolute;
  left:44px; right:0; bottom:0;
  height:1px;
  background:var(--separator);
}
.row .row-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.row .name{ font-size:0.9rem; font-weight:500; }
.row .meta{ font-size:0.74rem; color:var(--text-faint); }
.row .amount{
  margin-left:auto;
  font-size:0.9rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.row .amount.negative{ color:var(--negative); }
.row .amount-pill{
  margin-left:auto;
  font-size:0.82rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  padding:4px 9px;
  border-radius:999px;
}
.row .amount-pill.positive{ color:var(--positive); background:var(--positive-bg); }
.row .amount-pill.negative{ background:var(--fill); }
.row.selected .name{ color:var(--accent); font-weight:600; }
.row.dimmed{ opacity:0.34; }

.empty-state{
  font-size:0.85rem;
  color:var(--text-faint);
  padding:14px 0 2px;
}

/* ---------- Footer ---------- */
footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 4px 6px;
  font-size:0.74rem;
  color:var(--text-faint);
}
footer span:last-child{ font-family:var(--serif); font-style:italic; }

/* ---------- Movimiento ---------- */
.reveal{ animation:reveal .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes reveal{
  from{ opacity:0; transform:translateY(14px) scale(.99); }
  to{ opacity:1; transform:none; }
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- Login ---------- */
.login{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  padding:24px; background:var(--bg);
}
.login-card{
  width:100%; max-width:340px;
  background:var(--surface);
  border:var(--card-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  padding:28px 24px;
  text-align:center;
}
.login-card .brand{ justify-content:center; }
.login-sub{
  margin:6px 0 22px;
  font-family:var(--serif); font-style:italic;
  color:var(--text-dim); font-size:0.9rem;
}
.login-card form{ display:flex; flex-direction:column; gap:10px; }
.login-card input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--separator);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  font-size:0.95rem;
}
.login-card button{
  padding:12px 14px;
  border:0; border-radius:12px;
  background:var(--accent); color:#fff;
  font-weight:600; font-size:0.95rem;
  cursor:pointer;
}
.login-status{
  margin-top:14px; min-height:1.2em;
  font-size:0.82rem; color:var(--text-dim);
}
.linklike{
  border:0; background:none; padding:0;
  color:var(--text-faint); font:inherit; font-size:0.74rem;
  cursor:pointer; text-decoration:underline;
}
.section-head .linklike{ color:var(--accent); text-decoration:none; }

/* ---------- FAB + hoja inferior ---------- */
.fab{
  position:fixed; z-index:40;
  right:max(18px, env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:50%;
  background:var(--hero-grad); color:#fff; border:0;
  box-shadow:0 6px 20px -4px rgba(90,90,230,0.55);
  display:grid; place-items:center; cursor:pointer;
}
.fab svg{ width:24px; height:24px; }

.sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.sheet-panel{
  position:relative;
  width:100%; max-width:480px;
  max-height:88vh; overflow-y:auto;
  background:var(--surface);
  border-radius:22px 22px 0 0;
  border:var(--card-border);
  padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  animation:sheet-in .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes sheet-in{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }

.sheet-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sheet-head h3{ font-family:var(--serif); font-size:1.15rem; }
.sheet-body{ display:flex; flex-direction:column; gap:12px; }
.sheet-body label{ display:flex; flex-direction:column; gap:5px; font-size:0.78rem; color:var(--text-dim); }
.sheet-body input, .sheet-body select{
  width:100%; padding:11px 12px;
  border:1px solid var(--separator); border-radius:12px;
  background:var(--bg); color:var(--text); font-size:0.95rem; font-family:inherit;
}
.sheet-body > button[type="submit"], .sheet-body #acAdd{
  margin-top:4px; padding:12px; border:0; border-radius:12px;
  background:var(--accent); color:#fff; font-weight:600; font-size:0.95rem; cursor:pointer;
}
.sheet-status{ min-height:1.1em; font-size:0.8rem; color:var(--text-dim); }
.sheet-status.error{ color:var(--negative); }
.sheet-hint{ font-size:0.76rem; color:var(--text-faint); margin:-4px 0 4px; }

.seg-toggle{ display:flex; background:var(--fill); border-radius:12px; padding:3px; }
.seg-toggle button{
  flex:1; padding:8px; border:0; border-radius:9px; background:none;
  color:var(--text-dim); font:inherit; font-size:0.85rem; font-weight:600; cursor:pointer;
}
.seg-toggle button.active{ background:var(--seg-thumb); color:var(--text); box-shadow:var(--seg-shadow); }

#manageAccountList .row{ cursor:pointer; }
.row.tappable{ cursor:pointer; }
.row-del{
  border:0; background:var(--fill); color:var(--text-dim);
  width:26px; height:26px; border-radius:8px; margin-left:10px;
  font-size:0.8rem; cursor:pointer; flex-shrink:0;
}
.btn-danger{
  padding:11px; border:0; border-radius:12px;
  background:var(--negative-bg); color:var(--negative);
  font-weight:600; font-size:0.9rem; cursor:pointer;
}

@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; }
  .bar-fill{ transition:none; }
  .segmented-thumb{ transition:none; }
}

@media (max-width:360px){
  .segmented button{ font-size:0.74rem; }
  .split{ gap:9px; }
}