/* =========================================================
   NS POS — Motor responsive Enterprise 2026
   Cargado al final para neutralizar reglas antiguas de tamaño fijo.
   ========================================================= */
:root{
  --ns-viewport-height:100dvh;
  --ns-content-gap:clamp(7px,.7vw,13px);
}

html{
  width:100%;
  min-width:320px;
  min-height:100%;
  overflow-x:hidden!important;
}

body{
  width:100%;
  min-width:320px;
  min-height:100dvh!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding-bottom:0!important;
}

body.ns-adaptive-ready{
  overflow-y:hidden!important;
}

body.ns-adaptive-ready>.app{
  height:var(--ns-viewport-height)!important;
  min-height:0!important;
  max-height:var(--ns-viewport-height)!important;
  padding:var(--ns-content-gap)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:var(--ns-content-gap)!important;
  overflow:hidden!important;
}

body.ns-adaptive-ready .topbar{
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:clamp(62px,8.5vh,86px)!important;
  height:auto!important;
  margin:0!important;
  padding:clamp(7px,1vh,12px) clamp(10px,1.1vw,18px)!important;
}

body.ns-adaptive-ready .brand{min-width:0!important;gap:clamp(9px,1vw,15px)!important}
body.ns-adaptive-ready .brand-logo{
  width:clamp(48px,6.5vh,64px)!important;
  height:clamp(48px,6.5vh,64px)!important;
  flex:0 0 auto!important;
}
body.ns-adaptive-ready .brand h1{font-size:clamp(17px,1.45vw,24px)!important}
body.ns-adaptive-ready .brand p{font-size:clamp(10px,.85vw,13px)!important}

body.ns-adaptive-ready .top-actions{
  min-width:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  gap:6px!important;
}
body.ns-adaptive-ready .top-actions button{
  min-width:0!important;
  height:clamp(32px,4.5vh,40px)!important;
  padding:6px clamp(8px,.8vw,12px)!important;
  font-size:clamp(10px,.75vw,12px)!important;
}

body.ns-adaptive-ready .stat-grid{
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(6px,.6vw,10px)!important;
  margin:0!important;
}
body.ns-adaptive-ready .stat{
  min-width:0!important;
  min-height:clamp(44px,6.5vh,60px)!important;
  height:auto!important;
  padding:clamp(6px,.8vh,10px) clamp(8px,.8vw,12px)!important;
}
body.ns-adaptive-ready .stat span{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:clamp(9px,.68vw,11px)!important;
}
body.ns-adaptive-ready .stat strong{
  font-size:clamp(16px,1.55vw,24px)!important;
  line-height:1.05!important;
}

body.ns-adaptive-ready .tab-content:not(.hidden){
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
}

body.ns-adaptive-ready #tab-pos:not(.hidden){
  display:flex!important;
  overflow:hidden!important;
}

body.ns-adaptive-ready #tab-reportes:not(.hidden),
body.ns-adaptive-ready #tab-productos:not(.hidden),
body.ns-adaptive-ready #tab-caja:not(.hidden),
body.ns-adaptive-ready #tab-comprobantes:not(.hidden),
body.ns-adaptive-ready #tab-sii:not(.hidden),
body.ns-adaptive-ready #tab-config:not(.hidden){
  overflow:auto!important;
  overscroll-behavior:contain!important;
  padding-bottom:8px!important;
}

body.ns-adaptive-ready #tab-pos .pos-layout,
body.ns-adaptive-ready #tab-pos .nspos-pos-operativo{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
}

body.ns-adaptive-ready #tab-pos .card{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}

body.ns-adaptive-ready #tab-pos .card-body{
  min-height:0!important;
}

body.ns-adaptive-ready .sii-module,
body.ns-adaptive-ready .config-admin,
body.ns-adaptive-ready .report-simple-page{
  min-width:0!important;
  max-width:100%!important;
}

body.ns-adaptive-ready .sii-kpi-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
body.ns-adaptive-ready .sii-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

