/* css/app.css — Sistema de diseño Papá con Metas (web app planificador).
 * Fuente de verdad visual: files/diseno/sistema-de-diseno.md
 * Paleta: verde #123b35 · crema #fffdf4 · dorado #e7c97f · Sora + Inter.
 * Mobile-first 360–390px · app centrada max 430px · target táctil ≥44px · contraste AA.
 */

/* ============ 1. TOKENS ============ */
:root{
  /* Marca (intocables) */
  --brand-green:#123b35;
  --brand-cream:#fffdf4;
  --brand-gold:#e7c97f;
  /* Verdes funcionales */
  --green-950:#0b211d;
  --green-900:#123b35;
  --green-700:#1e4a43;
  --green-100:#dcebe2;
  --green-50:#eef5f0;
  /* Cremas y superficies */
  --cream:#fffdf4;
  --cream-deep:#faf4e3;
  --card:#ffffff;
  --border:#e7dcc0;
  --border-soft:#f0e8d2;
  /* Texto */
  --ink:#1d2a25;
  --ink-soft:#4c5b54;
  --ink-mute:#85917f;
  --on-green:#fffdf4;
  --on-green-soft:#c4d4cb;
  /* Semánticos (cálidos, nada corporativo) */
  --success:#2e7d4f;
  --warn:#b97f1f;
  --alert-orange:#c96a1f; /* tramo 🟠 ajuste */
  --danger:#b3402e;
  --info:#1e4a43;
  /* Dorado */
  --gold:#e7c97f;
  --gold-deep:#8a5a12;
  --gold-soft:#f7ead0;
  /* Sombras */
  --sh-sm:0 1px 4px rgba(18,59,53,.06);
  --sh-md:0 2px 12px rgba(18,59,53,.07);
  --sh-lg:0 8px 28px rgba(11,33,29,.35);
  /* Radios */
  --r-card:16px; --r-input:12px; --r-hero:20px;
}

/* ============ 2. BASE ============ */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream-deep);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink); font-size:15px; line-height:1.45;
}
.num, .kpi-val, .hero-num, td.monto, .mov-amt{font-variant-numeric:tabular-nums;}
button{font-family:inherit; touch-action:manipulation;}
img{max-width:100%;}

/* Focus visible (accesibilidad §6.5) */
:focus-visible{outline:3px solid rgba(18,59,53,.35); outline-offset:2px; border-radius:8px;}

.app{max-width:430px; margin:0 auto; background:var(--cream); min-height:100vh;
  position:relative; padding-bottom:120px; box-shadow:0 0 40px rgba(18,59,53,.10);}

/* ============ 3. HEADER / WORDMARK ============ */
.appbar{position:sticky; top:0; z-index:50;
  background:linear-gradient(160deg,#16453d,var(--green-950));
  padding:12px 16px; border-bottom:1px solid rgba(231,201,127,.25);}
.appbar-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.wordmark{font-family:'Sora',sans-serif; font-weight:700; font-size:19px;
  color:var(--on-green); text-decoration:none; letter-spacing:-.2px; line-height:1.1;}
.wordmark em{font-style:normal; color:var(--gold);} /* solo "con" en dorado */
.wordmark small{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:10px;
  letter-spacing:2.5px; color:var(--on-green-soft); text-transform:uppercase; margin-top:2px;}
.hcontrols{display:flex; align-items:center; gap:8px;}
.lang{display:flex; background:rgba(255,253,244,.14); border-radius:999px; padding:2px;}
.lang button{border:0; background:transparent; color:var(--on-green-soft);
  font-weight:600; font-size:11px; padding:7px 12px; border-radius:999px; cursor:pointer; min-height:32px;}
.lang button.on{background:var(--gold); color:var(--green-950);}
.curr{background:rgba(255,253,244,.14); color:var(--on-green);
  border:1px solid rgba(255,253,244,.2); border-radius:999px;
  font-weight:600; font-size:11px; padding:7px 8px; cursor:pointer; min-height:32px;}
.curr option{color:#123b35;}

/* Banner demo (persistente) */
.demo-banner{background:var(--gold-soft); color:var(--gold-deep);
  font-size:12px; font-weight:600; text-align:center; padding:8px 16px;
  border-bottom:1px solid var(--border);}
.demo-banner small{display:block; font-weight:500; font-size:11px;}

/* ============ 4. PANTALLAS ============ */
#screen{min-height:60vh;}
.screen{display:none; padding:16px 16px 8px; animation:fade .25s ease;}
.screen.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .screen{animation:none;} *{transition:none !important;} }
.screen-title{font-family:'Sora',sans-serif; font-weight:700; font-size:22px; margin:4px 0 2px; letter-spacing:-.3px;}
.screen-sub{color:var(--ink-soft); font-size:13.5px; margin:0 0 16px;}
.sec-title{font-family:'Sora',sans-serif; font-weight:700; font-size:17px;
  margin:24px 0 10px; display:flex; align-items:center; gap:8px;}
.sec-title .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none;}

