/* NS POS — POS adaptable por espacio disponible */
#tab-pos{
  min-width:0;
  min-height:0;
  overflow:hidden;
}

#tab-pos .pos-layout,
#tab-pos .nspos-pos-operativo{
  width:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(230px,.78fr) minmax(390px,1.55fr) minmax(250px,.88fr);
  grid-template-areas:"search cart payment";
  gap:clamp(8px,.75vw,14px);
  align-items:stretch;
}

#tab-pos .pos-search-card{grid-area:search}
#tab-pos .pos-cart-card{grid-area:cart}
#tab-pos .pos-payment-card{grid-area:payment}

#tab-pos .card{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}

#tab-pos .card-header{flex:0 0 auto}
#tab-pos .card-body{min-width:0;min-height:0}

#tab-pos .pos-search-card .card-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}

#tab-pos .product-list{
  flex:1 1 auto;
  min-height:120px;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
}

#tab-pos .pos-cart-card .card-body{
  flex:1 1 auto;
  overflow:hidden;
}

#tab-pos .pos-cart-table,
#tab-pos .pos-cart-card .table-wrap{
  width:100%;
  height:100%;
  min-height:220px;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
}

#tab-pos .pos-payment-card .card-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  overscroll-behavior:contain;
}

#tab-pos .pos-payment-card .pay-grid{margin-top:auto}

#tab-pos .boleta-pos-panel,
#tab-pos .pos-ticket-card,
#tab-pos #previewBoletaPOS,
#tab-pos #boletaPosEstado{
  display:none!important;
}

@media (min-width:1101px){
  #tab-pos{
    flex:1 1 auto;
    display:flex;
    min-height:0;
  }

  #tab-pos .pos-layout,
  #tab-pos .nspos-pos-operativo{
    flex:1 1 auto;
    height:100%;
  }
}

@media (max-width:1450px){
  #tab-pos .pos-layout,
  #tab-pos .nspos-pos-operativo{
    grid-template-columns:minmax(210px,.72fr) minmax(350px,1.48fr) minmax(230px,.84fr);
  }
}

@media (max-width:1100px){
  #tab-pos{overflow:visible}
  #tab-pos .pos-layout,
  #tab-pos .nspos-pos-operativo{
    grid-template-columns:minmax(230px,.8fr) minmax(390px,1.4fr);
    grid-template-areas:
      "search cart"
      "payment payment";
  }
  #tab-pos .pos-payment-card .card-body{overflow:visible}
}

@media (max-width:820px){
  #tab-pos .pos-layout,
  #tab-pos .nspos-pos-operativo{
    grid-template-columns:1fr;
    grid-template-areas:"search" "cart" "payment";
  }
  #tab-pos .pos-cart-table,
  #tab-pos .pos-cart-card .table-wrap{max-height:420px}
}

/* ===== NS POS: POS adaptable a toda resolución ===== */
@media (min-width:1800px){
  #tab-pos .pos-layout,#tab-pos .nspos-pos-operativo{grid-template-columns:minmax(280px,.82fr) minmax(560px,1.7fr) minmax(300px,.9fr)!important;gap:14px!important}
}
@media (min-width:1501px) and (max-width:1799px){
  #tab-pos .pos-layout,#tab-pos .nspos-pos-operativo{grid-template-columns:minmax(245px,.78fr) minmax(430px,1.58fr) minmax(270px,.86fr)!important;gap:10px!important}
}
@media (min-width:1101px) and (max-width:1500px){
  #tab-pos .pos-layout,#tab-pos .nspos-pos-operativo{grid-template-columns:minmax(205px,.72fr) minmax(330px,1.52fr) minmax(225px,.82fr)!important;gap:7px!important}
  #tab-pos .card{border-radius:10px!important}
  #tab-pos .product-list{min-height:90px!important}
  #tab-pos .pos-cart-table,#tab-pos .pos-cart-card .table-wrap{min-height:160px!important}
}
@media (min-width:1101px) and (max-width:1400px) and (max-height:820px){
  #tab-pos .pos-layout,#tab-pos .nspos-pos-operativo{grid-template-columns:minmax(190px,.68fr) minmax(315px,1.55fr) minmax(215px,.8fr)!important;gap:6px!important}
  #tab-pos .pos-search-card .card-body,#tab-pos .pos-payment-card .card-body{gap:5px!important}
  #tab-pos .product,.manual-result{padding:5px!important;margin-bottom:4px!important}
  #tab-pos .main-table th{padding:6px!important;font-size:9px!important}
  #tab-pos .main-table td{padding:5px 6px!important;font-size:10px!important}
}
@media (min-width:821px) and (max-width:1100px){
  #tab-pos .pos-layout,#tab-pos .nspos-pos-operativo{grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr)!important;grid-template-areas:"search cart" "payment payment"!important;gap:10px!important}
}
@media (max-width:820px){
  #tab-pos .pos-layout,#tab-pos .nspos-pos-operativo{grid-template-columns:1fr!important;grid-template-areas:"search" "cart" "payment"!important}
  #tab-pos .card{height:auto!important}
  #tab-pos .pos-payment-card .card-body{overflow:visible!important}
}

