/* ============================================================
   Gestión Comercial — Sistema de diseño unificado
   Inspiración: shadcn/ui, Linear, Stripe, Vercel. Inter + acento azul,
   neutros suaves, bordes sutiles, sombras leves. Alta legibilidad.
   ============================================================ */
:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e6eaf0;
  --line-2: #eef1f6;

  --brand: #2563eb;
  --brand-d: #1d4ed8;
  --brand-soft: #eff4ff;

  --ok: #16a34a; --ok-soft: #effdf4;
  --danger: #dc2626; --danger-soft: #fef2f2;
  --warn: #d97706; --warn-soft: #fff7ed;

  --sidebar: #0f172a;
  --sidebar-2: #111c33;
  --sb-ink: #aeb9cc;
  --sb-ink-soft: #6b7689;

  --radius: 14px;
  --radius-md: 11px;
  --radius-sm: 9px;
  --pill: 999px;

  --sh-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --sh: 0 6px 22px rgba(15,23,42,.08);
  --sh-lg: 0 24px 60px rgba(15,23,42,.28);

  --sidebar-w: 266px;
  --fs: 16px;
}

* { box-sizing: border-box; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: var(--brand); }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: none;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  color: var(--sb-ink); overflow-y: auto; padding-bottom: 24px;
  transition: transform .25s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; color: #fff; font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 4px 12px rgba(37,99,235,.45); }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; }
