/* styles.css — v2026-08-02 — MODIFICADO — Sprint 0U: identidad visual Monograma M
   ("Centro de Calma") — ver spec-marca.md en Identidad_Visual/. Resumen del
   cambio de color: --green pasa a usarse SOLO como semáforo financiero
   (positivo/negativo en KPIs, presupuesto, deuda, ingresos vs. tarjeta —
   8 usos puntuales, sin tocar). El rol de "color de marca/interactivo"
   (botones, nav activo, focus, logo, pantalla de bloqueo) migra de verde a
   navy con las variables --mibas-* de abajo. El cobre (--mibas-copper) queda
   definido pero deliberadamente sin usar todavía — la spec pide máximo 1 uso
   por pantalla; se deja para un sprint futuro puntual (ej. "ahorro del mes")
   en vez de forzarlo ahora sin un lugar claro. */
:root{
  --green:#00c47d;--green-light:#e7f9f1;--green-mid:#00b070;--green-dark:#00875a;
  --bg:#f3f3f5;--surface:#ffffff;--surface2:#efeff1;
  --border:rgba(0,0,0,.06);--border2:rgba(0,0,0,.11);
  --text:#0a0a0b;--text2:#6b6b73;--text3:#a2a2ab;
  --red:#e5484d;--red-light:#fdeeee;
  --amber:#d9922a;--amber-light:#fbf1e1;
  --blue:#3b7ef0;--blue-light:#eef3fe;
  --r:20px;--rs:12px;--r-pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px -12px rgba(0,0,0,.14);
  --sb-w:220px;
  --topbar-h:56px;

  /* ── Marca Mibas (Sprint 0U) ──────────────────────────────────────
     --mibas-navy/--mibas-navy-mid: color de marca "sólido" (fondos de
     botones, logo, splash) — no cambia entre modo claro/oscuro, igual que
     --green nunca cambiaba, porque un bloque navy se lee bien sobre
     cualquier superficie.
     --mibas-navy-ink/--mibas-navy-tint/--mibas-navy-ring/--mibas-navy-border:
     rol de "tinta" — texto, ícono, borde y anillo de foco sobre superficies
     (no un bloque sólido). Navy (#14213D) tiene muy poco contraste sobre el
     fondo casi negro del modo oscuro, así que este grupo SÍ cambia en
     body.dark, tomando el hueso (--mibas-bone) como tinta — el mismo par
     navy/hueso que ya usa el monograma, solo invertido según el fondo. */
  --mibas-navy:#14213D;
  --mibas-navy-mid:#1c2d52;
  --mibas-navy-ink:#14213D;
  --mibas-navy-tint:#e9ebf3;
  --mibas-navy-ring:rgba(20,33,61,.14);
  --mibas-navy-border:rgba(20,33,61,.35);
  --mibas-bone:#EDE6DA;
  --mibas-copper:#B87249;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.shell{display:flex;min-height:100vh;overflow-x:hidden}
.sidebar{width:var(--sb-w,220px);background:var(--surface);border-right:1px solid var(--border);padding:0 0 16px;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;overflow-x:hidden;z-index:30;transition:width .22s cubic-bezier(.4,0,.2,1)}
.sidebar.mini{width:62px}
.sidebar.mini .logo-text,.sidebar.mini .logo-mark,
.sidebar.mini .nav-label,.sidebar.mini .nav-item-text,
.sidebar.mini .sidebar-footer-label{display:none!important}
.sidebar.mini .sidebar-header{justify-content:center;padding:0 10px}
.sidebar.mini .sb-hamburger{margin-left:auto;margin-right:auto}
.sidebar.mini .nav-section{padding:0 6px}
.sidebar.mini .nav-item{justify-content:center;padding:11px 0;gap:0}
.sidebar.mini .nav-item i{font-size:20px;width:auto}
.sidebar.mini .nav-badge{right:3px;top:5px;transform:none}
.sidebar.mini .sidebar-footer{padding:10px 6px 0}
.sidebar.mini .sync-status{justify-content:center}
.sidebar-header{display:flex;align-items:center;gap:10px;padding:0 14px;height:var(--topbar-h,56px);border-bottom:1px solid var(--border);flex-shrink:0}
.sb-hamburger{width:34px;height:34px;flex-shrink:0;border:none;background:transparent;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;transition:background .15s}
.sb-hamburger:hover{background:var(--surface2)}
.sb-hamburger span{display:block;width:18px;height:2px;background:var(--text2);border-radius:2px;transition:background .15s}
.sb-hamburger:hover span{background:var(--mibas-navy-ink)}
body.dark .sb-hamburger span{background:var(--text2)}
.logo-mark{width:32px;height:32px;min-width:32px;border-radius:10px;background:var(--mibas-navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:18px;height:18px;fill:none;stroke:var(--mibas-bone);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.logo-text{display:flex;flex-direction:column;overflow:hidden}
.logo-name{font-size:14px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.logo-sub{font-size:10px;color:var(--text3);margin-top:1px;white-space:nowrap}
.nav-section{padding:0 10px;margin-top:4px}
.nav-label{font-size:10px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;padding:10px 10px 3px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--rs);cursor:pointer;color:var(--text2);font-size:13px;transition:all .15s;user-select:none;position:relative;overflow:hidden}
.nav-item i{font-size:18px;flex-shrink:0;width:20px;text-align:center}
.nav-item-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{color:var(--text);background:var(--surface2)}
.nav-item.on{color:var(--mibas-navy-ink);background:var(--mibas-navy-tint);font-weight:500}
.nav-item.on i{color:var(--mibas-navy-ink)}
.nav-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--amber);color:#fff;border-radius:10px;font-size:10px;font-weight:500;padding:1px 6px;min-width:18px;text-align:center}
.sidebar-footer{margin-top:auto;padding:12px 14px 0;border-top:1px solid var(--border)}
.sync-status{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:11px;color:var(--text3);margin-top:6px}
.sidebar-footer-label{white-space:nowrap;overflow:hidden}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:background .3s}
.sync-dot.ok{background:var(--green)}.sync-dot.err{background:var(--red)}.sync-dot.loading{background:var(--amber);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* sidebar-toggle replaced by .sb-hamburger */
.main-wrap{flex:1;display:flex;flex-direction:column;min-width:0;overflow-x:hidden;margin-left:var(--sb-w,220px);transition:margin-left .22s cubic-bezier(.4,0,.2,1)}
.main-wrap.sidebar-mini{margin-left:62px}
/* Topbar — fijo, coordina con sidebar via --sb-w */
.topbar{position:fixed;top:0;left:var(--sb-w,220px);right:0;height:var(--topbar-h,56px);background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;z-index:20;transition:left .22s cubic-bezier(.4,0,.2,1)}
/* Contenido principal — padding-top para no quedar debajo del topbar */
.main{flex:1;padding:calc(var(--topbar-h,56px) + 24px) 24px 24px}
.topbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-title{font-size:15px;font-weight:600;letter-spacing:-.01em}
.period-nav{display:flex;align-items:center;gap:6px}
.pnav-group{display:flex;align-items:center;gap:4px;background:var(--surface2);border-radius:10px;padding:3px 6px}
.mbtn{width:26px;height:26px;border:none;border-radius:6px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:14px;transition:all .15s}
.mbtn:hover{background:var(--surface);color:var(--mibas-navy-ink)}
.plabel{font-size:13px;font-weight:500;min-width:72px;text-align:center;color:var(--text)}
.plabel-yr{min-width:44px}
.pdivider{color:var(--text3);font-size:13px;padding:0 2px}
.year-nav{display:flex;align-items:center;gap:4px;background:var(--surface2);border-radius:10px;padding:3px 6px}
.page{display:none;animation:fadeIn .2s ease}
.page.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.kpi{background:var(--surface);border-radius:var(--r);padding:20px 22px;border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .15s}
.kpi:hover{transform:translateY(-1px)}
.kpi-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;font-weight:500}
.kpi-value{font-size:27px;font-weight:600;letter-spacing:-.03em;color:var(--text);font-family:'DM Mono',monospace}
.kpi-value.g{color:var(--green-dark)}.kpi-value.r{color:var(--red)}.kpi-value.a{color:var(--amber)}.kpi-value.b{color:var(--blue)}
.kpi-sub{font-size:12px;color:var(--text3);margin-top:4px}
.card{background:var(--surface);border-radius:var(--r);padding:20px 22px;border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
/* Cards dentro de grids — el gap del grid maneja el spacing, no el card */
.g4>.card,.g5>.card,.g3>.card,.g2>.card{margin-bottom:0}
/* Evita que items de grid expandan más allá de su celda (white-space:nowrap en contenido interno) */
#rule-cards > div{min-width:0;}
/* Paneles especiales — mismo spacing */
.health-panel{margin-bottom:16px}
.card-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.card-title{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.card-sub{font-size:12px;color:var(--text3);margin-top:2px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--r-pill);border:1px solid var(--border2);background:transparent;color:var(--text);font-size:13px;font-family:inherit;cursor:pointer;transition:all .15s;font-weight:500}
.btn:hover{background:var(--surface2)}
.btn-primary{background:var(--mibas-navy);color:#fff;border-color:var(--mibas-navy)}
.btn-primary:hover{background:var(--mibas-navy-mid);border-color:var(--mibas-navy-mid)}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:var(--r-pill)}
.btn-ghost{border-color:transparent}
.btn-ghost:hover{background:var(--surface2);border-color:var(--border)}
.btn-danger{color:var(--red);border-color:transparent}
.btn-danger:hover{background:var(--red-light)}
.btn-amber{background:var(--amber);color:#fff;border-color:var(--amber)}
.btn-amber:hover{background:#c8821a;border-color:#c8821a}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--text2);margin-bottom:5px;font-weight:500}
input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--border2);border-radius:var(--rs);background:var(--bg);color:var(--text);font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s}
input:focus,select:focus{border-color:var(--mibas-navy-ink);background:var(--surface);box-shadow:0 0 0 3px var(--mibas-navy-ring)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:500}
.bg{background:var(--green-light);color:var(--green-dark)}.br{background:var(--red-light);color:var(--red)}
.ba{background:var(--amber-light);color:#7a4f00}.bgr{background:var(--surface2);color:var(--text2)}
.prog{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-top:8px}
.prog-fill{height:100%;border-radius:3px;transition:width .5s ease}
.chart-wrap{position:relative}
.chart-privacy-overlay{position:absolute;inset:0;background:var(--surface2);border-radius:8px;display:none;align-items:center;justify-content:center;font-size:13px;color:var(--text3);letter-spacing:.05em;z-index:2}
.chart-privacy-overlay.on{display:flex}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:7px 10px;font-size:11px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
td{padding:10px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg)}
.cdot{width:8px;height:8px;border-radius:2px;display:inline-block;flex-shrink:0}
.tag{display:inline-flex;align-items:center;gap:6px}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.overlay.open{display:flex}
.modal{background:var(--surface);border-radius:24px;padding:26px 28px;width:440px;max-width:92vw;max-height:90vh;overflow-y:auto;border:1px solid var(--border);box-shadow:0 20px 60px -12px rgba(0,0,0,.28);animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.modal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-hd h3{font-size:16px;font-weight:500;letter-spacing:-.01em}
.close-btn{width:30px;height:30px;border:none;background:var(--surface2);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:16px;transition:all .15s}
.close-btn:hover{background:var(--red-light);color:var(--red)}

/* Sprint 0ZC — bloqueo de app (Face ID / Touch ID + PIN) */
.app-lock{display:none;position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,var(--mibas-navy),var(--mibas-navy-mid));align-items:center;justify-content:center;padding:24px}
.app-lock-card{background:var(--surface);border-radius:24px;padding:36px 28px;width:340px;max-width:100%;text-align:center;box-shadow:0 20px 60px -12px rgba(0,0,0,.4);animation:modalIn .2s ease}
.app-lock-logo{width:56px;height:56px;border-radius:16px;background:var(--mibas-navy-mid);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.app-lock-logo svg{width:30px;height:30px;stroke:var(--mibas-bone);stroke-width:11;fill:none;stroke-linecap:round;stroke-linejoin:round}
.app-lock-title{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.app-lock-sub{font-size:13px;color:var(--text2);margin-bottom:22px}
.app-lock-btn{width:100%;justify-content:center;padding:12px;font-size:14px;margin-bottom:10px}
.app-lock-pin-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.app-lock-pin-input{width:100%;text-align:center;letter-spacing:6px;font-size:20px;padding:12px;border-radius:12px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-family:'DM Mono',monospace;box-sizing:border-box}
.app-lock-alt{font-size:12.5px;color:var(--blue);cursor:pointer;margin-top:4px}
.app-lock-error{font-size:12px;color:var(--red);margin-top:10px;min-height:16px}
.snow-item{border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;transition:all .15s}
.snow-item.priority{border-color:var(--mibas-navy-ink);border-width:1.5px}
.snow-item:hover{box-shadow:var(--shadow)}
.empty{text-align:center;padding:36px 20px;color:var(--text3);font-size:13px}
.empty i{font-size:32px;display:block;margin-bottom:8px;opacity:.4}
.toast{position:fixed;bottom:24px;right:24px;background:var(--text);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;z-index:200;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:none}
/* BANNER PENDIENTES */
.pending-banner{background:var(--amber-light);border:1px solid rgba(224,154,42,.3);border-radius:12px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;transition:all .15s}
.pending-banner:hover{background:#faebd0}
.pending-banner-left{display:flex;align-items:center;gap:12px}
.pending-banner-icon{width:36px;height:36px;border-radius:10px;background:var(--amber);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pending-banner-title{font-size:13.5px;font-weight:500;color:#7a4f00}
.pending-banner-sub{font-size:12px;color:#9a6510;margin-top:1px}
/* PENDING ITEM */
.pending-item{border:1px solid rgba(224,154,42,.25);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--surface);transition:all .15s}
.pending-item:hover{border-color:var(--amber);box-shadow:var(--shadow)}
.pending-item-hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.pending-item-desc{font-weight:500;font-size:14px}
.pending-item-meta{font-size:12px;color:var(--text3);margin-top:2px}
.pending-item-monto{font-family:'DM Mono',monospace;font-size:16px;font-weight:500;color:var(--red);text-align:right}
.pending-item-tipo{font-size:11px;color:var(--text3);margin-top:2px;text-align:right}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.cat-btn{padding:7px 8px;border-radius:8px;border:1px solid var(--border2);background:var(--bg);cursor:pointer;font-size:12px;font-family:inherit;text-align:center;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.cat-btn:hover{border-color:var(--mibas-navy-ink);background:var(--mibas-navy-tint);color:var(--mibas-navy-ink)}
.cat-btn.selected{border-color:var(--mibas-navy-ink);background:var(--mibas-navy-tint);color:var(--mibas-navy-ink);font-weight:500}
/* CALC TABS */
.calc-tabs{display:flex;gap:0;margin-bottom:18px;border:1px solid var(--border2);border-radius:10px;overflow:hidden}
.calc-tab{flex:1;padding:9px;text-align:center;cursor:pointer;font-size:13px;background:transparent;color:var(--text2);transition:all .15s;border:none;font-family:inherit}
.calc-tab.on{background:var(--mibas-navy);color:#fff;font-weight:500}
.calc-result{background:var(--mibas-navy-tint);border:1px solid var(--mibas-navy-border);border-radius:10px;padding:14px 16px;margin:14px 0;display:none}
.calc-result.show{display:block}
.calc-result-label{font-size:11.5px;color:var(--mibas-navy-ink);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.calc-result-value{font-size:26px;font-weight:500;color:var(--mibas-navy-ink);font-family:'DM Mono',monospace;letter-spacing:-.02em}
.calc-result-sub{font-size:12px;color:var(--mibas-navy-ink);opacity:.7;margin-top:3px}
.amort-table{max-height:200px;overflow-y:auto;overflow-x:auto;margin-top:10px;border-radius:8px;border:1px solid var(--border)}
.amort-table table{font-size:11.5px}
.amort-table th{font-size:10px;padding:5px 8px}
.amort-table td{padding:5px 8px}

/* THEME + BUDGET + MOBILE TABLES */
body.dark{--bg:#08080a;--surface:#141416;--surface2:#1f1f23;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.14);--text:#f5f5f7;--text2:#a1a1aa;--text3:#71717a;--green-light:rgba(0,196,125,.15);--red-light:rgba(229,72,77,.16);--amber-light:rgba(217,146,42,.16);--blue-light:rgba(59,126,240,.15);--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -12px rgba(0,0,0,.55);--mibas-navy-ink:#EDE6DA;--mibas-navy-tint:rgba(237,230,218,.12);--mibas-navy-ring:rgba(237,230,218,.22);--mibas-navy-border:rgba(237,230,218,.4)}
body.dark input,body.dark select,body.dark textarea{background:#11141a;color:var(--text)}
body.dark tbody tr:hover td{background:#11141a}.topbar-right{display:flex;align-items:center;gap:8px}.theme-toggle{width:34px;height:34px;border:1px solid var(--border2);border-radius:10px;background:var(--surface2);color:var(--text2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.theme-toggle:hover{color:var(--mibas-navy-ink);background:var(--surface)}
/* Sprint 0V — "+Agregar" del topbar pasa de píldora con texto a botón
   cuadrado ícono-only, mismo tamaño que ojo/novedades/actualizar/modo
   oscuro, para que los 5 queden en una fila pareja con espaciado uniforme
   (antes la píldora ancha rompía el ritmo visual y "aislaba" el botón ojo). */
.topbar-add-btn{width:34px;height:34px;border-radius:10px;background:var(--mibas-navy);color:#fff;border:1px solid var(--mibas-navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.topbar-add-btn:hover{background:var(--mibas-navy-mid);border-color:var(--mibas-navy-mid)}
.topbar-add-btn i{font-size:16px}
.budget-row{border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;background:var(--surface);transition:.15s}.budget-row.over{border-color:rgba(232,64,64,.35);background:var(--red-light)}.budget-row.warn{border-color:rgba(224,154,42,.35);background:var(--amber-light)}.budget-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.budget-values{text-align:right;font-family:'DM Mono',monospace}.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--surface2);font-size:11px;color:var(--text2);white-space:nowrap}.row-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}.mobile-safe{overflow-x:auto;max-width:100%}.select-hint{font-size:11px;color:var(--text3);margin-top:-8px;margin-bottom:12px}
.health-panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:var(--r);padding:18px 20px;margin-bottom:18px;overflow:hidden}
.health-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.health-title{font-size:13.5px;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.health-score{font-size:36px;line-height:1;font-weight:600;font-family:'DM Mono',monospace;letter-spacing:-.04em}
.health-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:500;white-space:nowrap}
.health-status.ok{background:var(--green-light);color:var(--green-dark)}
.health-status.blue{background:var(--blue-light);color:var(--blue)}
.health-status.warn{background:var(--amber-light);color:#7a4f00}
.health-status.bad{background:var(--red-light);color:var(--red)}
.health-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.health-metric{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px}
.health-metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-bottom:4px}
.health-metric-value{font-size:17px;font-weight:500;font-family:'DM Mono',monospace}
.health-metric-sub{font-size:11.5px;color:var(--text3);margin-top:2px;line-height:1.35}
.health-tip{font-size:12.5px;color:var(--text2);margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:768px){
  :root{--sb-w:0px}
  .sidebar{left:-220px;width:220px!important;transition:left .25s ease}
  .sidebar.open{left:0}
  .sidebar-overlay.open{display:block}
  .main-wrap,.main-wrap.sidebar-mini{margin-left:0!important}
  .topbar{left:0!important;padding:0 12px}
  .sb-hamburger{display:none}
  .hamburger{display:flex!important}
  .main{padding:calc(var(--topbar-h,56px) + 12px) 12px 12px}
  .health-score{font-size:28px}
  .health-hd{align-items:flex-start}
  .tc-card{padding:16px 18px}
  .tc-card-meta{flex-wrap:wrap;gap:8px}
  #tc-card-visual{flex-direction:column}
  #tc-card-visual .tc-card{min-width:unset!important}
  .g4{grid-template-columns:1fr 1fr}
  .g5{grid-template-columns:1fr 1fr 1fr}
  .g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .topbar-left{flex-wrap:wrap;row-gap:6px}
  /* Regla 50/30/20 — cards no desbordan en mobile */
  #rule-cards > div{overflow:hidden;word-break:break-word;}
  #page-regla .card{overflow:hidden}
}
@media(max-width:480px){.health-grid{grid-template-columns:1fr}.health-panel{padding:16px}.health-hd{display:block}.health-status{margin-top:10px}.health-score{margin-top:8px}}
@media(max-width:640px){
  .topbar{align-items:center}.topbar-left{min-width:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.topbar-left::-webkit-scrollbar{display:none}.topbar-title{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-right{flex-shrink:0}.period-nav{flex-shrink:0}.card-hd{align-items:flex-start;gap:10px;flex-wrap:wrap}.card-hd>div:last-child,.card-hd select{max-width:100%}
  table.responsive-table,table.responsive-table thead,table.responsive-table tbody,table.responsive-table th,table.responsive-table td,table.responsive-table tr{display:block;width:100%}
  table.responsive-table thead{display:none}
  table.responsive-table tr{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;padding:10px;background:var(--surface);box-shadow:var(--shadow)}
  table.responsive-table td{border-bottom:none;padding:6px 2px;display:flex;justify-content:space-between;gap:14px;text-align:right!important;align-items:flex-start;word-break:break-word;overflow-wrap:anywhere}
  table.responsive-table td::before{content:attr(data-label);font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:0 0 96px}
  table.responsive-table td[data-label="Descripción"]{display:block;text-align:left!important}
  table.responsive-table td[data-label="Descripción"]::before{display:block;margin-bottom:2px;flex:none}
  table.responsive-table td.actions-cell{display:flex;justify-content:flex-end;padding-top:10px}
  table.responsive-table td.actions-cell::before{display:none}
  /* Sprint 0ZJ (superado por Sprint 0V, ver abajo) — en Mes a mes / Gastos /
     Presupuesto / Regla 50/30/20, el selector de mes+año (#period-ctrl) no
     cabía junto a los íconos del topbar-right en pantallas angostas:
     quedaba cortado a mitad de palabra ("Ago...") sin ningún aviso de que
     se podía scrollear para verlo completo. El fix original le daba su
     propia fila completa bajo el resto del topbar. Bastián prefería la
     versión de 1 sola fila de antes — ver el reemplazo justo debajo, que
     ahora que "+Agregar" es un ícono cuadrado (mucho más angosto que la
     píldora con texto de antes) logra ese objetivo con scroll horizontal
     en vez de una fila nueva, sin volver a esconder información sin
     indicio (mismo principio que motivó el fix original). */
  body:has(#period-ctrl[style*="flex"]) .topbar{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  body:has(#period-ctrl[style*="flex"]) .topbar::-webkit-scrollbar{display:none}
  body:has(#period-ctrl[style*="flex"]) .topbar-left{overflow-x:visible;flex-wrap:nowrap;flex-shrink:0}
  body:has(#period-ctrl[style*="flex"]) #period-ctrl{flex-shrink:0}
  body:has(#period-ctrl[style*="flex"]) .topbar-right{flex-shrink:0}
  /* Sprint 0ZJ — en Movimientos, los dos botones "Gasto"/"Ingreso" del topbar
     (más anchos que el "+ Agregar" simple de otras páginas) hacían que el
     título "Movimientos" quedara con ancho 0 y desapareciera del todo en
     pantallas angostas, en vez de solo truncarse. Mismo patrón que el fix de
     arriba: cuando ese par de botones está presente, baja a su propia fila. */
  body:has(#topbar-btn-movs) .topbar{flex-wrap:wrap;height:auto;min-height:var(--topbar-h,56px);row-gap:6px;padding-bottom:10px}
  body:has(#topbar-btn-movs) .topbar-left{overflow-x:visible;flex-wrap:wrap;row-gap:6px}
  body:has(#topbar-btn-movs) .topbar-right{flex-wrap:wrap;flex-shrink:1;width:100%;max-width:100%;min-width:0;justify-content:flex-end}
  body:has(#topbar-btn-movs) #topbar-btn{flex-basis:100%;order:5;min-width:0}
  body:has(#topbar-btn-movs) #topbar-btn-movs{width:100%;min-width:0}
  body:has(#topbar-btn-movs) #topbar-btn-movs button{flex:1;min-width:0;padding:8px 6px;font-size:12.5px}
  body:has(#topbar-btn-movs) .main{padding-top:calc(var(--topbar-h,56px) + 44px + 12px)}
}
.hamburger{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:6px 8px;cursor:pointer;align-items:center}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:25}
@media(max-width:480px){
  .kpi-value{font-size:18px}
  /* TC cards stack vertically on small phones */
  #tc-card-visual{flex-direction:column}
  #tc-card-visual .tc-card{min-width:100%!important}
  /* Pendientes grid to 1 col on tiny screens */
  .pending-item [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  /* Snow item */
  .snow-item [style*="display:flex;justify-content:space-between"]{flex-wrap:wrap}
  /* Meta reminder */
  .meta-reminder{font-size:11px}
  /* Topbar title shorter */
  .topbar-title{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Period nav smaller */
  .plabel{min-width:58px;font-size:12px}
  .plabel-yr{min-width:36px}
  /* Presupuesto KPIs */
  #pres-kpis{grid-template-columns:1fr 1fr!important}
  .kpi{padding:14px}
  .card{padding:14px 14px}
  .main{padding:calc(var(--topbar-h,56px) + 12px) 12px 12px}
  .g4{grid-template-columns:1fr 1fr;gap:8px}
  .g5{grid-template-columns:1fr 1fr;gap:8px}
  .g3{grid-template-columns:1fr;gap:10px}
  .g2{grid-template-columns:1fr;gap:10px}
  .topbar{padding:10px 12px}
  .topbar-title{font-size:13px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .period-nav{gap:3px}
  .pnav-group{padding:2px 4px}
  .plabel{min-width:60px;font-size:12px}
  .plabel-yr{min-width:38px}
  .health-panel{padding:12px}
  .health-grid{grid-template-columns:1fr 1fr;gap:8px}
  .health-score{font-size:24px}
  .health-hd{display:block}
  .health-status{margin-top:8px}
  #donut-legend{gap:4px}
  #donut-legend span{font-size:10px}
  .tc-card{padding:14px 16px}
  .tc-card-meta{flex-wrap:wrap;gap:10px}
  .tc-tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tc-tab{font-size:12px;padding:8px 12px}
  .cuota-item{flex-direction:column;align-items:flex-start;gap:8px}
  .cuota-item>div:last-child{align-self:flex-end}
  .pago-tc-item{flex-wrap:wrap}
  .modal{padding:18px 16px}
  .form-row{grid-template-columns:1fr}
  .calc-tabs{flex-wrap:wrap}
  .calc-tab{font-size:11px;padding:7px 6px}
  .btn{font-size:12px;padding:7px 12px}
  .btn-sm{font-size:11px;padding:4px 8px}
  canvas{max-height:180px}
}
@media(max-width:360px){
  .g4{grid-template-columns:1fr}
  .kpi-value{font-size:16px}
}

/* PRESUPUESTO RECURRENTE */
.budget-mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.budget-mode{border:1px solid var(--border2);background:var(--bg);border-radius:12px;padding:10px 12px;cursor:pointer;transition:all .15s;display:flex;gap:8px;align-items:flex-start}
.budget-mode input{width:auto;margin-top:3px;accent-color:var(--mibas-navy-ink)}
.budget-mode strong{display:block;font-size:13px;line-height:1.15}
.budget-mode span{display:block;font-size:11.5px;color:var(--text3);margin-top:2px;line-height:1.25}
.budget-mode:has(input:checked){border-color:var(--mibas-navy-ink);background:var(--mibas-navy-tint);box-shadow:0 0 0 3px var(--mibas-navy-ring)}
.budget-options{display:none;border:1px solid var(--border);border-radius:12px;background:var(--surface2);padding:12px;margin:8px 0 14px}
.budget-options.show{display:block}
.budget-preview{background:var(--blue-light);border:1px solid rgba(59,126,240,.25);border-radius:12px;padding:12px 14px;margin:12px 0;color:#1f4f9a}
body.dark .budget-preview{background:rgba(59,126,240,.14);color:#b8ceff;border-color:rgba(59,126,240,.28)}
.budget-preview-title{font-size:12px;font-weight:600;margin-bottom:4px}
.budget-preview-text{font-size:12px;line-height:1.35}
.budget-note{font-size:11.5px;color:var(--text3);line-height:1.35;margin-top:4px}
.modal{width:min(94vw,520px)}

/* ── SCROLL INTERNO DESKTOP — Presupuesto y Categorías ── */
@media(min-width:769px){
  #pres-list{max-height:min(460px,52vh);overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
  #pres-list::-webkit-scrollbar{width:5px}
  #pres-list::-webkit-scrollbar-track{background:transparent}
  #pres-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
  #cat-admin-list{max-height:min(460px,52vh);overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
  #cat-admin-list::-webkit-scrollbar{width:5px}
  #cat-admin-list::-webkit-scrollbar-track{background:transparent}
  #cat-admin-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
}

/* ── ADMIN CATEGORÍAS ── */
.cat-admin-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:var(--surface);transition:all .15s}
.cat-admin-row:hover{box-shadow:var(--shadow)}
@media(max-width:480px){
  .cat-admin-row{flex-wrap:wrap;gap:6px}
  .cat-admin-row>div:last-child{width:100%;display:flex;justify-content:flex-end;border-top:1px solid var(--border);padding-top:8px;margin-top:2px}
}
.cat-color-swatch{width:10px;height:10px;border-radius:2px;display:inline-block;flex-shrink:0}
.sql-hint{background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:14px;margin:12px 0;font-size:12px;color:var(--text2);display:none}
.sql-hint pre{font-size:11px;white-space:pre-wrap;word-break:break-all;margin-top:6px;color:var(--green-dark)}

/* ── TARJETA DE CRÉDITO ── */
.privacy-mask{border-radius:4px;font-variant-numeric:tabular-nums}
.privacy-rows{width:100%}
.privacy-btn{width:34px;height:34px;border:1px solid var(--border2);border-radius:9px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:17px;transition:all .15s;flex-shrink:0}
.privacy-btn:hover{background:var(--surface2);color:var(--text)}
.novedades-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--red);border:1.5px solid var(--surface2)}
.privacy-btn.on{background:var(--amber-light);color:var(--amber);border-color:var(--amber)}
/* ── Cards de tarjeta — estilo Apple/iOS Wallet ── */
#tc-card-visual{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.tc-cupo-bar{height:5px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden;margin-top:12px}
.tc-cupo-fill{height:100%;border-radius:3px;transition:width .5s}
.tc-fx-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);border-radius:8px;padding:4px 10px;font-size:11px;color:rgba(255,255,255,.82);margin-top:10px;align-self:flex-start}
.tc-card{position:relative;flex:1;min-width:260px;min-height:206px;border-radius:22px;padding:22px 24px;color:#fff;margin-bottom:0;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(140deg,#262a3d 0%,#1c2333 45%,#0f3460 100%);box-shadow:0 12px 30px -10px rgba(15,52,96,.5),0 2px 6px rgba(0,0,0,.16)}
.tc-card-usd{background:linear-gradient(140deg,#22402f 0%,#12352a 45%,#0f3020 100%);box-shadow:0 12px 30px -10px rgba(15,48,32,.5),0 2px 6px rgba(0,0,0,.16)}
.tc-card::before{content:"";position:absolute;top:-45px;right:-35px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.06)}
.tc-card::after{content:"";position:absolute;bottom:-50px;left:-30px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.04)}
.tc-card>*{position:relative;z-index:1}
.tc-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tc-card-name{font-size:15px;font-weight:600;letter-spacing:.01em}
.tc-card-bank{font-size:11.5px;opacity:.65;margin-top:2px}
.tc-chip{width:38px;height:28px;border-radius:7px;background:linear-gradient(135deg,#f6d488,#c9a24a);margin:16px 0 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);position:relative}
.tc-chip::before{content:"";position:absolute;inset:6px 8px;border:1px solid rgba(0,0,0,.18);border-radius:3px}
.tc-card-body{margin-top:auto}
.tc-card-cupo-label{font-size:10px;opacity:.6;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.tc-card-cupo-val{font-size:27px;font-weight:600;font-family:'DM Mono',monospace;letter-spacing:-.02em;line-height:1.1}
.tc-card-foot{font-size:11px;opacity:.62;margin-top:8px}
.tc-card-meta{display:flex;gap:18px;margin-top:14px;font-size:10.5px;opacity:.65;text-transform:uppercase;letter-spacing:.05em}

/* ── Sprint 0T — réplica visual del diseño real Banco de Chile ──
   Visa Infinite (negro/dorado) y Mastercard Black (negro/gris monocromo).
   Solo estilo: no se toca ningún dato mostrado (número, nombre, saldos, cupos). */
.tc-card-brand{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.tc-card-visa,.tc-card-mastercard{background:linear-gradient(155deg,#1c1c1c 0%,#0d0d0d 55%,#000 100%);box-shadow:0 14px 32px -10px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.35)}
.tc-card-visa::before,.tc-card-mastercard::before{content:"B";top:-22px;right:-8px;width:auto;height:auto;background:none;border-radius:0;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:150px;line-height:1}
.tc-card-visa::before{color:rgba(212,176,110,.09)}
.tc-card-mastercard::before{color:rgba(255,255,255,.06)}
/* Visa Infinite — acentos dorados */
.tc-card-visa .tc-card-bank{font-family:Georgia,'Times New Roman',serif;font-size:13px;font-weight:600;letter-spacing:.02em;color:#d9b876;opacity:1}
.tc-card-visa .tc-card-name{color:#f1e3c4}
.tc-card-visa .tc-chip{background:linear-gradient(135deg,#f6d488,#c9a24a)}
.tc-card-visa .tc-card-cupo-label{color:#d9b876;opacity:.7}
.tc-card-visa .tc-card-cupo-val{color:#ecd8a9}
.tc-card-visa .tc-card-foot{color:#d9b876;opacity:.65}
.tc-card-visa .tc-card-meta{color:#d9b876;opacity:.6}
.tc-card-visa .tc-cupo-bar{background:rgba(217,184,118,.15)}
.tc-card-visa .tc-fx-badge{background:rgba(217,184,118,.1);color:#e9d2a0}
.tc-card-visa .tc-card-brand svg text{fill:#ecd8a9}
.tc-card-visa .tc-card-brand svg rect{fill:rgba(217,184,118,.14)}
.tc-card-visa .tc-card-brand::after{content:"Infinite";margin-top:3px;font-size:8.5px;font-style:italic;letter-spacing:.2em;color:#d9b876;opacity:.85}
/* Mastercard Black — monocromo gris/plateado */
.tc-card-mastercard .tc-card-bank{font-family:Georgia,'Times New Roman',serif;font-size:13px;font-weight:600;letter-spacing:.02em;color:#e7e7ea;opacity:1}
.tc-card-mastercard .tc-card-name{color:#f5f5f7}
.tc-card-mastercard .tc-chip{background:linear-gradient(135deg,#d9dbdd,#9a9ea3)}
.tc-card-mastercard .tc-card-cupo-label{color:#fff;opacity:.55}
.tc-card-mastercard .tc-card-cupo-val{color:#f2f2f4}
.tc-card-mastercard .tc-card-foot{color:#fff;opacity:.5}
.tc-card-mastercard .tc-card-meta{color:#fff;opacity:.45}
.tc-card-mastercard .tc-cupo-bar{background:rgba(255,255,255,.14)}
.tc-card-mastercard .tc-fx-badge{background:rgba(255,255,255,.08);color:#e7e7ea}
.tc-card-mastercard .tc-card-brand svg{filter:grayscale(1) brightness(1.7) contrast(.85)}
.tc-card-mastercard .tc-card-brand::after{content:"black";margin-top:3px;font-size:9px;font-style:italic;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.tc-tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
.tc-tab{padding:9px 16px;cursor:pointer;font-size:13px;color:var(--text3);border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.tc-tab:hover{color:var(--text)}
.tc-tab.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:500}
.cuota-item{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cuota-item.pagada{opacity:.5}
.cuota-item.proxima{border-color:rgba(59,126,240,.4);background:var(--blue-light)}
.pago-tc-item{border-left:3px solid var(--mibas-navy-ink);padding:10px 14px;margin-bottom:8px;background:var(--surface);border-radius:0 10px 10px 0;border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.tc-pending-item{border:1px solid rgba(224,154,42,.3);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--surface)}
/* Gestión de tarjetas — lista */
.tc-cfg-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;background:var(--bg);padding:12px 14px;transition:all .15s}
.tc-cfg-row:hover{box-shadow:var(--shadow)}
.tc-cfg-row.on{border-color:var(--mibas-navy-ink);background:var(--mibas-navy-tint);box-shadow:0 0 0 3px var(--mibas-navy-ring)}
.tc-cfg-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}
.tc-cfg-brand{display:flex;align-items:center;justify-content:center;width:52px;height:34px;border-radius:8px;background:linear-gradient(135deg,#1a1a2e,#0f3460);flex-shrink:0}
.tc-cfg-brand svg{max-width:44px;max-height:26px}
.tc-cfg-chip{font-size:10px;font-weight:500;border-radius:999px;padding:2px 8px;white-space:nowrap}
.tc-cfg-chip.on{background:var(--mibas-navy);color:#fff}
.tc-cfg-chip.off{background:var(--surface2);color:var(--text3)}
.tc-cfg-actions{display:flex;gap:4px;flex-shrink:0}
@media(max-width:480px){
  .tc-cfg-row{flex-wrap:wrap}
  .tc-cfg-actions{width:100%;justify-content:flex-end;border-top:1px solid var(--border);padding-top:8px;margin-top:2px}
}

/* ── MÓDULO MOVIMIENTOS ──────────────────────────── */
.mov-filter-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.mov-filter-bar::-webkit-scrollbar{display:none}
.mov-filter-btn{white-space:nowrap;flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-size:12.5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;font-family:inherit}
.mov-filter-btn:hover{border-color:var(--mibas-navy-ink);color:var(--mibas-navy-ink)}
.mov-filter-btn.on{background:var(--mibas-navy);color:#fff;border-color:var(--mibas-navy)}
.mov-date-group{}
.mov-date-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;background:var(--surface2);border-bottom:1px solid var(--border);border-top:1px solid var(--border)}
.mov-date-group:first-child .mov-date-header{border-top:none}
/* Sprint 0V — antes usaba var(--bg), el mismo tono que el fondo de la
   página en modo claro, así que las filas se veían "sin card", pegadas al
   fondo gris sin contraste. var(--surface) es blanco (o la superficie
   oscura equivalente en modo dark, donde ya estaba bien) — mismo tratamiento
   que el resto de las cards de la app. */
.mov-item{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border);gap:12px;transition:background .12s;background:var(--surface)}
.mov-item:hover{background:var(--surface2)}
.mov-item:last-child{border-bottom:none}
.mov-item-left{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0}
.mov-item-info{flex:1;min-width:0}
.mov-item-desc{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.mov-item-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;align-items:center}
.mov-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.mov-item-amount{font-family:'DM Mono',monospace;font-size:14px;font-weight:600;white-space:nowrap}
.mov-item-actions{display:flex;gap:3px}
.mov-type-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:500;white-space:nowrap;flex-shrink:0;margin-top:2px;line-height:1.4}
.movtag-ing{background:var(--green-light);color:var(--green-dark)}
.movtag-gas{background:var(--red-light);color:var(--red)}
.movtag-pend{background:var(--amber-light);color:var(--amber)}
.movtag-tc{background:var(--blue-light);color:var(--blue)}
.movtag-tcp{background:var(--green-light);color:var(--green-dark)}
@media(max-width:600px){
  .mov-item{flex-wrap:wrap;padding:10px 12px;gap:8px}
  .mov-item-left{width:100%}
  .mov-item-right{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .mov-date-header{padding:7px 12px}
}

/* ── PERFIL FINANCIERO ── */
.perfil-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--border2);border-radius:14px;background:var(--surface);cursor:pointer;transition:all .15s;user-select:none}
.perfil-card:hover{border-color:var(--mibas-navy-ink);box-shadow:var(--shadow)}
.perfil-card.on{border-color:var(--mibas-navy-ink);background:var(--mibas-navy-tint);box-shadow:0 0 0 3px var(--mibas-navy-ring)}
.perfil-card-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perfil-card-body{flex:1;min-width:0}
.perfil-card-label{font-size:13.5px;font-weight:500;color:var(--text)}
.perfil-card.on .perfil-card-label{color:var(--mibas-navy-ink)}
.perfil-card-desc{font-size:12px;color:var(--text2);margin-top:2px}
.perfil-card-check{flex-shrink:0;color:var(--border2);font-size:20px;transition:color .15s}
.perfil-card.on .perfil-card-check{color:var(--mibas-navy-ink)}
@media(max-width:480px){.perfil-card{flex-wrap:wrap;gap:10px}.perfil-card-check{display:none}.perfil-card.on::after{content:"✓";flex-shrink:0;color:var(--mibas-navy-ink);font-weight:600;font-size:15px}}

/* ── DASH MOBILE (Sprint 0F) ─────────────────────── */
.dash-desktop{display:block}
.dash-mobile{display:none}
@media(max-width:768px){
  .dash-desktop{display:none}
  .dash-mobile{display:block}
  /* El selector de año solo aplica a la vista desktop (por año); en mobile
     el Resumen siempre muestra el mes actual, así que las flechas no hacían nada. */
  #year-ctrl{display:none!important}
}
.mob-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:4px 0}
.mob-greeting{font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.mob-header-actions{display:flex;align-items:center;gap:8px}
.mob-quick-actions{display:flex;gap:10px;margin-bottom:16px}
.mob-quick-actions .btn{flex:1;justify-content:center;padding:13px 12px;font-size:14px;border-radius:12px;font-weight:500}
/* Card principal — cabecera oscura estilo referencia */
.mob-main-card{background:linear-gradient(158deg,#202024 0%,#0d0d0f 100%);border-radius:26px;padding:24px 22px 22px;border:none;box-shadow:0 16px 38px -14px rgba(0,0,0,.55);margin-bottom:16px;color:#fff;position:relative;overflow:hidden}
.mob-main-card::before{content:"";position:absolute;top:-50px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05)}
.mob-main-card>*{position:relative;z-index:1}
.mob-main-card-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;margin-bottom:16px;background:rgba(255,255,255,.12)}
.mob-card-cc .mob-main-card-icon{background:#3b7ef0}
.mob-card-tc .mob-main-card-icon{background:#9333ea}
.mob-card-mixto .mob-main-card-icon{background:#00c47d}
.mob-card-deuda .mob-main-card-icon{background:#e84040}
.mob-card-ingvar .mob-main-card-icon{background:#e09a2a}
.mob-card-default .mob-main-card-icon{background:var(--text3)}
.mob-main-card-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:8px;font-weight:500}
.mob-main-card-value{font-size:42px;font-weight:600;letter-spacing:-.045em;font-family:'DM Mono',monospace;color:#fff!important;line-height:1.05;margin-bottom:8px}
.mob-main-card-sub{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.45;margin-top:2px}
.mob-main-card .btn{width:100%;justify-content:center;margin-top:14px}
/* KPIs rápidos */
.mob-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.mob-kpi{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 16px;box-shadow:var(--shadow);transition:all .15s}
.mob-kpi.mob-kpi-action:active{opacity:.75;transform:scale(.98)}
.mob-kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:6px;font-weight:500}
.mob-kpi-value{font-size:20px;font-weight:500;font-family:'DM Mono',monospace;letter-spacing:-.02em;color:var(--text)}
.mob-kpi-value.g{color:var(--green-dark)}.mob-kpi-value.r{color:var(--red)}.mob-kpi-value.a{color:var(--amber)}
.mob-kpi-sub{font-size:10.5px;color:var(--text3);margin-top:3px}
/* Próximos pasos */
.mob-step{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .12s;-webkit-tap-highlight-color:transparent;user-select:none}
.mob-step:last-child{border-bottom:none;padding-bottom:0}
.mob-step:active{opacity:.6}
.mob-step-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.mob-step-txt{flex:1;font-size:13px;color:var(--text);line-height:1.45}
.mob-step-arrow{color:var(--text3);font-size:14px;flex-shrink:0}
/* Últimos movimientos mobile */
.mob-recent-card{padding-bottom:4px}
.mob-mov-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.mob-mov-item:last-child{border-bottom:none}
.mob-mov-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.mob-mov-info{flex:1;min-width:0}
.mob-mov-desc{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.mob-mov-meta{font-size:11px;color:var(--text3);margin-top:2px}
.mob-mov-amount{font-size:14px;font-weight:500;font-family:'DM Mono',monospace;color:var(--red);flex-shrink:0}

/* ── SPRINT 0H — pago TC vinculado a compras ── */
.tcp-cuota-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;background:var(--bg);cursor:pointer;transition:all .15s}
.tcp-cuota-row:hover{border-color:var(--mibas-navy-ink)}
.tcp-cuota-row:has(input:checked){border-color:var(--mibas-navy-ink);background:var(--mibas-navy-tint)}
.tcp-cuota-row input{width:auto;accent-color:var(--mibas-navy-ink);flex-shrink:0}

/* ── BARRA DE NAVEGACIÓN FLOTANTE (solo mobile) ── */
.bottom-nav{display:none}
@media(max-width:768px){
  .bottom-nav{display:flex;align-items:center;gap:6px;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:24;background:#141416;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 9px;box-shadow:0 14px 34px -8px rgba(0,0,0,.55)}
  .bn-item{width:44px;height:44px;border:none;background:transparent;color:rgba(255,255,255,.55);border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:21px;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
  .bn-item:active{transform:scale(.92)}
  .bn-item.on{color:#fff;background:rgba(255,255,255,.14)}
  .bn-fab{width:50px;height:50px;border:none;border-radius:999px;background:var(--mibas-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;box-shadow:0 3px 8px rgba(20,33,61,.35);transition:transform .15s;-webkit-tap-highlight-color:transparent}
  .bn-fab:active{transform:scale(.92)}
  .main{padding-bottom:96px!important}
}

/* ── METAS — tile sutil "nueva meta" ── */
.meta-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:160px;border:1.5px dashed var(--border2);border-radius:var(--r);background:transparent;color:var(--text2);cursor:pointer;transition:all .15s;font-family:inherit;padding:22px;text-align:center}
.meta-add:hover{border-color:var(--mibas-navy-ink);background:var(--mibas-navy-tint);color:var(--mibas-navy-ink)}
.meta-add i{font-size:28px;color:var(--text3);transition:color .15s}
.meta-add:hover i{color:var(--mibas-navy-ink)}
.meta-add-txt{font-size:14px;font-weight:600}
.meta-add-sub{font-size:11.5px;color:var(--text3);font-weight:400;max-width:180px;line-height:1.35}

/* Chip "Auto ✨" — categoría sugerida por una regla, pendiente de confirmar */
.pill-auto{background:var(--amber-light);color:var(--amber);font-weight:500}

/* Botón actualizar — ícono girando mientras carga */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .8s linear infinite}
/* Hero del mes también en el Resumen desktop */
#dash-hero .mob-main-card{margin-bottom:16px}
@media(min-width:769px){ #dash-hero .mob-main-card-value{font-size:38px} }

/* ── PULL-TO-REFRESH ──────────────────────────────────────────────
   Al agregar la app al Inicio del iPhone (modo standalone), iOS quita todo
   el chrome de Safari, incluido el gesto nativo de "deslizar hacia abajo
   para refrescar" que sí existe en una pestaña normal — por eso se
   implementa acá a mano (ver el script al final de index.html), y queda
   activo también en Safari normal. Es solo visual: la lógica de arrastre
   vive en JS, esto solo define cómo se ve el indicador circular. */
#ptr-indicator{
  position:fixed;
  top:0;left:50%;
  transform:translate(-50%,-60px);
  width:38px;height:38px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  z-index:50;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
#ptr-indicator.ptr-visible{opacity:1}
#ptr-indicator i{font-size:17px;color:var(--text2)}

/* ── Sprint 0U — Splash "Centro de Calma" ──
   Overlay de carga inicial. Se reproduce una sola vez al abrir la app
   (ver script inline en index.html) y desaparece cuando #sync-dot deja
   de tener la clase "loading". z-index por encima de .app-lock (9999)
   para que tape también el candado mientras Supabase resuelve la sesión. */
.mibas-splash{
  position:fixed;inset:0;z-index:10000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:linear-gradient(160deg,var(--mibas-navy),var(--mibas-navy-mid));
  opacity:1;transition:opacity .35s ease;
}
.mibas-splash.mibas-splash-hide{opacity:0;pointer-events:none}
.mibas-splash-rings{position:absolute;top:50%;left:50%;width:1px;height:1px}
.mibas-splash-ring{
  position:absolute;top:0;left:0;width:88px;height:88px;margin:-44px 0 0 -44px;
  border-radius:50%;border:1.5px solid var(--mibas-bone);opacity:0;transform:scale(.6);
}
.mibas-splash-mark{width:88px;height:88px;opacity:0;transform:scale(.85);position:relative;z-index:2}
.mibas-splash-mark svg{width:100%;height:100%;fill:none;stroke:var(--mibas-bone);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.mibas-splash-word{
  opacity:0;transform:translateY(8px);color:var(--mibas-bone);
  font-size:26px;font-weight:500;letter-spacing:.5px;position:relative;z-index:2;
}
.mibas-splash-tagline{
  opacity:0;color:var(--mibas-bone);font-size:11.5px;font-weight:400;letter-spacing:2px;
  text-transform:uppercase;margin-top:-12px;position:relative;z-index:2;
}
.mibas-splash.play .mibas-splash-mark{animation:mibasMarkIn .75s cubic-bezier(.16,1,.3,1) .15s forwards}
.mibas-splash.play .mibas-splash-word{animation:mibasWordIn .6s ease-out .65s forwards}
.mibas-splash.play .mibas-splash-tagline{animation:mibasWordIn .6s ease-out 1.35s forwards}
.mibas-splash.play .mibas-splash-ring:nth-child(1){animation:mibasRingPulse 1.6s ease-out .45s forwards}
.mibas-splash.play .mibas-splash-ring:nth-child(2){animation:mibasRingPulse 1.6s ease-out .95s forwards}
.mibas-splash.play .mibas-splash-ring:nth-child(3){animation:mibasRingPulse 1.6s ease-out 1.45s forwards}
@keyframes mibasMarkIn{to{opacity:1;transform:scale(1)}}
@keyframes mibasWordIn{to{opacity:1;transform:translateY(0)}}
@keyframes mibasRingPulse{0%{opacity:.55;transform:scale(.6)}70%{opacity:.12}100%{opacity:0;transform:scale(2.6)}}
@media (prefers-reduced-motion:reduce){
  .mibas-splash.play .mibas-splash-mark,
  .mibas-splash.play .mibas-splash-word,
  .mibas-splash.play .mibas-splash-tagline{animation-duration:.4s;transform:none!important}
  .mibas-splash.play .mibas-splash-ring{animation:none;opacity:0}
  .mibas-splash{transition:none}
}