:root{
  --bg:#f4f7f2; --card:#ffffff; --ink:#15211a; --muted:#5d6b62; --line:#e1e8e0; --soft:#f7faf6;
  --green:#0b7a40; --green-2:#14a05a; --green-dark:#064d29; --green-soft:#e2f5e8;
  --red:#d24b3e; --red-soft:#fde9e6; --gold:#e09a00; --gold-2:#ffc21a; --gold-soft:#fff3d1;
  --blue:#2f6fd0; --blue-soft:#e4eefc; --purple:#7a4fd6; --r:20px;
  --shadow:0 1px 2px rgba(10,40,20,.06),0 6px 18px rgba(10,40,20,.06);
}
html,body{font-size:17px;line-height:1.45}
/* ===== Estilo v3: colorido y de progreso ===== */
body{background:radial-gradient(1200px 400px at 50% -200px,#d9f5e3 0,var(--bg) 70%) no-repeat,var(--bg)}
header{padding:4px 2px 14px}
.brand{display:flex;align-items:center;gap:10px;font-size:23px;color:var(--green-dark)}
.brand .logo{width:42px;height:42px;border-radius:12px;box-shadow:0 4px 12px rgba(11,122,64,.3);flex:0 0 auto}
.brand small{font-size:13px}
.card{border:0;box-shadow:var(--shadow)}
h2{font-size:18px}
.btn{border-radius:16px;padding:14px 16px;font-size:17px}
.btn.primary{background:linear-gradient(135deg,var(--green-2),var(--green));box-shadow:0 6px 16px rgba(11,122,64,.28)}
.btn.small{font-size:15px}
.micbtn{background:linear-gradient(145deg,#1db868,var(--green));box-shadow:0 10px 28px rgba(11,122,64,.35),inset 0 -4px 0 rgba(0,0,0,.12);width:112px;height:112px}
.micbtn.on{background:linear-gradient(145deg,#ff6a57,var(--red))}
#micHint{font-weight:600;color:var(--ink)}
.chip{background:var(--green-soft);border-color:transparent;color:var(--green-dark);font-weight:600;font-size:14px;padding:8px 12px}
textarea{background:#fff;font-size:17px}
/* Tarjeta de total */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:18px 18px 16px;margin-bottom:12px;color:#fff;
  background:linear-gradient(135deg,#17a65e 0%,#0b7a40 55%,#065a30 100%);box-shadow:0 12px 28px rgba(6,90,48,.3)}
.hero .lbl{font-size:14px;font-weight:600;opacity:.9}
.hero .total{font-size:40px;font-weight:900;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.1;margin:2px 0 4px}
.hero .sub{font-size:14px;opacity:.92}
.hero .art{position:absolute;right:-8px;top:-6px;width:150px;height:120px;opacity:.95;pointer-events:none}
.hero .goalbar{margin-top:12px;background:rgba(255,255,255,.18);border-radius:14px;padding:10px 12px;cursor:pointer}
.hero .goalbar .t{display:flex;justify-content:space-between;font-size:14px;font-weight:700}
.hero .goalbar .p{height:10px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden;margin-top:6px}
.hero .goalbar .p div{height:100%;background:linear-gradient(90deg,var(--gold-2),#ffe680);border-radius:6px}
/* Bolsillos de colores */
.pocket{border:0;box-shadow:var(--shadow);border-radius:16px;padding:12px 14px;min-width:132px;position:relative;overflow:hidden}
.pocket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pc,#6b675e)}
.pocket .k{font-size:13px;font-weight:600;color:var(--ink)}
.pocket .v{font-size:20px}
.pocket .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;background:var(--pc,#6b675e)}
.pocket.add{box-shadow:none;border:2px dashed #c9d6cb;background:transparent}
.pocket.add::before{display:none}
/* Resumen y metas */
.stat{border:0;background:var(--soft)}
.stat .v.in{color:var(--green)}
.stat.tax{background:linear-gradient(135deg,var(--gold),#c27800)} .stat.tax .k{color:#fff4d6}
.progress{height:14px;background:#e6efe7}
.progress div{background:linear-gradient(90deg,var(--green-2),var(--gold-2))}
.fill.g{background:linear-gradient(90deg,var(--green-2),#4fd08a)}
.seg{border:0;box-shadow:var(--shadow)}
.seg button.sel{background:var(--green);color:#fff}
nav{border-top:0;box-shadow:0 -4px 18px rgba(10,40,20,.08)}
nav button{font-size:12px}
nav button.sel{color:#fff;background:linear-gradient(135deg,var(--green-2),var(--green))}
.tabs2 button.sel{background:linear-gradient(135deg,var(--green-2),var(--green))}
.ok{background:linear-gradient(135deg,#e2f5e8,#fff3d1);color:var(--green-dark)}
/* Pantalla de bienvenida */
.welcome{text-align:center;padding:4px 4px 14px}
.welcome svg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.welcome h1{font-size:28px;line-height:1.15;letter-spacing:-.5px;margin:6px 0 6px;color:var(--green-dark)}
.welcome h1 span{background:linear-gradient(90deg,var(--green-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome p{margin:0 auto;max-width:360px;color:var(--muted)}
.perks{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.perks span{background:#fff;box-shadow:var(--shadow);border-radius:999px;padding:7px 12px;font-size:14px;font-weight:600}
#welcome:has(+ #auth.hidden){display:none}
@media (prefers-reduced-motion:no-preference){.welcome .float{animation:fl 4s ease-in-out infinite}.welcome .float2{animation:fl 5s ease-in-out infinite reverse}}
@keyframes fl{50%{transform:translateY(-8px)}}
/* Ponte al día */
.catchup{background:linear-gradient(135deg,#fff3d1,#ffffff 70%)}
.curow{display:grid;grid-template-columns:1fr 130px;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.curow:first-of-type{border-top:0}
.cuname{display:flex;gap:10px;align-items:center}
.cuname .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;background:var(--pc,#6b7a70);flex:0 0 auto}
.curow input.f{text-align:right;font-weight:700}
.hero .fix{background:none;border:0;color:#fff;text-decoration:underline;font-size:13px;padding:0;margin-left:6px;cursor:pointer;opacity:.9}
/* Botones de cuentas */
.acctbtns,.quick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.acct{display:inline-flex;align-items:center;gap:8px;border:0;background:#fff;box-shadow:var(--shadow);border-radius:999px;padding:8px 14px 8px 8px;font-weight:700;font-size:15px;cursor:pointer;color:var(--ink)}
.acct .ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;background:var(--pc,#6b7a70)}
.acct.add{background:transparent;box-shadow:none;border:2px dashed #b9cbbd;color:var(--green);padding:8px 14px}
/* Lista Movimientos | Pendientes */
.listhead{flex-wrap:wrap}
.seg.mini{margin:0;flex:1;min-width:220px;box-shadow:none;background:var(--soft)}
.seg.mini button{padding:8px 6px;font-size:15px;white-space:nowrap}
.seg.mini .cnt{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--gold-2);color:#3a2a00;font-size:12px;margin-left:2px}
.acts{display:flex;gap:6px}
.acts .iconbtn{width:38px;height:38px;color:var(--green)}
.link.block{display:block;width:100%;text-align:center;margin-top:8px}
.btn svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.printhead{display:none}
@media print{
  body{background:#fff!important}
  body.print-mode *{visibility:hidden}
  body.print-mode .printing,body.print-mode .printing *{visibility:visible}
  body.print-mode .printing{position:absolute;left:0;top:0;width:100%;box-shadow:none!important}
  body.print-mode .printing .acts,body.print-mode .printing .link,body.print-mode .printing button.btn{display:none!important}
  .printhead{display:block!important;font-size:14px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #ccc}
  nav,.toast{display:none!important}
}
/* Partidas */
.partida{padding:9px 0;border-top:1px solid var(--line);cursor:pointer}
.partida:first-of-type{border-top:0}
.ptop{display:flex;align-items:center;gap:8px}
.ptop b{flex:0 0 auto}
.pico{font-size:18px;width:26px;text-align:center}
.pn{flex:1;font-size:12px;color:var(--muted)}
.pv{font-weight:800;font-variant-numeric:tabular-nums}
.partida .track{margin:6px 0 0 34px}
.partida .fill{background:linear-gradient(90deg,#ff8a6b,var(--red))}
.pdet{margin:8px 0 2px 34px;background:var(--soft);border-radius:12px;padding:6px 10px}
.pit{display:grid;grid-template-columns:1fr auto auto;gap:10px;font-size:14px;padding:5px 0;border-top:1px dashed var(--line)}
.pit:first-child{border-top:0}
.pit span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Respuesta a preguntas */
.answer{background:linear-gradient(135deg,#e4eefc,#fff 70%)}
.answer .q{font-size:14px;color:var(--muted);margin-bottom:6px}
.answer .a{font-size:19px;font-weight:700;line-height:1.35}
.chip.ask{background:#e4eefc;color:#1d4c9a}