/* ===== Layout concept: a night-ops finance console — KPI strip up top,
     card "modules" in a grid below, full ledger as a scannable terminal
     log at the bottom, data entry through a slide-over form. Single dark
     visual world by design (console glass, neon data glow). ===== */
  :root{
    --bg: #06070d;
    --surface: #0e1120;
    --surface-2: #141830;
    --surface-3: #1a1f3d;
    --border: rgba(148,163,255,0.14);
    --border-strong: rgba(148,163,255,0.28);
    --fg: #e9ebfb;
    --fg-dim: #8991b8;
    --fg-faint: #565d80;
    --accent: #7c6cff;
    --accent-2: #2dd4ee;
    --pos: #34e5a8;
    --neg: #ff6b81;
    --warn: #ffb547;
    --font-display: 'Sora', 'Segoe UI', sans-serif;
    --font-body: 'Manrope', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    color-scheme: dark;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:
      radial-gradient(1200px 600px at 12% -10%, rgba(124,108,255,0.16), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(45,212,238,0.10), transparent 55%),
      var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background: rgba(124,108,255,0.35); }
  button{ font-family:inherit; }
  input, select{ font-family:inherit; }

  .wrap{
    max-width: 1180px;
    margin:0 auto;
    padding: 28px 20px 90px;
    padding-block: 28px 90px;
  }

  header.top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
  }
  .eyebrow{
    font-family: var(--font-mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color: var(--accent-2);
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
  }
  .eyebrow .dot{
    width:6px;height:6px;border-radius:50%;
    background: var(--pos);
    box-shadow: 0 0 8px var(--pos);
  }
  .eyebrow .dot.offline{ background: var(--fg-faint); box-shadow:none; }
  h1{
    font-family: var(--font-display);
    font-weight:700;
    font-size: clamp(26px, 4vw, 36px);
    margin:0;
    text-wrap:balance;
    letter-spacing:-0.01em;
  }
  .top-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .meta{
    font-family: var(--font-mono);
    font-size:12px;
    color: var(--fg-dim);
  }

  .btn{
    font-family: var(--font-body);
    font-weight:700;
    font-size:13px;
    border-radius:10px;
    padding:10px 16px;
    border:1px solid var(--border);
    background: var(--surface-2);
    color: var(--fg);
    cursor:pointer;
    display:inline-flex; align-items:center; gap:7px;
    transition: border-color .12s ease, transform .12s ease;
  }
  .btn:hover{ border-color: var(--border-strong); }
  .btn:active{ transform: scale(0.97); }
  .btn.primary{
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent; color:#06070d;
  }
  .btn.ghost{ background:transparent; }
  .btn.small{ padding:6px 11px; font-size:12px; border-radius:8px; }
  .btn.danger{ color: var(--neg); border-color: rgba(255,107,129,0.35); }

  /* ---------- section tabs ---------- */
  .tabs{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
  .tab-btn{
    font-family: var(--font-display); font-weight:700; font-size:13.5px;
    border-radius:12px; padding:10px 18px; border:1px solid var(--border);
    background: var(--surface); color: var(--fg-dim); cursor:pointer;
    transition: all .14s ease; display:inline-flex; align-items:center; gap:8px;
  }
  .tab-btn:hover{ border-color: var(--border-strong); color: var(--fg); }
  .tab-btn.active{
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#06070d; border-color:transparent;
  }
  .view-actions{ display:flex; justify-content:flex-end; gap:10px; margin-bottom:18px; flex-wrap:wrap; }

  /* ---------- KPI strip ---------- */
  .kpi-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:14px;
    margin-bottom:30px;
  }
  @media (max-width:760px){ .kpi-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
  .kpi{
    background: linear-gradient(160deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px 18px 16px;
    min-width:0;
    position:relative;
    overflow:hidden;
  }
  .kpi::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity:.8;
  }
  .kpi .label{
    font-size:11px;
    font-family: var(--font-mono);
    letter-spacing:.08em;
    text-transform:uppercase;
    color: var(--fg-dim);
    margin-bottom:10px;
  }
  .kpi .value{
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight:600;
    color: var(--fg);
  }
  .kpi .sub{ margin-top:6px; font-size:12px; color: var(--fg-faint); }
  .kpi .value.neg{ color: var(--neg); }
  .kpi .value.pos{ color: var(--pos); }

  section{ margin-bottom:34px; }
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:12px; margin-bottom:14px; flex-wrap:wrap;
  }
  .section-head h2{ font-family: var(--font-display); font-size:17px; margin:0; font-weight:700; }
  .section-head .hint{ font-size:12px; color: var(--fg-faint); }

  .cards-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
  @media (max-width:700px){ .cards-grid{ grid-template-columns: 1fr; } }

  .card{
    background: var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    min-width:0;
    transition: border-color .15s ease;
  }
  .card:hover{ border-color: var(--border-strong); }
  .card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
  .card-top .name{ font-family: var(--font-display); font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; min-width:0; }
  .card-top .name span.txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .card-top .name .swatch{ width:9px;height:9px;border-radius:3px; box-shadow: 0 0 8px currentColor; flex:none; }
  .pill{
    font-family: var(--font-mono); font-size:11px; padding:3px 9px; border-radius:999px;
    border:1px solid var(--border); color: var(--fg-dim); white-space:nowrap;
  }
  .pill.warn{ color: var(--warn); border-color: rgba(255,181,71,0.35); background: rgba(255,181,71,0.08); }
  .pill.ok{ color: var(--pos); border-color: rgba(52,229,168,0.35); background: rgba(52,229,168,0.08); }

  .row-figs{ display:flex; gap:18px; margin-bottom:12px; flex-wrap:wrap; }
  .fig{ min-width:0; }
  .fig .flabel{ font-size:11px; color: var(--fg-faint); margin-bottom:3px; }
  .fig .fval{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size:15px; font-weight:600; }

  .bar-track{ height:7px; border-radius:99px; background: rgba(148,163,255,0.08); overflow:hidden; margin:4px 0 6px; }
  .bar-fill{ height:100%; border-radius:99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s ease; }
  .bar-caption{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:11px; color: var(--fg-faint); }

  .add-card-tile{
    border:1px dashed var(--border-strong); border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    min-height:120px; color: var(--fg-dim); cursor:pointer;
    font-size:13px; font-weight:700; gap:8px;
    transition: border-color .12s ease, color .12s ease;
  }
  .add-card-tile:hover{ border-color: var(--accent-2); color: var(--fg); }

  .chart-card{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; }
  svg.barchart{ width:100%; height:auto; display:block; }
  .chart-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:12px; color: var(--fg-dim); }
  .chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .chart-legend i{ width:8px; height:8px; border-radius:2px; display:inline-block; }

  .cat-chip{
    display:inline-block; font-family: var(--font-mono); font-size:10px;
    padding:1px 7px; border-radius:6px; background: rgba(124,108,255,0.18);
    color: var(--accent-2); margin-right:6px; white-space:nowrap;
  }
  .rep-row{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid rgba(148,163,255,0.07); font-size:14px; }
  .rep-row span:last-child{ font-family: var(--font-mono); text-align:right; }
  .rep-row .pos{ color: var(--pos); } .rep-row .neg{ color: var(--neg); }
  .cat-row{ display:flex; align-items:center; gap:12px; padding:8px 0; }
  .cat-row .cat-label{ width:130px; font-size:13px; color: var(--fg-dim); flex:none; }
  .cat-row .cat-bar-track{ flex:1; height:10px; border-radius:99px; background: rgba(148,163,255,0.08); overflow:hidden; }
  .cat-row .cat-bar-fill{ height:100%; border-radius:99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
  .cat-row .cat-value{ width:120px; text-align:right; font-family: var(--font-mono); font-size:13px; flex:none; }

  .ledger-shell{ background: var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
  .ledger-toolbar{ display:flex; gap:10px; padding:14px 16px; flex-wrap:wrap; border-bottom:1px solid var(--border); align-items:center; }
  .filter-pills{ display:flex; gap:6px; flex-wrap:wrap; }
  .filter-pill{
    font-family: var(--font-mono); font-size:11.5px; padding:6px 12px; border-radius:999px;
    border:1px solid var(--border); background: transparent; color: var(--fg-dim);
    cursor:pointer; transition: all .12s ease;
  }
  .filter-pill:hover{ border-color: var(--border-strong); color: var(--fg); }
  .filter-pill.active{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#06070d; border-color:transparent; font-weight:700; }
  .search-box{
    margin-left:auto; display:flex; align-items:center; gap:8px;
    background: var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:7px 12px; min-width:0;
  }
  .search-box input{ background:transparent; border:none; outline:none; color: var(--fg); font-size:13px; min-width:0; width:170px; }
  .search-box input::placeholder{ color: var(--fg-faint); }
  .search-box svg{ flex:none; opacity:.6; }

  .ledger-table-wrap{ overflow-x:auto; max-height:520px; overflow-y:auto; }
  table.ledger{ width:100%; border-collapse:collapse; min-width:620px; }
  table.ledger thead th{
    position:sticky; top:0; background: var(--surface); text-align:left;
    font-family: var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
    color: var(--fg-faint); padding:10px 14px; border-bottom:1px solid var(--border);
    cursor:pointer; user-select:none; white-space:nowrap; z-index:1;
  }
  table.ledger thead th:hover{ color: var(--fg-dim); }
  table.ledger thead th .arrow{ opacity:.5; margin-left:4px; font-size:9px; }
  table.ledger tbody td{ padding:9px 14px; border-bottom:1px solid rgba(148,163,255,0.06); font-size:13px; white-space:nowrap; }
  table.ledger tbody tr:hover{ background: rgba(124,108,255,0.05); }
  table.ledger tbody td.desc{ white-space:normal; color: var(--fg); }
  table.ledger tbody td.tag{ font-family: var(--font-mono); font-size:11px; }
  table.ledger tbody td.amt{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align:right; }
  table.ledger tbody td.amt.gasto{ color: var(--neg); }
  table.ledger tbody td.amt.pago{ color: var(--pos); }
  table.ledger tbody td.date{ font-family: var(--font-mono); color: var(--fg-dim); font-size:12px; }
  table.ledger tbody td.action{ text-align:right; }
  .card-chip{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:11px; }
  .card-chip i{ width:7px;height:7px;border-radius:2px; }
  .del-btn{
    background:transparent; border:1px solid var(--border); color: var(--fg-faint);
    border-radius:7px; width:26px; height:26px; cursor:pointer; font-size:13px;
    display:inline-flex; align-items:center; justify-content:center;
    transition: all .12s ease;
  }
  .del-btn:hover{ border-color: var(--neg); color: var(--neg); }
  .del-btn.confirm{ background: rgba(255,107,129,0.12); border-color: var(--neg); color: var(--neg); width:auto; padding:0 10px; font-family:var(--font-mono); font-size:11px; }

  .empty-row td, .loading-row td{ text-align:center; color: var(--fg-faint); padding:32px 16px; font-size:13px; }

  .ledger-footer{
    padding:10px 16px; border-top:1px solid var(--border);
    font-family: var(--font-mono); font-size:11.5px; color: var(--fg-faint);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;
  }

  footer.note{ margin-top:8px; font-size:12px; color: var(--fg-faint); text-align:center; }

  /* ---------- floating add button (mobile-friendly) ---------- */
  .fab{
    position:fixed; right:20px; bottom:20px;
    width:56px; height:56px; border-radius:50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#06070d; border:none; font-size:26px; font-weight:700;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 28px rgba(124,108,255,0.45);
    z-index:40;
  }
  .fab:active{ transform: scale(0.94); }

  /* ---------- modal ---------- */
  .overlay{
    position:fixed; inset:0; background: rgba(3,4,10,0.86);
    display:flex; align-items:flex-end; justify-content:center;
    z-index:50; padding: 0;
  }
  @media (min-width:640px){ .overlay{ align-items:center; padding:20px; } }
  .overlay[hidden]{ display:none; }
  .modal{
    background: var(--surface-2);
    border:1px solid var(--border-strong);
    width:100%; max-width:460px;
    border-radius:20px 20px 0 0;
    padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));
    max-height:88vh; overflow-y:auto;
  }
  @media (min-width:640px){ .modal{ border-radius:20px; } }
  .modal h3{ font-family: var(--font-display); margin:0 0 4px; font-size:19px; }
  .modal .modal-sub{ font-size:12.5px; color: var(--fg-faint); margin-bottom:18px; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:11.5px; color: var(--fg-dim); margin-bottom:6px; font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
  .field input, .field select{
    width:100%; background: var(--surface-3); border:1px solid var(--border);
    border-radius:10px; padding:10px 12px; color: var(--fg); font-size:14px; outline:none;
  }
  .field input:focus, .field select:focus{ border-color: var(--accent-2); }
  .field-row{ display:flex; gap:10px; }
  .field-row .field{ flex:1; min-width:0; }
  .seg{ display:flex; gap:8px; flex-wrap:wrap; }
  .seg button{
    flex:1; min-width:calc(50% - 4px); padding:10px; border-radius:10px; border:1px solid var(--border);
    background: var(--surface-3); color: var(--fg-dim); font-weight:700; font-size:12.5px; cursor:pointer;
  }
  .seg button.active.gasto{ background: rgba(255,107,129,0.15); border-color: var(--neg); color: var(--neg); }
  .seg button.active.pago{ background: rgba(52,229,168,0.15); border-color: var(--pos); color: var(--pos); }
  .seg button.active.transfer{ background: rgba(124,108,255,0.18); border-color: var(--accent); color: var(--accent-2); }
  .modal-actions{ display:flex; gap:10px; margin-top:18px; }
  .modal-actions .btn{ flex:1; justify-content:center; }
  .form-error{ color: var(--neg); font-size:12.5px; margin-top:-6px; margin-bottom:12px; display:none; }
  .form-error.show{ display:block; }

  .toast{
    position:fixed; left:50%; bottom:90px; transform:translateX(-50%);
    background: var(--surface-3); border:1px solid var(--border-strong);
    padding:10px 18px; border-radius:999px; font-size:13px; color: var(--fg);
    z-index:60; opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }


  /* =====================================================================
     v2 · pulido visual (mobile-first). Todo lo de abajo solo agrega o
     ajusta; el diseño original se mantiene.
     ===================================================================== */
  .pill[style*="white-space:normal"]{ border-radius:10px; display:inline-block; line-height:1.45; }
  .pill.bad{ color: var(--neg); border-color: rgba(255,107,129,0.35); background: rgba(255,107,129,0.08); }
  .kpi .value .alt{ display:block; font-size:.62em; font-weight:500; color: var(--fg-dim); margin-top:2px; }
  .kpi .value{ line-height:1.2; overflow-wrap:anywhere; }

  /* Resumen: tarjeta principal con patrimonio y barra activos vs deudas */
  .hero{
    position:relative; overflow:hidden;
    background:
      radial-gradient(500px 220px at 100% 0%, rgba(45,212,238,0.16), transparent 70%),
      linear-gradient(150deg, #17143a, #0e1120 60%);
    border:1px solid var(--border-strong); border-radius:20px;
    padding:20px 20px 16px; margin-bottom:22px;
  }
  .hero-label{ font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-dim); }
  .hero-value{ font-family: var(--font-display); font-weight:700; font-size: clamp(30px, 8vw, 44px); letter-spacing:-.02em; margin:4px 0 2px; font-variant-numeric: tabular-nums; }
  .hero-value.neg{ color: var(--neg); }
  .hero-sub{ font-size:12px; color: var(--fg-faint); }
  .balance-bar{ height:10px; border-radius:99px; background: rgba(255,107,129,0.55); overflow:hidden; margin:16px 0 8px; }
  .balance-bar i{ display:block; height:100%; background: linear-gradient(90deg, #22c99a, var(--pos)); border-radius:99px 0 0 99px; }
  .balance-legend{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color: var(--fg-dim); font-family: var(--font-mono); }
  .balance-legend .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
  .balance-legend .dot.pos{ background: var(--pos); } .balance-legend .dot.neg{ background: var(--neg); }
  .hero-month{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
  .hero-month div{ min-width:0; }
  .hero-month span{ display:block; font-size:11px; color: var(--fg-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hero-month b{ font-family: var(--font-mono); font-size:15px; font-variant-numeric: tabular-nums; }
  .hero-month .pos{ color: var(--pos); } .hero-month .neg{ color: var(--neg); }

  /* Resumen: "Lo que viene" */
  .agenda{ display:flex; flex-direction:column; gap:8px; }
  .agenda-item{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    background: var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
    border-radius:14px; padding:12px 14px; color: var(--fg); cursor:pointer; font: inherit;
  }
  .agenda-item:active{ transform: scale(.99); }
  .agenda-item.neg{ border-left-color: var(--neg); background: linear-gradient(90deg, rgba(255,107,129,0.08), var(--surface) 60%); }
  .agenda-item.warn{ border-left-color: var(--warn); }
  .agenda-item.ok{ border-left-color: var(--pos); opacity:.85; }
  .ag-ico{ font-size:18px; width:24px; text-align:center; flex:none; }
  .ag-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .ag-txt b{ font-size:14px; font-weight:700; }
  .ag-txt small{ font-size:12px; color: var(--fg-dim); font-family: var(--font-mono); overflow-wrap:anywhere; }
  .ag-when{ font-family: var(--font-mono); font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); color: var(--fg-dim); white-space:nowrap; flex:none; }
  .agenda-item.neg .ag-when{ color: var(--neg); border-color: rgba(255,107,129,0.4); }
  .agenda-item.warn .ag-when{ color: var(--warn); border-color: rgba(255,181,71,0.4); }

  .wrap{ padding-bottom: calc(110px + env(safe-area-inset-bottom,0px)); }
  .fab{ bottom: calc(20px + env(safe-area-inset-bottom,0px)); }
  .tabs{ scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }

  /* ---------- celular ---------- */
  @media (max-width:760px){
    body{ font-size:14.5px; }
    .wrap{ padding-left:14px; padding-right:14px; padding-top: calc(14px + env(safe-area-inset-top,0px)); }
    header.top{ align-items:center; margin-bottom:12px; }
    header.top h1{ font-size:24px; }
    .top-actions .meta#updatedAt{ display:none; }
    .top-actions a.meta{ padding:6px 10px; border:1px solid var(--border); border-radius:999px; }

    /* pestañas: una sola fila deslizable que se queda arriba */
    .tabs{
      position:sticky; top:0; z-index:30; flex-wrap:nowrap; overflow-x:auto; gap:6px;
      margin:0 -14px 18px; padding:8px 14px;
      background: rgba(6,7,13,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border-bottom:1px solid var(--border);
    }
    .tab-btn{ flex:none; padding:8px 13px; font-size:13px; border-radius:999px; }

    .kpi-grid{ gap:10px; margin-bottom:22px; }
    .kpi{ padding:14px 14px 12px; border-radius:14px; }
    .kpi .label{ font-size:10px; margin-bottom:6px; }
    .kpi .value{ font-size:18px; }
    .kpi-grid > .kpi:last-child:nth-child(odd){ grid-column: 1 / -1; }
    .view-actions{ justify-content:stretch; }
    .view-actions .btn{ flex:1; justify-content:center; }
    .card{ padding:15px; }
    .row-figs{ gap:14px; }
    .cat-row .cat-label{ width:96px; font-size:12px; }
    .cat-row .cat-value{ width:auto; min-width:78px; font-size:12px; }
    .chart-card{ padding:14px; }
    .search-box{ margin-left:0; width:100%; }
    .search-box input{ width:100%; font-size:16px; }

    /* iOS hace zoom si el texto del campo es menor de 16px */
    .field input, .field select{ font-size:16px; }

    /* tablas → tarjetas: cada fila es una tarjeta y cada dato lleva su etiqueta */
    .ledger-table-wrap{ max-height:none; overflow:visible; }
    table.ledger{ min-width:0; display:block; width:100%; }
    table.ledger thead{ display:block; max-width:100%; overflow:hidden; }
    table.ledger thead tr{ display:flex; gap:6px; overflow-x:auto; padding:10px 12px; scrollbar-width:none; }
    table.ledger thead tr::before{ content:"Ordenar:"; font-family: var(--font-mono); font-size:10.5px; color: var(--fg-faint); align-self:center; flex:none; }
    table.ledger thead th{ position:static; border:1px solid var(--border); border-radius:999px; padding:5px 10px; flex:none; text-align:left !important; }
    table.ledger thead th:empty{ display:none; }
    table.ledger tbody{ display:block; }
    table.ledger tbody tr{ display:block; position:relative; padding:10px 14px; border-bottom:1px solid rgba(148,163,255,0.08); }
    table.ledger tbody td{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:2px 0; border:none; white-space:normal; text-align:right; }
    table.ledger tbody td::before{ content: attr(data-label); font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--fg-faint); text-align:left; flex:none; }
    table.ledger tbody td:first-child{ font-weight:700; padding-right:88px; }
    table.ledger tbody td:first-child::before, table.ledger tbody td.desc::before, table.ledger tbody td.tag::before{ content:none; }
    table.ledger tbody td.desc, table.ledger tbody td.tag{ justify-content:flex-start; text-align:left; }
    table.ledger tbody td.action{ position:absolute; top:8px; right:10px; padding:0; display:flex; gap:6px; }
    table.ledger tbody td.action::before{ content:none; }
    table.ledger tbody td.amt{ font-size:14px; }
    table.ledger tbody td.amt:empty, table.ledger tbody td:empty, table.ledger tbody td.vacio{ display:none; }
    table.ledger tr.empty-row td, table.ledger tr.loading-row td{ display:block; text-align:center; padding:24px 8px; }
    table.ledger tr.empty-row td::before, table.ledger tr.loading-row td::before{ content:none; }
    .ledger-footer{ font-size:11px; }
    .toast{ bottom: calc(92px + env(safe-area-inset-bottom,0px)); max-width:calc(100% - 28px); text-align:center; }
  }
  @media (min-width:1000px){ .kpi-resumen{ grid-template-columns: repeat(5, minmax(0,1fr)); } }
  @media (max-width:380px){ .hero-month b{ font-size:13px; } }

  /* ---------- versión independiente: botón Salir (formulario POST con CSRF) ---------- */
  .salir-form{ margin:0; display:inline; }
  .salir-btn{ background:none; border:1px solid var(--border); border-radius:999px; padding:6px 12px; cursor:pointer; text-decoration:none; }
  .salir-btn:hover{ color:var(--fg); border-color:var(--border-strong); }