/* fuente de Google quitada: el programa tiene que abrir sin internet */

:root {
  /* Tema oscuro (default) — coincide con la paleta previa a la variabilización */
  --bg: #0E0F11;
  --bg-elev: #111214;
  --card: #16171B;
  --card-hover: #1A1B1F;
  --border: #1E1F24;
  --border-strong: #2A2B2F;
  --text: #E8E6DF;
  --text-dim: #B5B6BA;
  --text-muted: #6B6C70;
  --text-faint: #4A4B4F;
  --input-bg: #0E0F11;
  --scrollbar-thumb: #2A2B2F;
  --nav-bg: rgba(17,18,20,.92);
  --nav-border: #1A1B1F;
  --nav-shadow: 0 -8px 32px rgba(0,0,0,.6);
  --overlay-bg: rgba(0,0,0,.7);
  --overlay-loader: rgba(14,15,17,0.55);
  --row-alt: #1A1B1F;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #F5F5F2;
  --bg-elev: #FFFFFF;
  --card: #FFFFFF;
  --card-hover: #EFEFEC;
  --border: #E2E2DE;
  --border-strong: #C8C8C4;
  --text: #1A1B1F;
  --text-dim: #2E3037;
  --text-muted: #5E6066;
  --text-faint: #9A9B9F;
  --input-bg: #FFFFFF;
  --scrollbar-thumb: #C8C8C4;
  --nav-bg: rgba(255,255,255,.92);
  --nav-border: #E2E2DE;
  --nav-shadow: 0 -8px 32px rgba(0,0,0,.08);
  --overlay-bg: rgba(30,30,30,.45);
  --overlay-loader: rgba(245,245,242,0.65);
  --row-alt: #F0F0EC;
  color-scheme: light;
}

