/* ═══════════════════════════════════════════════════════════════════
 * Coronel Sur — CSS del shell admin (extraido de index.html, PR D6)
 *
 * Antes: este bloque era un <style> inline en index.html (~516 lineas
 * de las 2308 totales del monolito). Lo extrae a este file separado
 * para:
 *   - Permitir cache HTTP del CSS (sin esto, cada page load del admin
 *     descargaba estos ~38KB embebidos en el HTML).
 *   - Reducir el tamano de index.html.
 *   - Permitir edits del CSS sin tocar el HTML.
 *
 * Carga: index.html linkea con <link rel="stylesheet" href="/static/admin/index-admin.css">
 * ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Coronel Sur — Sistema (dark refinado, paleta gris-marino + ambar). Alineado con admin-design-tokens.css */
  --bg:#0d1117;--bg-elev:#161b22;--panel:#161b22;--surface:#1c2128;--surface2:#22272e;--surface3:#2d333b;
  --border:#30363d;--border2:#444c56;
  /* Accent: ambar dorado (default admin) — dinamico por rol via admin_role.js */
  --accent:#f5b51d;--accent-2:#ffc94a;--accent-3:#d99700;
  --accent-soft:#3a2e10;--accent-ink:#0e0f12;--accent-dim:rgba(245,181,29,.12);
  /* Naranja Coronel: avatares con gradiente + branding */
  --accent-warm:#fb923c;--accent-warm-2:#f97316;
  /* Estados (deltas: verde positivo, rojo negativo) */
  --green:#22c55e;--green-dim:rgba(34,197,94,.12);
  --orange:#f97316;--red:#ef4444;--red-dim:rgba(239,68,68,.12);
  --blue:#60a5fa;--violet:#c084fc;--cyan:#67e8f9;
  /* Texto */
  --text:#e6edf3;--text2:#8b949e;--text3:#6e7681;
  --sidebar-w:230px;--topbar-h:52px;
  /* Tipografia: Inter UI body + JetBrains Mono numeros + Syne H1/marca */
  --F:'Inter',ui-sans-serif,system-ui,sans-serif;
  --FM:'JetBrains Mono',ui-monospace,monospace;
  --FH:'Syne',ui-sans-serif,sans-serif;
}
/* PR D15: light theme override. Toggle con <html data-theme="light"> +
 * persiste en localStorage.cs_admin_theme via cs-theme.js. El default
 * sigue siendo dark — no se rompe nada para usuarios que no opten in. */
