/* ---------------------------------------------------------------
     TOKENS
  --------------------------------------------------------------- */
  :root{
    color-scheme: light;
    --paper: #f5f6f1;
    --paper-raised: #ffffff;
    --paper-sunken: #ecefe6;
    --ink: #1b2420;
    --ink-secondary: #56605a;
    --ink-muted: #8b948d;
    --line: rgba(27,36,32,0.12);
    --line-strong: rgba(27,36,32,0.24);

    --accent: #3b4c8c;
    --accent-ink: #ffffff;
    --accent-soft: #e7eaf5;
    --accent-soft-line: rgba(59,76,140,0.30);

    --income: #1f7a4c;
    --income-soft: #e3f2e9;
    --expense: #a8303a;
    --expense-soft: #f6e2e3;
    --warning: #8a6212;
    --warning-soft: #f6ecd6;
    --critical: #a8303a;
    --critical-soft: #f6e2e3;
    --critical-solid: #a8303a; /* fondo sólido de botones de peligro (siempre oscuro, para texto blanco) */
    --good: #1f7a4c;
    --good-soft: #e3f2e9;

    --shadow-sm: 0 1px 2px rgba(27,36,32,0.07);
    --shadow-md: 0 10px 28px -14px rgba(27,36,32,0.32);
    --shadow-lg: 0 24px 60px -20px rgba(27,36,32,0.38);

    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #008300;
    --series-7: #4a3aa7;
    --series-8: #e34948;

    --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --paper: #12160f;
      --paper-raised: #1a201a;
      --paper-sunken: #0e120d;
      --ink: #e9ece5;
      --ink-secondary: #b6bfb6;
      --ink-muted: #7d867d;
      --line: rgba(233,236,229,0.13);
      --line-strong: rgba(233,236,229,0.24);

      --accent: #8a97d9;
      --accent-ink: #10142a;
      --accent-soft: #232a4a;
      --accent-soft-line: rgba(138,151,217,0.38);

      --income: #5fb686;
      --income-soft: #17281f;
      --expense: #e08791;
      --expense-soft: #2c1b1c;
      --warning: #e0b458;
      --warning-soft: #2b2413;
      --critical: #e08791;
      --critical-soft: #2c1b1c;
      --critical-solid: #b23a46;
      --good: #5fb686;
      --good-soft: #17281f;

      --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
      --shadow-md: 0 10px 28px -14px rgba(0,0,0,0.6);
      --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);

      --series-1: #3987e5;
      --series-2: #d95926;
      --series-3: #199e70;
      --series-4: #c98500;
      --series-5: #d55181;
      --series-6: #1f9d1f;
      --series-7: #9085e9;
      --series-8: #e66767;
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --paper: #12160f;
    --paper-raised: #1a201a;
    --paper-sunken: #0e120d;
    --ink: #e9ece5;
    --ink-secondary: #b6bfb6;
    --ink-muted: #7d867d;
    --line: rgba(233,236,229,0.13);
    --line-strong: rgba(233,236,229,0.24);

    --accent: #8a97d9;
    --accent-ink: #10142a;
    --accent-soft: #232a4a;
    --accent-soft-line: rgba(138,151,217,0.38);

    --income: #5fb686;
    --income-soft: #17281f;
    --expense: #e08791;
    --expense-soft: #2c1b1c;
    --warning: #e0b458;
    --warning-soft: #2b2413;
    --critical: #e08791;
    --critical-soft: #2c1b1c;
    --critical-solid: #b23a46;
    --good: #5fb686;
    --good-soft: #17281f;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 10px 28px -14px rgba(0,0,0,0.6);
    --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #1f9d1f;
    --series-7: #9085e9;
    --series-8: #e66767;
  }

  /* ---------------------------------------------------------------
     RESET-ish / BASE
  --------------------------------------------------------------- */
  *,*::before,*::after{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3,h4{ margin:0; font-family: var(--font-display); text-wrap: balance; font-weight: 600; }
  p{ margin:0; }
  button, input, select{ font-family: inherit; font-size: inherit; color: inherit; }
  button{ cursor:pointer; }
  a{ color: inherit; }
  ::selection{ background: var(--accent-soft); }
  .tnum{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
  .mono{ font-family: var(--font-mono); }

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

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

  svg{ display:block; }
  .icon{ width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

  /* ---------------------------------------------------------------
     APP SHELL
  --------------------------------------------------------------- */
  #app{
    display:none; /* se activa por JS (style.display:grid) tras autenticarse */
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
    transition: grid-template-columns 0.18s ease;
  }
  .hide{ display:none !important; }
  body.no-scroll{ overflow:hidden; }
  #sidebarBackdrop{ display:none; } /* solo existe en mobile — ver @media abajo */
  #btnMobileSidebarToggle{ display:none; } /* solo mobile — ver @media abajo */

  /* ---- Sidebar colapsado (desktop, botón #btnSidebarToggle) ----
     Se reduce a una franja de íconos; al pasar el mouse por encima se
     expande temporalmente como flyout sobre el contenido, sin correr
     el layout (comportamiento estilo Metronic). El botón hamburguesa
     de mobile (#btnMobileSidebarToggle) usa una clase aparte
     (.mobile-nav-open, más abajo) — son dos mecanismos independientes.
     Todo el bloque va detrás de min-width:861px a propósito: así nunca
     compite en especificidad con el cajón de mobile más abajo.

     El flyout usa la clase .sidebar-hovered (manejada por JS con
     mouseenter/mouseleave en chrome.js) en vez de :hover puro — con
     :hover puro, al hacer click en el botón el mouse seguía "encima"
     del sidebar y el flyout no se cerraba hasta recién sacar el mouse;
     chrome.js saca .sidebar-hovered en el click así el colapso se ve
     al instante, igual que en Metronic. */
  @media (min-width: 861px){
    #app.sidebar-collapsed{ grid-template-columns: 76px 1fr; }
    #app.sidebar-collapsed #sidebar{ width:76px; }
    #app.sidebar-collapsed .balance-card,
    #app.sidebar-collapsed .brand h1,
    #app.sidebar-collapsed .brand .tagline,
    #app.sidebar-collapsed .btn-new span,
    #app.sidebar-collapsed .nav-item span,
    #app.sidebar-collapsed .link-reset span,
    #app.sidebar-collapsed .footnote{ display:none; }
    #app.sidebar-collapsed .nav-item,
    #app.sidebar-collapsed .link-reset,
    #app.sidebar-collapsed .brand-mark{ justify-content:center; }

    #app.sidebar-collapsed #sidebar.sidebar-hovered{
      position:fixed; top:0; left:0; width:250px; height:100vh;
      z-index:15; box-shadow: var(--shadow-lg);
    }
    #app.sidebar-collapsed #sidebar.sidebar-hovered .balance-card,
    #app.sidebar-collapsed #sidebar.sidebar-hovered .brand h1,
    #app.sidebar-collapsed #sidebar.sidebar-hovered .brand .tagline,
    #app.sidebar-collapsed #sidebar.sidebar-hovered .btn-new span,
    #app.sidebar-collapsed #sidebar.sidebar-hovered .nav-item span,
    #app.sidebar-collapsed #sidebar.sidebar-hovered .link-reset span,
    #app.sidebar-collapsed #sidebar.sidebar-hovered .footnote{ display:unset; }
    #app.sidebar-collapsed #sidebar.sidebar-hovered .nav-item,
    #app.sidebar-collapsed #sidebar.sidebar-hovered .link-reset,
    #app.sidebar-collapsed #sidebar.sidebar-hovered .brand-mark{ justify-content:flex-start; }
  }

  /* Vista 404: ocupa toda la página, sin sidebar ni barra superior — no
     tiene sentido navegar u operar sobre datos desde una dirección que
     no existe. */
  #app.error-page{ grid-template-columns: 1fr; }
  #app.error-page #sidebar,
  #app.error-page .topbar{ display:none; }
  #app.error-page #main{ grid-column:1; display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
  #app.error-page .empty-state{ padding:0; }

  /* ---- Sidebar ---- */
  #sidebar{
    grid-column: 1; /* fija explícita: al pasar a position:fixed en :hover,
      un elemento de grid deja de participar en el auto-posicionamiento, y
      sin esto #main "hereda" su columna y se comprime detrás del flyout */
    background: var(--paper-sunken);
    border-right: 1px solid var(--line);
    padding: 22px 18px 16px;
    display:flex;
    flex-direction:column;
    gap:22px;
    position: sticky;
    top:0;
    height:100vh;
    transition: width 0.18s ease;
  }
  /* El botón de colapsar queda "montado" sobre la línea divisora entre
     el sidebar y el panel central (posición de Metronic) — por eso
     #sidebar necesita overflow visible: el botón sobresale a propósito. */
  .sidebar-toggle-btn{
    position:absolute; top:34px; right:-14px; z-index:16;
    width:28px; height:28px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--paper-raised); border:1px solid var(--line);
    box-shadow: var(--shadow-sm); color: var(--ink-secondary);
  }
  .sidebar-toggle-btn:hover{ color: var(--ink); border-color: var(--line-strong); }
  .sidebar-toggle-btn .icon{ width:14px; height:14px; }
  .brand{ display:flex; flex-direction:column; gap:2px; }
  .brand-mark{ display:flex; align-items:baseline; gap:8px; }
  .brand-mark .glyph{ font-size:20px; }
  .brand h1{ font-size:19px; line-height:1.15; letter-spacing:0.1px; }
  .brand .tagline{ font-size:11.5px; color: var(--ink-muted); letter-spacing:0.2px; }

  .balance-card{
    background: var(--paper-raised);
    border:1px solid var(--line);
    border-radius: var(--radius-md);
    padding:14px 15px;
    box-shadow: var(--shadow-sm);
  }
  .balance-card .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color: var(--ink-muted); font-weight:600; }
  .balance-card .value{ font-family: var(--font-mono); font-size:24px; font-weight:600; margin-top:4px; letter-spacing:-0.01em; }
  .balance-card .value.neg{ color: var(--expense); }
  .balance-card .value.pos{ color: var(--income); }
  .balance-card .sub{ margin-top:6px; font-size:11.5px; color: var(--ink-muted); }

  .btn-new{
    display:flex; align-items:center; justify-content:center; gap:7px;
    background: var(--accent); color: var(--accent-ink);
    border:none; border-radius: var(--radius-sm);
    padding:10px 12px; font-size:13.5px; font-weight:600;
    box-shadow: var(--shadow-sm);
  }
  .btn-new:hover{ filter: brightness(1.06); }
  .btn-new .icon{ width:16px; height:16px; }

  nav#nav{ display:flex; flex-direction:column; gap:2px; }
  .nav-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius: var(--radius-sm);
    background:none; border:none; text-align:left;
    color: var(--ink-secondary); font-size:13.8px; font-weight:500;
    width:100%;
  }
  .nav-item:hover{ background: var(--line); color: var(--ink); }
  .nav-item.active{ background: var(--accent-soft); color: var(--accent); font-weight:600; }
  .nav-item .icon{ opacity:0.85; }

  .sidebar-footer{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
  .link-reset{
    display:flex; align-items:center; gap:7px;
    background:none; border:none; color: var(--ink-muted);
    font-size:12px; padding:6px 4px;
  }
  .link-reset:hover{ color: var(--ink); }
  .link-reset .icon{ width:14px; height:14px; }
  .footnote{ font-size:10.5px; color: var(--ink-muted); padding:0 4px; }

  /* ---- Main ---- */
  #main{ grid-column: 2; min-width:0; padding: 28px 34px 60px; }
  .view{ display:none; }
  .view.active{ display:block; }

  .view-header{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
    margin-bottom:22px; flex-wrap:wrap;
  }
  .view-header h2{ font-size:25px; }
  .view-header .desc{ font-size:13px; color: var(--ink-muted); margin-top:4px; }

  /* Segmented control (period selector, type toggle) */
  .segmented{
    display:inline-flex; background: var(--paper-sunken); border:1px solid var(--line);
    border-radius: var(--radius-sm); padding:3px; gap:2px;
  }
  .segmented button{
    background:none; border:none; padding:6px 12px; border-radius:5px;
    font-size:12.5px; font-weight:600; color: var(--ink-secondary);
  }
  .segmented button.active{ background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-sm); }

  /* ---------------------------------------------------------------
     KPI TILES
  --------------------------------------------------------------- */
  .kpi-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:22px; }
  .kpi-tile{
    background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-lg);
    padding:16px 18px; box-shadow: var(--shadow-sm);
  }
  .kpi-tile .label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color: var(--ink-muted); font-weight:600; }
  .kpi-tile .value{ font-family: var(--font-mono); font-size:25px; font-weight:600; margin-top:8px; letter-spacing:-0.01em; }
  .kpi-tile .value.income{ color: var(--income); }
  .kpi-tile .value.expense{ color: var(--expense); }
  .kpi-tile .delta{ margin-top:8px; font-size:11.5px; display:flex; align-items:center; gap:4px; color: var(--ink-muted); }
  .kpi-tile .delta .icon{ width:12px; height:12px; }
  .kpi-tile .delta.up{ color: var(--good); }
  .kpi-tile .delta.down{ color: var(--critical); }

  /* ---------------------------------------------------------------
     CHART PANELS
  --------------------------------------------------------------- */
  .panel-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:14px; margin-bottom:22px; align-items:stretch; }
  .profile-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start; }
  .panel{
    background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-lg);
    padding:18px 20px 16px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
  }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
  .panel-head h3{ font-size:15.5px; }
  .panel-head .toggle-table{
    background:none; border:1px solid var(--line); color: var(--ink-muted);
    font-size:11px; padding:4px 9px; border-radius:20px; font-weight:600;
  }
  .panel-head .toggle-table:hover{ color: var(--ink); border-color: var(--line-strong); }

  .legend{ display:flex; gap:14px; margin: 6px 0 4px; }
  .legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--ink-secondary); }
  .legend-swatch{ width:10px; height:10px; border-radius:3px; }

  .chart-wrap{ position:relative; flex:1; }
  .chart-tooltip{
    position:fixed; pointer-events:none; z-index:30;
    background: var(--ink); color: var(--paper);
    font-size:11.5px; padding:7px 10px; border-radius:7px; box-shadow: var(--shadow-md);
    opacity:0; transform: translate(-50%,-100%) translateY(-8px); transition: opacity 0.1s ease;
    white-space:nowrap;
  }
  .chart-tooltip.show{ opacity:1; }
  .chart-tooltip b{ font-weight:700; }
  .chart-tooltip .tt-row{ display:flex; gap:8px; justify-content:space-between; }

  .simple-table{ width:100%; border-collapse: collapse; font-size:12.5px; }
  .simple-table th{ text-align:left; color: var(--ink-muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; padding:6px 8px; border-bottom:1px solid var(--line); }
  .simple-table td{ padding:7px 8px; border-bottom:1px solid var(--line); }
  .simple-table td.num, .simple-table th.num{ text-align:right; font-family: var(--font-mono); }

  /* category ranked bars */
  .cat-bars{ display:flex; flex-direction:column; gap:11px; }
  .cat-bar-row{ display:flex; flex-direction:column; gap:4px; }
  .cat-bar-row .cat-bar-top{ display:flex; justify-content:space-between; font-size:12.5px; }
  .cat-bar-row .cat-name{ display:flex; align-items:center; gap:7px; font-weight:600; color: var(--ink); }
  .cat-bar-row .cat-dot{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }
  .cat-bar-row .cat-amt{ font-family: var(--font-mono); color: var(--ink-secondary); }
  .cat-bar-track{ height:9px; background: var(--paper-sunken); border-radius:5px; overflow:hidden; }
  .cat-bar-fill{ height:100%; border-radius:5px; min-width:3px; }
  .cat-bar-pct{ font-size:10.5px; color: var(--ink-muted); }
  .empty-mini{ font-size:12.5px; color: var(--ink-muted); padding:20px 0; text-align:center; }

  /* recent list */
  .recent-list{ display:flex; flex-direction:column; }
  .recent-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
  .recent-row:last-child{ border-bottom:none; }
  .type-badge{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .type-badge.income{ background: var(--income-soft); color: var(--income); }
  .type-badge.expense{ background: var(--expense-soft); color: var(--expense); }
  .type-badge .icon{ width:14px; height:14px; }
  .recent-info{ flex:1; min-width:0; }
  .recent-info .rdesc{ font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .recent-info .rmeta{ font-size:11.5px; color: var(--ink-muted); margin-top:1px; }
  .recent-amt{ font-family: var(--font-mono); font-size:13.5px; font-weight:600; flex-shrink:0; }
  .recent-amt.income{ color: var(--income); }
  .recent-amt.expense{ color: var(--expense); }

  /* ---------------------------------------------------------------
     TOOLBAR / FILTERS (transactions)
  --------------------------------------------------------------- */
  .toolbar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-lg);
    padding:12px 14px; margin-bottom:16px; box-shadow: var(--shadow-sm);
  }
  .search-box{ display:flex; align-items:center; gap:7px; background: var(--paper-sunken); border:1px solid var(--line); border-radius:8px; padding:7px 10px; flex:1; min-width:160px; }
  .search-box .icon{ width:15px; height:15px; color: var(--ink-muted); }
  .search-box input{ border:none; background:none; outline:none; width:100%; font-size:13px; color: var(--ink); }
  select.field, input.field{
    border:1px solid var(--line); background: var(--paper-sunken); border-radius:8px;
    padding:7px 10px; font-size:12.8px; color: var(--ink); outline:none;
  }
  select.field:hover, input.field:hover{ border-color: var(--line-strong); }
  /* Flecha propia (en vez de la nativa del navegador, que queda pegada al
     borde) con el mismo margen que el texto tiene del lado izquierdo. */
  select.field{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding:7px 30px 7px 10px;
  }
  .select-wrap{ position:relative; display:inline-flex; align-items:center; }
  .select-wrap .select-arrow{
    position:absolute; top:50%; right:10px; transform:translateY(-50%);
    pointer-events:none; color: var(--ink-muted); display:flex;
  }
  .select-wrap .select-arrow .icon{ width:14px; height:14px; }
  .toolbar .spacer{ flex:1; }
  .btn-ghost{
    background:none; border:1px solid var(--line); border-radius:8px; padding:7px 12px;
    font-size:12.5px; font-weight:600; color: var(--ink-secondary); display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .btn-ghost:hover{ border-color: var(--line-strong); color: var(--ink); }
  .btn-primary{
    background: var(--accent); color: var(--accent-ink); border:none; border-radius:8px;
    padding:8px 13px; font-size:12.8px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .btn-primary:hover{ filter: brightness(1.06); }
  .btn-primary .icon{ width:15px; height:15px; }

  /* ---------------------------------------------------------------
     TRANSACTIONS TABLE
  --------------------------------------------------------------- */
  .table-card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow:hidden; }
  .table-scroll{ overflow-x:auto; }
  table.tx-table{ width:100%; border-collapse:collapse; min-width:720px; }
  .tx-table thead th{
    text-align:left; padding:11px 14px; font-size:10.8px; text-transform:uppercase; letter-spacing:0.07em;
    color: var(--ink-muted); font-weight:700; border-bottom:1px solid var(--line); background: var(--paper-sunken);
    white-space:nowrap;
  }
  .tx-table thead th.sortable{ cursor:pointer; user-select:none; }
  .tx-table thead th.sortable:hover{ color: var(--ink); }
  .tx-table thead th .sort-arrow{ font-size:9px; margin-left:3px; opacity:0.6; }
  .tx-table tbody td{ padding:11px 14px; border-bottom:1px solid var(--line); font-size:13.2px; vertical-align:middle; }
  .tx-table tbody tr:last-child td{ border-bottom:none; }
  .tx-table tbody tr:hover{ background: var(--paper-sunken); }
  .tx-table td.num{ text-align:right; font-family: var(--font-mono); font-weight:600; white-space:nowrap; }
  .tx-table td.num.income{ color: var(--income); }
  .tx-table td.num.expense{ color: var(--expense); }
  .tx-table td.date-cell{ color: var(--ink-secondary); white-space:nowrap; font-family: var(--font-mono); font-size:12.3px; }
  .tx-table td.desc-cell{ max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap; }
  .chip .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }

  .row-actions{ display:flex; gap:4px; justify-content:flex-end; }
  .icon-btn{ background:none; border:none; padding:5px; border-radius:6px; color: var(--ink-muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0; }
  .icon-btn:hover{ background: var(--line); color: var(--ink); }
  .icon-btn.danger:hover{ background: var(--expense-soft); color: var(--expense); }
  .confirm-del{ display:flex; align-items:center; gap:6px; font-size:11.5px; }
  .confirm-del button{ border:none; border-radius:5px; padding:4px 8px; font-size:11px; font-weight:700; }
  .confirm-del .yes{ background: var(--critical-solid); color:#fff; }
  .confirm-del .no{ background: var(--line); color: var(--ink); }

  .empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:56px 20px; color: var(--ink-muted); text-align:center; }
  .empty-state .icon{ width:34px; height:34px; opacity:0.5; }
  .empty-state .title{ font-size:14px; font-weight:600; color: var(--ink-secondary); }
  .empty-state .sub{ font-size:12.5px; max-width:320px; }

  .table-foot{ display:flex; justify-content:space-between; align-items:center; padding:11px 16px; font-size:11.8px; color: var(--ink-muted); border-top:1px solid var(--line); background: var(--paper-sunken); }
  .table-foot .foot-totals{ display:flex; gap:16px; }
  .table-foot b{ color: var(--ink); font-family: var(--font-mono); }

  .table-pagination{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding:10px 16px; font-size:11.8px; color: var(--ink-muted);
    border-top:1px solid var(--line);
  }
  .table-pagination .page-size{ display:flex; align-items:center; gap:8px; }
  .table-pagination .page-size select{
    border:1px solid var(--line); background: var(--paper-sunken); border-radius:6px;
    padding:4px 7px; font-size:11.5px; color: var(--ink); outline:none;
  }
  .table-pagination .page-range{ white-space:nowrap; }
  .table-pagination .page-nav{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
  .table-pagination .page-nav button{
    background:none; border:1px solid var(--line); border-radius:6px; padding:5px;
    color: var(--ink-secondary); display:flex; align-items:center; justify-content:center;
  }
  .table-pagination .page-nav button:hover:not(:disabled){ border-color: var(--line-strong); color: var(--ink); }
  .table-pagination .page-nav button:disabled{ opacity:0.4; cursor:not-allowed; }
  .table-pagination .page-nav .icon{ width:14px; height:14px; }

  /* ---------------------------------------------------------------
     CATEGORIES VIEW
  --------------------------------------------------------------- */
  .cat-columns{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  .cat-group{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding:18px 20px; }
  .cat-group-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .cat-group-head h3{ font-size:15.5px; display:flex; align-items:center; gap:8px; }
  .cat-group-head .count{ font-size:11.5px; color: var(--ink-muted); font-weight:500; }
  .btn-add-cat{ background:none; border:1px dashed var(--line-strong); border-radius:8px; padding:5px 10px; font-size:11.8px; font-weight:600; color: var(--ink-secondary); display:flex; align-items:center; justify-content:center; gap:5px; }
  .btn-add-cat:hover{ color: var(--accent); border-color: var(--accent); }

  .cat-item{ padding:13px 0; border-bottom:1px solid var(--line); }
  .cat-item:last-of-type{ border-bottom:none; }
  .cat-item-top{ display:flex; align-items:center; gap:10px; }
  .cat-swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
  .cat-item-name{ font-weight:600; font-size:13.8px; flex:1; }
  .cat-item-total{ font-family: var(--font-mono); font-size:12.8px; color: var(--ink-secondary); }
  .cat-item-actions{ display:flex; gap:2px; }

  .budget-row{ display:flex; align-items:center; gap:10px; margin-top:9px; }
  .budget-row label{ font-size:11px; color: var(--ink-muted); white-space:nowrap; }
  .budget-input{ width:84px; border:1px solid var(--line); background: var(--paper-sunken); border-radius:6px; padding:4px 7px; font-family: var(--font-mono); font-size:12px; }
  .budget-track{ flex:1; height:8px; background: var(--paper-sunken); border-radius:5px; overflow:hidden; }
  .budget-fill{ height:100%; border-radius:5px; }
  .budget-fill.good{ background: var(--good); }
  .budget-fill.warning{ background: var(--warning); }
  .budget-fill.critical{ background: var(--critical); }
  .budget-status{ display:flex; align-items:center; gap:5px; margin-top:7px; font-size:11.3px; font-weight:600; }
  .budget-status .icon{ width:13px; height:13px; }
  .budget-status.good{ color: var(--good); }
  .budget-status.warning{ color: var(--warning); }
  .budget-status.critical{ color: var(--critical); }
  .budget-status .muted{ color: var(--ink-muted); font-weight:400; margin-left:2px; }

  .mini-form{ display:flex; gap:8px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--line); flex-wrap:wrap; align-items:center; }
  .mini-form input{ border:1px solid var(--line); background: var(--paper-sunken); border-radius:7px; padding:6px 9px; font-size:12.5px; }
  .mini-form input[name="name"]{ flex:1; min-width:120px; }
  .mini-form input[name="budget"]{ width:90px; font-family: var(--font-mono); }

  /* ---------------------------------------------------------------
     IMPORTAR DESDE CSV
  --------------------------------------------------------------- */
  .import-panel{ margin-bottom:18px; }
  .import-step{ padding:14px 0; border-top:1px solid var(--line); }
  .import-step:first-of-type{ border-top:none; padding-top:10px; }
  .import-step-head{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
  .import-step-num{
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
    border-radius:50%; background: var(--accent-soft); color: var(--accent); font-size:11.5px; font-weight:700; flex:none;
  }
  .import-step-title{ font-weight:600; font-size:13.5px; }
  .import-template-link{ margin-left:auto; font-size:12px; color: var(--accent); }
  .import-row{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
  .import-row input[type="file"]{
    flex:1; min-width:200px; font-size:12px; color: var(--ink-secondary);
    border:1px solid var(--line); background: var(--paper-sunken); border-radius:7px; padding:6px 9px;
  }
  .import-result{ margin-top:10px; font-size:12.5px; }
  .import-result .import-summary{ font-weight:600; }
  .import-result .import-summary.ok{ color: var(--good); }
  .import-result .import-summary.warn{ color: var(--warning); }
  .import-result ul{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:3px; max-height:160px; overflow-y:auto; }
  .import-result li{ color: var(--critical); }
  .import-result li b{ color: var(--ink-secondary); font-weight:600; }

  /* ---------------------------------------------------------------
     DRAWER (add / edit transaction)
  --------------------------------------------------------------- */
  #overlay{ position:fixed; inset:0; background: rgba(10,12,9,0.42); opacity:0; pointer-events:none; transition: opacity 0.18s ease; z-index:20; }
  #overlay.show{ opacity:1; pointer-events:auto; }
  #drawer{
    position:fixed; top:0; right:0; width:400px; max-width:92vw;
    /* 100vh no descuenta la barra de direcciones del navegador en mobile
       (que aparece/desaparece al hacer scroll), así que mide más que el
       viewport realmente visible — el pie del drawer (Cancelar/Guardar)
       terminaba empujado fuera de pantalla. 100dvh sí seguía el alto
       visible real; se deja 100vh primero como fallback para navegadores
       viejos que no entienden dvh (lo ignoran y se quedan con la primera
       declaración). */
    height:100vh; height:100dvh;
    background: var(--paper-raised); border-left:1px solid var(--line);
    box-shadow: var(--shadow-lg); z-index:21; transform: translateX(100%); transition: transform 0.22s ease;
    display:flex; flex-direction:column;
  }
  #drawer.show{ transform: translateX(0); }
  .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
  .drawer-head h3{ font-size:17px; }
  .drawer-body{
    padding:20px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; flex:1;
    /* Sin esto, un hijo flex con overflow:auto no siempre se achica para
       habilitar el scroll (min-height:auto por defecto) — el formulario
       empujaba al pie del drawer fuera del alto disponible en vez de
       dejar scrollear el cuerpo y mostrar los botones siempre. */
    min-height:0;
  }
  .form-group{ display:flex; flex-direction:column; gap:6px; }
  .form-group label{ font-size:11.5px; font-weight:600; color: var(--ink-secondary); text-transform:uppercase; letter-spacing:0.05em; }
  .form-group input, .form-group select{
    border:1px solid var(--line); background: var(--paper-sunken); border-radius:9px;
    padding:10px 11px; font-size:14px; outline:none; color: var(--ink); width:100%;
  }
  .form-group input:focus, .form-group select:focus{ border-color: var(--accent); }
  .form-group input:disabled{ color: var(--ink-muted); cursor:not-allowed; }
  .form-group select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding:10px 34px 10px 11px;
  }
  .form-group .select-wrap{ width:100%; }
  .form-group .select-wrap .select-arrow{ right:11px; }
  .form-group .select-wrap .select-arrow .icon{ width:15px; height:15px; }
  .field-hint{ font-size:11px; color: var(--ink-muted); line-height:1.4; }
  .admin-invite-link{
    display:inline-block; margin-top:4px; padding:6px 9px; border-radius:7px;
    background: var(--paper-sunken); border:1px solid var(--line);
    font-family: var(--font-mono); font-size:11.5px; word-break:break-all;
  }

  .password-field{ position:relative; }
  .password-field input{ padding-right:42px; }
  .password-toggle{
    position:absolute; right:3px; top:50%; transform:translateY(-50%);
    background:none; border:none; padding:7px; border-radius:7px; color: var(--ink-muted);
    display:flex; align-items:center; justify-content:center;
  }
  .password-toggle:hover{ background: var(--line); color: var(--ink); }
  .password-toggle .icon{ width:17px; height:17px; }
  .type-toggle{ display:flex; gap:8px; }
  .type-toggle button{
    flex:1; padding:10px; border-radius:9px; border:1px solid var(--line); background: var(--paper-sunken);
    font-size:13px; font-weight:600; color: var(--ink-secondary); display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .type-toggle button.active[data-type="income"]{ background: var(--income-soft); color: var(--income); border-color: var(--income); }
  .type-toggle button.active[data-type="expense"]{ background: var(--expense-soft); color: var(--expense); border-color: var(--expense); }
  .drawer-foot{ display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--line); }
  .drawer-foot button{ flex:1; padding:11px; border-radius:9px; font-size:13.5px; font-weight:600; }
  .field-error{ font-size:11.5px; color: var(--critical); min-height:14px; }

  /* ---- combobox de categoría (buscador + lista completa, >10 opciones) ---- */
  .combo{ position:relative; }
  .combo-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1px solid var(--line); background: var(--paper-sunken); border-radius:9px;
    padding:10px 11px; font-size:14px; color: var(--ink); text-align:left;
  }
  .combo-trigger:hover{ border-color: var(--line-strong); }
  .combo-trigger.open{ border-color: var(--accent); }
  .combo-trigger .icon{ width:16px; height:16px; color: var(--ink-muted); flex-shrink:0; }
  .combo-panel{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:6;
    background: var(--paper-raised); border:1px solid var(--line); border-radius:10px;
    box-shadow: var(--shadow-lg); overflow:hidden;
  }
  .combo-search{ padding:8px; border-bottom:1px solid var(--line); }
  .combo-search input{
    width:100%; border:1px solid var(--line); background: var(--paper-sunken); border-radius:7px;
    padding:7px 9px; font-size:13px; outline:none; color: var(--ink);
  }
  .combo-search input:focus{ border-color: var(--accent); }
  .combo-list{ list-style:none; margin:0; padding:6px; max-height:220px; overflow-y:auto; }
  .combo-list li{ padding:8px 10px; border-radius:7px; font-size:13.5px; cursor:pointer; color: var(--ink); }
  .combo-list li:hover, .combo-list li.active, .combo-list li.kb-highlight{ background: var(--accent-soft); color: var(--accent); }
  .combo-list .combo-empty{ padding:12px 10px; font-size:12.5px; color: var(--ink-muted); text-align:center; cursor:default; }
  .combo-list .combo-empty:hover{ background:none; }
  .combo-list li.pinned{ border-bottom:1px solid var(--line); margin-bottom:4px; padding-bottom:9px; border-radius:7px 7px 0 0; }

  /* variante compacta para usar dentro del toolbar de filtros */
  .toolbar .combo{ display:inline-flex; }
  .toolbar .combo-trigger{ width:auto; padding:7px 10px; font-size:12.8px; border-radius:8px; }
  .toolbar .combo-trigger .icon{ width:14px; height:14px; }
  .toolbar .combo-panel{ min-width:230px; }

  /* ---------------------------------------------------------------
     RESPONSIVE
  --------------------------------------------------------------- */
  @media (max-width: 980px){
    .kpi-grid{ grid-template-columns: repeat(2,1fr); }
    .panel-grid{ grid-template-columns: 1fr; }
    .cat-columns{ grid-template-columns: 1fr; }
    .profile-grid{ grid-template-columns: 1fr; }
  }
  @media (max-width: 860px){
    /* El colapso a franja de íconos es una función de desktop (todas sus
       reglas están detrás de min-width:861px, más arriba) — acá abajo no
       hace falta "deshacerlo", simplemente no aplica nunca. En mobile el
       sidebar es un cajón oculto fuera de pantalla que se abre con el
       botón hamburguesa (#btnMobileSidebarToggle) sobre un fondo oscuro
       (#sidebarBackdrop) — comportamiento estilo Metronic. */
    #app{ grid-template-columns: 1fr; }
    #sidebar{
      position:fixed; top:0; left:0; width:280px; max-width:85vw;
      /* Mismo motivo que #drawer más abajo: 100dvh sigue el alto visible
         real en mobile, 100vh es el fallback para navegadores viejos. */
      height:100vh; height:100dvh;
      z-index:19; flex-direction:column; padding:22px 18px 16px;
      transform: translateX(-100%);
      transition: transform 0.22s ease;
    }
    #app.mobile-nav-open #sidebar{ transform:translateX(0); box-shadow: var(--shadow-lg); }

    #sidebarBackdrop{
      display:block; position:fixed; inset:0; background: rgba(10,12,9,0.5);
      opacity:0; pointer-events:none; transition: opacity 0.2s ease; z-index:18;
    }
    #app.mobile-nav-open #sidebarBackdrop{ opacity:1; pointer-events:auto; }

    #main{ grid-column:1; padding:20px 18px 50px; }
    #btnSidebarToggle{ display:none; }
    #btnMobileSidebarToggle{ display:flex; }
    .topbar{ justify-content:space-between; }
  }
  @media (max-width: 560px){
    .kpi-grid{ grid-template-columns: 1fr 1fr; }
    #drawer{ width:100%; }
  }

  /* ---------------------------------------------------------------
     TOAST (API / network feedback)
  --------------------------------------------------------------- */
  #toast{
    position:fixed; right:20px; bottom:20px; z-index:40;
    display:flex; flex-direction:column; gap:8px; align-items:flex-end;
    pointer-events:none;
  }
  .toast-item{
    display:flex; align-items:flex-start; gap:9px; max-width:340px;
    background: var(--ink); color: var(--paper);
    padding:11px 14px; border-radius:10px; box-shadow: var(--shadow-lg);
    font-size:12.8px; line-height:1.4;
    opacity:0; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events:auto;
  }
  .toast-item.show{ opacity:1; transform: translateY(0); }
  .toast-item.critical{ background: var(--critical); color: var(--paper-raised); }
  .toast-item .icon{ width:15px; height:15px; flex-shrink:0; margin-top:1px; }

  #loadingScreen{
    position:fixed; inset:0; z-index:50; background: var(--paper);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:10px; color: var(--ink-muted); font-size:13px;
    text-align:center; padding:20px;
  }
  #loadingScreen .glyph{ font-size:28px; }

  /* ---------------------------------------------------------------
     AUTENTICACIÓN
  --------------------------------------------------------------- */
  #authScreen{
    position:fixed; inset:0; z-index:45; background: var(--paper);
    display:flex; align-items:center; justify-content:center;
    padding:32px 20px; overflow-y:auto;
  }
  .auth-card{
    width:100%; max-width:380px;
    background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding:30px 28px 26px;
    display:flex; flex-direction:column; gap:4px;
  }
  .auth-brand{ justify-content:center; margin-bottom:2px; }
  .auth-brand h1{ font-size:19px; }
  .auth-sub{ text-align:center; font-size:12.5px; color: var(--ink-muted); margin:0 0 18px; }
  .auth-general-error{ text-align:center; margin-bottom:4px; }
  .auth-panel{ display:flex; flex-direction:column; gap:14px; }
  .auth-panel .form-group label .optional{ text-transform:none; font-weight:400; color: var(--ink-muted); letter-spacing:0; }
  .auth-submit{ width:100%; justify-content:center; padding:11px; font-size:13.8px; margin-top:2px; }
  .btn-auto{ align-self:flex-start; margin-top:2px; }
  .auth-switch{ text-align:center; font-size:12.5px; color: var(--ink-muted); margin:12px 0 0; }
  .auth-switch a{ color: var(--accent); font-weight:600; text-decoration:none; }
  .auth-switch a:hover{ text-decoration:underline; }

  .auth-divider{ display:flex; align-items:center; gap:10px; margin:22px 0 16px; color: var(--ink-muted); font-size:11.5px; }
  .auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background: var(--line); }

  .oauth-buttons{ display:flex; flex-direction:column; gap:9px; }
  .oauth-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    border:1px solid var(--line); background: var(--paper-sunken); border-radius:9px;
    padding:10px 12px; font-size:13px; font-weight:600; color: var(--ink);
  }
  .oauth-btn:hover{ border-color: var(--line-strong); }
  .oauth-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  .oauth-badge{
    width:19px; height:19px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:11.5px; font-weight:700; font-family: var(--font-mono); color:#fff;
  }
  .oauth-badge.oauth-google{ background:#4285F4; }
  .oauth-badge.oauth-facebook{ background:#1877F2; }

  .topbar{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:16px; }
  .topbar-right{ display:flex; align-items:center; gap:10px; }
  .theme-toggle-btn{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:34px; height:34px; padding:0;
    background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm); color: var(--ink-secondary);
  }
  .theme-toggle-btn:hover{ color: var(--ink); border-color: var(--line-strong); }
  .theme-toggle-btn .icon{ width:16px; height:16px; }
  /* ---- Menú de usuario (avatar + panel), estilo Metronic ---- */
  .user-avatar{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:34px; height:34px; border-radius:50%;
    background: var(--accent-soft); color: var(--accent);
    font-size:13.5px; font-weight:700;
  }
  .user-avatar-lg{ width:40px; height:40px; font-size:15px; }
  .user-menu{ position:relative; }
  .user-menu-trigger{ background:none; border:none; padding:0; border-radius:50%; line-height:0; }
  .user-menu-trigger:hover .user-avatar{ filter: brightness(0.96); }
  .user-menu-panel{
    position:absolute; top:calc(100% + 8px); right:0; z-index:16; width:250px;
    background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding:6px; overflow:hidden;
  }
  .user-menu-head{ display:flex; align-items:center; gap:10px; padding:8px; }
  .user-menu-info{ min-width:0; }
  .user-menu-name{ font-size:13.5px; font-weight:700; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .user-menu-email{ margin-top:1px; font-size:11.8px; color: var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .user-menu-divider{ height:1px; background: var(--line); margin:4px 2px; }
  .user-menu-item{
    display:flex; align-items:center; gap:9px; width:100%; padding:9px 8px; border-radius: var(--radius-sm);
    background:none; border:none; text-align:left; color: var(--ink-secondary); font-size:13px; font-weight:500;
  }
  .user-menu-item .icon{ width:16px; height:16px; opacity:0.85; }
  .user-menu-item:hover{ background: var(--line); color: var(--ink); }
  .user-menu-logout:hover{ background: var(--critical-soft); color: var(--critical); }