/* =========================================================
   NS POS — Navigation Rail Enterprise 2026
   Alcance: solo apariencia y comportamiento visual del sidebar.
   ========================================================= */

:root{
  --ns-nav-wide: 248px;
  --ns-nav-compact: 76px;
  --ns-nav-bg: #08101f;
  --ns-nav-bg-soft: #0d1930;
  --ns-nav-panel: rgba(255,255,255,.055);
  --ns-nav-border: rgba(148,163,184,.14);
  --ns-nav-text: #e8f0ff;
  --ns-nav-muted: #8fa6c9;
  --ns-nav-accent: #3b82f6;
  --ns-nav-accent-2: #2563eb;
  --ns-nav-danger: #ef4444;
  --ns-page-gap: clamp(7px,.75vw,13px);
}

html,body{max-width:100%;overflow-x:hidden!important}
body.ns-adaptive-ready{min-height:100vh;background:#eef3f8}

/* Aislamiento frente a estilos globales de botones/formularios */
.ns-desktop-nav,
.ns-desktop-nav *,
.ns-nav-mobile-toggle,
.ns-nav-mobile-toggle *{box-sizing:border-box}

.ns-desktop-nav button,
.ns-nav-mobile-toggle{
  all:unset;
  box-sizing:border-box!important;
  font-family:Inter,Segoe UI,Arial,sans-serif!important;
  cursor:pointer!important;
}

.ns-desktop-nav{
  position:fixed;
  inset:0 auto 0 0;
  z-index:10020;
  width:var(--ns-nav-wide);
  display:flex;
  flex-direction:column;
  color:var(--ns-nav-text);
  background:
    radial-gradient(circle at 18% -8%,rgba(59,130,246,.22),transparent 28%),
    linear-gradient(180deg,#08101f 0%,#0a1429 56%,#0c1d3d 100%);
  border-right:1px solid var(--ns-nav-border);
  box-shadow:12px 0 36px rgba(2,6,23,.20);
  transition:width .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1);
}

/* Marca */
.ns-nav-brand{
  min-height:76px;
  padding:14px 15px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ns-nav-brand img{
  width:44px;
  height:44px;
  flex:0 0 44px;
  object-fit:contain;
  border-radius:14px;
  padding:3px;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.ns-nav-brand-text{min-width:0}
.ns-nav-brand strong{
  display:block;
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ns-nav-brand span{
  display:block;
  margin-top:4px;
  color:#7dd3fc;
  font-size:10px;
  font-weight:650;
}

/* Usuario: bloque integrado, sin tarjeta blanca */
.ns-user-card{
  margin:10px 10px 3px!important;
  padding:8px!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 34px!important;
  gap:9px!important;
  align-items:center!important;
  min-height:58px!important;
  border:1px solid rgba(148,163,184,.14)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  color:var(--ns-nav-text)!important;
}

.ns-user-avatar{
  width:40px!important;
  height:40px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(145deg,#3b82f6,#1d4ed8)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(37,99,235,.28)!important;
}
.ns-user-avatar svg{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.ns-user-meta{min-width:0!important}
.ns-user-meta strong{
  display:block!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.ns-user-meta span{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-top:4px!important;
  color:#9fb5d8!important;
  font-size:10px!important;
  font-weight:650!important;
  text-transform:capitalize!important;
}
.ns-user-meta span::before{
  content:""!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:#22c55e!important;
  box-shadow:0 0 0 3px rgba(34,197,94,.12)!important;
  flex:0 0 7px!important;
}

.ns-logout{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(248,113,113,.22)!important;
  border-radius:10px!important;
  background:rgba(127,29,29,.16)!important;
  color:#fca5a5!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
}
.ns-logout:hover{
  background:rgba(220,38,38,.24)!important;
  border-color:rgba(248,113,113,.42)!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
.ns-logout svg{
  width:18px!important;
  height:18px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Navegación */
.ns-nav-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px 10px 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.22) transparent;
}
.ns-nav-scroll::-webkit-scrollbar{width:5px}
.ns-nav-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.22);border-radius:20px}

.ns-nav-group-title{
  padding:14px 10px 6px;
  color:#76c8f5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}

.ns-nav-item{
  position:relative!important;
  width:100%!important;
  min-height:44px!important;
  padding:7px 10px!important;
  margin:3px 0!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#c9d8ef!important;
  text-align:left!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.15!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
.ns-nav-item:hover{
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(148,163,184,.10)!important;
  color:#fff!important;
  transform:translateX(2px)!important;
}
.ns-nav-item.active{
  background:linear-gradient(135deg,var(--ns-nav-accent),var(--ns-nav-accent-2))!important;
  border-color:rgba(147,197,253,.25)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(37,99,235,.26),inset 0 1px 0 rgba(255,255,255,.15)!important;
  transform:none!important;
}
.ns-nav-item.active::before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:9px!important;
  bottom:9px!important;
  width:3px!important;
  border-radius:0 4px 4px 0!important;
  background:#dbeafe!important;
}

.ns-nav-icon{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.045)!important;
  color:#a9c8ff!important;
}
.ns-nav-item:hover .ns-nav-icon{background:rgba(255,255,255,.08)!important;color:#fff!important}
.ns-nav-item.active .ns-nav-icon{background:rgba(255,255,255,.16)!important;color:#fff!important}
.ns-nav-icon svg{
  width:19px!important;
  height:19px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.ns-nav-label{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Pie */
.ns-nav-footer{
  padding:9px 10px 10px;
  border-top:1px solid rgba(255,255,255,.075);
}
.ns-nav-collapse{
  width:100%!important;
  height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(148,163,184,.13)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.055)!important;
  color:#cbd9ef!important;
  font-size:11px!important;
  font-weight:800!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease!important;
}
.ns-nav-collapse:hover{
  background:rgba(255,255,255,.095)!important;
  border-color:rgba(148,163,184,.23)!important;
  color:#fff!important;
}
.ns-collapse-icon{width:17px;height:17px;display:grid;place-items:center}
.ns-collapse-icon svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round
}

.ns-nav-mobile-toggle{
  display:none!important;
  position:fixed!important;
  left:10px!important;
  top:10px!important;
  z-index:10040!important;
  width:42px!important;
  height:42px!important;
  place-items:center!important;
  border-radius:12px!important;
  background:#0b1428!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(15,23,42,.28)!important;
}
.ns-nav-mobile-toggle svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round
}

/* Layout existente: sin cambiar lógica */
body.ns-adaptive-ready>.app{
  margin-left:var(--ns-nav-wide)!important;
  width:calc(100% - var(--ns-nav-wide))!important;
  max-width:none!important;
  padding:var(--ns-page-gap)!important;
  box-sizing:border-box!important;
  transition:margin-left .22s ease,width .22s ease;
}
body.ns-adaptive-ready .tabs{display:none!important}
body.ns-adaptive-ready .topbar{width:100%!important;box-sizing:border-box!important;min-width:0!important}
body.ns-adaptive-ready .top-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important}
body.ns-adaptive-ready .stat-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
body.ns-adaptive-ready .tab-content{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
body.ns-adaptive-ready #tab-pos .pos-layout{
  grid-template-columns:minmax(230px,.82fr) minmax(390px,1.55fr) minmax(245px,.88fr)!important;
  width:100%!important;max-width:100%!important
}
body.ns-adaptive-ready #tab-pos .card{min-width:0!important}
body.ns-adaptive-ready input,
body.ns-adaptive-ready select,
body.ns-adaptive-ready textarea,
body.ns-adaptive-ready button{max-width:100%;box-sizing:border-box}
body.ns-adaptive-ready .main-table,
body.ns-adaptive-ready .comprobantes-table,
body.ns-adaptive-ready .report-table{width:100%}

/* Notebooks */
@media (max-width:1536px),(max-height:820px){
  body.ns-adaptive-ready>.app{--ns-page-gap:7px}
  body.ns-adaptive-ready .topbar{min-height:66px!important;height:66px!important;padding:6px 11px!important}
  body.ns-adaptive-ready .brand-logo{width:50px!important;height:50px!important}
  body.ns-adaptive-ready .brand h1{font-size:clamp(17px,1.45vw,21px)!important}
  body.ns-adaptive-ready .top-actions button{min-width:82px!important;height:34px!important;font-size:11px!important}
  body.ns-adaptive-ready .stat-grid{height:46px!important;flex-basis:46px!important}
  body.ns-adaptive-ready .stat{height:46px!important;padding:6px 8px!important}
  body.ns-adaptive-ready .stat strong{font-size:17px!important}
  body.ns-adaptive-ready #tab-pos .pos-layout{height:calc(100vh - 142px)!important}
}

/* Compacto */
@media (min-width:1101px) and (max-width:1500px){
  .ns-desktop-nav{width:var(--ns-nav-compact)}
  .ns-nav-brand{justify-content:center;padding:10px 7px}
  .ns-nav-brand-text,.ns-nav-group-title,.ns-nav-label,.ns-user-meta{display:none!important}
  .ns-user-card{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    margin:8px 7px 3px!important;
    padding:7px!important;
  }
  .ns-user-avatar{width:40px!important;height:40px!important}
  .ns-logout{margin-top:4px!important}
  .ns-nav-item{grid-template-columns:1fr!important;justify-items:center!important;padding:5px!important}
  .ns-nav-icon{width:36px!important;height:36px!important}
  body.ns-adaptive-ready>.app{
    margin-left:var(--ns-nav-compact)!important;
    width:calc(100% - var(--ns-nav-compact))!important
  }
  body.ns-adaptive-ready #tab-pos .pos-layout{
    grid-template-columns:minmax(215px,.75fr) minmax(370px,1.55fr) minmax(235px,.85fr)!important
  }
}

/* Tablet */
@media (max-width:1100px){
  .ns-nav-mobile-toggle{display:grid!important}
  .ns-desktop-nav{width:248px;transform:translateX(-105%)}
  body.ns-nav-open .ns-desktop-nav{transform:translateX(0)}
  .ns-nav-brand-text,.ns-nav-group-title,.ns-nav-label,.ns-user-meta{display:block!important}
  .ns-user-card{
    grid-template-columns:40px minmax(0,1fr) 34px!important;
    justify-items:stretch!important;
    margin:10px 10px 3px!important;
    padding:8px!important
  }
  .ns-nav-item{grid-template-columns:34px minmax(0,1fr)!important;justify-items:stretch!important;padding:7px 10px!important}
  body.ns-adaptive-ready>.app{margin-left:0!important;width:100%!important;padding-top:58px!important}
  body.ns-adaptive-ready .topbar{height:auto!important;min-height:64px!important}
  body.ns-adaptive-ready .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;height:auto!important;flex-basis:auto!important}
  body.ns-adaptive-ready #tab-pos .pos-layout{
    height:auto!important;
    grid-template-columns:minmax(230px,.8fr) minmax(390px,1.4fr)!important;
    overflow:visible!important
  }
  body.ns-adaptive-ready #tab-pos .pos-payment-card{grid-column:1/-1}
  body.ns-adaptive-ready html,body{height:auto!important;overflow-y:auto!important}
  body.ns-adaptive-ready>.app{height:auto!important;min-height:100vh!important;overflow:visible!important}
}

/* Estrecho */
@media (max-width:820px){
  body.ns-adaptive-ready .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.ns-adaptive-ready #tab-pos .pos-layout{grid-template-columns:1fr!important}
  body.ns-adaptive-ready #tab-pos .pos-payment-card{grid-column:auto}
  body.ns-adaptive-ready .top-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%}
  body.ns-adaptive-ready .top-actions button{width:100%!important}
}

/* Estado manual colapsado */
body.ns-nav-collapsed .ns-desktop-nav{width:var(--ns-nav-compact)}
body.ns-nav-collapsed .ns-nav-brand{justify-content:center;padding:10px 7px}
body.ns-nav-collapsed .ns-nav-brand-text,
body.ns-nav-collapsed .ns-nav-group-title,
body.ns-nav-collapsed .ns-nav-label,
body.ns-nav-collapsed .ns-user-meta{display:none!important}
body.ns-nav-collapsed .ns-user-card{
  grid-template-columns:1fr!important;
  justify-items:center!important;
  margin:8px 7px 3px!important;
  padding:7px!important
}
body.ns-nav-collapsed .ns-user-avatar{width:40px!important;height:40px!important}
body.ns-nav-collapsed .ns-logout{margin-top:4px!important}
body.ns-nav-collapsed .ns-nav-item{grid-template-columns:1fr!important;justify-items:center!important;padding:5px!important}
body.ns-nav-collapsed .ns-nav-icon{width:36px!important;height:36px!important}
body.ns-nav-collapsed>.app{
  margin-left:var(--ns-nav-compact)!important;
  width:calc(100% - var(--ns-nav-compact))!important
}

/* La interfaz móvil dedicada conserva su comportamiento */
@media (max-width:768px){
  body:not(.desktop-forced) .ns-desktop-nav,
  body:not(.desktop-forced) .ns-nav-mobile-toggle{display:none!important}
  body:not(.desktop-forced).ns-adaptive-ready>.app{
    margin-left:0!important;width:100%!important;padding-top:0!important
  }
}


/* === Iconografía Enterprise: módulos claramente diferenciados === */
.ns-nav-icon{
  width:36px!important;
  height:36px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.ns-nav-icon svg{
  width:23px!important;
  height:23px!important;
  stroke:none!important;
  fill:currentColor!important;
  overflow:visible!important;
}

.ns-nav-item[data-target="pos"] .ns-nav-icon{
  color:#67e8f9!important;
  background:linear-gradient(145deg,rgba(6,182,212,.22),rgba(14,116,144,.14))!important;
}
.ns-nav-item[data-target="comprobantes"] .ns-nav-icon{
  color:#c4b5fd!important;
  background:linear-gradient(145deg,rgba(139,92,246,.22),rgba(91,33,182,.14))!important;
}
.ns-nav-item[data-target="caja"] .ns-nav-icon{
  color:#86efac!important;
  background:linear-gradient(145deg,rgba(34,197,94,.22),rgba(21,128,61,.14))!important;
}
.ns-nav-item[data-target="productos"] .ns-nav-icon{
  color:#fcd34d!important;
  background:linear-gradient(145deg,rgba(245,158,11,.22),rgba(180,83,9,.14))!important;
}
.ns-nav-item[data-target="reportes"] .ns-nav-icon{
  color:#93c5fd!important;
  background:linear-gradient(145deg,rgba(59,130,246,.22),rgba(29,78,216,.14))!important;
}
.ns-nav-item[data-target="sii"] .ns-nav-icon{
  color:#f9a8d4!important;
  background:linear-gradient(145deg,rgba(236,72,153,.22),rgba(157,23,77,.14))!important;
}
.ns-nav-item[data-target="config"] .ns-nav-icon{
  color:#cbd5e1!important;
  background:linear-gradient(145deg,rgba(148,163,184,.20),rgba(71,85,105,.14))!important;
}

.ns-nav-item.active .ns-nav-icon{
  color:#fff!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 5px 12px rgba(0,0,0,.12)!important;
}
.ns-nav-item:hover .ns-nav-icon{
  transform:translateY(-1px) scale(1.04)!important;
}
.ns-nav-icon{
  transition:transform .18s ease,background .18s ease,color .18s ease!important;
}


/* ===== Ajuste final de resolución y DPI ===== */
@media (min-width:1101px){
  body.ns-adaptive-ready>.app{
    min-width:0!important;
    max-width:none!important;
  }
}
@media (max-height:700px) and (min-width:1101px){
  .ns-nav-brand{min-height:60px;padding:8px 12px}
  .ns-nav-brand img{width:38px;height:38px;flex-basis:38px}
  .ns-user-card{min-height:50px!important;margin-top:6px!important}
  .ns-nav-scroll{padding-top:4px}
  .ns-nav-group-title{padding-top:8px}
  .ns-nav-item{min-height:38px!important;margin:2px 0!important}
  .ns-nav-icon{width:31px!important;height:31px!important}
}

/* ===== NS POS: cobertura de resoluciones Windows 10/11 ===== */
@media (min-width:1101px) and (max-width:1500px){
  .ns-desktop-nav{width:var(--ns-nav-compact)!important}
  .ns-nav-brand{justify-content:center!important;padding:9px 7px!important}
  .ns-nav-brand-text,.ns-nav-group-title,.ns-nav-label,.ns-user-meta{display:none!important}
  .ns-user-card{grid-template-columns:1fr!important;justify-items:center!important;margin:7px 7px 3px!important;padding:6px!important}
  .ns-user-avatar{width:38px!important;height:38px!important}
  .ns-logout{margin-top:3px!important}
  .ns-nav-item{grid-template-columns:1fr!important;justify-items:center!important;min-height:40px!important;padding:4px!important;margin:2px 0!important}
  .ns-nav-icon{width:34px!important;height:34px!important}
  body.ns-adaptive-ready>.app{margin-left:var(--ns-nav-compact)!important;width:calc(100% - var(--ns-nav-compact))!important}
}
@media (min-width:1101px) and (max-height:820px){
  .ns-nav-brand{min-height:54px!important;padding:7px!important}
  .ns-nav-brand img{width:36px!important;height:36px!important;flex-basis:36px!important}
  .ns-user-card{min-height:45px!important;margin-top:5px!important}
  .ns-user-avatar{width:34px!important;height:34px!important}
  .ns-logout{width:30px!important;height:30px!important}
  .ns-nav-scroll{padding:3px 7px 6px!important}
  .ns-nav-group-title{padding:7px 7px 3px!important}
  .ns-nav-item{min-height:35px!important;margin:1px 0!important;padding:3px 5px!important}
  .ns-nav-icon{width:30px!important;height:30px!important}
  .ns-nav-icon svg{width:20px!important;height:20px!important}
  .ns-nav-footer{padding:5px 7px 6px!important}
  .ns-nav-collapse{height:32px!important;font-size:10px!important}
}
@media (min-width:1101px) and (max-height:680px){
  .ns-nav-brand{min-height:46px!important}
  .ns-user-card{display:none!important}
  .ns-nav-item{min-height:31px!important}
  .ns-nav-icon{width:27px!important;height:27px!important}
}