/* =========================================================
   NS POS — Pago autoajustable con teclado táctil
   ========================================================= */
#tab-pos .pos-payment-card .card-body{
  scrollbar-width:thin;
  scrollbar-gutter:stable;
}

#tab-pos .pos-payment-card.keyboard-open .card-body{
  gap:clamp(4px,.55vh,7px);
  padding-bottom:8px;
}

#tab-pos .pos-payment-card .numeric-pad{
  flex:0 0 auto;
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(5px,.55vw,8px);
  padding:clamp(6px,.65vw,9px);
  margin:2px 0 4px;
  border:1px solid #d8e2f0;
  border-radius:15px;
  background:#f5f8fc;
}

#tab-pos .pos-payment-card .numeric-pad.hidden{
  display:none!important;
}

#tab-pos .pos-payment-card .numeric-pad button{
  width:100%;
  min-width:0;
  min-height:clamp(42px,5.2vh,54px);
  margin:0;
  border:1px solid #c7d5e8;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-size:clamp(16px,1.25vw,21px);
  font-weight:900;
  box-shadow:0 2px 5px rgba(15,23,42,.05);
  touch-action:manipulation;
}

#tab-pos .pos-payment-card .numeric-pad button:active{
  transform:translateY(1px);
  background:#eaf2ff;
}

#tab-pos .pos-payment-card .numeric-pad .pad-wide{
  grid-column:span 1;
  font-size:clamp(11px,.85vw,14px);
}

#tab-pos .pos-payment-card .numeric-pad .pad-ok{
  grid-column:span 2;
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}

#tab-pos .pos-payment-card.keyboard-open .pay-grid{
  margin-top:2px!important;
}

#tab-pos .pos-payment-card.keyboard-open .total-box{
  padding:clamp(6px,.7vh,10px);
}

#tab-pos .pos-payment-card.keyboard-open .total-box h1{
  font-size:clamp(25px,3.4vh,36px);
}

#tab-pos .pos-payment-card.keyboard-open .notice{
  flex:0 0 auto;
}

#tab-pos .pos-payment-card button:disabled{
  opacity:.6;
  cursor:wait;
}

@media (min-width:1101px) and (max-height:860px){
  #tab-pos .pos-payment-card.keyboard-open .card-header{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  #tab-pos .pos-payment-card.keyboard-open .card-header p{
    display:none;
  }
  #tab-pos .pos-payment-card.keyboard-open .card-body{
    gap:4px!important;
    padding:6px!important;
  }
  #tab-pos .pos-payment-card.keyboard-open label{
    margin:0!important;
  }
  #tab-pos .pos-payment-card.keyboard-open input,
  #tab-pos .pos-payment-card.keyboard-open select{
    min-height:29px!important;
    height:29px!important;
  }
  #tab-pos .pos-payment-card.keyboard-open .vuelto{
    padding:5px!important;
    font-size:16px!important;
  }
  #tab-pos .pos-payment-card.keyboard-open .numeric-pad{
    gap:4px;
    padding:5px;
  }
  #tab-pos .pos-payment-card.keyboard-open .numeric-pad button{
    min-height:36px!important;
    height:36px!important;
    font-size:16px!important;
  }
  #tab-pos .pos-payment-card.keyboard-open .pay-grid button,
  #tab-pos .pos-payment-card.keyboard-open .card-body>button{
    min-height:30px!important;
    height:30px!important;
  }
}

@media (max-width:1100px){
  #tab-pos .pos-payment-card.keyboard-open .card-body{
    overflow:visible!important;
  }
  #tab-pos .pos-payment-card .numeric-pad button{
    min-height:52px;
  }
}

/* Configuración de impresión */
.impresion-card .backup-actions{
  margin-top:10px;
}
#cfgImpresionEstado.error{
  border-color:#fecaca;
  background:#fff1f2;
  color:#991b1b;
}

/* =========================================================
   NS POS — Teclado táctil: autoajuste definitivo
   ========================================================= */
#tab-pos .pos-payment-card{--pos-key-height:42px}
#tab-pos .pos-payment-card .card-body{position:relative}

#tab-pos .pos-payment-card.keyboard-open .card-body{
  display:flex!important;
  flex-direction:column!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  min-height:0!important;
  padding:clamp(5px,.65vh,8px)!important;
  gap:clamp(3px,.48vh,6px)!important;
}

#tab-pos .pos-payment-card.keyboard-open .card-header p{display:none!important}