html[data-theme="light"]{
  --bg:#f8f9fb;--bg-elev:#ffffff;--panel:#ffffff;--surface:#f3f4f6;--surface2:#e5e7eb;--surface3:#d1d5db;
  --border:#e5e7eb;--border2:#d1d5db;
  --accent-soft:#fef3c7;
  --green-dim:rgba(34,197,94,.18);
  --red-dim:rgba(239,68,68,.18);
  --accent-dim:rgba(245,181,29,.18);
  --text:#0f172a;--text2:#475569;--text3:#94a3b8;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--F);background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden;font-size:14px}
a{text-decoration:none;color:inherit}button{cursor:pointer;font-family:var(--F)}input,textarea{font-family:var(--F)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
#sidebar{width:var(--sidebar-w);background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:relative;z-index:10}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;width:0}
.logo{padding:16px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.logo-mark{width:30px;height:30px;background:var(--accent);border-radius:7px;display:grid;place-items:center;font-family:var(--FH);font-weight:800;font-size:13px;color:#0c0c0e;flex-shrink:0}
.logo-text h1{font-family:var(--FH);font-size:13px;font-weight:800;color:var(--text)}.logo-text span{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.cmd-btn{margin:8px 10px;padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;gap:8px;color:var(--text2);font-size:12px;transition:.15s;width:calc(100% - 20px)}
.cmd-btn:hover{border-color:var(--border2);color:var(--text)}.cmd-kbd{margin-left:auto;background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-family:var(--FM);font-size:10px;color:var(--text3)}
.nav-section{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);padding:12px 18px 5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 12px;margin:1px 6px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text2);transition:.12s;border:1px solid transparent}
.nav-item:hover{background:var(--surface);color:var(--text)}.nav-item.active{background:var(--surface);color:var(--text);border-color:var(--border)}
.nav-item .ni{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--red-dim);color:var(--red);border-radius:9px;padding:1px 7px;font-size:10px;font-weight:600}
.sidebar-footer{padding:14px 16px;border-top:1px solid var(--border);margin-top:auto}
.user-row{display:flex;align-items:center;gap:9px}.user-av{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#0c0c0e;font-family:var(--FH);font-weight:800;font-size:12px;display:grid;place-items:center;flex-shrink:0}
.user-name{font-size:12px;font-weight:600}.user-role{font-size:10px;color:var(--text3)}
/* Role badge en topbar (design handoff) */
.role-badge-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;background:var(--accent-soft);border:1px solid var(--border);border-radius:999px;font-size:11px;font-weight:600;color:var(--accent-2);font-family:var(--F);white-space:nowrap}
.role-badge-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* AFIP status indicator */
.afip-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);font-family:var(--F);font-weight:500;padding-left:10px;border-left:1px solid var(--border);margin-left:6px;height:22px;white-space:nowrap}
.afip-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.afip-status-dot.pulse{box-shadow:0 0 0 0 currentColor;animation:afipPulse 2s infinite}
@keyframes afipPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
#topbar{height:var(--topbar-h);background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;overflow:hidden;min-width:0}
.topbar-title{font-family:var(--FH);font-size:15px;font-weight:700}
.kpi-strip{display:flex;gap:1px;margin-left:auto;background:var(--border);border-radius:8px;overflow:hidden;border:1px solid var(--border);flex-shrink:1;min-width:0}
.kpi-item{padding:5px 10px;background:var(--surface);display:flex;flex-direction:column;align-items:center;min-width:70px}
.kpi-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3)}.kpi-val{font-family:var(--FM);font-size:13px;font-weight:600;color:var(--text);margin-top:1px}.kpi-val.up{color:var(--green)}
.topbar-actions{display:flex;gap:8px;flex-shrink:0}
.btn-sm{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:12px;font-weight:500;transition:.12s;white-space:nowrap}
.btn-sm:hover{color:var(--text);border-color:var(--border2)}.btn-sm.primary{background:var(--accent);color:#0c0c0e;border-color:var(--accent);font-weight:700}.btn-sm.primary:hover{background:#f5d455}
.page{display:none}.page.active{display:flex;flex-direction:column;position:fixed;left:var(--sidebar-w);right:0;top:var(--topbar-h);bottom:0;overflow:hidden;background:var(--bg)}
.fact-layout{display:grid;grid-template-columns:1fr 320px;flex:1;overflow:hidden}
.fact-main{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
.fact-panel{display:flex;flex-direction:column;overflow-y:auto;background:var(--panel)}
.fact-toolbar{padding:11px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--panel)}
.tipo-group{display:flex;gap:2px;background:var(--surface);padding:3px;border-radius:7px;border:1px solid var(--border)}
.tipo-btn{padding:5px 14px;border-radius:5px;border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:600;letter-spacing:.04em;font-family:var(--FH);transition:.12s}
.tipo-btn.active{background:var(--bg);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.fact-num{font-family:var(--FM);font-size:11px;color:var(--text3);background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:4px 10px}
.toolbar-actions{margin-left:auto;display:flex;gap:6px}
.search-zone{padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg)}
.search-wrap{position:relative}
.search-input{width:100%;padding:10px 12px 10px 36px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;outline:none;transition:.15s}
.search-input:focus{border-color:var(--accent);background:var(--surface2)}.search-input::placeholder{color:var(--text3)}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none}
.search-hint{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text3);font-family:var(--FM);display:flex;gap:4px}
.search-hint kbd{background:var(--surface2);border:1px solid var(--border2);border-radius:3px;padding:1px 5px}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;z-index:200;max-height:300px;overflow-y:auto;display:none;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.search-results.visible{display:block}
/* Buscador con foto mini (32px) a la izquierda — antes era 3 cols sin foto.
   Identificar visualmente el producto antes de tipear enter reduce errores
   de carga (caso comun: codigos similares 6166/6168, descripciones casi
   iguales). */