@media (max-height:760px) and (min-width:1101px){
  body.ns-adaptive-ready .topbar{
    min-height:58px!important;
    padding:5px 10px!important;
  }
  body.ns-adaptive-ready .brand-logo{width:46px!important;height:46px!important}
  body.ns-adaptive-ready .brand h1{font-size:17px!important}
  body.ns-adaptive-ready .brand p{font-size:10px!important;margin-top:2px!important}
  body.ns-adaptive-ready .top-actions button{height:31px!important;font-size:10px!important}
  body.ns-adaptive-ready .stat{min-height:42px!important;padding:5px 8px!important}
  body.ns-adaptive-ready .stat strong{font-size:16px!important}
  body.ns-adaptive-ready #tab-pos .card-header{padding:7px 10px!important}
  body.ns-adaptive-ready #tab-pos .card-header h2{font-size:14px!important}
  body.ns-adaptive-ready #tab-pos .card-header p{font-size:9px!important}
  body.ns-adaptive-ready #tab-pos .card-body{padding:7px!important}
  body.ns-adaptive-ready #tab-pos .hint{padding:6px!important;font-size:9px!important}
  body.ns-adaptive-ready #tab-pos .pos-search{height:35px!important}
  body.ns-adaptive-ready #tab-pos .total-box{padding:7px!important}
  body.ns-adaptive-ready #tab-pos .total-box h1{font-size:27px!important}
  body.ns-adaptive-ready #tab-pos input,
  body.ns-adaptive-ready #tab-pos select{height:32px!important}
  body.ns-adaptive-ready #tab-pos .vuelto{font-size:18px!important;padding:7px!important}
}

@media (max-width:1320px){
  body.ns-adaptive-ready .sii-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.ns-adaptive-ready .sii-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.ns-adaptive-ready .sii-grid-3 .sii-card:last-child{grid-column:1/-1!important}
}

@media (max-width:1100px){
  body.ns-adaptive-ready{
    overflow-y:auto!important;
  }
  body.ns-adaptive-ready>.app{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    padding-top:58px!important;
  }
  body.ns-adaptive-ready .topbar{min-height:0!important}
  body.ns-adaptive-ready .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.ns-adaptive-ready .tab-content:not(.hidden){overflow:visible!important}
  body.ns-adaptive-ready #tab-pos:not(.hidden){display:block!important;overflow:visible!important}
  body.ns-adaptive-ready #tab-pos .pos-layout,
  body.ns-adaptive-ready #tab-pos .nspos-pos-operativo{
    height:auto!important;
    max-height:none!important;
  }
  body.ns-adaptive-ready #tab-pos .card{height:auto!important}
}

@media (max-width:820px){
  body.ns-adaptive-ready .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.ns-adaptive-ready .sii-kpi-grid,
  body.ns-adaptive-ready .sii-grid-3,
  body.ns-adaptive-ready .sii-grid-2,
  body.ns-adaptive-ready .sii-form-grid{grid-template-columns:1fr!important}
  body.ns-adaptive-ready .sii-grid-3 .sii-card:last-child{grid-column:auto!important}
}

@media (max-width:768px){
  body:not(.desktop-forced).ns-adaptive-ready{
    overflow-y:auto!important;
  }
  body:not(.desktop-forced).ns-adaptive-ready>.app{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
  }
}

@media (max-width:520px){
  body.ns-adaptive-ready .stat-grid{grid-template-columns:1fr!important}
}