#tab-pos .pos-payment-card.keyboard-open .total-box{
  flex:0 0 auto!important;
  padding:5px 7px!important;
  min-height:0!important;
}
#tab-pos .pos-payment-card.keyboard-open .total-box small{font-size:9px!important;line-height:1!important}
#tab-pos .pos-payment-card.keyboard-open .total-box h1{
  margin:2px 0 0!important;
  font-size:clamp(23px,3.4vh,31px)!important;
  line-height:1!important;
}

#tab-pos .pos-payment-card.keyboard-open label:not(.touch-toggle){
  flex:0 0 auto!important;
  font-size:clamp(8px,.76vw,10px)!important;
  line-height:1.05!important;
  margin:0!important;
}
#tab-pos .pos-payment-card.keyboard-open input,
#tab-pos .pos-payment-card.keyboard-open select{
  flex:0 0 auto!important;
  height:clamp(28px,4vh,34px)!important;
  min-height:28px!important;
  padding:4px 8px!important;
  font-size:clamp(10px,.8vw,12px)!important;
}
#tab-pos .pos-payment-card.keyboard-open .vuelto{
  flex:0 0 auto!important;
  padding:5px 7px!important;
  min-height:0!important;
  font-size:clamp(15px,2.4vh,20px)!important;
  line-height:1.1!important;
}
#tab-pos .pos-payment-card.keyboard-open .touch-toggle{
  flex:0 0 auto!important;
  min-height:22px!important;
  margin:0!important;
  padding:1px 0!important;
  font-size:clamp(9px,.78vw,11px)!important;
}
#tab-pos .pos-payment-card.keyboard-open .touch-toggle input{
  width:17px!important;
  height:17px!important;
  min-height:17px!important;
  flex:0 0 17px!important;
}

#tab-pos .pos-payment-card .numeric-pad{
  flex:0 0 auto!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(4,var(--pos-key-height))!important;
  gap:clamp(3px,.4vw,6px)!important;
  padding:clamp(4px,.45vw,7px)!important;
  margin:0!important;
  border-radius:13px!important;
}
#tab-pos .pos-payment-card .numeric-pad button{
  min-height:0!important;
  height:var(--pos-key-height)!important;
  padding:0!important;
  margin:0!important;
  border-radius:10px!important;
  font-size:clamp(15px,1.2vw,19px)!important;
  line-height:1!important;
}
#tab-pos .pos-payment-card .numeric-pad .pad-utility{
  background:#eef3fb!important;
  color:#1e40af!important;
}

#tab-pos .pos-payment-card .payment-footer{
  position:sticky!important;
  bottom:0!important;
  z-index:4!important;
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  margin-top:auto!important;
  padding-top:5px!important;
  padding-bottom:1px!important;
  background:linear-gradient(to bottom,rgba(255,255,255,.9),#fff 16px)!important;
}
#tab-pos .pos-payment-card .payment-footer .pay-grid{margin:0!important;gap:6px!important}
#tab-pos .pos-payment-card .payment-footer button{
  min-height:31px!important;
  height:31px!important;
  margin:0!important;
  padding:4px 8px!important;
  font-size:clamp(9px,.8vw,11px)!important;
}
#tab-pos .pos-payment-card .payment-footer .notice{
  margin:0!important;
  padding:4px 7px!important;
  min-height:24px!important;
  font-size:clamp(8px,.7vw,10px)!important;
  line-height:1.2!important;
}

@media (min-width:1101px) and (max-height:740px){
  #tab-pos .pos-payment-card.keyboard-open .card-header{
    padding:5px 8px!important;
    min-height:32px!important;
  }
  #tab-pos .pos-payment-card.keyboard-open .card-header h2{font-size:12px!important}
  #tab-pos .pos-payment-card.keyboard-open .total-box{padding:3px 6px!important}
  #tab-pos .pos-payment-card.keyboard-open .total-box h1{font-size:21px!important}
  #tab-pos .pos-payment-card.keyboard-open .numeric-pad{padding:3px!important;gap:3px!important}
  #tab-pos .pos-payment-card .payment-footer{gap:3px!important;padding-top:3px!important}
  #tab-pos .pos-payment-card .payment-footer button{height:28px!important;min-height:28px!important}
  #tab-pos .pos-payment-card .payment-footer .notice{display:none!important}
}

@media (max-width:1100px){
  #tab-pos .pos-payment-card .payment-footer{position:static!important}
  #tab-pos .pos-payment-card.keyboard-open .numeric-pad button{
    min-height:44px!important;
    height:44px!important;
  }
}



/* NS POS — acciones de cierre equilibradas */
#tab-pos .pos-payment-card .payment-action-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
}
#tab-pos .pos-payment-card .payment-action-row .payment-action-button{
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  height:36px!important;
  margin:0!important;
  padding:7px 12px!important;
  border-radius:10px!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
@media(max-width:520px){
  #tab-pos .pos-payment-card .payment-action-row{gap:7px!important}
  #tab-pos .pos-payment-card .payment-action-row .payment-action-button{
    min-height:40px!important;height:40px!important;font-size:10px!important;padding:6px 8px!important;
  }
}