:root {
      --bg:          #FBFBFA;
      --surface:     #FFFFFF;
      --surface-2:   #F4F3F0;
      --elevated:    #F9F8F5;
      --border:      rgba(0,0,0,0.08);
      --border-soft: rgba(0,0,0,0.04);
      --sky:         #1569A8;
      --sky-dim:     #E1F3FE;
      --amber:       #8A6000;
      --amber-dim:   #FBF3DB;
      --green:       #2E5F30;
      --green-dim:   #EDF3EC;
      --red:         #9A2B2A;
      --red-dim:     #FDEBEC;
      --yellow:      #B8860B;
      --txt:         #1A1A1A;
      --txt-2:       #787774;
      --txt-3:       #AEAAA4;
      --r:           0.75rem;
      --r-sm:        0.5rem;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--txt); overflow: hidden; }
    button { font-family: 'Outfit', sans-serif; -webkit-appearance: none; appearance: none; }

    /* ── LAYOUT ── */
    .app { display: grid; grid-template-columns: 260px 1fr; height: 100vh; }

    /* ══════════════════════════════════════
       SIDEBAR
    ══════════════════════════════════════ */
    .sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }

    .sidebar-head { padding: 1.1rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
    .logo-mark { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
    .logo-ar    { color: var(--sky); font-size: 0.75em; }
    .logo-gento { color: var(--txt); }
    .logo-ia    { color: var(--sky); }

    /* Nav principal (Dashboard) */
    .nav-main { padding: 0.5rem 0.5rem 0; }
    .nav-item {
      display: flex; align-items: center; gap: 0.625rem;
      padding: 0.55rem 0.75rem;
      border-radius: var(--r-sm);
      cursor: pointer; font-size: 0.82rem; font-weight: 600;
      color: var(--txt-2); transition: background 0.15s, color 0.15s;
      user-select: none;
    }
    .nav-item:hover  { background: var(--elevated); color: var(--txt); }
    .nav-item.active { background: var(--elevated); color: var(--txt); }
    .nav-item svg { flex-shrink: 0; }

    .nav-item-soon {
      display: flex; align-items: center; gap: 0.625rem;
      padding: 0.55rem 0.75rem;
      border-radius: var(--r-sm);
      font-size: 0.82rem; font-weight: 600;
      color: var(--txt-3); cursor: default;
    }
    .soon-tag {
      margin-left: auto;
      font-size: 0.6rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.05em;
      padding: 0.15rem 0.45rem;
      background: var(--elevated);
      border: 1px solid var(--border);
      border-radius: 2rem;
      color: var(--txt-3);
    }

    .sidebar-divider { height: 1px; background: var(--border); margin: 0.5rem 1rem; }

    .sidebar-scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

    /* Módulos */
    .mod-nav { display: flex; flex-direction: column; padding: 0.25rem 0; }
    .mod-section-lbl { padding: 0.5rem 1rem 0.25rem; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-3); }

    .mod-header {
      display: flex; align-items: center; gap: 0.625rem;
      padding: 0.5rem 0.75rem 0.5rem 1rem;
      cursor: pointer; transition: background 0.15s;
      user-select: none;
    }
    .mod-header:hover  { background: var(--elevated); }
    .mod-header.active { background: var(--elevated); }

    .mod-icon { width: 26px; height: 26px; border-radius: 0.4rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mod-label { flex: 1; min-width: 0; }
    .mod-name  { font-size: 0.79rem; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mod-badge { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--txt-3); }

    .mod-chevron { flex-shrink: 0; color: var(--txt-3); transition: transform 0.2s; }
    .mod-header.open .mod-chevron { transform: rotate(90deg); }

    .mod-convs { display: none; flex-direction: column; gap: 0.1rem; padding: 0.1rem 0.5rem 0.35rem 2.6rem; }
    .mod-convs.open { display: flex; }

    .conv-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.625rem; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s; text-decoration: none; }
    .conv-item:hover  { background: var(--elevated); }
    .conv-item.active { background: var(--elevated); }
    .conv-dot  { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
    .conv-txt  { font-size: 0.765rem; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .conv-item.active .conv-txt { color: var(--txt); }

    .conv-new { display: flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.625rem; border-radius: var(--r-sm); cursor: pointer; font-size: 0.73rem; color: var(--txt-3); transition: color 0.15s, background 0.15s; }
    .conv-new:hover { background: var(--elevated); color: var(--txt-2); }

    .conv-item { position: relative; }
    .conv-menu-btn { display: none; position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--txt-3); padding: 2px 4px; border-radius: 3px; font-size: 0.85rem; line-height: 1; }
    .conv-item:hover .conv-menu-btn { display: block; }
    .conv-menu-btn:hover { color: var(--txt); background: var(--border); }
    .conv-menu-dropdown { position: absolute; right: 0; top: calc(100% + 2px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.2rem; z-index: 200; min-width: 110px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
    .conv-menu-dropdown button { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 0.3rem 0.5rem; font-size: 0.73rem; color: var(--red); border-radius: 3px; }
    .conv-menu-dropdown button:hover { background: var(--elevated); }

    /* Nueva conversación modal (inline en el chat) */
    .nueva-conv-modal { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.125rem; margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0.625rem; }
    .nueva-conv-modal h4 { font-size: 0.82rem; font-weight: 600; color: var(--txt); margin: 0; }
    .nueva-conv-btn { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; }
    .nueva-conv-btn:hover { border-color: var(--sky); background: var(--elevated); }
    .nueva-conv-btn-icon { width: 32px; height: 32px; border-radius: 0.45rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .nueva-conv-btn-icon.icon-factura { background: var(--sky-dim); border: 1px solid rgba(0,166,227,0.2); }
    .nueva-conv-btn-icon.icon-consulta { background: var(--elevated); border: 1px solid var(--border); }
    .nueva-conv-btn-text strong { display: block; font-size: 0.8rem; color: var(--txt); }
    .nueva-conv-btn-text span { font-size: 0.73rem; color: var(--txt-3); }

    /* Invoice form */
    .invoice-form { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.125rem; margin: 0.75rem 0; }
    .invoice-form h4 { font-size: 0.82rem; font-weight: 600; color: var(--txt); margin: 0 0 0.75rem; }
    .invoice-form-grid { display: flex; flex-direction: column; gap: 0.5rem; }
    .invoice-field { display: flex; flex-direction: column; gap: 0.2rem; }
    .invoice-field label { font-size: 0.72rem; color: var(--txt-3); }
    .invoice-field input, .invoice-field select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.35rem 0.5rem; font-size: 0.8rem; color: var(--txt); width: 100%; box-sizing: border-box; }
    .invoice-field input:focus, .invoice-field select:focus { outline: none; border-color: var(--sky); }
    .invoice-field input[readonly] { color: var(--txt-2); cursor: not-allowed; }
    .invoice-field .invoice-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .invoice-field .invoice-pill { padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: 99px; font-size: 0.73rem; color: var(--txt-2); cursor: pointer; transition: all 0.12s; }
    .invoice-field .invoice-pill.selected { border-color: var(--sky); background: var(--sky-dim, rgba(0,166,227,0.15)); color: var(--sky); }
    /* ── Sistema de botones global ─────────────────────────────────────────
       .btn          base: reset + layout + transiciones
       .btn-solid    fondo sky, texto blanco  (acción principal)
       .btn-outline  borde, fondo surface     (acción secundaria)
       .btn-ghost    sin borde, hover sutil   (terciario / destructivo con mod)
       .btn-sm       tamaño reducido
       .btn-danger   variante roja
    ──────────────────────────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
      padding: 0.46rem 0.95rem;
      border-radius: var(--r-sm);
      font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 600; line-height: 1;
      border: 1px solid transparent;
      cursor: pointer; white-space: nowrap;
      transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s;
      -webkit-appearance: none; appearance: none;
    }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
    .btn svg { flex-shrink: 0; }

    .btn-solid  { background: var(--sky); border-color: var(--sky); color: #fff; }
    .btn-solid:hover  { background: #0091c7; border-color: #0091c7; }

    .btn-outline { background: var(--surface); border-color: var(--border); color: var(--txt-2); }
    .btn-outline:hover { background: var(--elevated); border-color: var(--sky); color: var(--sky); }

    .btn-ghost  { background: transparent; border-color: transparent; color: var(--txt-2); }
    .btn-ghost:hover { background: var(--elevated); color: var(--txt); }

    .btn-danger { background: transparent; border-color: rgba(154,43,42,0.25); color: var(--red); }
    .btn-danger:hover { background: rgba(154,43,42,0.07); }

    .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.74rem; }

    /* Backwards-compat: .btn-primary fuera de invoice-form-actions */
    .btn-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
      padding: 0.46rem 0.95rem;
      border-radius: var(--r-sm);
      font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 600; line-height: 1;
      background: var(--sky); border: 1px solid var(--sky); color: #fff;
      cursor: pointer; white-space: nowrap;
      transition: background 0.14s, opacity 0.14s;
      -webkit-appearance: none; appearance: none;
    }
    .btn-primary:hover { background: #0091c7; border-color: #0091c7; }
    .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

    .invoice-form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
    .invoice-form-actions button { padding: 0.42rem 0.875rem; border-radius: var(--r-sm); font-size: 0.8rem; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--txt-2); transition: all 0.12s; }
    .invoice-form-actions .btn-primary { background: var(--sky); border-color: var(--sky); color: #fff; font-weight: 600; }
    .invoice-form-actions .btn-primary:hover { background: #0091c7; border-color: #0091c7; opacity: 1; }
    .btn-icon-label { display: inline-flex; align-items: center; gap: 0.4rem; }

    /* Client selector dropdown */
    .client-selector { position: relative; }
    .if-client-search-wrap { position: relative; display: flex; }
    .if-client-search-wrap input { flex: 1; }
    .if-client-clear { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--txt-3); font-size: 0.85rem; padding: 2px 4px; line-height: 1; }
    .if-client-clear:hover { color: var(--red); }
    .if-client-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 300; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-height: 200px; overflow-y: auto; margin-top: 2px; }
    .if-client-option { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.75rem; cursor: pointer; gap: 0.5rem; transition: background 0.12s; font-size: 0.78rem; }
    .if-client-option:hover { background: var(--elevated); }
    .if-client-name { color: var(--txt); font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .if-client-meta { color: var(--txt-3); font-size: 0.68rem; white-space: nowrap; flex-shrink: 0; }
    .if-client-nuevo { color: var(--sky); font-weight: 600; border-top: 1px solid var(--border); justify-content: flex-start; }
    .nuevo-cliente-form { margin-top: 0.75rem; padding-top: 0.75rem; }

    .mod-coming { padding: 0.5rem 0.5rem 0.625rem; font-size: 0.73rem; color: var(--txt-3); line-height: 1.45; }

    /* Grupo de módulos próximos */
    .mod-group-header {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.4rem 0.75rem; margin: 0.2rem 0;
      border-radius: var(--r-sm); cursor: pointer;
      font-size: 0.72rem; font-weight: 600; color: var(--txt-3);
      text-transform: uppercase; letter-spacing: 0.07em;
      transition: background 0.15s; user-select: none;
    }
    .mod-group-header:hover { background: var(--elevated); color: var(--txt-2); }
    .mod-group-chevron { margin-left: auto; transition: transform 0.2s; }
    .mod-group-header.open .mod-group-chevron { transform: rotate(90deg); }
    .mod-group-body { display: none; }
    .mod-group-body.open { display: block; }

    /* Tooltip descripción en módulos */
    .mod-desc {
      font-size: 0.7rem; color: var(--txt-3); line-height: 1.45;
      padding: 0.3rem 0.75rem 0.5rem 2.85rem; display: none;
    }
    .mod-header.open + .mod-convs + .mod-desc,
    .mod-header:hover .mod-desc { display: block; }
    /* descripción visible al abrir el módulo */
    .mod-header.open ~ .mod-desc { display: block; }

    /* Clientes */
    .sidebar-section { padding: 0.75rem 1rem 0.3rem; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-3); }
    .clientes-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem 0.3rem; }
    #btn-add-cliente { background: none; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; color: var(--sky); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.12s; flex-shrink: 0; }
    #btn-add-cliente:hover { background: var(--sky-dim); }
    .sidebar-search { width: 100%; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.3rem 0.5rem; font-size: 0.73rem; color: var(--txt); font-family: 'Outfit', sans-serif; }
    .sidebar-search:focus { outline: none; border-color: var(--sky); }
    .sidebar-clientes-list { display: flex; flex-direction: column; gap: 0.05rem; padding: 0 0.5rem 0.5rem; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .client-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.6rem; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s; }
    .client-item:hover { background: var(--elevated); }
    .client-item.active { background: var(--elevated); }
    .client-avatar { width: 26px; height: 26px; border-radius: 0.4rem; background: var(--sky-dim); border: 1px solid rgba(0,166,227,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 800; color: var(--sky); flex-shrink: 0; }
    .client-info { min-width: 0; flex: 1; }
    .client-name { font-size: 0.765rem; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .client-meta { font-size: 0.66rem; color: var(--txt-3); }
    .client-empty { padding: 0.6rem 0.625rem; font-size: 0.73rem; color: var(--txt-3); }

    /* ── Tabs de Facturación ── */
    .fact-tabs { display: none; align-items: center; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface); padding: 0 1rem; flex-shrink: 0; }
    .fact-tabs.visible { display: flex; }
    .fact-tab { padding: 0.6rem 1rem; font-size: 0.78rem; font-weight: 500; color: var(--txt-3); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; }
    .fact-tab:hover { color: var(--txt-2); }
    .fact-tab.active { color: var(--sky); border-bottom-color: var(--sky); }

    /* ── View Facturación Masiva ── */
    .importar-view { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .importar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.375rem 1.5rem; max-width: 900px; }
    .importar-dropzone { border: 2px dashed var(--border); border-radius: var(--r-sm); padding: 2rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
    .importar-dropzone:hover, .importar-dropzone.drag-over { border-color: var(--sky); background: var(--sky-dim); }
    .importar-dropzone input[type=file] { display: none; }
    .importar-actions { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
    .batch-progress { font-size: 0.8rem; color: var(--txt-2); padding: 0.5rem 0; }
    .importar-disclaimer { background: var(--sky-dim); border: 1px solid rgba(21,105,168,0.2); border-radius: var(--r-sm); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.78rem; color: var(--txt-2); }
    .importar-disclaimer .disclaimer-title { font-weight: 600; color: var(--sky); margin-bottom: 0.4rem; font-size: 0.8rem; }
    .importar-disclaimer ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; }
    /* Preview table */
    .preview-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; margin-top: 1rem; }
    .preview-table th { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--border); color: var(--txt-3); font-weight: 600; white-space: nowrap; }
    .preview-table td { padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
    .preview-table td.obs-cell { color: var(--red); font-size: 0.73rem; max-width: 220px; }
    .preview-table td.status-cell { text-align: center; width: 28px; }
    .preview-icon-ok  { color: var(--green); font-weight: 700; }
    .preview-icon-err { color: var(--red);   font-weight: 700; }
    .preview-pagination { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.78rem; color: var(--txt-2); }
    .preview-summary { font-size: 0.8rem; font-weight: 600; margin-top: 0.75rem; }
    .preview-summary .ok-count  { color: var(--green); }
    .preview-summary .err-count { color: var(--red); }
    .revision-grid { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
    .revision-grid th { padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--border); color: var(--txt-3); font-weight: 600; text-align: left; white-space: nowrap; }
    .revision-grid td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .revision-grid tr:last-child td { border-bottom: none; }
    .revision-grid tr.row-deselected td { opacity: 0.4; text-decoration: line-through; }
    .revision-grid input[type=checkbox] { accent-color: var(--sky); width: 15px; height: 15px; cursor: pointer; }
    .revision-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
    .revision-title { font-size: 0.85rem; font-weight: 600; color: var(--txt-1); }
    .revision-count { font-size: 0.78rem; color: var(--txt-2); }
    .revision-footer { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
    .auto-emit-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.8rem; color: var(--txt-2); border-bottom: 1px solid var(--border); }
    .auto-emit-row .emit-badge { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 4px; white-space: nowrap; }
    .emit-badge-ok  { background: var(--green-dim); color: var(--green); }
    .emit-badge-err { background: var(--red-dim,#fde8e8); color: var(--red); }

    /* ── View Comprobantes / Grilla ── */
    .comprobantes-view { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .comp-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 0.75rem 1rem; }
    .comp-filters input, .comp-filters select { font-size: 0.8rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--txt); min-width: 130px; }
    .comp-filters input[type=date] { min-width: 140px; }
    .comp-table-wrap { overflow-x: auto; }
    .comp-table { width: 100%; border-collapse: collapse; font-size: 0.79rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .comp-table th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--txt-3); font-weight: 600; white-space: nowrap; background: var(--elevated); }
    .comp-table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .comp-table tr:last-child td { border-bottom: none; }
    .comp-table tr:hover td { background: var(--elevated); }
    .badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.5rem; border-radius: 99px; font-size: 0.72rem; font-weight: 600; }
    .badge-ok { background: var(--green-dim); color: var(--green); }
    .badge-error { background: var(--red-dim); color: var(--red); }
    .badge-pending { background: var(--amber-dim); color: var(--amber); }

    /* ── Toast ─────────────────────────────────────────────────────────── */
    #toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; align-items: flex-end; }
    .toast {
      display: flex; align-items: flex-start; gap: 0.75rem;
      padding: 0.75rem 1rem; border-radius: var(--r);
      font-size: 0.8rem; font-weight: 400; line-height: 1.45;
      max-width: 340px; min-width: 220px;
      background: var(--surface); border: 1px solid var(--border);
      box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
      pointer-events: all; cursor: default;
      animation: toast-in 0.22s cubic-bezier(.2,.8,.4,1) forwards;
      position: relative; overflow: hidden;
    }
    .toast::after {
      content: ''; position: absolute; bottom: 0; left: 0;
      height: 2px; width: 100%;
      animation: toast-bar var(--toast-dur, 5s) linear forwards;
    }
    .toast-success::after { background: var(--green); }
    .toast-warning::after { background: var(--amber); }
    .toast-error::after   { background: var(--red); }
    .toast-info::after    { background: var(--sky); }
    .toast-icon {
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: 0.65rem; font-weight: 700; margin-top: 1px;
    }
    .toast-success .toast-icon { background: var(--green-dim); color: var(--green); }
    .toast-warning .toast-icon { background: var(--amber-dim); color: var(--amber); }
    .toast-error   .toast-icon { background: var(--red-dim);   color: var(--red); }
    .toast-info    .toast-icon { background: var(--sky-dim);   color: var(--sky); }
    .toast-body { flex: 1; color: var(--txt); }
    .toast-body strong { font-weight: 600; display: block; margin-bottom: 0.1rem; font-size: 0.78rem; }
    .toast-body span { color: var(--txt-2); font-size: 0.76rem; }
    .toast-close { background: none; border: none; cursor: pointer; color: var(--txt-3); font-size: 0.85rem; padding: 0; line-height: 1; flex-shrink: 0; margin-top: 1px; transition: color 0.15s; }
    .toast-close:hover { color: var(--txt); }
    .toast-exit { animation: toast-out 0.2s ease forwards; }
    @keyframes toast-in  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes toast-out { from { opacity: 1; transform: translateX(0);    } to { opacity: 0; transform: translateX(12px); } }
    @keyframes toast-bar { from { width: 100%; } to { width: 0%; } }
    @media (max-width: 700px) { #toast-container { bottom: 1rem; right: 1rem; left: 1rem; align-items: stretch; } .toast { max-width: 100%; } }
    .comp-actions { display: flex; gap: 0.3rem; }
    .comp-act-btn { padding: 0.2rem 0.5rem; font-size: 0.72rem; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--elevated); color: var(--txt-2); cursor: pointer; transition: background 0.15s; white-space: nowrap; }
    .comp-act-btn:hover { background: var(--border); }
    .comp-act-wa { color: #25d366; border-color: #25d36640; background: #e8fdf0; display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.45rem; }
    .comp-act-wa:hover { background: #d0f5e0; }
    .comp-pagination { display: flex; gap: 0.4rem; justify-content: center; padding: 0.5rem 0; }
    .comp-page-btn { padding: 0.25rem 0.6rem; font-size: 0.78rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--elevated); color: var(--txt-2); cursor: pointer; }
    .comp-page-btn.active { background: var(--sky); color: #fff; border-color: var(--sky); }
    dialog.error-dialog { border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem; max-width: 480px; background: var(--surface); color: var(--txt); }
    dialog.error-dialog::backdrop { background: rgba(0,0,0,0.4); }

    /* ── Resumen de importes en formulario ── */
    .monto-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 0.5rem; }
    .monto-toggle label { flex: 1; text-align: center; padding: 0.35rem 0.5rem; font-size: 0.78rem; cursor: pointer; color: var(--txt-2); transition: background 0.15s, color 0.15s; border-left: 1px solid var(--border); }
    .monto-toggle label:first-of-type { border-left: none; }
    .monto-toggle input[type=radio] { display: none; }
    .monto-toggle input:checked + label { background: var(--sky); color: #fff; }
    .importe-resumen { background: var(--elevated); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.4rem; }
    .importe-resumen-row { display: flex; justify-content: space-between; color: var(--txt-2); }
    .importe-resumen-row.total { font-weight: 700; color: var(--txt); border-top: 1px solid var(--border); padding-top: 0.25rem; margin-top: 0.1rem; }

    /* Vista Clientes (panel principal) */
    .clientes-view { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .clientes-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.375rem 1.5rem; max-width: 560px; }
    .clientes-form-title { font-size: 0.92rem; font-weight: 700; color: var(--txt); margin-bottom: 0.75rem; }
    .cf-tabs { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
    .cf-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 600; color: var(--txt-3); cursor: pointer; margin-bottom: -1px; }
    .cf-tab.active { color: var(--txt); border-bottom-color: var(--sky); }
    .cf-imp-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.82rem; }
    .cf-imp-item:last-child { border-bottom: none; }
    .cf-imp-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--sky); flex-shrink: 0; }
    .cf-imp-badge { font-size: 0.68rem; color: var(--txt-3); background: var(--elevated); border-radius: 4px; padding: 0.1rem 0.35rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .form-field { display: flex; flex-direction: column; gap: 0.25rem; }
    .form-field.full { grid-column: span 2; }
    .form-field label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--txt-3); }
    .form-field input, .form-field select, .form-field textarea { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.42rem 0.6rem; font-size: 0.82rem; color: var(--txt); font-family: 'Outfit', sans-serif; width: 100%; box-sizing: border-box; }
    .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--sky); background: var(--surface); }
    .form-field textarea { resize: vertical; min-height: 64px; }
    .form-actions { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.25rem; }
    .btn-save        { @extend .btn; padding: 0.48rem 1.125rem; background: var(--sky); color: #fff; border: 1px solid var(--sky); border-radius: var(--r-sm); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: 'Outfit', sans-serif; transition: background 0.14s; -webkit-appearance:none; }
    .btn-save:hover  { background: #0091c7; border-color: #0091c7; }
    .btn-cancel-form { padding: 0.48rem 0.875rem; background: transparent; color: var(--txt-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 0.82rem; cursor: pointer; font-family: 'Outfit', sans-serif; transition: background 0.14s, color 0.14s, border-color 0.14s; -webkit-appearance:none; }
    .btn-cancel-form:hover { background: var(--elevated); border-color: var(--sky); color: var(--sky); }
    .btn-delete { margin-left: auto; padding: 0.48rem 0.875rem; background: transparent; color: var(--red); border: 1px solid rgba(154,43,42,0.25); border-radius: var(--r-sm); font-size: 0.82rem; cursor: pointer; font-family: 'Outfit', sans-serif; transition: background 0.14s; -webkit-appearance:none; }
    .btn-delete:hover { background: rgba(154,43,42,0.07); }
    .cuit-row { display: flex; gap: 0.4rem; align-items: flex-end; }
    .cuit-row input { flex: 1; }
    .btn-arca-padron { padding: 0.42rem 0.6rem; background: var(--sky); color: #fff; border: none; border-radius: var(--r-sm); font-size: 0.72rem; cursor: pointer; white-space: nowrap; font-family: 'Outfit', sans-serif; flex-shrink: 0; }
    .btn-arca-padron:hover { opacity: 0.9; }
    .btn-arca-padron:disabled { opacity: 0.5; cursor: wait; }

    .sidebar-footer { padding: 0.75rem 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.625rem; }
    .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--amber-dim); border: 1px solid rgba(255,210,30,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; color: var(--amber); flex-shrink: 0; }
    .user-info { min-width: 0; flex: 1; }
    .user-name { font-size: 0.775rem; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-role { font-size: 0.67rem; color: var(--txt-3); }

    /* ══════════════════════════════════════
       MAIN AREA (dashboard o chat)
    ══════════════════════════════════════ */
    .main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
    .view { display: none; flex-direction: column; flex: 1; overflow: hidden; }
    .view.active { display: flex; }

    /* ── HEADER COMPARTIDO ── */
    .main-header { padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--surface); flex-shrink: 0; }
    .main-header-left { display: flex; align-items: center; gap: 0.75rem; }
    .agent-avatar { width: 32px; height: 32px; border-radius: 0.55rem; background: linear-gradient(135deg, var(--sky-dim), rgba(0,166,227,0.2)); border: 1px solid rgba(0,166,227,0.25); display: flex; align-items: center; justify-content: center; }
    .agent-name { font-size: 0.875rem; font-weight: 700; color: var(--txt); }
    .agent-online { display: flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; color: var(--green); }
    .online-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse-dot 2s ease-in-out infinite; }
    @keyframes pulse-dot { 0%,100%{opacity:1}50%{opacity:0.3} }
    .main-header-right { display: flex; align-items: center; gap: 0.5rem; }
    .icon-btn { width: 32px; height: 32px; border-radius: var(--r-sm); background: transparent; border: 1px solid var(--border); color: var(--txt-2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, color 0.2s; }
    .icon-btn:hover { background: var(--elevated); color: var(--txt); }

    /* User Menu */
    .user-menu-wrapper { position: relative; }
    .user-avatar { width: 32px; height: 32px; border-radius: var(--r-sm); background: transparent; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
    .user-avatar:hover { background: var(--elevated); }
    .avatar-circle { width: 20px; height: 20px; border-radius: 50%; background: var(--sky); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; }
    .user-menu { position: absolute; top: 100%; right: 0; margin-top: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; min-width: 200px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity 0.2s, transform 0.2s; z-index: 100; }
    .user-menu.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .user-menu-header { padding: 0.75rem 1rem; }
    .user-menu-name { font-size: 0.8rem; font-weight: 700; color: var(--txt); }
    .user-menu-email { font-size: 0.7rem; color: var(--txt-3); margin-top: 0.2rem; }
    .user-menu-divider { height: 1px; background: var(--border); margin: 0.5rem 0; }
    .user-menu-item { width: 100%; padding: 0.6rem 1rem; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: var(--txt); transition: background 0.2s; text-align: left; }
    .user-menu-item:hover { background: var(--elevated); }
    .user-menu-item svg { flex-shrink: 0; }

    /* ══════════════════════════════════════
       DASHBOARD
    ══════════════════════════════════════ */
    .dashboard { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

    .dash-header { display: flex; align-items: center; justify-content: space-between; }
    .dash-title { font-size: 1.1rem; font-weight: 800; color: var(--txt); }
    .dash-period { font-size: 0.78rem; color: var(--txt-3); background: var(--surface); border: 1px solid var(--border); padding: 0.35rem 0.75rem; border-radius: var(--r-sm); }

    /* KPIs */
    .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.875rem; }
    .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.3rem; }
    .kpi-lbl  { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-3); }
    .kpi-val  { font-size: 1.45rem; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
    .kpi-sub  { font-size: 0.72rem; color: var(--txt-3); }
    .kpi-delta-pos { color: var(--green); font-size: 0.72rem; font-weight: 700; }
    .kpi-delta-neg { color: var(--red); font-size: 0.72rem; font-weight: 700; }

    /* Secciones del dashboard */
    .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .dash-card-full { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }

    .dash-card-head { padding: 0.875rem 1.125rem 0.75rem; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; }
    .dash-card-title { font-size: 0.8rem; font-weight: 700; color: var(--txt); display: flex; align-items: center; gap: 0.5rem; }
    .dash-card-action { font-size: 0.72rem; color: var(--sky); cursor: pointer; font-weight: 600; }
    .dash-card-action:hover { opacity: 0.8; }

    /* ── Semáforo Monotributo ── */
    .sem-list { display: flex; flex-direction: column; }
    .sem-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--border-soft); transition: background 0.15s; cursor: pointer; }
    .sem-row:last-child { border-bottom: none; }
    .sem-row:hover { background: var(--elevated); }

    .sem-light { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .sem-green  { background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,0.5); }
    .sem-yellow { background: var(--yellow); box-shadow: 0 0 6px rgba(250,204,21,0.5); }
    .sem-red    { background: var(--red); box-shadow: 0 0 6px rgba(248,113,113,0.6); animation: blink-red 1.5s ease-in-out infinite; }
    @keyframes blink-red { 0%,100%{opacity:1}50%{opacity:0.4} }

    .sem-info { flex: 1; min-width: 0; }
    .sem-name { font-size: 0.8rem; font-weight: 600; color: var(--txt); }
    .sem-detail { font-size: 0.7rem; color: var(--txt-3); margin-top: 0.1rem; }

    .sem-bar-wrap { width: 90px; flex-shrink: 0; }
    .sem-bar-bg { height: 5px; background: var(--elevated); border-radius: 3px; overflow: hidden; }
    .sem-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
    .sem-pct { font-size: 0.68rem; color: var(--txt-3); text-align: right; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }

    .sem-cat { font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 0.3rem; flex-shrink: 0; }
    .cat-green  { background: var(--green-dim); color: var(--green); }
    .cat-yellow { background: rgba(250,204,21,0.12); color: var(--yellow); }
    .cat-red    { background: var(--red-dim); color: var(--red); }

    /* ── Vencimientos ── */
    .venc-toolbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; border-bottom:1px solid var(--border); gap:0.75rem; flex-wrap:wrap; }
    .venc-sem-strip { display:flex; gap:0.75rem; padding:1rem 1.5rem 0; }
    .venc-sem-card { flex:1; border:1px solid var(--border); border-radius:var(--r); padding:0.75rem 1rem; display:flex; flex-direction:column; gap:0.2rem; }
    .venc-body { padding:1rem 1.5rem; flex:1; overflow-y:auto; }
    .venc-empty { text-align:center; color:var(--txt-3); padding:3rem 0; font-size:0.85rem; }
    .venc-toggle-btn.active { background:var(--elevated); color:var(--txt); }
    .venc-row { display:grid; grid-template-columns:2fr 1.5fr 1fr 1fr 1fr 80px; align-items:center; gap:0.5rem; padding:0.6rem 1rem; border-bottom:1px solid var(--border-soft); font-size:0.82rem; }
    .venc-row:last-child { border-bottom:none; }
    .venc-row:hover { background:var(--elevated); }
    .venc-row-head { font-size:0.67rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--txt-3); padding:0.4rem 1rem; }

    /* Custom selects para filtros de vencimientos */
    .venc-select {
      appearance: none; -webkit-appearance: none;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 0.35rem 2rem 0.35rem 0.75rem;
      font-family: 'Outfit', sans-serif;
      font-size: 0.82rem; font-weight: 500;
      color: var(--txt);
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AEAAA4' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.6rem center;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .venc-select:hover  { border-color: rgba(0,0,0,0.18); }
    .venc-select:focus  { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(21,105,168,0.1); }

    /* Fullscreen calendar */
    #view-vencimientos.cal-fullscreen .venc-sem-strip { display:none; }
    #view-vencimientos.cal-fullscreen .venc-toolbar-filters { display:none; }
    #view-vencimientos.cal-fullscreen .venc-body { padding:0.75rem 1rem; }

    /* Cal pills */
    .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .cal-day-name { text-align:center; font-size:0.67rem; font-weight:700; text-transform:uppercase; color:var(--txt-3); padding:0.4rem 0; }
    .cal-day { min-height:80px; border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:0.3rem; position:relative; overflow:hidden; }
    .cal-day.other-month { opacity:0.3; }
    .cal-day-num { font-size:0.72rem; font-weight:600; color:var(--txt-2); margin-bottom:0.25rem; }
    .cal-pills { display:flex; flex-direction:column; gap:2px; }
    .cal-pill {
      display:block; border-radius:3px;
      padding:0.1rem 0.35rem;
      font-size:0.62rem; font-weight:600;
      color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      cursor:pointer; position:relative;
    }
    .cal-pill:hover .cal-tooltip { display:block; }
    .cal-tooltip { display:none; position:absolute; bottom:110%; left:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:0.3rem 0.5rem; font-size:0.7rem; white-space:nowrap; z-index:10; color:var(--txt); pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,0.08); }

    /* Sidebar collapsible */
    .app { transition: grid-template-columns 0.22s ease; }
    .app.sidebar-collapsed { grid-template-columns: 48px 1fr; }
    .app.sidebar-collapsed .sidebar-scroll,
    .app.sidebar-collapsed .nav-main,
    .app.sidebar-collapsed .sidebar-divider { display:none; }
    .app.sidebar-collapsed .logo-mark { display:none; }
    .app.sidebar-collapsed .sidebar-head { justify-content:center; padding:1.1rem 0.5rem; }
    .sidebar-toggle-btn {
      background: none; border: none; cursor: pointer;
      color: var(--txt-3); border-radius: var(--r-sm);
      padding: 0.3rem;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .sidebar-toggle-btn:hover { background: var(--elevated); color: var(--txt); }

    /* ── Últimas facturas ── */
    .fact-table { width: 100%; }
    .fact-row { display: grid; grid-template-columns: 2fr 1fr 1fr 80px; align-items: center; gap: 0.5rem; padding: 0.65rem 1.125rem; border-bottom: 1px solid var(--border-soft); transition: background 0.15s; cursor: pointer; }
    .fact-row:last-child { border-bottom: none; }
    .fact-row:hover { background: var(--elevated); }
    .fact-row-head { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-3); padding: 0.5rem 1.125rem 0.35rem; }

    .fact-cliente { font-size: 0.8rem; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fact-tipo    { font-size: 0.72rem; color: var(--txt-2); }
    .fact-monto   { font-size: 0.82rem; font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; text-align: right; }
    .fact-estado  { text-align: right; }

    .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; border-radius: 0.35rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
    .badge-green  { background: var(--green-dim); color: var(--green); }
    .badge-amber  { background: var(--amber-dim); color: var(--amber); }
    .badge-red    { background: var(--red-dim); color: var(--red); }
    .badge-sky    { background: var(--sky-dim); color: var(--sky); }

    /* ── IVA ── */
    .iva-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
    .iva-cell { padding: 1rem 1.125rem; border-right: 1px solid var(--border-soft); }
    .iva-cell:last-child { border-right: none; }
    .iva-lbl { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-3); margin-bottom: 0.4rem; }
    .iva-val { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    .iva-sub { font-size: 0.7rem; color: var(--txt-3); margin-top: 0.2rem; }

    .iva-progress { padding: 0.75rem 1.125rem 1rem; }
    .iva-progress-lbl { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--txt-3); margin-bottom: 0.5rem; }
    .iva-bar-bg { height: 8px; background: var(--elevated); border-radius: 4px; overflow: hidden; }
    .iva-bar-segments { height: 100%; display: flex; border-radius: 4px; overflow: hidden; }
    .iva-seg-deb { background: var(--sky); }
    .iva-seg-cred { background: var(--green); }

    /* ══════════════════════════════════════
       CHAT
    ══════════════════════════════════════ */
    .chat-messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

    .msg { display: flex; gap: 0.75rem; max-width: 780px; }
    .msg-avatar { width: 28px; height: 28px; border-radius: 0.5rem; flex-shrink: 0; margin-top: 0.125rem; background: linear-gradient(135deg, var(--sky-dim), rgba(0,166,227,0.2)); border: 1px solid rgba(0,166,227,0.2); display: flex; align-items: center; justify-content: center; }
    .msg-body { display: flex; flex-direction: column; gap: 0.5rem; }
    .msg-name { font-size: 0.72rem; font-weight: 700; color: var(--txt-3); text-transform: uppercase; letter-spacing: 0.05em; }
    .msg-time { font-size: 0.58rem; font-weight: 400; color: var(--txt-3); font-family: Arial, sans-serif; opacity: 0.7; margin-left: 0.4rem; }
    .msg-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 0.25rem 0.75rem 0.75rem 0.75rem; padding: 0.875rem 1.125rem; font-size: 0.875rem; color: var(--txt); line-height: 1.6; }
    .msg-bubble p + p { margin-top: 0.5rem; }
    .msg-bubble strong { font-weight: 700; color: var(--txt); }
    .msg-bubble ol, .msg-bubble ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }

    .opts-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.375rem; }
    .opt-pill { padding: 0.3rem 0.75rem; border-radius: 2rem; font-size: 0.78rem; font-weight: 600; font-family: 'Outfit', sans-serif; border: 1.5px solid var(--border); background: var(--surface); color: var(--txt-2); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .opt-pill:hover { background: var(--sky-dim); color: var(--sky); border-color: rgba(0,166,227,0.3); }

    /* ── Thinking indicator ── */
    .thinking-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--txt-3); cursor: pointer; user-select: none; padding: 0.1rem 0; }
    .thinking-bar svg { transition: transform 0.2s; flex-shrink: 0; }
    .thinking-bar.open svg { transform: rotate(90deg); }
    .thinking-dots { display: flex; gap: 3px; align-items: center; }
    .thinking-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--txt-3); animation: dot-pulse 1.2s ease-in-out infinite; }
    .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
    .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes dot-pulse { 0%,80%,100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

    .msg-user { flex-direction: row-reverse; align-self: flex-end; }
    .msg-user .msg-avatar { background: var(--amber-dim); border-color: rgba(255,210,30,0.2); }
    .msg-user .msg-body { align-items: flex-end; }
    .msg-user .msg-bubble { background: var(--surface-2); border-color: rgba(255,210,30,0.12); border-radius: 0.75rem 0.25rem 0.75rem 0.75rem; }

    .confirm-card { background: var(--surface-2); border: 1px solid rgba(0,166,227,0.2); border-radius: var(--r); padding: 1rem 1.125rem; margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.75rem; max-width: 380px; }
    .confirm-header { display: flex; align-items: center; gap: 0.75rem; }
    .confirm-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--sky-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .confirm-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sky); }
    .confirm-subtitle { font-size: 0.82rem; color: var(--txt-2); margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
    .confirm-monto { margin-left: auto; font-size: 1rem; font-weight: 700; color: var(--amber); white-space: nowrap; }
    .confirm-divider { height: 1px; background: var(--border); }
    .confirm-rows { display: flex; flex-direction: column; gap: 0.4rem; }
    .confirm-row { display: flex; justify-content: space-between; font-size: 0.82rem; gap: 1rem; }
    .confirm-lbl { color: var(--txt-3); }
    .confirm-val { color: var(--txt); font-weight: 600; }
    .confirm-actions { display: flex; gap: 0.5rem; padding-top: 0.25rem; }
    .btn-confirm { padding: 0.45rem 1rem; border-radius: var(--r-sm); font-family: 'Outfit',sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: none; transition: opacity 0.2s; }
    .btn-confirm:hover { opacity: 0.85; }
    .btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-ok     { background: var(--sky); color: #fff; }
    .btn-cancel { background: var(--elevated); color: var(--txt-2); border: 1px solid var(--border); }

    .tool-card { background: var(--surface-2); border-radius: var(--r); padding: 1rem 1.125rem; margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
    .tool-card-success { border: 1px solid rgba(74,222,128,0.2); }
    .tool-card-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
    .tool-card-success .tool-card-header { color: var(--green); }
    .tool-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; }
    .tool-card-success .tool-icon { background: var(--green-dim); }
    .tool-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; }
    .tool-row { display: flex; flex-direction: column; gap: 0.1rem; }
    .tool-lbl { font-size: 0.67rem; color: var(--txt-3); }
    .tool-val { font-size: 0.82rem; font-weight: 600; color: var(--txt); }
    .tool-footer { padding-top: 0.5rem; border-top: 1px solid var(--border-soft); display: flex; gap: 0.5rem; }
    .tool-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 2rem; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
    .chip-green { background: var(--green-dim); color: var(--green); }
    .chip-sky   { background: var(--sky-dim);   color: var(--sky); }

    /* Input */
    .chat-input-wrap { padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
    .chat-input-box { display: flex; align-items: flex-end; gap: 0.625rem; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r); padding: 0.625rem 0.75rem 0.625rem 1rem; transition: border-color 0.2s; }
    .chat-input-box:focus-within { border-color: rgba(0,166,227,0.3); }
    .chat-textarea { flex: 1; background: transparent; border: none; outline: none; font-family: 'Outfit',sans-serif; font-size: 0.875rem; color: var(--txt); resize: none; min-height: 24px; max-height: 120px; line-height: 1.5; }
    .chat-textarea::placeholder { color: var(--txt-3); }
    .send-btn { width: 32px; height: 32px; border-radius: 0.5rem; background: var(--sky); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.2s; }
    .send-btn:hover { opacity: 0.85; }
    .input-hint { margin-top: 0.5rem; font-size: 0.68rem; color: var(--txt-3); text-align: center; }

    /* ══════════════════════════════════════
       RESPONSIVE MOBILE
    ══════════════════════════════════════ */
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 90; }
    .sidebar-overlay.open { display: block; }

    .btn-hamburger {
      display: none; width: 34px; height: 34px; border-radius: var(--r-sm);
      background: transparent; border: 1px solid var(--border); color: var(--txt-2);
      align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    }

    @media (max-width: 700px) {
      /* ── Layout: sidebar oculto por defecto ── */
      .app { grid-template-columns: 1fr; }

      .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
        width: 78vw; max-width: 300px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
      }
      .sidebar.open { transform: translateX(0); }

      .btn-hamburger { display: flex; }

      /* ── Header: compactar ── */
      .main-header { padding: 0.625rem 0.875rem; }
      .main-header-title { font-size: 0.95rem; }
      .main-header-sub   { font-size: 0.72rem; }

      /* ── Chat messages ── */
      .messages { padding: 0.75rem 0.75rem 1rem; }
      .msg { gap: 0.5rem; }
      .msg-bubble { font-size: 0.88rem; padding: 0.6rem 0.8rem; }
      .msg-avatar { width: 26px; height: 26px; flex-shrink: 0; }

      /* ── Chat input ── */
      .input-area { padding: 0.5rem 0.75rem; }
      .input-bar  { padding: 0.45rem 0.6rem 0.45rem 0.75rem; }
      #chat-input { font-size: 0.83rem; }

      /* ── Tabs ── */
      .fact-tabs { padding: 0 0.5rem; overflow-x: auto; }
      .fact-tab  { padding: 0.55rem 0.75rem; font-size: 0.74rem; white-space: nowrap; }

      /* Fuentes más legibles en mobile */
      .agent-name  { font-size: 0.95rem; }
      .agent-online { font-size: 0.72rem; }
      .logo-mark   { font-size: 1.1rem; }
      .mod-name    { font-size: 0.84rem; }
      .nav-item    { font-size: 0.84rem; }
      .tool-card   { font-size: 0.84rem; }
      .confirm-card { font-size: 0.86rem; }
      .invoice-form h4 { font-size: 1rem; }
      .invoice-field label { font-size: 0.82rem; }
      .invoice-pill { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
      .btn-confirm { padding: 0.5rem 1rem; font-size: 0.82rem; }
      .comp-table th, .comp-table td { font-size: 0.78rem; }
      .kpi-val { font-size: 1.2rem; }

      /* ── Tool / Confirm cards ── */
      .tool-card { font-size: 0.8rem; }
      .tool-rows { grid-template-columns: 1fr; gap: 0.35rem; }
      .confirm-card { font-size: 0.82rem; }
      .confirm-actions { gap: 0.4rem; }
      .btn-confirm { padding: 0.45rem 0.875rem; font-size: 0.78rem; }

      /* ── Invoice form ── */
      .invoice-form { padding: 0.875rem; }
      .invoice-form-grid { gap: 0.75rem; }
      .invoice-pills { gap: 0.3rem; }
      .invoice-pill { padding: 0.3rem 0.6rem; font-size: 0.76rem; }

      /* ── Grilla Comprobantes ── */
      .comprobantes-view { padding: 0.75rem; }
      .comp-filters { flex-direction: column; gap: 0.4rem; }
      .comp-filters input,
      .comp-filters select { width: 100%; min-width: unset; }
      /* Columnas prioritarias: Fecha, Cliente, Importe, Estado — ocultar las menos críticas */
      .comp-table th:nth-child(3),
      .comp-table td:nth-child(3),
      .comp-table th:nth-child(4),
      .comp-table td:nth-child(4) { display: none; }
      .comp-table th, .comp-table td { padding: 0.4rem 0.5rem; font-size: 0.74rem; }

      /* ── Vista Importar ── */
      .importar-view { padding: 0.875rem; }
      .importar-card { padding: 1rem; }
      .preview-table { font-size: 0.74rem; }

      /* ── Grilla KPIs ── */
      .kpi-row  { grid-template-columns: 1fr 1fr; }
      .dash-grid { grid-template-columns: 1fr; }
      .iva-grid  { grid-template-columns: 1fr; }
      .form-row  { grid-template-columns: 1fr; }
      .form-field.full { grid-column: auto; }
      .fact-row  { grid-template-columns: 2fr 1fr 80px; }
      .fact-row > :nth-child(3) { display: none; } /* ocultar columna "tipo" en mobile */

      /* ── Clientes view ── */
      .clientes-view { flex-direction: column; }
      .clientes-left  { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 220px; }
      .clientes-right { flex: 1; overflow-y: auto; }
      .clientes-form-card { padding: 1rem; }

      /* ── Semáforo ── */
      .sem-row { flex-wrap: wrap; gap: 0.4rem; }
      .sem-bar-wrap { min-width: 100%; order: 4; }

      /* ── Sidebar footer: compactar ── */
      .sidebar-footer { padding: 0.6rem 0.75rem; }
      .user-name  { font-size: 0.75rem; }
      .user-email { font-size: 0.65rem; }
    }

    @media (max-width: 380px) {
      .kpi-row { grid-template-columns: 1fr; }
      .fact-tab { padding: 0.5rem 0.55rem; font-size: 0.7rem; }
    }