/* ============ 5. HERO (sobre verde) ============ */
.hero{background:linear-gradient(160deg,#16453d,var(--green-950));
  border:1px solid rgba(231,201,127,.25); border-radius:var(--r-hero);
  padding:20px 18px; color:var(--on-green); box-shadow:var(--sh-lg); margin-bottom:14px;}
.hero-label{font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--on-green-soft);}
.hero-num{font-family:'Sora',sans-serif; font-weight:800; font-size:40px; letter-spacing:-1px; margin:6px 0 2px;}
.hero-num .cur{font-size:24px; color:var(--gold); font-weight:700;}
.hero-note{font-size:13px; color:var(--on-green-soft); margin:0;}
.hero-row{display:flex; gap:10px; margin-top:14px;}
.hero-mini{flex:1; background:rgba(255,253,244,.08); border:1px solid rgba(255,253,244,.14);
  border-radius:12px; padding:10px 12px; min-width:0;}
.hero-mini .l{font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--on-green-soft); font-weight:600;}
.hero-mini .v{font-family:'Sora',sans-serif; font-weight:700; font-size:19px; margin-top:2px;}
.hero-mini .v.gold{color:var(--gold);}

/* ============ 6. KPI CARDS ============ */
.kpi-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.kpi-scroll{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.kpi-scroll .kpi{flex:0 0 68%; scroll-snap-align:start;}
.kpi{background:var(--card); border:1px solid var(--border-soft); border-radius:var(--r-card);
  padding:14px; box-shadow:var(--sh-sm); min-width:0;}
.kpi .k-label{font-size:10.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-mute);}
.kpi .kpi-val{font-family:'Sora',sans-serif; font-weight:700; font-size:23px; margin:4px 0 2px; letter-spacing:-.5px;}
.kpi .k-sub{font-size:12px; color:var(--ink-soft);}
.kpi .k-sub b{color:var(--ink);}
.kpi.destacada{border:1.5px solid var(--green-900);}

/* ============ 7. CARDS GENÉRICAS ============ */
.card{background:var(--card); border:1px solid var(--border-soft); border-radius:var(--r-card);
  padding:16px; box-shadow:var(--sh-sm); margin-bottom:12px;}
.card h3{font-family:'Sora',sans-serif; font-size:15.5px; margin:0 0 4px;}
.card p.desc{font-size:13px; color:var(--ink-soft); margin:0 0 10px;}
.card-dark{background:linear-gradient(160deg,#16453d,var(--green-950)); color:var(--on-green);
  border:1px solid rgba(231,201,127,.25);}
.divider{height:1px; background:var(--border-soft); margin:14px 0;}

/* ============ 8. BOTONES ============ */
.btn{display:flex; align-items:center; justify-content:center; width:100%;
  border:0; border-radius:14px; min-height:52px; padding:12px 16px;
  font-weight:600; font-size:15px; cursor:pointer; transition:transform .08s ease; text-decoration:none;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--green-900); color:var(--on-green); box-shadow:var(--sh-md);}
