:root{
    --paper:#F6F7F6;
    --paper-line:#E1E3E0;
    --card:#FFFFFF;
    --ink:#1E2A22;
    --ink-soft:#57685C;
    --ink-faint:#8B978A;
    --accent:#1F6F4A;
    --accent-deep:#134430;
    --accent-tint:#DCEBE2;
    --stamp-red:#A6392D;
    --stamp-red-tint:#F3E1DE;
    --stamp-amber:#B9791E;
    --stamp-amber-tint:#F3E7D3;
    --white:#FFFFFF;
    --shadow: 0 1px 2px rgba(30,42,34,0.06), 0 4px 14px rgba(30,42,34,0.06);
    --on-accent:#FFFFFF;
    --theme-accent:#142A42;
    --theme-accent-text:#E9F0F7;
    --theme-accent-rgb:20,42,66;
    --sb-bg:#142A42;
    --sb-text:#E9F0F7;
    --sb-text-soft:rgba(255,255,255,0.72);
    --sb-hover-bg:rgba(255,255,255,0.10);
    --sb-chip-bg:rgba(255,255,255,0.14);
    --sb-active-bg:#E9F0F7;
    --sb-active-text:#142A42;
    --radius: 10px;
  }
  body[data-theme="dark"]{
    --paper:#1B211D;
    --paper-line:#343C36;
    --card:#232A25;
    --ink:#ECEFEA;
    --ink-soft:#A8B3A5;
    --ink-faint:#748073;
    --white:#252D27;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.25);
    --accent:#3FBE8A;
    --accent-tint:#1C3A2C;
    --accent-deep:#2E9C6E;
    --on-accent:#0B2117;
    --stamp-red:#FF8F7A;
    --stamp-red-tint:#3B231F;
    --stamp-amber:#F0B25B;
    --stamp-amber-tint:#3A2E17;
    color-scheme: dark;
  }
  body[data-theme="dark"] input[type=text],
  body[data-theme="dark"] input[type=date],
  body[data-theme="dark"] input[type=number],
  body[data-theme="dark"] input[type=email],
  body[data-theme="dark"] input[type=password],
  body[data-theme="dark"] textarea,
  body[data-theme="dark"] select{
    border-color:#3A423C;
  }
  body[data-theme="dark"] input[type=text]:hover,
  body[data-theme="dark"] input[type=date]:hover,
  body[data-theme="dark"] input[type=number]:hover,
  body[data-theme="dark"] input[type=email]:hover,
  body[data-theme="dark"] input[type=password]:hover,
  body[data-theme="dark"] textarea:hover,
  body[data-theme="dark"] select:hover{
    border-color:#4C564E;
  }
  body[data-theme="dark"] select{
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23A8B3A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--paper);overflow-x:hidden;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.slab{ font-family:'Zilla Slab', serif; }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  #app{ display:flex; min-height:100vh; min-height:100dvh; }

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:230px; flex-shrink:0;
    background-color:var(--sb-bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
    color:var(--sb-text);
    display:flex; flex-direction:column;
    padding:22px 16px;
    position:fixed; top:0; left:0; bottom:0;
    overflow-y:auto;
  }
  .brand{ display:flex; align-items:center; gap:10px; padding:0 4px 22px 4px; border-bottom:1px solid rgba(128,128,128,0.2); margin-bottom:18px;}
  .brand-mark{
    width:34px; height:34px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0;
  }
  .brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  .brand-mark.auth-mark{ width:64px; height:64px; border-radius:14px; }
  .brand-text{ font-family:'Zilla Slab',serif; font-weight:700; font-size:16.5px; letter-spacing:0.2px; }
  .brand-sub{ font-size:10.5px; color:var(--sb-text-soft); letter-spacing:0.5px; text-transform:uppercase; margin-top:1px;}
  nav.navlist{ display:flex; flex-direction:column; gap:2px; }
  .navitem{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    padding:9px 10px; border-radius:7px; cursor:pointer;
    color:var(--sb-text-soft); font-size:13.5px; font-weight:500;
    transition:background .12s ease, color .12s ease;
    border:1px solid transparent;
  }
  .navitem-main{ display:flex; align-items:center; gap:10px; min-width:0; }
  .navitem svg{ width:16px; height:16px; flex-shrink:0; opacity:.85; }
  .navitem:hover{ background:var(--sb-hover-bg); color:var(--sb-text); }
  .navitem.active{ background:var(--sb-active-bg); color:var(--sb-active-text); font-weight:600; }
  .navitem.active svg{ opacity:1; }
  .nav-add{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:18px; height:18px; border-radius:5px; border:none; cursor:pointer;
    background:var(--sb-chip-bg); color:var(--sb-text);
    transition:background .12s ease;
  }
  .nav-add svg{ width:9px; height:9px; }
  .nav-add:hover{ background:var(--sb-hover-bg); }
  .navitem.active .nav-add{ background:rgba(0,0,0,0.08); color:var(--sb-active-text); }
  .subtabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
  .subtab{
    padding:7px 16px; border-radius:999px; border:1px solid var(--paper-line);
    background:var(--white); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer;
  }
  .subtab.active{ background:var(--theme-accent); border-color:var(--theme-accent); color:var(--theme-accent-text); }
  .sidebar-spacer{ flex:1; }
  .btn-new-invoice{
    width:100%; padding:11px 12px; border-radius:8px; border:none;
    background:var(--accent); color:#fff; font-weight:600; font-size:13.5px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .12s ease;
  }
  .btn-new-invoice:hover{ background:#237c53; }
  .sidebar-foot{ font-size:10.5px; color:var(--sb-text-soft); margin-top:14px; text-align:center; }
  .sidebar-foot-full .btn{ background:var(--stamp-red); border-color:var(--stamp-red); color:#fff; }
  .sidebar-foot-full .btn:hover{ opacity:0.88; }
  .sidebar-foot-icon-only{
    display:none; align-items:center; justify-content:center; margin:0 auto;
    width:36px; height:36px; border-radius:8px; border:none; cursor:pointer;
    background:var(--stamp-red); color:#fff;
  }
  .sidebar-foot-icon-only:hover{ opacity:0.88; }
  .sidebar-foot-icon-only svg{ width:17px; height:17px; }
  .sidebar-collapse-btn{
    display:flex; align-items:center; justify-content:center;
    position:fixed; left:calc(var(--sidebar-w, 230px) - 20px); bottom:92px; z-index:50;
    width:40px; height:40px; border-radius:50%; padding:0;
    border:2px solid var(--paper); cursor:pointer;
    background:var(--theme-accent); color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.22);
    transition:left .18s ease;
  }
  .sidebar-collapse-btn:hover{ opacity:0.9; }
  .sidebar-collapse-btn svg{ width:18px; height:18px; transition:transform .2s ease; }
  @media (min-width:801px){
    .sidebar{ transition:width .18s ease; }
    .sidebar.collapsed{ width:76px; }
    .sidebar.collapsed .brand{ justify-content:center; }
    .sidebar.collapsed .brand-text-wrap{ display:none; }
    .sidebar.collapsed .navitem-main{ justify-content:center; gap:0; }
    .sidebar.collapsed .navitem-main span{ display:none; }
    .sidebar.collapsed .navitem{ justify-content:center; padding:10px 4px; }
    .sidebar.collapsed .nav-add{ display:none; }
    .sidebar.collapsed .btn-new-invoice span{ display:none; }
    .sidebar.collapsed .sidebar-foot-full{ display:none; }
    .sidebar.collapsed .sidebar-foot-icon-only{ display:flex; }
  .sidebar-collapse-btn.collapsed svg{ transform:rotate(180deg); }
  }

  /* ---------- Main ---------- */
  main{ flex:1; min-width:0; padding:34px 42px; max-width:1080px; margin-left:var(--sidebar-w, 230px); transition:margin-left .18s ease; }
  .view-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:10px;}
  .view-title{ font-size:26px; font-weight:700; margin:0; }
  .view-sub{ color:var(--ink-soft); font-size:13px; margin-top:2px; }

  .card{ background:var(--card); border:1px solid var(--paper-line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:22px;}
  .card-title{ font-size:15px; font-weight:700; margin:0 0 14px 0; display:flex; align-items:center; justify-content:space-between; }
  .lock-btn{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:8px; border:none; cursor:pointer;
    background:var(--paper); color:var(--ink-soft);
  }
  .lock-btn:hover{ background:var(--paper-line); color:var(--ink); }
  .lock-btn svg{ width:16px; height:16px; }
  .field-row.dimmed, .field.dimmed{ opacity:0.45; pointer-events:none; }
  .unlock-prompt{ background:var(--paper); border:1px solid var(--paper-line); border-radius:8px; padding:14px 16px; margin-bottom:18px; }
  .logo-preview{
    width:88px; height:88px; border-radius:10px; border:1px dashed var(--paper-line);
    background:var(--white); display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0;
  }
  .logo-preview img{ max-width:100%; max-height:100%; object-fit:contain; }
  .client-logo{
    width:48px; height:48px; border-radius:4px; background:var(--paper);
    flex-shrink:0; overflow:hidden;
  }
  .client-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .row-logo{
    width:32px; height:32px; border-radius:4px; background:var(--paper);
    flex-shrink:0; overflow:hidden; display:inline-block; vertical-align:middle;
  }
  .row-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .row-logo-inline{ margin-right:8px; }
  .factura-card .row-logo{ width:34px; height:34px; }
  .muted{ color:var(--ink-soft); }
  .faint{ color:var(--ink-faint); font-size:12.5px; }

  /* pill badges — straight, no border, fully rounded */
  .pill{
    display:inline-flex; align-items:center; gap:5px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:11.5px;
    padding:5px 13px; border-radius:999px; border:none;
    white-space:nowrap;
  }
  .pill.red{ color:var(--stamp-red); background:var(--stamp-red-tint); }
  .pill.amber{ color:var(--stamp-amber); background:var(--stamp-amber-tint); }
  .pill.green-active{ color:#fff; background:var(--accent); }
  .pill.green-light{ color:var(--accent); background:var(--accent-tint); }
  .pill.grey{ color:var(--ink-soft); background:#E7EAE3; }
  .status-check{ display:inline-flex; width:28px; height:28px; flex-shrink:0; }
  .status-check svg{ width:100%; height:100%; display:block; }

  .pending-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 4px; border-bottom:1px solid var(--paper-line); flex-wrap:wrap; }
  .pending-row:last-child{ border-bottom:none; }
  .pending-client{ font-weight:600; }
  .pending-meta{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
  .pending-actions{ display:flex; align-items:center; gap:10px; }

  .empty-state{ text-align:center; padding:30px 10px; color:var(--ink-soft); }
  .empty-state .big{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:6px; }

  .kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
  .kpi-grid-2col{ grid-template-columns:repeat(2,1fr); }
  .kpi{ background:var(--card); border:1px solid var(--paper-line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
  .kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-soft); margin-bottom:6px;}
  .kpi-value{ font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; }
  .kpi-value.accent{ color:var(--accent); }
  .kpi-value.stamp-red-c{ color:var(--stamp-red); }

  table{ width:100%; border-collapse:collapse; }
  th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-soft); font-weight:600; padding:8px 10px; border-bottom:2px solid var(--ink); }
  td{ padding:11px 10px; border-bottom:1px solid var(--paper-line); font-size:13.5px; vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  td.num, th.num{ text-align:right; font-family:'IBM Plex Mono',monospace; }

  .btn{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; padding:8px 14px; border-radius:7px; border:1px solid var(--paper-line); background:var(--white); color:var(--ink); cursor:pointer; transition:all .12s ease; }
  .btn svg{ width:8px; height:8px; vertical-align:-1px; }
  .btn .btn-icon-lg{ display:inline-flex; vertical-align:-3px; margin-right:5px; }
  .btn .btn-icon-lg svg{ width:15px; height:15px; }
  .btn:hover{ border-color:var(--theme-accent); color:var(--theme-accent); }
  .btn.primary{ background:var(--theme-accent); border-color:var(--theme-accent); color:var(--theme-accent-text); }
  .btn.primary:hover{ filter:brightness(1.12); }
  .btn.danger{ color:var(--stamp-red); }
  .btn.danger:hover{ border-color:var(--stamp-red); }
  .btn.ghost{ border-color:transparent; background:transparent; }
  .btn.small{ padding:5px 10px; font-size:12px; }
  .color-swatch-grid{ display:flex; flex-wrap:wrap; gap:14px; }
  .color-swatch{
    width:38px; height:38px; border-radius:10px; border:none; cursor:pointer;
    padding:0; transition:transform .1s ease;
  }
  .color-swatch:hover{ transform:scale(1.08); }
  .color-swatch.active{ box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
  .mode-toggle{ display:flex; gap:10px; }
  .mode-btn{
    padding:8px 20px; border-radius:8px; border:1px solid var(--paper-line);
    background:var(--white); cursor:pointer; font-weight:600; font-size:13px; color:var(--ink);
  }
  .mode-btn.active{ background:var(--theme-accent); border-color:var(--theme-accent); color:var(--theme-accent-text); }
  .lang-dropdown{ position:relative; display:inline-block; width:220px; max-width:100%; }
  .lang-dropdown-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:var(--white); border:1px solid #CED4DA; border-radius:6px;
    padding:8px 12px; cursor:pointer; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink);
  }
  .lang-dropdown-btn:hover{ border-color:#adb5bd; }
  .lang-dropdown-current{ display:flex; align-items:center; gap:10px; }
  .lang-dropdown-current svg{ border-radius:2px; flex-shrink:0; }
  .nav-chevron-lang{ width:14px; height:14px; flex-shrink:0; opacity:.6; transition:transform .15s ease; }
  .nav-chevron-lang.open{ transform:rotate(180deg); }
  .lang-dropdown-panel{
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
    background:var(--white); border:1px solid var(--paper-line); border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15); overflow:hidden;
  }
  .filtro-panel{ left:auto; right:0; width:240px; padding:14px; overflow:visible; }
  .lang-dropdown-option{
    display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; font-size:13.5px; color:var(--ink);
  }
  .lang-dropdown-option svg{ border-radius:2px; flex-shrink:0; }
  .lang-dropdown-option:hover{ background:var(--paper); }
  .lang-dropdown-option.active{ font-weight:700; background:var(--accent-tint); }
  .icon-btn{ background:none; border:none; cursor:pointer; color:var(--ink-soft); padding:7px; border-radius:6px; display:inline-flex;}
  .icon-btn:hover{ background:var(--paper); color:var(--ink);}
  .icon-btn svg{ width:20px; height:20px; }
  .icon-trash{ color:var(--stamp-red); }
  .row-clickable{ cursor:pointer; }
  .row-clickable:hover{ background:var(--paper); }
  .row-virtual{ opacity:0.72; }
  .row-virtual:hover{ opacity:1; }

  .filter-row{ display:flex; gap:10px; align-items:center; margin-bottom:16px; }
  input[type=text], input[type=date], input[type=number], input[type=email], input[type=password], textarea{
    font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink); width:100%;
    background-color:var(--white);
    border:1px solid #CED4DA;
    border-radius:6px;
    padding:8px 12px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  input[type=text]:hover, input[type=date]:hover, input[type=number]:hover, input[type=email]:hover, input[type=password]:hover, textarea:hover{ border-color:#adb5bd; }
  input:focus, textarea:focus{
    outline:none; border-color:var(--theme-accent);
    box-shadow:0 0 0 3px rgba(var(--theme-accent-rgb),0.22);
  }
  select{
    font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink); width:100%;
    background-color:var(--white);
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:13px 10px;
    border:1px solid #CED4DA;
    border-radius:6px;
    padding:8px 34px 8px 12px;
    cursor:pointer;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  select:hover{ border-color:#adb5bd; }
  select:focus{
    outline:none; border-color:var(--theme-accent);
    box-shadow:0 0 0 3px rgba(var(--theme-accent-rgb),0.22);
  }
  label{ font-size:12px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:5px; }
  .auth-error{ color:var(--stamp-red); font-size:12.5px; margin-bottom:10px; min-height:16px; }
  .field{ margin-bottom:14px; }
  .field-row{ display:grid; gap:14px; }
  .cols-2{ grid-template-columns:1fr 1fr; }
  .cols-3{ grid-template-columns:1fr 1fr 1fr; }

  .client-card{ display:flex; justify-content:space-between; align-items:flex-start; padding:16px 4px; border-bottom:1px solid var(--paper-line); gap:14px; flex-wrap:wrap; }
  .client-card:last-child{ border-bottom:none; }
  .client-name{ font-weight:700; font-size:14.5px; }
  .client-meta{ color:var(--ink-soft); font-size:12.5px; margin-top:3px; }
  .reminder-tag{ margin-top:8px; }

  /* ---------- Modal ---------- */
  .modal-overlay{ position:fixed; inset:0; background:rgba(20,28,22,0.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; z-index:100;}
  .modal{ background:var(--paper); border-radius:14px; width:100%; max-width:640px; box-shadow:0 20px 50px rgba(0,0,0,0.25); border:1px solid var(--paper-line);}
  .confirm-danger-modal{ max-width:400px; background:var(--stamp-red-tint); border:1px solid var(--stamp-red); }
  .confirm-danger-body{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:32px 26px 22px 26px; }
  .confirm-danger-icon{ width:40px; height:40px; color:var(--stamp-red); }
  .confirm-danger-icon svg{ width:100%; height:100%; }
  .confirm-danger-message{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.5; }
  .confirm-danger-modal .modal-foot{ border-top:1px solid var(--stamp-red); background:transparent; }
  .confirm-danger-btn{ background:var(--stamp-red); color:#fff; border:none; }
  .confirm-danger-btn:hover{ opacity:0.9; }
  .modal-mobile-brand{ display:none; }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--paper-line);}
  .modal-head h2{ margin:0; font-size:19px; }
  .modal-body{ padding:22px 24px; max-height:70vh; overflow-y:auto;}
  .modal-foot{ padding:16px 24px; border-top:1px solid var(--paper-line); display:flex; justify-content:flex-end; gap:10px; }
  .modal-close{ background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:20px; line-height:1; padding:4px;}

  .lineitems-table th, .lineitems-table td{ padding:7px 6px; }
  .lineitems-table input{ padding:6px 8px; font-size:13px; }
  .totals-box{ margin-top:16px; background:var(--card); border:1px solid var(--paper-line); border-radius:8px; padding:14px 18px; }
  .totals-row{ display:flex; justify-content:space-between; padding:4px 0; font-size:13.5px; }
  .totals-row.total{ font-weight:700; font-size:16px; border-top:1px solid var(--paper-line); margin-top:6px; padding-top:10px; }
  .totals-row .amt{ font-family:'IBM Plex Mono',monospace; }
  .checkbox-row{ display:flex; align-items:center; gap:8px; }
  .checkbox-row input{ width:auto; }
  .checkbox-row label{ margin:0; font-weight:500; color:var(--ink); }

  #toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--theme-accent); color:var(--theme-accent-text); padding:11px 20px; border-radius:8px; font-size:13.5px; font-weight:500; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:all .25s ease; z-index:200;}
  #logo-overlay{
    position:fixed; inset:0; z-index:300;
    background:#142A42;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; cursor:pointer;
    transition:opacity .3s ease;
  }
  #logo-overlay.open{ opacity:1; pointer-events:auto; }
  .logo-overlay-content{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  #logo-overlay img{
    width:min(55vw, 240px); height:min(55vw, 240px);
    border-radius:32px; object-fit:cover;
    box-shadow:0 25px 70px rgba(0,0,0,0.5);
    transform:scale(0.35);
    transition:transform .38s cubic-bezier(.34,1.56,.64,1);
  }
  #logo-overlay.open img{ transform:scale(1); }
  .logo-overlay-title{ font-family:'Zilla Slab',serif; font-weight:700; font-size:24px; color:#F4F7FA; margin-top:22px; }
  .logo-overlay-version{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(244,247,250,0.65); margin-top:4px; }
  .logo-overlay-tagline{ font-family:'Inter',sans-serif; font-size:13px; color:rgba(244,247,250,0.75); margin-top:10px; letter-spacing:0.2px; }
  .logo-overlay-copyright{ font-family:'Inter',sans-serif; font-size:11.5px; color:rgba(244,247,250,0.5); margin-top:6px; letter-spacing:0.2px; }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- Print ---------- */
  #print-area{ display:none; }
  @page{ size:A4; margin:15mm; }
  @media print{
    html, body{ background:#fff !important; height:auto !important; }
    #app{ display:none !important; }
    #print-area{ display:block; position:static; width:100%; padding:0; background:#fff; }
    .no-print{ display:none !important; }
    /* El pie de marca se repite en cada hoja impresa (funciona en todos
       los navegadores actuales); dejamos hueco abajo en el contenido
       para que nunca se solape con él. */
    .inv-body{ padding-bottom:34px; }
    .inv-app-branding{ position:fixed; bottom:0; left:0; right:0; }
  }
  .inv-doc{ font-family:'Inter',sans-serif; color:#1a1a1a; font-size:13px; background:#fff; }
  .inv-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--theme-accent); padding-bottom:18px; margin-bottom:28px;}
  .inv-logo-slot{ width:130px; height:58px; border-radius:4px; overflow:hidden; margin-bottom:6px; }
  .inv-logo-slot.empty{ background:#EDEDED; }
  .inv-logo-slot img{ max-width:100%; max-height:100%; object-fit:contain; }
  .inv-emisor-name{ font-family:'Zilla Slab',serif; font-weight:700; font-size:15px; }
  .inv-head-right{ text-align:right; }
  .inv-head-right .inv-label{ font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--theme-accent); margin:0 0 4px 0; }
  .inv-head-right h1{ font-family:'Zilla Slab',serif; font-weight:600; font-size:22px; margin:0 0 6px 0; }
  .inv-head-right .inv-meta{ font-size:12px; color:#666; line-height:1.5; }
  .inv-parties{ display:flex; justify-content:space-between; gap:30px; margin-bottom:30px; }
  .inv-party h4{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--theme-accent); margin:0 0 7px 0;}
  .inv-party p{ margin:0; font-size:12.5px; line-height:1.55; color:#333; }
  .inv-table{ width:100%; border-collapse:collapse; margin-bottom:22px; }
  .inv-table th{ text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#888; border-bottom:1px solid var(--theme-accent); padding:0 6px 8px 6px; }
  .inv-table td{ padding:9px 6px; border-bottom:1px solid #eee; font-size:12.5px; }
  .inv-table td.num, .inv-table th.num{ text-align:right; }
  .inv-totals{ margin-left:auto; width:260px; }
  .inv-totals .row{ display:flex; justify-content:space-between; padding:4px 0; font-size:12.5px; color:#444; }
  .inv-totals .row.total{ font-weight:700; font-size:16px; color:var(--theme-accent); border-top:1px solid var(--theme-accent); margin-top:6px; padding-top:9px; }
  .inv-foot{ margin-top:36px; font-size:11.5px; color:#888; border-top:1px solid #eee; padding-top:14px; line-height:1.6; }
  .inv-app-branding{
    padding:10px 0; border-top:1px solid #eee; background:#fff;
    display:flex; align-items:center; justify-content:center; gap:7px;
    color:#9a9a9a; font-size:10.5px;
  }
  .inv-app-branding img{ width:15px; height:15px; border-radius:3px; object-fit:cover; }

  .fab{ display:none; }
  .bottom-nav{ display:none; }
  .mobile-facturas-cards{ display:none; }
  @media (max-width:800px){
    html, body{ overflow-x:hidden; }
    #app{ flex-direction:column; }
    .sidebar{
      width:100%; height:auto; position:sticky; top:0; z-index:40;
      flex-direction:row; align-items:center;
      padding:max(12px, env(safe-area-inset-top, 12px)) 16px 12px 16px;
      box-shadow:0 2px 8px rgba(0,0,0,0.12);
    }
    .brand{ border:none; margin:0; padding:0; }
    .sidebar .navlist, .sidebar .sidebar-spacer, .sidebar .btn-new-invoice, .sidebar .sidebar-foot{ display:none; }
    .sidebar-collapse-btn{ display:none; }
    main{ padding:18px 16px calc(88px + env(safe-area-inset-bottom, 0px)) 16px; max-width:100%; margin-left:0; }

    .bottom-nav{
      display:grid; grid-template-columns:repeat(5,1fr);
      position:fixed; left:0; right:0; bottom:0; z-index:50;
      background:var(--sb-bg);
      padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
      box-shadow:0 -2px 10px rgba(0,0,0,0.15);
      -webkit-transform:translateZ(0); transform:translateZ(0);
      -webkit-backface-visibility:hidden; backface-visibility:hidden;
      will-change:transform;
    }
    .bottom-nav .navitem{
      flex-direction:column; align-items:center; justify-content:center; gap:2px;
      padding:4px 2px; border-radius:8px; font-size:10px; min-width:0;
    }
    .bottom-nav .navitem-main{ flex-direction:column; gap:3px; }
    .bottom-nav .nav-add{ display:none; }
    .bottom-nav .navitem span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
    .bottom-nav .navitem svg{ width:19px; height:19px; margin:0; }

    .fab{
      display:flex; align-items:center; justify-content:center;
      position:fixed; right:18px; bottom:calc(72px + env(safe-area-inset-bottom, 0px));
      width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
      background:var(--theme-accent); color:var(--theme-accent-text); box-shadow:0 6px 18px rgba(0,0,0,0.3);
      z-index:55;
      -webkit-transform:translateZ(0); transform:translateZ(0);
      will-change:transform;
    }
    .fab svg{ width:22px; height:22px; }

    .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--card); }
    .facturas-table-scroll{ display:none; }
    .factura-card .row-logo{ width:28px; height:28px; }
    .filtro-panel{ left:0; right:auto; width:260px; max-width:calc(100vw - 32px); }
    .filtro-panel-right{ left:auto; right:0; }
    .mobile-facturas-cards{ display:block; }
    .field-row.cols-2, .field-row.cols-3{ grid-template-columns:1fr; }
    .modal-overlay{
      padding:0; align-items:stretch; background:var(--paper); -webkit-overflow-scrolling:touch;
      -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
    }
    .modal{
      max-width:100%; min-height:100vh; min-height:100dvh; border-radius:0;
      background:var(--paper);
    }
    .modal-body{ padding:18px 16px; max-height:none; background:var(--paper); }
    .modal-mobile-brand{
      display:flex; align-items:center; gap:9px;
      padding:max(12px, env(safe-area-inset-top, 12px)) 16px 10px 16px;
      background:var(--sb-bg); color:var(--sb-text);
    }
    .modal-mobile-brand img{ width:26px; height:26px; border-radius:6px; object-fit:cover; flex-shrink:0; }
    .modal-mobile-brand span{ font-family:'Zilla Slab',serif; font-weight:700; font-size:15px; }
    .view-title{ font-size:22px; }
  }
  .table-scroll{ width:100%; background:var(--card); }
  .factura-card{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 4px; border-bottom:1px solid var(--paper-line); cursor:pointer;
  }
  .factura-card:last-child{ border-bottom:none; }
  .factura-card:hover{ background:var(--paper); }
  .factura-card-info{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
  .factura-card-fecha{ font-size:11.5px; color:var(--ink-soft); font-weight:600; }
  .factura-card-cliente{ font-size:14.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .factura-card-desc{ font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .factura-card-total{ font-family:'IBM Plex Mono',monospace; font-size:14.5px; font-weight:700; margin-top:2px; }
  .factura-card-actions{ display:flex; flex-direction:row; align-items:center; gap:0; flex-shrink:0; }