/* ===== NS POS: matriz responsive Windows 10/11 ===== */
@media (min-width:1800px){
  body.ns-adaptive-ready>.app{--ns-content-gap:clamp(10px,.65vw,16px)}
  body.ns-adaptive-ready .topbar{min-height:78px!important}
  body.ns-adaptive-ready .brand-logo{width:64px!important;height:64px!important}
  body.ns-adaptive-ready .stat{min-height:58px!important}
}
@media (min-width:1501px) and (max-width:1799px){
  body.ns-adaptive-ready .topbar{min-height:66px!important}
  body.ns-adaptive-ready .brand-logo{width:52px!important;height:52px!important}
  body.ns-adaptive-ready .stat{min-height:46px!important}
}
@media (min-width:1101px) and (max-width:1500px){
  body.ns-adaptive-ready>.app{--ns-content-gap:6px;padding:6px!important;gap:6px!important}
  body.ns-adaptive-ready .topbar{min-height:58px!important;padding:5px 9px!important;border-radius:12px!important}
  body.ns-adaptive-ready .brand-logo{width:44px!important;height:44px!important}
  body.ns-adaptive-ready .brand h1{font-size:clamp(15px,1.35vw,19px)!important}
  body.ns-adaptive-ready .brand p{font-size:9px!important;line-height:1.12!important;margin-top:2px!important}
  body.ns-adaptive-ready .top-actions{gap:5px!important}
  body.ns-adaptive-ready .top-actions button{height:30px!important;padding:4px 7px!important;font-size:9.5px!important}
  body.ns-adaptive-ready .stat-grid{gap:6px!important}
  body.ns-adaptive-ready .stat{min-height:40px!important;padding:4px 7px!important;border-radius:9px!important}
  body.ns-adaptive-ready .stat span{font-size:8.5px!important}
  body.ns-adaptive-ready .stat strong{font-size:15px!important;margin-top:2px!important}
}
@media (min-width:1101px) and (max-height:820px){
  body.ns-adaptive-ready>.app{--ns-content-gap:5px;padding:5px!important;gap:5px!important}
  body.ns-adaptive-ready .topbar{min-height:52px!important;padding:4px 8px!important}
  body.ns-adaptive-ready .brand-logo{width:40px!important;height:40px!important}
  body.ns-adaptive-ready .brand h1{font-size:16px!important}
  body.ns-adaptive-ready .brand p{font-size:8.5px!important}
  body.ns-adaptive-ready .top-actions button{height:28px!important;font-size:9px!important}
  body.ns-adaptive-ready .stat{min-height:36px!important;height:36px!important;padding:3px 6px!important}
  body.ns-adaptive-ready .stat span{font-size:8px!important}
  body.ns-adaptive-ready .stat strong{font-size:14px!important}
  body.ns-adaptive-ready #tab-pos .card-header{min-height:39px!important;padding:6px 9px!important}
  body.ns-adaptive-ready #tab-pos .card-header h2{font-size:13px!important}
  body.ns-adaptive-ready #tab-pos .card-header p{font-size:8px!important;margin-top:2px!important}
  body.ns-adaptive-ready #tab-pos .card-body{padding:6px!important}
  body.ns-adaptive-ready #tab-pos .hint{padding:5px!important;font-size:8px!important}
  body.ns-adaptive-ready #tab-pos .pos-search{height:32px!important;font-size:11px!important}
  body.ns-adaptive-ready #tab-pos .manual-tools button{min-height:29px!important;font-size:9px!important}
  body.ns-adaptive-ready #tab-pos .manual-title{font-size:8px!important}
  body.ns-adaptive-ready #tab-pos .total-box{padding:5px!important}
  body.ns-adaptive-ready #tab-pos .total-box h1{font-size:24px!important}
  body.ns-adaptive-ready #tab-pos label{font-size:8.5px!important;margin:0!important}
  body.ns-adaptive-ready #tab-pos input,body.ns-adaptive-ready #tab-pos select{height:29px!important;font-size:10px!important;padding:4px 7px!important}
  body.ns-adaptive-ready #tab-pos .vuelto{font-size:16px!important;padding:6px!important}
  body.ns-adaptive-ready #tab-pos .touch-toggle{font-size:9px!important;min-height:18px!important}
  body.ns-adaptive-ready #tab-pos .pay-grid button,body.ns-adaptive-ready #tab-pos .pos-payment-card .card-body>button{min-height:29px!important;height:29px!important;font-size:9px!important}
  body.ns-adaptive-ready #tab-pos .notice{font-size:8px!important;padding:5px!important}
}
@media (min-width:1101px) and (max-height:680px){
  body.ns-adaptive-ready .brand p{display:none!important}
  body.ns-adaptive-ready .topbar{min-height:44px!important}
  body.ns-adaptive-ready .brand-logo{width:34px!important;height:34px!important}
  body.ns-adaptive-ready .stat-grid{display:none!important}
  body.ns-adaptive-ready #tab-pos .pos-payment-card.keyboard-open .numeric-pad{
    display:grid!important;
    gap:3px!important;
    padding:4px!important;
  }
  body.ns-adaptive-ready #tab-pos .pos-payment-card.keyboard-open .numeric-pad button{
    min-height:31px!important;
    height:31px!important;
    font-size:14px!important;
  }
  body.ns-adaptive-ready #tab-pos .pos-payment-card.keyboard-open .card-body{
    overflow-y:auto!important;
  }
}

/* Prioridad final teclado táctil */
@media (min-width:1101px){body.ns-adaptive-ready #tab-pos .pos-payment-card.keyboard-open .numeric-pad{display:grid!important}body.ns-adaptive-ready #tab-pos .pos-payment-card.keyboard-open .card-body{overflow-y:auto!important}}