.btn-primary:hover{background:var(--green-700);}
.btn-gold{background:var(--brand-gold); color:var(--green-950); box-shadow:0 4px 14px rgba(185,127,31,.35);}
.btn-secondary{background:transparent; color:var(--green-900); border:1.5px solid var(--green-900);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-ghost-danger{background:none; border:0; color:var(--danger); font-weight:600; font-size:14px;
  cursor:pointer; padding:10px 4px; min-height:44px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn-row{display:flex; gap:10px;}
.btn-row .btn{flex:1;}
.btn-sm{min-height:44px; font-size:13.5px; border-radius:12px; width:auto; padding:10px 18px;}
.spinner{display:inline-block; width:16px; height:16px; border:2px solid rgba(255,253,244,.4);
  border-top-color:var(--on-green); border-radius:50%; animation:spin .7s linear infinite; margin-right:8px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ 9. FORMULARIOS ============ */
.field{margin-bottom:12px;}
.field label{display:block; font-size:11.5px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;}
.field label .req{color:var(--danger);}
.field input, .field select, .field textarea{
  width:100%; min-height:52px; border:1.5px solid var(--border); border-radius:var(--r-input);
  background:#fff; padding:12px 14px; font-weight:500; font-size:15px; font-family:'Inter',sans-serif; color:var(--ink);
  appearance:none;}
.field textarea{min-height:96px; resize:vertical;}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23123b35' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--green-900); box-shadow:0 0 0 3px rgba(18,59,53,.12);}
.field input.input-error, .field select.input-error{border-color:var(--danger);}
.field-hint{font-size:12px; color:var(--ink-mute); margin:6px 0 0;}
.field-error{font-size:13px; color:var(--danger); margin:6px 0 0; font-weight:500;}
.input-money{position:relative;}
.input-money>span{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--ink-soft);}
.input-money input{padding-left:34px;}

/* ============ 10. BARRAS ============ */
.bar-row{margin:10px 0;}
.bar-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; gap:8px;}
.bar-top b{font-weight:600;}
.bar-track{height:9px; border-radius:999px; background:var(--cream-deep); overflow:hidden;}
.bar-track.on-dark{background:rgba(255,253,244,.18);}
.bar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--green-700),var(--green-900)); transition:width .6s ease;}
.bar-fill.ok{background:linear-gradient(90deg,#3d9a63,var(--success));}
.bar-fill.warn{background:linear-gradient(90deg,#d9a63f,var(--warn));}
.bar-fill.high{background:linear-gradient(90deg,#d98a3f,var(--alert-orange));}
.bar-fill.bad{background:linear-gradient(90deg,#c65a44,var(--danger));}
.bar-fill.gold{background:linear-gradient(90deg,#d9b45c,var(--gold));}

/* ============ 11. CHIPS / BADGES ============ */
.chip{display:inline-block; font-size:11px; font-weight:600; padding:5px 10px; border-radius:999px;}
.chip.ok{background:rgba(46,125,79,.12); color:var(--success);}
.chip.warn{background:rgba(185,127,31,.13); color:var(--warn);}
.chip.high{background:rgba(201,106,31,.14); color:var(--alert-orange);}
.chip.bad{background:rgba(179,64,46,.12); color:var(--danger);}
.chip.info{background:rgba(30,74,67,.10); color:var(--green-700);}
.chip.gold{background:var(--gold-soft); color:var(--gold-deep);}
.chip-fijo{background:var(--green-100); color:var(--green-900);}
.chip-variable{background:var(--cream-deep); color:var(--ink-soft);}
.chip-hormiga{background:var(--gold-soft); color:var(--gold-deep);}
.chip-tarjeta{background:#fff; border:1px solid var(--green-900); color:var(--green-900);}

/* ============ 12. TERMÓMETRO (4 tramos corregidos: real/esperado) ============ */
.thermo{margin:6px 0 4px;}
.thermo-scale{height:14px; border-radius:999px; position:relative;
  background:linear-gradient(90deg,
    var(--success) 0%, var(--success) 69.2%,
    var(--warn) 69.2%, var(--warn) 76.9%,
    var(--alert-orange) 76.9%, var(--alert-orange) 84.6%,
    var(--danger) 84.6%, var(--danger) 100%);}
/* marcas en 90% y 110% (escala 0–130%) */
.thermo-scale::before,.thermo-scale::after{content:''; position:absolute; top:-4px; bottom:-4px; width:2px; background:#fff;}
.thermo-scale::before{left:69.2%;}
.thermo-scale::after{left:84.6%;}
.thermo-marker{position:absolute; top:-7px; width:4px; height:28px; background:var(--ink);
  border-radius:2px; transform:translateX(-2px); transition:left .6s ease;}
.thermo-labels{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-mute); margin-top:8px; font-weight:600;}
.thermo-msg{font-size:14px; margin:10px 0 0; font-weight:500;}
.thermo-tramo{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px; margin-bottom:6px;}

/* ============ 13. BOTTOM NAV (5 tabs) ============ */
.bottomnav{position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; background:rgba(255,253,244,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--border-soft); display:flex; z-index:60;
  padding:6px 4px calc(8px + env(safe-area-inset-bottom));}
.bottomnav button{flex:1; border:0; background:none; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:8px 2px; min-height:56px;
  font-weight:600; font-size:10.5px; color:var(--ink-mute); cursor:pointer; border-radius:12px;}
.bottomnav button .ico{width:24px; height:24px; display:block;}
.bottomnav button .ico svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8;}
.bottomnav button.on{color:var(--green-900);}
.bottomnav button.on .pill{background:rgba(231,201,127,.4); border-radius:999px; padding:2px 10px;}

/* ============ 14. FAB ============ */
.fab{position:fixed; bottom:calc(96px + env(safe-area-inset-bottom)); left:50%;
  transform:translateX(calc(-50% + 158px)); width:62px; height:62px; border-radius:50%;
  background:var(--brand-gold); color:var(--green-950); border:0; font-size:30px; font-weight:400;
  line-height:1; cursor:pointer; box-shadow:0 6px 20px rgba(138,90,18,.45); z-index:61;
  display:none; align-items:center; justify-content:center;}
.fab.show{display:flex;}

/* ============ 15. ALERTAS ============ */
.alert{background:var(--card); border:1px solid var(--border-soft); border-left:4px solid var(--warn);
  border-radius:12px; padding:12px 14px; margin-bottom:10px; display:flex; gap:10px;
  align-items:flex-start; box-shadow:var(--sh-sm);}
.alert.ok{border-left-color:var(--success);}
.alert.high{border-left-color:var(--alert-orange);}
.alert.bad{border-left-color:var(--danger);}
.alert.info{border-left-color:var(--green-700);}
.alert .a-ico{font-size:20px; flex:none; margin-top:1px;}
.alert .a-body{flex:1; min-width:0;}
.alert .a-title{font-weight:600; font-size:14px;}
.alert .a-det{font-size:13px; color:var(--ink-soft); margin-top:2px;}
.alert .a-act{flex:none; align-self:center; background:none; border:0; color:var(--green-900);
  font-weight:600; font-size:13px; cursor:pointer; padding:10px 6px; min-height:44px;}

/* ============ 16. BOTTOM SHEET / OVERLAY ============ */
.overlay{position:fixed; inset:0; background:rgba(11,33,29,.55); z-index:80;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .22s ease;}
.overlay.show{opacity:1; pointer-events:auto;}
.sheet{width:100%; max-width:430px; background:var(--cream); border-radius:24px 24px 0 0;
  padding:12px 18px calc(24px + env(safe-area-inset-bottom)); max-height:88vh; overflow-y:auto;
  transform:translateY(40px); transition:transform .24s ease;}
.overlay.show .sheet{transform:none;}
.sheet .grab{width:44px; height:5px; border-radius:99px; background:var(--border); margin:2px auto 14px;}
.sheet h3{font-family:'Sora',sans-serif; font-size:19px; margin:0 0 4px;}
.sheet-sub{color:var(--ink-soft); font-size:13.5px; margin:0 0 14px;}
.sheet-body{margin-bottom:6px;}
.sheet-actions{margin-top:14px;}
.confirm-body{font-size:14.5px; line-height:1.6; color:var(--ink);}
.confirm-body b{color:var(--danger);}

/* ============ 17. TOAST ============ */
.toast{position:fixed; bottom:110px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--green-950); color:var(--on-green); font-size:13.5px; font-weight:500;
  padding:12px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:all .3s;
  z-index:90; max-width:92%; text-align:center; display:flex; align-items:center; gap:12px;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast .toast-action{background:none; border:0; color:var(--gold); font-weight:700; font-size:13.5px;
  cursor:pointer; padding:8px 4px; white-space:nowrap;}

/* ============ 18. SKELETON ============ */
.skel-wrap{display:flex; flex-direction:column; gap:12px; padding:4px 0;}
.skel{border-radius:var(--r-card); background:linear-gradient(90deg,var(--cream-deep) 25%,#fff 50%,var(--cream-deep) 75%);
  background-size:200% 100%; animation:shimmer 1.2s infinite;}
.skel-row{height:86px;}
@keyframes shimmer{to{background-position:-200% 0;}}

/* ============ 19. SEGMENTED / SLIDER ============ */
.seg{display:flex; background:var(--cream-deep); border-radius:14px; padding:4px; gap:4px; margin-bottom:12px;}
.seg button{flex:1; border:0; background:transparent; border-radius:10px; padding:11px 6px;
  min-height:44px; font-weight:600; font-size:13.5px; color:var(--ink-soft); cursor:pointer;}
.seg button.on{background:var(--green-900); color:var(--on-green); box-shadow:var(--sh-sm);}
.seg.gold-on button.on{background:var(--brand-gold); color:var(--green-950);}
input[type=range]{width:100%; accent-color:var(--green-900); height:44px;}
.range-val{font-family:'Sora',sans-serif; font-weight:800; font-size:30px; text-align:center; color:var(--green-900);}
.range-val small{font-size:15px; color:var(--ink-soft); font-weight:600;}

/* ============ 20. ACORDEÓN (categorías) ============ */
details.cat{background:var(--card); border:1px solid var(--border-soft); border-radius:var(--r-card);
  margin-bottom:10px; box-shadow:var(--sh-sm); overflow:hidden;}
details.cat summary{list-style:none; display:flex; align-items:center; gap:10px;
  padding:14px 16px; cursor:pointer; min-height:56px;}
details.cat summary::-webkit-details-marker{display:none;}
.cat-emoji{font-size:22px; flex:none;}
.cat-name{font-family:'Sora',sans-serif; font-weight:700; font-size:15px; flex:1; min-width:0;}
.cat-total{font-family:'Sora',sans-serif; font-weight:700; font-size:15px; white-space:nowrap;}
.cat-chev{color:var(--ink-mute); transition:transform .2s; flex:none;}
details.cat[open] .cat-chev{transform:rotate(180deg);}
.cat-body{border-top:1px solid var(--border-soft); padding:6px 16px 14px;}
.exp-row{display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px dashed var(--border-soft);}
.exp-row:last-child{border-bottom:0;}
.exp-info{flex:1; min-width:0;}
.exp-name{font-weight:600; font-size:14px;}
.exp-meta{font-size:12px; color:var(--ink-mute); margin-top:2px;}
.exp-flags{display:flex; gap:4px; margin-top:5px; flex-wrap:wrap;}
.flag{font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:999px;}
.flag.fijo{background:rgba(30,74,67,.10); color:var(--green-700);}
.flag.tarjeta{background:#fff; border:1px solid var(--green-900); color:var(--green-900);}
.flag.hormiga{background:var(--gold-soft); color:var(--gold-deep);}
.exp-month{font-family:'Sora',sans-serif; font-weight:700; font-size:14px; white-space:nowrap; text-align:right;}
.exp-month small{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:10.5px; color:var(--ink-mute);}

/* ============ 21. MOVIMIENTOS (lista) ============ */
.mov{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-soft);}
.mov:last-child{border-bottom:0;}
.mov-ico{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:18px; flex:none;}
.mov-ico.ing{background:rgba(46,125,79,.12);}
.mov-ico.gas{background:rgba(179,64,46,.10);}
.mov-ico.aho{background:var(--gold-soft);}
.mov-info{flex:1; min-width:0;}
.mov-name{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mov-meta{font-size:12px; color:var(--ink-mute); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mov-amt{font-family:'Sora',sans-serif; font-weight:700; font-size:15px; white-space:nowrap;}
.mov-amt.ing{color:var(--success);}
.sum-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:6px;}
.sum-box{background:var(--card); border:1px solid var(--border-soft); border-radius:14px;
  padding:12px 10px; text-align:center; box-shadow:var(--sh-sm); min-width:0;}
.sum-box .l{font-size:10px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-mute);}
.sum-box .v{font-family:'Sora',sans-serif; font-weight:700; font-size:17px; margin-top:3px;}

/* ============ 22. TABLAS → CARDS EN MÓVIL ============ */
/* En móvil NO hay tablas densas: se renderizan como cards. Esta clase solo se usa
   en contextos donde la tabla es inevitable y se convierte a lista apilada. */
table.mini{width:100%; border-collapse:collapse; font-size:13px;}
table.mini th{font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-mute);
  text-align:left; padding:8px 6px; border-bottom:1px solid var(--border);}
table.mini td{padding:9px 6px; border-bottom:1px solid var(--border-soft);}
table.mini tr:last-child td{border-bottom:0;}
td.monto, th.monto{text-align:right; font-weight:600;}
@media (max-width:430px){
  table.stacked thead{display:none;}
  table.stacked, table.stacked tbody, table.stacked tr, table.stacked td{display:block; width:100%;}
  table.stacked tr{background:var(--card); border:1px solid var(--border-soft);
    border-radius:12px; margin-bottom:8px; padding:6px 12px;}
  table.stacked td{border:0; padding:5px 0; display:flex; justify-content:space-between; align-items:center;}
  table.stacked td::before{content:attr(data-label); font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:1px; color:var(--ink-mute);}
}

/* ============ 23. MOTIVACIÓN (voz de Gabriel) ============ */
.motivation{background:linear-gradient(160deg,#16453d,var(--green-950)); color:var(--on-green);
  border-radius:var(--r-card); padding:16px; font-size:14px; line-height:1.55;
  border:1px solid rgba(231,201,127,.25); margin-bottom:12px;}
.motivation b, .motivation strong{color:var(--gold);}

/* ============ 24. EMPTY STATES ============ */
.empty{text-align:center; padding:32px 20px;}
.empty-ico{font-size:44px; margin-bottom:10px;}
.empty-title{font-family:'Sora',sans-serif; font-weight:700; font-size:17px; margin:0 0 6px;}
.empty-msg{color:var(--ink-soft); font-size:14px; margin:0 0 16px; line-height:1.55;}
.empty-cta{max-width:280px; margin:0 auto;}

/* ============ 25. FOOTER LEGAL ============ */
.foot-note{text-align:center; font-size:12px; color:var(--ink-mute); padding:18px 30px 8px; line-height:1.6;}
.foot-note a{color:var(--green-900); font-weight:600;}

/* ============ 26. SPARKLINE / SVG ============ */
svg.chart{width:100%; height:auto; display:block;}
.spark{width:100%; height:44px; display:block;}

/* ============ 27. HELPERS ============ */
.row-between{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mb0{margin-bottom:0;}
.text-center{text-align:center;}
.text-soft{color:var(--ink-soft);} .text-mute{color:var(--ink-mute);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ============ 28. DESKTOP (≥1024px): layouts propios ============
 * El móvil (<1024px) queda intacto: todo lo de esta sección solo aplica en
 * desktop. Sidebar en vez de bottom tabs · contenedor ~1200px · grillas
 * multi-columna · formularios en 2 columnas · tipografía ajustada. */
/* El sidebar solo existe en desktop; en móvil se usa .bottomnav */
.sidenav{display:none;}

@media (min-width:1024px){
  /* ---- Shell: sidebar fija + área de contenido ---- */
  .sidenav{display:flex; position:fixed; top:0; left:0; bottom:0; width:248px; z-index:70;
    flex-direction:column; padding:22px 16px;
    background:linear-gradient(170deg,#16453d,var(--green-950));
    border-right:1px solid rgba(231,201,127,.25);}
  .sidenav-brand{font-family:'Sora',sans-serif; font-weight:700; font-size:20px;
    color:var(--on-green); text-decoration:none; letter-spacing:-.2px;
    line-height:1.15; padding:4px 10px;}
  .sidenav-brand em{font-style:normal; color:var(--gold);} /* solo "con" en dorado */
  .sidenav-brand small{display:block; font-family:'Inter',sans-serif; font-weight:500;
    font-size:10px; letter-spacing:2.5px; color:var(--on-green-soft);
    text-transform:uppercase; margin-top:3px;}
  .sidenav-nav{display:flex; flex-direction:column; gap:4px; margin-top:28px;}
  .sidenav-nav button{display:flex; align-items:center; gap:13px; width:100%;
    border:0; background:transparent; color:var(--on-green-soft);
    font-weight:600; font-size:14.5px; padding:12px 14px; border-radius:12px;
    cursor:pointer; text-align:left; min-height:48px;}
  .sidenav-nav button .snav-ico{width:22px; height:22px; flex:none; display:block;}
  .sidenav-nav button .snav-ico svg{width:22px; height:22px; stroke:currentColor;
    fill:none; stroke-width:1.8; display:block;}
  .sidenav-nav button:hover{background:rgba(255,253,244,.08); color:var(--on-green);}
  .sidenav-nav button.on{background:rgba(231,201,127,.16); color:var(--gold);}
  .sidenav-foot{margin-top:auto; padding:10px; font-size:12.5px; color:var(--on-green-soft);}
  .sidenav-foot a{color:var(--gold); font-weight:600; text-decoration:none;}
  .sidenav-foot a:hover{text-decoration:underline;}

  .bottomnav{display:none;}

  .app{max-width:none; margin:0 0 0 248px; padding-bottom:56px; box-shadow:none;}
  #screen{max-width:1200px; margin:0 auto; padding:30px 40px 24px;}

  /* Appbar: barra utilitaria (el wordmark vive en el sidebar) */
  .appbar{padding:14px 40px;}
  .appbar .wordmark{display:none;}
  .appbar-row{justify-content:flex-end;}

  /* FAB: esquina inferior derecha del viewport */
  .fab{left:auto; right:36px; transform:none; bottom:36px;}

  /* Sheet → modal centrado en desktop */
  .overlay{align-items:center; padding:24px;}
  .sheet{max-width:640px; border-radius:24px; max-height:92vh;}
  .sheet .grab{display:none;}

  /* Toast centrado en el área de contenido (compensa el sidebar) */
  .toast{left:calc(50% + 124px);}

  /* ---- Tipografía y ritmo desktop ---- */
  .screen-title{font-size:30px; margin:6px 0 4px;}
  .screen-sub{font-size:14.5px; margin-bottom:20px;}
  .sec-title{font-size:20px; margin:34px 0 14px;}
  .screen-head{display:flex; align-items:center; justify-content:space-between;
    gap:16px; margin:6px 0 20px;}
  .screen-head h2{font-family:'Sora',sans-serif; font-weight:700; font-size:27px;
    margin:0; letter-spacing:-.3px;}
  .hero-num{font-size:54px;}
  .range-val{font-size:36px;}

  /* ---- Dashboard: KPIs y gráficos en grilla ---- */
  .kpi-scroll{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    overflow:visible; padding:0;}
  .kpi-scroll .kpi{flex:none; scroll-snap-align:unset;}
  .kpi-grid{grid-template-columns:repeat(4,1fr); gap:16px;}
  .sum-grid{gap:14px;}
  .kpi .kpi-val{font-size:26px;}
  svg.chart{max-height:360px;}

  /* ---- Listas en grilla (tarjetas, menú Más) ---- */
  .card-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    gap:16px; align-items:start;}
  .card-list > .card{margin-bottom:0;}
  .mov-list{display:grid; grid-template-columns:1fr 1fr; gap:0 28px; align-items:start;}
  .hist{max-width:860px;}

  /* ---- Movimientos: resumen fijo como tarjeta ---- */
  .resumen-sticky{position:sticky; top:78px; z-index:20; background:var(--card);
    border:1px solid var(--border-soft); border-radius:16px; padding:14px 20px;
    box-shadow:var(--sh-md); margin-bottom:18px;}
  .resumen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:center;}
  .res-cap{font-size:10.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--ink-mute); margin:0 0 4px;}
  .res-val{font-family:'Sora',sans-serif; font-weight:700; font-size:21px; margin:0;}
  .res-val.pos{color:var(--success);}
  .res-val.neg{color:var(--danger);}
  .res-val.big{font-size:24px;}

  /* ---- Simulador: resultados en panel lateral ---- */
  .sim-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .quepasa-bars{max-width:720px;}

  /* ---- Formularios en 2 columnas (sheets y secciones) ---- */
  .sheet-body{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start;}
  .sheet-body > .seg{grid-column:1/-1;}
  .sheet-body > p{grid-column:1/-1;}
  .sheet-body > .field:has(textarea){grid-column:1/-1;}
  .sheet-body > .field-row{grid-column:1/-1;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
  .field-row .field{min-width:0;}

  /* ---- Tablas con aire en desktop ---- */
  table.mini{font-size:14px;}
  table.mini th{padding:10px 10px;}
  table.mini td{padding:12px 10px;}

  /* ---- Onboarding y paywall centrados ---- */
  .ob-wrap{max-width:680px; margin:0 auto;}
  .paywall{max-width:620px; margin:0 auto;}

  /* ---- Misceláneos ---- */
  .alert{padding:14px 18px;}
  .empty{padding:48px 24px;}
  .motivation{font-size:15px; padding:20px;}
  .foot-note{padding:24px 60px 8px;}
}

/* ============ 29. DESKTOP XL (≥1440px): refinamientos ============ */
@media (min-width:1440px){
  #screen{max-width:1280px;}
  .card-list{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));}
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
}