.res-item{display:grid;grid-template-columns:36px auto 1fr auto;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:.1s}
.res-item:last-child{border-bottom:none}.res-item:hover,.res-item.focused{background:var(--surface2)}.res-item.focused{border-left:2px solid var(--accent)}
.res-foto{width:32px;height:32px;border-radius:5px;background:var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.res-foto img{width:100%;height:100%;object-fit:cover}
.res-code{font-family:var(--FM);font-size:10px;color:var(--text3);background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:2px 6px;white-space:nowrap}
.res-name{font-size:13px;font-weight:500}.res-rubro{font-size:10px;color:var(--text3);margin-top:1px}
.res-right{text-align:right}.res-precio{font-family:var(--FM);font-size:13px;color:var(--accent)}.res-stock{font-size:10px;margin-top:2px}.res-stock.low{color:var(--orange)}.res-stock.ok{color:var(--text3)}
.items-container{flex:1;overflow-y:auto;padding:0 20px}
.items-empty{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:20px;height:100%;gap:8px;color:var(--text3)}
.items-empty .ico{font-size:36px;filter:grayscale(1)opacity(.4)}.items-empty p{font-size:13px}.items-empty .hint{font-size:11px;font-family:var(--FM);color:var(--text3);opacity:.6}

/* === Empty state nuevo: accesos rapidos ================
   Cuando la tabla de items esta vacia mostramos top
   productos / clientes / atajos en lugar del icono enorme.
   Carga con /api/facturacion/quick-actions al entrar
   a la pagina y se oculta al agregar el primer item. */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 0 24px;max-width:760px;margin:0 auto;width:100%}
.qa-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;
}
.qa-card.full{grid-column:1/-1}
.qa-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.qa-head .qa-title{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);font-weight:600}
.qa-head .qa-sub{font-size:10px;color:var(--text3);opacity:.7}