.nav-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--sb-ink-soft); padding: 16px 12px 6px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--sb-ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.4); }
.nav-item .ic { width: 19px; height: 19px; }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: 62px;
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-title { font-weight: 700; color: var(--ink); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { display: none; background: transparent; border: 0; color: var(--ink); padding: 8px; border-radius: 9px; cursor: pointer; }
.icon-btn:hover { background: var(--line-2); }
.scrim { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 35; }

.app { width: 100%; max-width: 1200px; margin: 0 auto; padding: 26px 24px 96px; }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.page-head .spacer { flex: 1; }

/* ---------- Cards / grid ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; box-shadow: var(--sh-sm); }
.card h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 14px; letter-spacing: -.01em; }
.card h3 { font-size: .95rem; font-weight: 700; margin: 0 0 8px; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: #fff; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 16px; font: inherit; font-size: .92rem; font-weight: 600; min-height: 42px; cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--brand-d); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 17px; height: 17px; }
.btn.sec { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.sec:hover { background: #f8fafc; border-color: #d6dde7; }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn.ghost:hover { background: var(--line-2); }
.btn.ok { background: var(--ok); } .btn.ok:hover { background: #15803d; }
.btn.danger { background: var(--danger); } .btn.danger:hover { background: #b91c1c; }
.btn.sm { padding: 7px 12px; min-height: 36px; font-size: .85rem; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .82rem; color: var(--muted); }
.field input, .field select, .field textarea, input, select, textarea {
  font: inherit; font-size: .98rem; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }
.hint { font-size: .82rem; color: var(--muted); }
.err-msg { color: var(--danger); font-weight: 600; font-size: .82rem; }
.invalid input, input.invalid { border-color: var(--danger) !important; }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-2); }
th { background: #f8fafc; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; position: sticky; top: 0; z-index: 1; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fafd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-actions { display: flex; gap: 6px; }

/* ---------- Chips / estados ---------- */
.chip { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: .76rem; font-weight: 700; }
.chip.green { background: var(--ok-soft); color: var(--ok); }
.chip.gray { background: #f1f5f9; color: var(--muted); }
.chip.blue { background: var(--brand-soft); color: var(--brand-d); }
.chip.red { background: var(--danger-soft); color: var(--danger); }

.saldo-pos { color: var(--danger); font-weight: 700; }
.saldo-neg { color: var(--ok); font-weight: 700; }
.saldo-cero { color: var(--muted); font-weight: 600; }

/* ---------- Totales ---------- */
.totales { background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 18px; }
.totales .linea { display: flex; justify-content: space-between; padding: 5px 0; font-size: 1rem; }
.totales .grandtotal { font-size: 1.35rem; font-weight: 800; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; letter-spacing: -.01em; }

/* ---------- KPIs ---------- */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--sh-sm); }
.kpi .label { color: var(--muted); font-weight: 600; font-size: .82rem; }
.kpi .value { font-size: 1.7rem; font-weight: 800; margin-top: 6px; letter-spacing: -.02em; }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 4vh 14px; z-index: 50; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 720px; box-shadow: var(--sh-lg); animation: pop .16s ease; display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
.modal > h2 { flex: none; margin: 0; padding: 20px 24px 12px; }
.modal-body { padding: 2px 24px 16px; overflow-y: auto; flex: 1 1 auto; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal h2 { margin: 0 0 14px; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.modal h3 { margin: 16px 0 6px; font-size: .95rem; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; flex: none; padding: 12px 24px; border-top: 1px solid var(--line); background: #fff; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(140px); background: #0f172a; color: #fff; padding: 13px 20px; border-radius: 12px; font-weight: 600; font-size: .95rem; z-index: 60; transition: transform .25s ease; max-width: 90vw; box-shadow: var(--sh-lg); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--danger); }

/* ---------- F10 / imágenes ---------- */
.f10-result .precio { font-size: 1.2rem; font-weight: 800; color: var(--brand-d); }
.f10-result .cuota { font-size: 1rem; color: var(--ok); font-weight: 700; }
.f10-galeria { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.f10-img { width: 130px; height: 130px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 6px; }
.thumb { width: 46px; height: 46px; object-fit: contain; border-radius: 9px; border: 1px solid var(--line); background: #fff; }
.thumb-empty { width: 46px; height: 46px; border-radius: 9px; border: 1px dashed var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.img-gal { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.thumb-g { width: 90px; height: 90px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; padding: 4px; }

/* ---------- Login ---------- */
.login-overlay { position: fixed; inset: 0; background: radial-gradient(1200px 500px at 50% -10%, #1e293b, var(--sidebar)); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.login-card { background: #fff; border-radius: 18px; padding: 34px 28px; width: 100%; max-width: 390px; box-shadow: var(--sh-lg); }
.login-brand { display: flex; align-items: center; gap: 11px; justify-content: center; font-size: 1.4rem; font-weight: 800; color: var(--ink); margin-bottom: 22px; }
.login-brand .brand-mark { width: 40px; height: 40px; }
.login-card .btn { width: 100%; margin-top: 8px; }
.login-card .err-msg { min-height: 1.2em; margin-bottom: 8px; }

/* ---------- Impresión / PDF ---------- */
#printArea { display: none; }
@media print {
  body.printing .layout, body.printing #toast, body.printing #modalRoot { display: none !important; }
  body.printing #printArea { display: block !important; }
  #printArea { color: #000; font-size: 12px; }
  @page { margin: 14mm; }
}
.doc { color: #111; font-family: Inter, system-ui, sans-serif; }
.doc h1 { font-size: 18px; margin: 0 0 2px; }
.doc .doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 14px; }
.doc .doc-emp { font-size: 12px; line-height: 1.4; }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
.doc th, .doc td { border-bottom: 1px solid #ccc; padding: 7px 8px; text-align: left; }
.doc td.num, .doc th.num { text-align: right; }
.doc .doc-tot { margin-top: 12px; font-size: 14px; text-align: right; }
.doc .doc-tot strong { font-size: 18px; }
.doc .doc-foot { margin-top: 18px; font-size: 11px; color: #555; }

/* ---------- Stock badges ---------- */
.stock-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.stock-badge.si { background: var(--ok-soft); color: var(--ok); }
.stock-badge.no { background: var(--danger-soft); color: var(--danger); }

/* ---------- Picker (selector con búsqueda) ---------- */
.picker { position: relative; }
.picker-input { width: 100%; }
.picker-input { font-size: 1.05rem; padding: 11px 12px; }
.picker-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: #fff; border: 2px solid var(--brand); border-radius: 10px; box-shadow: var(--sh-sm); max-height: min(60vh, 460px); overflow-y: auto; min-width: 320px; }
.picker-opt { padding: 13px 15px; cursor: pointer; font-size: 1.02rem; line-height: 1.3; border-bottom: 1px solid var(--bg); }
.picker-opt:last-child { border-bottom: 0; }
.picker-opt:hover, .picker-opt.sel { background: var(--brand-soft); color: var(--brand-d); }
.picker-empty { padding: 14px 15px; color: var(--muted); font-size: 1rem; }

/* ---------- Carrito en topbar ---------- */
.cart-btn { display: inline-flex !important; align-items: center; justify-content: center; padding: 8px; border-radius: 9px; color: var(--ink); position: relative; text-decoration: none; }
.cart-btn:hover { background: var(--line-2); }
.cart-count { position: absolute; top: -6px; right: -6px; background: var(--ok); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; font-size: .72rem; font-weight: 700; align-items: center; justify-content: center; padding: 0 5px; }

/* ---------- Botones utilitarios ---------- */
.btn.block { display: block; width: 100%; text-align: center; }
.btn.lg { padding: 13px 18px; font-size: 1.05rem; }

/* ---------- Stepper de cantidad ---------- */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qty-stepper button { width: 38px; height: 40px; border: 0; background: var(--bg); font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink); }
.qty-stepper button:hover { background: var(--brand-soft); color: var(--brand-d); }
.qty-stepper input { width: 54px; height: 40px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-size: 1rem; font-weight: 600; }

/* ---------- Resultados estilo Mercado Libre ---------- */
.ml-list { display: flex; flex-direction: column; gap: 12px; }
.ml-card { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--sh-sm); align-items: center; }
.ml-thumb { width: 110px; height: 110px; flex: 0 0 110px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: .8rem; }
.ml-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ml-info { flex: 1; min-width: 0; }
.ml-code { color: var(--muted); font-size: .82rem; font-weight: 600; }
.api-code { background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
code { background: var(--brand-soft, #eef2ff); color: var(--ink); padding: 1px 6px; border-radius: 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
.ml-title { font-size: 1.05rem; line-height: 1.3; margin: 2px 0 6px; }
.ml-price { font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.ml-meta { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.ml-actions { flex: 0 0 220px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

/* ---------- Página de carrito (ML) ---------- */
.cart-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--sh-sm); }
.ci-thumb { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: .75rem; }
.ci-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ci-info { flex: 1; min-width: 0; }
.ci-title { font-size: 1.02rem; line-height: 1.3; margin: 2px 0 8px; }
.ci-del { background: none; border: 0; color: var(--brand); font-weight: 600; cursor: pointer; padding: 0; font-size: .9rem; }
.ci-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ci-sub { font-size: 1.2rem; font-weight: 700; }
.ci-unit { color: var(--muted); font-size: .82rem; }
.cart-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--sh-sm); position: sticky; top: 78px; }
.cart-summary h2 { margin: 0 0 12px; }
.cs-row { display: flex; justify-content: space-between; margin: 8px 0; color: var(--muted); }
.cs-total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0; font-size: 1.15rem; border-top: 1px solid var(--line); padding-top: 12px; }
.cs-total strong { font-size: 1.5rem; }
@media (max-width: 760px) {
  .cart-grid { grid-template-columns: 1fr; }
  .ml-card { flex-wrap: wrap; }
  .ml-actions { flex-basis: 100%; }
  .ml-thumb { width: 80px; height: 80px; flex-basis: 80px; }
}

/* ---------- Configuración (submenús) ---------- */
.settings { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 78px; }
.settings-tab { text-align: left; background: transparent; border: 1px solid transparent; padding: 10px 14px; border-radius: 10px; font: inherit; font-weight: 600; font-size: .92rem; color: var(--muted); cursor: pointer; }
.settings-tab:hover { background: #fff; color: var(--ink); border-color: var(--line); }
.settings-tab.active { background: var(--brand-soft); color: var(--brand-d); border-color: #dbe6ff; }
.settings-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 14px 0 4px; background: linear-gradient(180deg, transparent, var(--bg) 40%); }
@media (max-width: 900px) {
  .settings { grid-template-columns: 1fr; }
  .settings-nav { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
  .settings-tab { white-space: nowrap; }
}

.empty { text-align: center; color: var(--muted); padding: 44px 10px; font-size: 1rem; }
.loading { text-align: center; color: var(--muted); padding: 34px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--sh-lg); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .icon-btn { display: inline-flex; }
  .scrim.show { display: block; }
  .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .grid.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app { padding: 18px 14px 90px; }
  .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Lector de código de barras (cámara) */
.scan-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center}
.scan-box{position:relative;width:min(94vw,520px);display:flex;flex-direction:column;align-items:center;gap:12px}
.scan-video{width:100%;max-height:70vh;border-radius:14px;background:#000;object-fit:cover}
.scan-reticle{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:78%;height:34%;border:3px solid #22c55e;border-radius:12px;box-shadow:0 0 0 100vmax rgba(0,0,0,.25);pointer-events:none}
.scan-hint{color:#fff;font-size:1.05rem;font-weight:600;text-align:center}
.scan-cancel{min-width:160px}

/* Pills de estado (Compras) */
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.72rem;font-weight:700;line-height:1.5;vertical-align:middle}
.pill.ok{background:#dcfce7;color:#166534}
.pill.warn{background:#fef3c7;color:#92400e}

/* Opción de alta por CUIT/DNI (AFIP) dentro del selector */
.picker-alta { padding: 13px 15px; cursor: pointer; font-size: 1.02rem; line-height: 1.3; font-weight: 700; color: var(--brand-d); background: var(--brand-soft); border-top: 1px solid var(--bg); }
.picker-alta:hover { filter: brightness(0.97); }

/* Cobranza de cuotas (calendario) */
.cuo-barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--brand);color:#fff;border-radius:var(--radius-sm);padding:10px 14px;margin:0 0 14px;box-shadow:var(--sh)}
.cuo-barra .cuo-barra-tot{font-size:1.05rem}
.cuo-barra b{font-weight:800}
.cuo-barra .hint{color:#dbe6ff}
.cuo-barra-sp{flex:1}
.cuo-barra .btn.sec{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}
.cuo-leyenda{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:.9rem}
.cuo-leyenda span{display:flex;align-items:center;gap:6px}
.cuo-dot{width:14px;height:14px;border-radius:4px;display:inline-block}
.cuo-dot.verde,.cuo-chip.pago{background:#dcfce7}
.cuo-dot.amarillo,.cuo-chip.avencer{background:#fef9c3}
.cuo-dot.rojo,.cuo-chip.vencida{background:#fee2e2}
.cuo-mes h3{margin:.2rem 0 .6rem}
.cuo-grid{display:flex;flex-wrap:wrap;gap:8px}
.cuo-chip{width:104px;border:1px solid #e6eaf0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:left;font:inherit}
.cuo-chip.pago{cursor:default;opacity:.85;border-color:#bbf7d0}
.cuo-chip.vencida{border-color:#fecaca}
.cuo-chip.avencer{border-color:#fde68a}
.cuo-chip.sel{outline:3px solid var(--brand);outline-offset:1px}
.cuo-chip .cuo-dia{font-weight:700;font-size:.92rem}
.cuo-chip .cuo-imp{font-size:.95rem}
.cuo-chip .cuo-num{font-size:.72rem;color:#64748b}

/* Analítica / BI */
.bi-ej{color:var(--brand-d);text-decoration:none;font-size:.9rem}
.bi-ej:hover{text-decoration:underline}
.bi-chart{display:flex;flex-direction:column;gap:6px;margin:6px 0 14px}
.bi-bar{display:flex;align-items:center;gap:10px}
.bi-bar-lbl{width:170px;min-width:170px;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;color:#334155}
.bi-bar-track{flex:1;background:var(--bg);border-radius:6px;height:18px;overflow:hidden}
.bi-bar-fill{display:block;height:100%;background:var(--brand);border-radius:6px}
.bi-bar-val{width:120px;min-width:120px;font-size:.86rem;font-weight:600}
.bi-saved{display:inline-flex;align-items:center;gap:4px;background:var(--brand-soft);color:var(--brand-d);border-radius:999px;padding:3px 6px 3px 12px;margin:0 6px 6px 0;font-size:.92rem}
.bi-saved a{color:var(--brand-d);text-decoration:none;font-weight:600}
.bi-del{border:0;background:transparent;cursor:pointer;color:#64748b;font-weight:700}

/* KPIs dashboard */
.kpi-sub{color:var(--muted);font-size:.78rem;margin-top:4px}
.kpi.ok{border-left:4px solid #22c55e}
.bi-bar[data-campo]:hover .bi-bar-fill{filter:brightness(1.08)}
.bi-bar[data-campo]:hover .bi-bar-lbl{text-decoration:underline}

/* ---------- Dashboard nuevo: secciones, KPI cards, atajos, gráficos ---------- */
.dash-sec{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;margin:24px 4px 12px;color:var(--ink)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:6px}
.kpi-grid.kpi-mini{grid-template-columns:repeat(4,1fr)}
.kpi-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--sh-sm);transition:box-shadow .15s,transform .05s}
.kpi-card:hover{box-shadow:var(--sh)}
.kpi-card.kpi-clic{cursor:pointer}
.kpi-card.kpi-clic:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.kpi-card.kpi-clic::after{content:"› ver";position:absolute;top:8px;right:12px;font-size:.7rem;color:var(--muted);opacity:.7}
.kpi-card{position:relative}
.kpi-ico{width:46px;height:46px;min-width:46px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;background:var(--brand-soft)}
.kpi-body{min-width:0}
.kpi-label{color:var(--muted);font-weight:600;font-size:.8rem}
.kpi-val{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-card .kpi-sub{font-size:.76rem}
.kpi-card.t-blue{border-left-color:#2563eb}.kpi-card.t-blue .kpi-ico{background:#eff4ff}
.kpi-card.t-green{border-left-color:#16a34a}.kpi-card.t-green .kpi-ico{background:#effdf4}
.kpi-card.t-amber{border-left-color:#d97706}.kpi-card.t-amber .kpi-ico{background:#fff7ed}
.kpi-card.t-red{border-left-color:#dc2626}.kpi-card.t-red .kpi-ico{background:#fef2f2}
.kpi-card.t-violet{border-left-color:#8b5cf6}.kpi-card.t-violet .kpi-ico{background:#f5f3ff}
.kpi-card.t-cyan{border-left-color:#06b6d4}.kpi-card.t-cyan .kpi-ico{background:#ecfeff}
.kpi-card.t-slate{border-left-color:#64748b}.kpi-card.t-slate .kpi-ico{background:#f1f5f9}

/* Accesos rápidos (tiles) */
.atajos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.atajo{position:relative;display:flex;flex-direction:row;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--radius);text-decoration:none;color:#fff;box-shadow:var(--sh-sm);transition:transform .08s,box-shadow .15s;background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.atajo-fav{position:absolute;top:7px;right:9px;background:transparent;border:0;color:rgba(255,255,255,.8);font-size:1.05rem;line-height:1;cursor:pointer;padding:2px;transition:transform .1s}
.atajo-fav.on{color:#ffd54a}
.atajo-fav:hover{transform:scale(1.2)}
.atajo:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.atajo-ico{font-size:2rem;line-height:1}
.atajo-tit{font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.atajo.t-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.atajo.t-green{background:linear-gradient(135deg,#22c55e,#15803d)}
.atajo.t-amber{background:linear-gradient(135deg,#f59e0b,#b45309)}
.atajo.t-violet{background:linear-gradient(135deg,#a78bfa,#6d28d9)}
.atajo.t-cyan{background:linear-gradient(135deg,#22d3ee,#0e7490)}
.atajo.t-slate{background:linear-gradient(135deg,#64748b,#334155)}

/* Gráficos SVG: línea y dona */
.bi-svg{width:100%;height:auto;display:block;margin:6px 0 4px}
.bi-dona{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:6px 0}
.bi-dona-svg{width:140px;height:140px;min-width:140px}
.bi-leg-box{display:flex;flex-direction:column;gap:6px;flex:1;min-width:160px}
.bi-leg{display:flex;align-items:center;gap:8px;font-size:.86rem}
.bi-leg-dot{width:11px;height:11px;border-radius:3px;min-width:11px}
.bi-leg-k{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.bi-leg-v{font-weight:700}

/* Columnas verticales agrupadas (comparativo) */
.bi-cols{margin:6px 0}
.bi-leg-row{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:6px;justify-content:center}
.bi-leg-row .bi-leg{font-size:.84rem}

/* Affordance de drill-down (explotar al origen) */
.bi-leg[data-fuente]:hover .bi-leg-k{text-decoration:underline}
.bi-cols svg [data-fuente]:hover, .bi-svg [data-fuente]:hover{opacity:.78}

/* Lectura automática (interpretación) */
.bi-lectura{background:var(--brand-soft);border:1px solid #dbe6ff;border-radius:var(--radius-sm);padding:10px 14px;margin:4px 0 12px;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.bi-lectura b{color:var(--ink)}

/* Inicio: prompt IA arriba de todo (hero) + barra de período en Indicadores */
.dash-ia{padding:16px 18px;border-top:3px solid var(--brand)}
.dash-ia-row{display:flex;gap:10px;align-items:center}
.dash-ia-row #dashQ{flex:1;font-size:1.05rem;padding:12px 14px}
.dash-ia-row #dashMic{min-width:46px;font-size:1.15rem}
.dash-ia-row #dashMic.rec{background:var(--danger);color:#fff;border-color:transparent;animation:asisPulse 1s infinite}
.dash-per-bar{margin:0 0 14px}
.dash-per{font-size:.85rem;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.dash-ia-resp{margin-top:10px;background:var(--brand-soft);border:1px solid #dbe6ff;border-radius:var(--radius-sm);padding:10px 14px;font-size:.95rem;line-height:1.4}

/* Informes predefinidos BI (tarjetas con imagen/ícono) */
.bi-pre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.bi-pre{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:1px solid var(--line);border-radius:var(--radius);padding:0;overflow:hidden;background:#fff;cursor:pointer;box-shadow:var(--sh-sm);transition:transform .08s,box-shadow .15s;font:inherit}
.bi-pre:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.bi-pre-ico{width:100%;height:74px;display:grid;place-items:center;font-size:2.2rem;background:linear-gradient(135deg,#64748b,#334155);color:#fff}
.bi-pre.t-blue .bi-pre-ico{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.bi-pre.t-green .bi-pre-ico{background:linear-gradient(135deg,#22c55e,#15803d)}
.bi-pre.t-amber .bi-pre-ico{background:linear-gradient(135deg,#f59e0b,#b45309)}
.bi-pre.t-violet .bi-pre-ico{background:linear-gradient(135deg,#a78bfa,#6d28d9)}
.bi-pre.t-cyan .bi-pre-ico{background:linear-gradient(135deg,#22d3ee,#0e7490)}
.bi-pre.t-slate .bi-pre-ico{background:linear-gradient(135deg,#64748b,#334155)}
.bi-pre-nom{font-weight:700;font-size:.92rem;color:var(--ink);padding:8px 12px 0;line-height:1.2}
.bi-pre-go{font-size:.78rem;color:var(--brand-d);font-weight:700;padding:2px 12px 10px}

/* Asistente IA (voz) */
.asis-chat{display:flex;flex-direction:column;gap:10px;min-height:300px;max-height:60vh;overflow-y:auto;padding:6px 2px}
.asis-msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:.96rem;line-height:1.4;box-shadow:var(--sh-sm)}
.asis-msg.user{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.asis-msg.bot{align-self:flex-start;background:#f1f5f9;color:var(--ink);border-bottom-left-radius:4px}
.asis-msg .tbl-wrap{margin-top:6px}
.asis-input{display:flex;gap:8px;margin-top:12px;align-items:center}
.asis-input #q{flex:1}
.asis-input #mic{min-width:48px;font-size:1.2rem}
.asis-input #mic.rec{background:var(--danger);animation:asisPulse 1s infinite}
@keyframes asisPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}
.asis-prop{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.asis-resumen{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:8px;font-size:.9rem}
.asis-resumen ul{margin:4px 0 0;padding-left:18px}

/* Factura de compra (IA): totales fijos + solapas */
.cmp-tot{position:sticky;top:0;z-index:5;background:#f8fafc;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;margin:6px 0 10px}
.cmp-tot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cmp-tot-grid label{display:flex;flex-direction:column;gap:2px;font-size:.72rem;font-weight:700;color:var(--muted)}
.cmp-tot-grid input{font-size:.92rem;padding:6px 8px}
.cmp-tot-total{color:var(--ink)!important}
.cmp-tot-total input{font-weight:800}
.cmp-tabs{display:flex;gap:4px;margin:4px 0 10px;border-bottom:1px solid var(--line)}
.cmp-tab{border:0;background:transparent;padding:9px 16px;font:inherit;font-size:.95rem;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.cmp-tab.on{color:var(--brand-d);border-bottom-color:var(--brand)}
@media(max-width:680px){.cmp-tot-grid{grid-template-columns:repeat(3,1fr)}}

/* Selector de tipo de gráfico (BI) */
.bi-tipos{display:flex;gap:6px;margin:2px 0 10px}
.bi-tipo{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:var(--pill);padding:5px 12px;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
.bi-tipo.on{background:var(--brand);color:#fff;border-color:var(--brand)}

@media(max-width:1100px){.kpi-grid,.kpi-grid.kpi-mini{grid-template-columns:repeat(2,1fr)}.atajos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.kpi-grid,.kpi-grid.kpi-mini,.atajos{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:1fr}}