*{box-sizing:border-box;margin:0;padding:0}
::-webkit-scrollbar{width:14px;height:14px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box;transition:background .15s ease}
::-webkit-scrollbar-corner{background:transparent}
*:hover>::-webkit-scrollbar-thumb,*:hover::-webkit-scrollbar-thumb,:hover>::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);background-clip:padding-box}
:hover::-webkit-scrollbar-thumb:hover{background:var(--text);background-clip:padding-box;opacity:.6}
:hover::-webkit-scrollbar-thumb:active{background:var(--text);background-clip:padding-box;opacity:.8}
*:focus{outline:none}
*:focus-visible{outline:2px solid var(--brand,#F5A623);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand,#F5A623);color:#fff}
button,.side-item,.tab,.nav-cta{user-select:none;-webkit-user-select:none}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pu{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes ti{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
body{font-family:'DM Sans','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);overscroll-behavior-y:none;-webkit-overflow-scrolling:touch;transition:background .18s ease,color .18s ease}html{overscroll-behavior-y:none}input,select,button{font-family:inherit}
.cd{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px}
.bt{padding:10px 18px;border-radius:10px;border:1px solid var(--border-strong);background:var(--card);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.bt:hover{background:var(--card-hover);transform:translateY(-1px)}.bt:active{transform:scale(.97)}
.bp{background:linear-gradient(135deg,#1D9E75,#17875F)!important;border:none!important;color:#fff!important}.bp:hover{filter:brightness(1.1)}
.bd{border-color:#E24B4A44;color:#E24B4A}.bd:hover{background:#E24B4A18}
.bw{background:#EF9F2722!important;border-color:#EF9F2744!important;color:#EF9F27!important}
.ip{width:100%;padding:10px 14px;background:var(--input-bg);border:1px solid var(--border-strong);border-radius:10px;color:var(--text);font-size:14px;outline:none;transition:border-color .15s}.ip:focus{border-color:#378ADD}
.ip.ip-err{border-color:#E24B4A!important;background:#E24B4A08}.ip-err-msg{font-size:11px;color:#E24B4A;margin-top:4px;font-weight:500}
.mn{font-family:'Cascadia Mono','Consolas',monospace}.lb{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.bg{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600}
.gc{cursor:pointer;transition:all .15s}.gc:hover{background:var(--card-hover)!important;transform:translateY(-1px)}.gc:active{transform:scale(.97)}
.ni{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:all .12s;color:var(--text-muted);border:none;background:transparent;width:100%;text-align:left}
.ni:hover{background:var(--card);color:var(--text)}.ni.ac{background:#1D9E7518;color:#1D9E75}
.sc{background:var(--card);border-radius:10px;padding:16px}.sl{font-size:12px;color:var(--text-muted);margin-bottom:4px}.sv{font-family:'Cascadia Mono','Consolas',monospace;font-size:22px;font-weight:700}
.tb{width:100%;border-collapse:separate;border-spacing:0}
.tb th{text-align:left;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--border)}
.tb td{padding:12px 14px;border-bottom:1px solid var(--row-alt);font-size:13px}.tb tr:hover td{background:var(--card)}
.qb{width:28px;height:28px;border-radius:6px;border:1px solid var(--border-strong);background:var(--card);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}.qb:hover{background:var(--border-strong)}
.ov{position:fixed;inset:0;background:var(--overlay-bg);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}
.ml{background:var(--card);border-radius:16px;padding:28px;border:1px solid var(--border-strong);animation:fi .2s ease;max-height:90vh;overflow-y:auto;color:var(--text)}
.ts{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:12px;font-size:14px;font-weight:500;animation:ti .3s ease;z-index:200;display:flex;align-items:center;gap:8px}
@media(max-width:900px){
  .desktop-sidebar{display:none!important}
  .mobile-nav{display:flex!important}
  .main-wrap{flex-direction:column!important}
  .pos-wrap{flex-direction:column!important}
  .pos-cart{width:100%!important;max-height:40vh;border-right:none!important;border-top:1px solid var(--row-alt)}
  .pos-products{border-right:none!important}
  .stat-grid4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .two-col{grid-template-columns:1fr!important}
  .tb{font-size:12px}.tb td,.tb th{padding:8px 10px}
}
@media(min-width:901px){.mobile-nav{display:none!important}}

/* ── Bottom Nav estilo app nativa (LinkedIn-like) ── */
.mobile-nav{
  position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:100;
  background:var(--nav-bg)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--nav-border)!important;
  padding:4px 0 0 0!important;padding-bottom:env(safe-area-inset-bottom,0px)!important;
  box-shadow:var(--nav-shadow);
  justify-content:space-around!important;align-items:stretch!important;
  transition:transform .2s ease;
}
.mobile-nav button{
  background:none!important;border:none!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:1px!important;padding:6px 2px 8px!important;cursor:pointer;
  color:var(--text-muted)!important;font-size:10px!important;font-weight:500!important;
  font-family:'DM Sans','Segoe UI',system-ui,sans-serif!important;
  position:relative;min-width:0;flex:1;
  transition:color .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.mobile-nav button span:first-child{
  font-size:20px!important;line-height:1!important;
  transition:transform .15s ease;
}
.mobile-nav button:active span:first-child{
  transform:scale(.85)!important;
}
/* Active state: ícono y label en verde + indicador pill arriba */
.mobile-nav button[style*="color: rgb(29, 158, 117)"],
.mobile-nav button[style*="color:#1D9E75"]{
  color:#1D9E75!important;font-weight:600!important;
}
.mobile-nav button[style*="color: rgb(29, 158, 117)"]::before,
.mobile-nav button[style*="color:#1D9E75"]::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(135deg,#1D9E75,#17875F);
  animation:navPillIn .2s ease;
}
.mobile-nav button[style*="color: rgb(29, 158, 117)"] span:first-child,
.mobile-nav button[style*="color:#1D9E75"] span:first-child{
  transform:scale(1.08);
}
@keyframes navPillIn{from{width:0;opacity:0}to{width:24px;opacity:1}}

/* Ocultar barra al hacer scroll down en el POS (clase toggled por JS si se desea) */
.mobile-nav.nav-hidden{transform:translateY(100%)}
.mob-bar{display:none!important}
@media(max-width:900px){
  .mob-bar{display:flex!important;position:fixed;bottom:calc(56px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:90;background:var(--card);border-top:1px solid var(--border-strong);padding:8px 16px;align-items:center;gap:10px;animation:fi .2s ease}
  .mob-bar-total{flex:1;font-family:'Cascadia Mono','Consolas',monospace;font-size:20px;font-weight:700;color:var(--text)}
  .mob-bar-items{font-size:11px;color:var(--text-muted)}
  .mob-bar-btn{padding:12px 24px;border-radius:10px;border:none;background:linear-gradient(135deg,#1D9E75,#17875F);color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans','Segoe UI',system-ui,sans-serif}
  .mob-bar-btn:active{transform:scale(.96)}
  .pos-cart{display:none!important}
  .mob-cart-panel{position:fixed;bottom:calc(116px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:89;background:var(--card);border-top:1px solid var(--border-strong);max-height:50vh;overflow-y:auto;animation:fi .15s ease;padding:8px 12px}
  .mob-cart-item{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--row-alt)}
  .bt-compact{padding:6px 8px!important;font-size:11px!important;white-space:nowrap}
  .bt-compact .bt-label{display:none}
}

/* ── Overlay rotación: solo se activa si el container tiene .force-landscape ── */
.rotate-overlay{display:none;position:fixed;inset:0;z-index:99999;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px}
.rotate-overlay .rotate-icon{font-size:64px;margin-bottom:20px;animation:rotateHint 2s ease-in-out infinite}
.rotate-overlay .rotate-title{font-size:20px;font-weight:600;color:var(--text);margin-bottom:8px}
.rotate-overlay .rotate-sub{font-size:14px;color:var(--text-muted);max-width:280px;line-height:1.5}
@keyframes rotateHint{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
@media(orientation:portrait) and (max-width:1024px){
  .force-landscape .rotate-overlay{display:flex}
}

/* ── Plan Celular: estilos mobile-only ── */
.plan-celular .pos-wrap{flex-direction:column!important}
.plan-celular .pos-cart{width:100%!important;max-height:40vh;border-right:none!important;border-top:1px solid var(--row-alt)}
.plan-celular .pos-products{border-right:none!important}
.plan-celular .desktop-sidebar{display:none!important}
.plan-celular .mobile-nav{display:flex!important}
.plan-celular .main-wrap{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}

.plan-celular .ov{padding:8px!important;align-items:flex-start!important;padding-top:40px!important}
.plan-celular .ml{max-height:calc(100vh - 100px)!important;max-width:100vw!important;width:100%!important;padding:20px!important;margin-bottom:70px!important;border-radius:12px!important}
@media(min-width:901px){.plan-celular .mobile-nav{display:flex!important}}
@media(min-width:901px){html:not(.plan-celular) .mobile-nav{display:none!important}}

/* ══════════════════════════════════════════════════════════
   POS — layout, grilla/lista y carrito
   ══════════════════════════════════════════════════════════ */

/* Cadena flex: sin min-height:0 la lista del carrito no se encoge y
   empuja el footer (TOTAL + Cobrar) fuera del viewport. Era el motivo
   por el que habia que bajar el zoom del navegador al 75%. */
.pos-wrap{min-height:0;overflow:hidden}
.pos-products{min-width:0;min-height:0}
.pos-scroll{min-height:0;min-width:0}
.pos-cart{width:clamp(280px,24vw,360px);min-width:0;min-height:0;flex-shrink:0}
.pos-cart-list{min-height:0;min-width:0}

/* Grilla de productos: nunca mas de 5 columnas, responsive hacia abajo.
   El calc((100% - 32px)/5) = ancho util menos los 4 gaps de 8px. */
.pos-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - 32px)/5)),1fr))}

/* Vista lista: filas densas, entran 3-4x mas productos sin bajar el zoom */
.pos-list{display:flex;flex-direction:column;gap:3px}
.pos-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:var(--card);border:1px solid var(--border);cursor:pointer;transition:background .12s ease,border-color .12s ease}
.pos-row:hover{background:var(--card-hover);border-color:var(--border-strong)}
.pos-row:active{transform:scale(.995)}
.pos-row-ic{width:16px;text-align:center;flex-shrink:0;font-size:12px}
.pos-row-name{flex:1;min-width:0;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-row-qty{min-width:28px;text-align:center;font-size:12px;font-weight:700;font-family:'Cascadia Mono','Consolas',monospace;flex-shrink:0}
.pos-row-stock{min-width:44px;text-align:right;font-size:11px;flex-shrink:0}
.pos-row-price{min-width:80px;text-align:right;font-size:13px;font-weight:700;font-family:'Cascadia Mono','Consolas',monospace;flex-shrink:0}

/* Toggle Grilla / Lista (persistido en localStorage: ng_pos_view) */
.pos-view-tg{display:flex;gap:2px;background:var(--card);border:1px solid var(--border-strong);border-radius:10px;padding:2px;flex-shrink:0}
.pos-view-tg button{background:none;border:none;color:var(--text-muted);font-size:14px;padding:7px 10px;border-radius:8px;cursor:pointer;line-height:1;transition:all .12s ease}
.pos-view-tg button:hover{color:var(--text)}
.pos-view-tg button.on{background:#1D9E7522;color:#1D9E75}

/* Breakpoint intermedio de escritorio: entre 901 y 1280 el layout quedaba
   apretadisimo porque no existia salto entre desktop y el mobile de 900. */
@media(min-width:901px) and (max-width:1280px){
  .pos-cart{width:270px}
  .pos-cart-head{padding:10px 12px!important}
  .pos-cart-foot{padding:12px!important}
  .pos-cart-total{font-size:21px!important}
  .pos-cart-btn{padding:12px 0!important;font-size:14px!important}
  .pos-cart-item{padding:8px 4px!important}
  .pos-cart-sub{min-width:56px!important;font-size:12px!important}
  .pos-row-price{min-width:70px}
  .pos-row-stock{display:none}
}
/* Escritorio chico: el subtotal por item se oculta (el TOTAL ya esta abajo) */
@media(min-width:901px) and (max-width:1080px){
  .pos-cart-sub{display:none!important}
}
/* En mobile la lista tambien se compacta */
@media(max-width:900px){
  .pos-row{padding:9px 10px}
  .pos-row-stock{display:none}
  .pos-view-tg button{padding:8px 10px}
}

/* ── Anti-selección global (ago 2026) ──
   Bloquea el "pintado" accidental al hacer click y arrastrar dentro de
   la app. Es un sistema de gestión, no un lector. Vive acá (CSS global
   inyectado por React) y NO en index.html: un <style> inline en el HTML
   hace que Tauri agregue un hash sha256 al CSP, y la presencia de un
   hash hace que el navegador ignore 'unsafe-inline' — bloqueando este
   mismo <style> dinámico y dejando la app entera sin estilos.
   Excepciones: inputs, textareas, [contenteditable] y .selectable
   (Machine ID, número de factura, CAE, códigos, errores largos). */
html,body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"],.selectable{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:text;-webkit-touch-callout:default}
button,a,[role="button"],[onclick],select,label[for]{cursor:pointer}
button:disabled,[disabled]{cursor:not-allowed}