/* Lista de productos top: cada uno es un chip con codigo + nombre + precio */
.qa-prods{display:flex;flex-direction:column;gap:5px}
.qa-prod{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:7px;background:var(--bg);
  border:1px solid var(--border);cursor:pointer;transition:.1s;
  font-family:var(--F);text-align:left;color:var(--text2);width:100%;
}
.qa-prod:hover{border-color:var(--accent);color:var(--text);transform:translateX(2px)}
.qa-prod .qa-cod{font-family:var(--FM);font-size:10px;color:var(--text3);min-width:48px}
.qa-prod .qa-nom{flex:1;font-size:11.5px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.qa-prod .qa-precio{font-family:var(--FM);font-size:11.5px;color:var(--accent);
  font-weight:700;font-variant-numeric:tabular-nums}
.qa-prod .qa-units{font-size:9.5px;color:var(--text3);
  background:rgba(255,255,255,.04);padding:1px 5px;border-radius:3px;
  font-family:var(--FM)}

/* Clientes recientes: chips horizontales */
.qa-clis{display:flex;flex-wrap:wrap;gap:5px}
.qa-cli{
  display:flex;align-items:center;gap:5px;padding:5px 10px;
  background:var(--bg);border:1px solid var(--border);border-radius:14px;
  font-size:11px;color:var(--text2);cursor:pointer;transition:.1s;
}
.qa-cli:hover{border-color:var(--accent);color:var(--accent)}
.qa-cli.mayo{border-color:rgba(245,158,11,.4)}
.qa-cli.mayo:hover{border-color:#f59e0b;color:#f59e0b}
.qa-cli .qa-cli-tag{font-size:9px;letter-spacing:.04em;font-weight:700;
  text-transform:uppercase;opacity:.8}

/* Atajos teclado: lista compacta de shortcuts */
.qa-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.qa-sc{display:flex;justify-content:space-between;align-items:center;font-size:11px;
  color:var(--text3);padding:3px 0}
.qa-sc .qa-sc-lbl{color:var(--text2)}
.qa-sc kbd{font-family:var(--FM);font-size:10px;padding:1px 6px;
  background:var(--bg);border:1px solid var(--border);border-radius:4px;
  color:var(--text2)}

.qa-empty{font-size:11px;color:var(--text3);opacity:.6;padding:8px 0;text-align:center}

/* Banner: facturar de nuevo al ultimo cliente */
.qa-banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:9px;
  background:linear-gradient(90deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
  border:1px solid rgba(245,158,11,.25);
  font-size:12px;color:var(--text2);
}
.qa-banner-txt strong{color:var(--accent)}
.qa-banner button{
  padding:5px 12px;border-radius:6px;border:1px solid var(--accent);
  background:rgba(245,158,11,.12);color:var(--accent);font-size:11px;
  font-weight:600;cursor:pointer;transition:.1s;font-family:var(--F);
}
.qa-banner button:hover{background:rgba(245,158,11,.22)}
.items-head{display:grid;grid-template-columns:24px 90px 1fr 80px 108px 108px 30px;gap:8px;padding:10px 4px 6px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:5}
.item-row{display:grid;grid-template-columns:24px 90px 1fr 80px 108px 108px 30px;gap:8px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--border);transition:background .1s;animation:rowIn .15s ease}
.item-row:hover{background:rgba(255,255,255,.02)}.item-row:last-child{border-bottom:none}
.item-idx{font-family:var(--FM);font-size:10px;color:var(--text3);text-align:center}
.item-cod-cell{font-family:var(--FM);font-size:11px;color:var(--text2,var(--text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.item-desc{min-width:0}.item-nombre{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-cod{font-family:var(--FM);font-size:10px;color:var(--text3);margin-top:1px}
/* Item con foto + chip de stock (PR #180): foto 28px a la izquierda
   del nombre, chip de stock disponible debajo. Si la cantidad pedida
   supera el stock, chip naranja con alerta. */
.item-desc-foto{display:flex;gap:8px;align-items:center;min-width:0}
.item-foto{width:28px;height:28px;border-radius:4px;object-fit:cover;background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.item-foto-fb{color:var(--text3)}
.item-desc-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.item-stock-chip{font-size:9.5px;color:var(--text3);background:var(--surface);padding:1px 6px;border-radius:3px;align-self:flex-start;font-family:var(--FM)}
.item-stock-chip.warn{background:rgba(240,140,58,.12);color:var(--orange)}
.item-stock-chip.alert{background:rgba(239,68,68,.15);color:var(--red);font-weight:600}
/* Fila de input rápido por código - siempre visible arriba de los items */
.item-row-input{
  display:grid;
  grid-template-columns:24px 90px 1fr 80px 108px 108px 30px;
  gap:8px;align-items:center;
  padding:7px 4px;
  border-bottom:1px dashed var(--border);
  background:rgba(240,201,58,.035);
}
.item-row-input .item-idx{color:var(--accent);font-weight:700;font-size:14px}
.cod-rapido-input{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:7px 10px;
  color:var(--text);
  font-family:var(--FM);
  font-size:13px;
  font-weight:600;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.cod-rapido-input::placeholder{font-weight:400;color:var(--text3)}
.cod-rapido-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(240,201,58,.12);
  background:var(--surface);
}
.cod-rapido-hint{
  font-size:11px;color:var(--text3);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cod-rapido-hint kbd{font-size:10px;padding:1px 5px;border:1px solid var(--border);border-radius:3px;background:var(--surface2);color:var(--text2,var(--text));font-family:var(--FM)}
.cell-input{width:100%;padding:6px 8px;background:var(--surface);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:var(--FM);font-size:12px;text-align:right;outline:none;transition:.12s}
.cell-input:focus{border-color:var(--accent);background:var(--surface2)}
.cell-sub{font-family:var(--FM);font-size:13px;color:var(--text);text-align:right}
.btn-del{background:none;border:none;color:var(--text3);font-size:14px;padding:4px;border-radius:4px;transition:.12s;display:grid;place-items:center}
.btn-del:hover{color:var(--red);background:var(--red-dim)}
.panel-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.panel-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.cliente-input{width:100%;padding:9px 10px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:13px;outline:none;transition:.15s}
.cliente-input:focus{border-color:var(--accent)}.cliente-input::placeholder{color:var(--text3)}
.clientes-recientes{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cliente-chip{padding:3px 9px;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:11px;color:var(--text2);cursor:pointer;transition:.12s;white-space:nowrap}
.cliente-chip:hover{border-color:var(--accent);color:var(--accent)}
.descuento-row{display:flex;align-items:center;gap:8px}
.desc-input{width:68px;padding:7px 8px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--FM);font-size:13px;text-align:center;outline:none}
.desc-presets{display:flex;gap:4px}
.desc-preset{padding:3px 8px;background:var(--surface);border:1px solid var(--border);border-radius:4px;font-size:11px;color:var(--text2);cursor:pointer;transition:.12s}
.desc-preset:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.margen-meter{background:var(--surface);border-radius:8px;padding:12px;border:1px solid var(--border)}
.margen-bar-wrap{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;margin:8px 0}
.margen-bar{height:100%;border-radius:3px;transition:width .3s,background .3s}
.margen-nums{display:flex;justify-content:space-between;align-items:center}
.margen-pct{font-family:var(--FM);font-size:20px;font-weight:600}
.margen-status{font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:10px}
.resumen-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}
.resumen-row .rl{color:var(--text2)}.resumen-row .rv{font-family:var(--FM);font-size:13px}
.resumen-row.total-row{padding-top:10px;margin-top:4px;border-top:1px solid var(--border)}
.resumen-row.total-row .rl{font-weight:700;font-size:14px;color:var(--text)}.resumen-row.total-row .rv{font-size:22px;color:var(--accent);font-weight:700}
.action-panel{padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.btn-guardar{padding:13px;border-radius:8px;border:none;background:var(--accent);color:#0c0c0e;font-family:var(--FH);font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:.15s;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-guardar:hover:not(:disabled){background:#f5d455;transform:translateY(-1px)}.btn-guardar:disabled{background:var(--surface2);color:var(--text3);cursor:not-allowed;transform:none}
.btn-ghost{padding:9px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:12px;font-weight:500;transition:.12s;width:100%}
.btn-ghost:hover{border-color:var(--border2);color:var(--text)}
.fp-btn{padding:7px 4px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:11px;font-weight:500;cursor:pointer;transition:.12s;text-align:center}
.fp-btn:hover{border-color:var(--border2);color:var(--text)}
.fp-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:700}
.fp-cc.active{background:rgba(91,156,246,.12);border-color:var(--blue);color:var(--blue)}

/* === Tipo factura A / B / C ============================
   Mas grandes que los botones inline anteriores (60px alto vs 26px).
   Colores semanticos: A=morado (resp. inscripto), B=azul (cons. final),
   C=verde (monotrib). Letra grande arriba + descripcion abajo.
   Layout: grid 3 columnas, gap 6px. Compatible mobile. */
.tf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tf-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:10px 4px;
  border-radius:8px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text3);
  cursor:pointer;transition:.12s;font-family:var(--F);
  position:relative;overflow:hidden;
}
.tf-btn:hover{border-color:var(--border2);color:var(--text2);transform:translateY(-1px)}
.tf-btn .tf-letra{font-size:22px;font-weight:800;line-height:1;letter-spacing:-1px}
.tf-btn .tf-desc{font-size:9.5px;letter-spacing:.04em;opacity:.7;font-weight:500;text-transform:uppercase}
/* Estados activos por tipo */
.tf-btn[data-tf="A"].active{background:rgba(168,85,247,.13);border-color:#a855f7;color:#a855f7;font-weight:700}
.tf-btn[data-tf="B"].active{background:rgba(91,156,246,.13);border-color:var(--blue);color:var(--blue);font-weight:700}
.tf-btn[data-tf="C"].active{background:rgba(74,222,128,.13);border-color:#4ade80;color:#4ade80;font-weight:700}

/* === IVA quick buttons =================================
   Reemplazo del <select> chiquito por 4 botones rapidos.
   Mismo patron visual que descuento presets pero con
   estado activo claro. */
.iva-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.iva-btn{
  padding:6px 4px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface);color:var(--text3);
  font-size:11px;font-weight:600;cursor:pointer;transition:.1s;
  font-variant-numeric:tabular-nums;
}
.iva-btn:hover{border-color:var(--border2);color:var(--text2)}
.iva-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}

/* === Autocomplete cliente =============================
   Dropdown bajo el input. Posicion absoluta para no romper
   layout. Item con nombre + tipo (badge) + tel. */
.cliente-wrap{position:relative}
.cliente-suggest{
  position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:50;
  background:var(--panel);border:1px solid var(--border2);border-radius:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  max-height:260px;overflow-y:auto;padding:4px;
  display:none;
}
.cliente-suggest.open{display:block}
.cs-item{padding:8px 10px;border-radius:6px;cursor:pointer;display:flex;
  justify-content:space-between;align-items:center;gap:8px;transition:.08s}
.cs-item:hover,.cs-item.kb{background:var(--accent-dim);color:var(--accent)}
.cs-item .cs-name{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cs-item:hover .cs-name,.cs-item.kb .cs-name{color:var(--accent)}
.cs-item .cs-meta{font-size:10px;color:var(--text3);flex-shrink:0;
  display:flex;gap:6px;align-items:center}
.cs-tipo-mayo{padding:1px 6px;border-radius:3px;background:rgba(245,158,11,.18);
  color:#f59e0b;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:9px}
.cs-tipo-inst{padding:1px 6px;border-radius:3px;background:rgba(91,156,246,.18);
  color:var(--blue);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:9px}
.cs-empty{padding:12px;text-align:center;font-size:11px;color:var(--text3)}
.pm-campo{padding:5px 10px;border-radius:5px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:11px;cursor:pointer;transition:.1s}
.pm-campo.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:700}
.hist-container{flex:1;overflow-y:auto;padding:20px 24px}
.hist-toolbar{display:flex;gap:8px;align-items:center;padding:12px 24px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--panel)}
.filter-group{display:flex;gap:3px;background:var(--surface);padding:3px;border-radius:7px}
.filter-btn{padding:5px 12px;border-radius:5px;border:none;background:transparent;color:var(--text2);font-size:12px;font-family:var(--F);cursor:pointer;transition:.12s}
.filter-btn.active{background:var(--bg);color:var(--text)}
.hist-search{padding:7px 12px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:12px;outline:none;width:200px;transition:.15s}
.hist-search:focus{border-color:var(--accent);width:260px}.hist-search::placeholder{color:var(--text3)}
.hist-table{width:100%;border-collapse:collapse}
.hist-table th{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg)}
.hist-table td{padding:11px 12px;border-bottom:1px solid var(--border);font-size:13px}
.hist-table tr:hover td{background:rgba(255,255,255,.02)}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge-f{background:rgba(240,201,58,.12);color:var(--accent)}.badge-p{background:var(--green-dim);color:var(--green)}.badge-a{background:var(--red-dim);color:var(--red)}.badge-c{background:rgba(91,156,246,.12);color:var(--blue)}
.action-link{color:var(--text3);font-size:12px;cursor:pointer;padding:3px 6px;border-radius:4px;transition:.12s}
.action-link:hover{color:var(--text);background:var(--surface)}
#cmd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:flex-start;justify-content:center;padding-top:15vh}
#cmd-overlay.visible{display:flex}
#cmd-box{width:560px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.cmd-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.cmd-icon{font-size:16px;color:var(--text3)}
.cmd-input-el{flex:1;background:none;border:none;color:var(--text);font-size:15px;outline:none;font-family:var(--F)}
.cmd-input-el::placeholder{color:var(--text3)}
.cmd-results{max-height:340px;overflow-y:auto}
.cmd-group-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);padding:10px 16px 4px}
.cmd-result{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:.1s}
.cmd-result:hover,.cmd-result.focused{background:var(--surface2)}
.cmd-result .cr-icon{font-size:16px;width:24px;text-align:center}.cmd-result .cr-text{font-size:13px}.cmd-result .cr-sub{font-size:11px;color:var(--text3)}
.cmd-result .cr-kbd{margin-left:auto;font-family:var(--FM);font-size:10px;color:var(--text3);background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:1px 6px}
.cmd-footer{padding:8px 16px;border-top:1px solid var(--border);display:flex;gap:12px;font-size:10px;color:var(--text3);font-family:var(--FM)}
.cmd-footer kbd{background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:1px 5px}
#preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);z-index:900;display:none;align-items:center;justify-content:center}
#preview-overlay.visible{display:flex}
#preview-box{width:600px;max-height:85vh;overflow-y:auto;background:#fff;border-radius:8px;padding:40px;color:#1a1a1a;font-family:'Inter',sans-serif}
.prev-head{display:flex;justify-content:space-between;margin-bottom:28px;align-items:flex-start}
.prev-marca h2{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:#0c0c0e}.prev-marca p{font-size:11px;color:#666;margin-top:3px}
.prev-num{text-align:right}.prev-num .tipo{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#999}.prev-num .num{font-size:18px;font-weight:700;font-family:'JetBrains Mono',monospace}.prev-num .fecha{font-size:11px;color:#666;margin-top:3px}
.prev-cliente{background:#f7f7f9;border-radius:6px;padding:12px 14px;margin-bottom:20px;font-size:13px}
.prev-cliente strong{display:block;margin-bottom:2px}
.prev-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:16px}
.prev-table th{background:#f0f0f2;text-align:left;padding:8px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#555}
.prev-table td{padding:9px 10px;border-bottom:1px solid #eee}.prev-table tr:last-child td{border-bottom:none}
.prev-totals{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px}
.prev-totals .total-line{display:flex;gap:40px;justify-content:flex-end}
.prev-totals .total-line.final{font-weight:700;font-size:16px;padding-top:8px;border-top:2px solid #0c0c0e;margin-top:4px}
.prev-footer{margin-top:24px;text-align:center;font-size:10px;color:#aaa;border-top:1px solid #eee;padding-top:14px}
.prev-actions{position:sticky;bottom:0;background:rgba(255,255,255,.95);backdrop-filter:blur(4px);padding:12px 0 0;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid #eee;margin-top:20px}
.prev-btn{padding:8px 18px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-family:'Inter',sans-serif;font-weight:600}
.prev-btn.print-btn{background:#0c0c0e;color:#fff}.prev-btn.close-btn{background:#f0f0f2;color:#333}
#toast{position:fixed;bottom:24px;right:24px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:12px 18px;font-size:13px;transform:translateY(20px);opacity:0;transition:.25s;z-index:999;pointer-events:none;max-width:340px;display:flex;align-items:center;gap:8px}
#toast.show{transform:translateY(0);opacity:1}#toast.ok{border-color:var(--green);color:var(--green)}#toast.err{border-color:var(--red);color:var(--red)}#toast.info{border-color:var(--accent);color:var(--accent)}
@keyframes rowIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Modal cantidad: rediseño completo con stepper limpio */
@keyframes mcIn { from { opacity:0; transform:translateY(8px) scale(.98) } to { opacity:1; transform:translateY(0) scale(1) } }
.mc-scrim {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  z-index:2000;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
}
.mc-scrim.open { display:flex; }
.mc-card {
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface2, var(--surface)) 100%);
  border:1px solid var(--border2);
  border-radius:14px;
  width:340px; max-width:100%;
  padding:22px 22px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation:mcIn .18s cubic-bezier(.2,.7,.3,1.1);
}
.mc-eyebrow {
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text3); margin-bottom:6px;
}
.mc-title {
  font-size:15px; font-weight:700;
  color:var(--text);
  line-height:1.35; margin-bottom:4px;
  word-break:break-word;
}
.mc-price {
  font-size:13px; color:var(--text2, var(--text3));
  margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.mc-price b { color:var(--text); font-weight:700; }
.mc-stepper {
  display:flex; align-items:center;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px;
  margin-bottom:18px;
  transition:border-color .15s, box-shadow .15s;
}
.mc-stepper:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(240,201,58,.15);
}
.mc-step-btn {
  width:36px; height:36px;
  border-radius:50%;
  border:0;
  background:transparent;
  color:var(--text2, var(--text));
  font-size:18px; font-weight:600;
  cursor:pointer;
  display:grid; place-items:center;
  transition:background .12s;
}
.mc-step-btn:hover { background:rgba(255,255,255,.06); color:var(--text); }
.mc-step-btn:active { transform:scale(.92); }
/* Ocultar spinners nativos del input number */
.mc-stepper input[type=number]::-webkit-outer-spin-button,
.mc-stepper input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance:none; margin:0;
}
.mc-stepper input[type=number] { -moz-appearance:textfield; }
.mc-stepper input {
  flex:1;
  border:0; background:transparent; outline:none;
  text-align:center;
  font-size:22px; font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  font-family:inherit;
  padding:0 4px;
}
.mc-actions {
  display:flex; gap:10px; align-items:center;
}
.mc-cancel {
  background:transparent;
  border:0;
  color:var(--text3);
  font-size:13px; font-weight:600;
  cursor:pointer;
  padding:10px 14px;
  border-radius:8px;
  transition:color .12s, background .12s;
  font-family:inherit;
}
.mc-cancel:hover { color:var(--text); background:rgba(255,255,255,.04); }
.mc-confirm {
  flex:1;
  background:var(--accent);
  color:#0c0c0e;
  border:0;
  padding:11px 16px;
  border-radius:10px;
  font-size:13px; font-weight:700;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.01em;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:filter .12s, transform .12s;
  box-shadow:0 4px 14px rgba(240,201,58,.25);
}
.mc-confirm:hover { filter:brightness(1.06); }
.mc-confirm:active { transform:translateY(1px); }
.mc-confirm svg { width:14px; height:14px; }

/* === Sprint UX-3: POS quick wins =========================== */

/* Popup flotante de oferta WhatsApp despues de guardar comprobante.
   Vive 12 seg, se autocierra. Posicionado bottom-right para no
   tapar el toast (que esta arriba). */
.wa-offer-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  min-width: 240px;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: wa-slide-in 220ms ease-out;
}
@keyframes wa-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.wa-offer-popup button { font-family: inherit; transition: filter .12s; }
.wa-offer-popup button:hover { filter: brightness(1.1); }

/* Sticky panel inferior del POS: el resumen + el boton Guardar
   quedan siempre visibles aunque scrollees los items o las
   opciones de cliente/forma de pago en el panel derecho. */
.fact-bottom-stick {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  z-index: 5;
  margin-top: auto;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
}
