/*
  NS POS — Capa final de autoajuste por ancho Y alto.
  Objetivo:
  - no recortar contenido;
  - evitar scroll interno innecesario en Pago;
  - conservar 3 columnas del POS cuando hay espacio;
  - compactar progresivamente por altura;
  - pasar a layout apilado cuando el ancho ya no permite 3 columnas.
*/

html, body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden!important;
}

.app,
#tab-pos,
#tab-pos .pos-layout,
#tab-pos .nspos-pos-operativo,
#tab-pos .card,
#tab-pos .card-body{
  min-width:0!important;
  box-sizing:border-box!important;
}

/* ===== Escritorio: aprovechar exactamente la altura visible ===== */
@media (min-width:1101px){
  #tab-pos{
    min-height:0!important;
    overflow:visible!important;
  }

  #tab-pos .pos-layout.nspos-pos-operativo{
    height:calc(100dvh - 178px)!important;
    min-height:0!important;
    max-height:none!important;
    align-items:stretch!important;
  }

  #tab-pos .pos-search-card,
  #tab-pos .pos-cart-card,
  #tab-pos .pos-payment-card{
    height:100%!important;
    min-height:0!important;
  }

  #tab-pos .pos-payment-card .card-body{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }

  #tab-pos .pos-payment-card .payment-footer{
    margin-top:auto!important;
    flex:0 0 auto!important;
  }

  #tab-pos .pos-payment-card .numeric-pad{
    flex:0 0 auto!important;
  }
}

/* ===== Pago: tamaños fluidos por espacio real ===== */
#tab-pos .pos-payment-card .card-header{
  padding:clamp(7px,1.05vh,13px) clamp(10px,1vw,16px)!important;
}
#tab-pos .pos-payment-card .card-header h2{
  font-size:clamp(15px,1.5vw,20px)!important;
}
#tab-pos .pos-payment-card .card-header p{
  font-size:clamp(8px,.72vw,11px)!important;
  margin-top:2px!important;
}

#tab-pos .pos-payment-card .card-body{
  gap:clamp(4px,.7vh,8px)!important;
  padding:clamp(7px,.9vh,13px)!important;
}

#tab-pos .pos-payment-card .total-box{
  padding:clamp(6px,1vh,11px)!important;
  min-height:0!important;
}
#tab-pos .pos-payment-card .total-box small{
  font-size:clamp(8px,.7vw,10px)!important;
}
#tab-pos .pos-payment-card .total-box h1{
  font-size:clamp(24px,4vh,34px)!important;
  line-height:1!important;
  margin:2px 0 0!important;
}

/* Los 3 medios permanecen en una sola fila cuando el ancho lo permite. */
#tab-pos .payment-method-grid{
  gap:clamp(5px,.55vw,8px)!important;
  margin:clamp(3px,.45vh,7px) 0!important;
}
#tab-pos .payment-method-card{
  min-height:clamp(62px,10.5vh,90px)!important;
  padding:clamp(5px,.75vh,9px) 4px!important;
  border-radius:clamp(10px,1vw,14px)!important;
}
#tab-pos .payment-method-icon{
  font-size:clamp(20px,3.1vh,27px)!important;
}
#tab-pos .payment-method-card strong{
  font-size:clamp(9px,.75vw,11px)!important;
  line-height:1.08!important;
}
#tab-pos .payment-method-card small{
  font-size:clamp(7px,.62vw,8.5px)!important;
  line-height:1.13!important;
}

#tab-pos .payment-mode-help{
  flex:0 0 auto!important;
  margin:clamp(2px,.45vh,6px) 0!important;
  padding:clamp(5px,.65vh,8px) 8px!important;
}
#tab-pos .payment-mode-help strong{
  font-size:clamp(8px,.7vw,9.5px)!important;
}
#tab-pos .payment-mode-help span{
  font-size:clamp(7px,.62vw,8.7px)!important;
  line-height:1.2!important;
}

#tab-pos .pos-payment-card #paymentCashArea{
  flex:0 0 auto!important;
}
#tab-pos .pos-payment-card #paymentCashArea label{
  margin:0!important;
}
#tab-pos .pos-payment-card #pagoCliente{
  height:clamp(29px,4.5vh,38px)!important;
  min-height:29px!important;
  padding:4px 8px!important;
}
#tab-pos .pos-payment-card .vuelto{
  padding:clamp(5px,.8vh,9px)!important;
  font-size:clamp(17px,2.7vh,23px)!important;
  line-height:1.05!important;
}

#tab-pos .pos-payment-card .touch-toggle{
  min-height:20px!important;
  margin:0!important;
  padding:1px 0!important;
  font-size:clamp(8.5px,.72vw,10.5px)!important;
}
#tab-pos .pos-payment-card .touch-toggle input{
  width:17px!important;
  height:17px!important;
  min-height:17px!important;
}

/* Teclado numérico: altura fluida en vez de valores rígidos. */
#tab-pos .pos-payment-card .numeric-pad{
  gap:clamp(3px,.45vh,6px)!important;
  padding:clamp(4px,.55vh,7px)!important;
  margin:1px 0 3px!important;
  border-radius:12px!important;
}
#tab-pos .pos-payment-card .numeric-pad button{
  height:clamp(31px,5.6vh,48px)!important;
  min-height:31px!important;
  padding:0 5px!important;
  font-size:clamp(14px,2.35vh,20px)!important;
  border-radius:10px!important;
}

#tab-pos .payment-action-row{
  gap:7px!important;
}
#tab-pos .payment-action-button{
  min-height:clamp(31px,4.5vh,39px)!important;
  height:auto!important;
  margin:0!important;
  font-size:clamp(9px,.72vw,11px)!important;
}
#tab-pos .payment-footer .notice{
  margin-top:4px!important;
  padding:clamp(4px,.55vh,6px)!important;
  min-height:0!important;
  font-size:clamp(7.5px,.62vw,9px)!important;
}

/* ===== Pantallas de poca altura: compactar sin quitar funcionalidad ===== */
@media (min-width:1101px) and (max-height:800px){
  #tab-pos .pos-layout.nspos-pos-operativo{
    height:calc(100dvh - 162px)!important;
  }
  #tab-pos .pos-payment-card .card-header{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  #tab-pos .pos-payment-card .card-header p{
    display:none!important;
  }
  #tab-pos .pos-payment-card .card-body{
    padding:6px!important;
    gap:4px!important;
  }
  #tab-pos .payment-method-card{
    min-height:64px!important;
  }
  #tab-pos .payment-mode-help{
    padding:4px 7px!important;
    margin:2px 0!important;
  }
  #tab-pos .pos-payment-card .numeric-pad button{
    height:34px!important;
    min-height:34px!important;
    font-size:15px!important;
  }
}

@media (min-width:1101px) and (max-height:700px){
  #tab-pos .pos-layout.nspos-pos-operativo{
    height:calc(100dvh - 145px)!important;
  }
  #tab-pos .pos-payment-card .total-box{
    padding:4px 6px!important;
  }
  #tab-pos .pos-payment-card .total-box small{
    display:none!important;
  }
  #tab-pos .pos-payment-card .total-box h1{
    font-size:24px!important;
    margin:0!important;
  }
  #tab-pos .payment-method-card{
    min-height:55px!important;
    padding:4px!important;
  }
  #tab-pos .payment-method-icon{
    font-size:19px!important;
  }
  #tab-pos .payment-method-card strong{
    font-size:8.5px!important;
  }
  #tab-pos .payment-method-card small{
    font-size:6.8px!important;
  }
  #tab-pos .payment-mode-help span{
    display:none!important;
  }
  #tab-pos .payment-mode-help{
    padding:3px 6px!important;
  }
  #tab-pos .pos-payment-card #pagoCliente{
    height:28px!important;
  }
  #tab-pos .pos-payment-card .vuelto{
    padding:4px!important;
    font-size:16px!important;
  }
  #tab-pos .pos-payment-card .numeric-pad{
    gap:3px!important;
    padding:3px!important;
  }
  #tab-pos .pos-payment-card .numeric-pad button{
    height:29px!important;
    min-height:29px!important;
    font-size:13px!important;
  }
  #tab-pos .payment-action-button{
    min-height:28px!important;
  }
}

/* ===== Anchos medios: POS en 2 columnas y Pago ancho completo ===== */
@media (min-width:821px) and (max-width:1100px){
  #tab-pos .pos-layout.nspos-pos-operativo{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:minmax(220px,.75fr) minmax(0,1.35fr)!important;
    grid-template-areas:
      "search cart"
      "payment payment"!important;
  }

  #tab-pos .pos-payment-card{
    height:auto!important;
  }
  #tab-pos .pos-payment-card .card-body{
    height:auto!important;
    overflow:visible!important;
  }
  #tab-pos .payment-method-card{
    min-height:76px!important;
  }
  #tab-pos .pos-payment-card .numeric-pad button{
    min-height:44px!important;
    height:44px!important;
  }
}

/* ===== Tablet / smartphone: una columna, sin recortes ni scroll interno ===== */
@media (max-width:820px){
  #tab-pos{
    overflow:visible!important;
  }
  #tab-pos .pos-layout.nspos-pos-operativo{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"search" "cart" "payment"!important;
  }
  #tab-pos .pos-search-card,
  #tab-pos .pos-cart-card,
  #tab-pos .pos-payment-card{
    height:auto!important;
    min-height:0!important;
  }
  #tab-pos .pos-payment-card .card-body{
    height:auto!important;
    overflow:visible!important;
  }
  #tab-pos .pos-payment-card .payment-footer{
    margin-top:6px!important;
  }
}

/* Panel angosto del POS: mantener el diseño limpio sin texto aplastado. */
@media (max-width:460px){
  #tab-pos .payment-method-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #tab-pos .payment-method-card{
    min-height:78px!important;
    padding:7px 3px!important;
  }
  #tab-pos .payment-method-icon{
    font-size:22px!important;
  }
  #tab-pos .payment-method-card strong{
    font-size:9px!important;
  }
  #tab-pos .payment-method-card small{
    font-size:7px!important;
  }
  #tab-pos .payment-mode-help{
    padding:6px 8px!important;
  }
  #tab-pos .pos-payment-card .numeric-pad button{
    min-height:44px!important;
    height:44px!important;
    font-size:18px!important;
  }
}

/* En 330px o menos, 2+1 evita que las etiquetas se vuelvan ilegibles. */
@media (max-width:330px){
  #tab-pos .payment-method-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #tab-pos .payment-method-card:nth-child(3){
    grid-column:1/-1!important;
    min-height:62px!important;
  }
}

/* Resolución muy baja: preferir scroll de página a contenido cortado. */
@media (max-height:560px), (max-width:820px){
  html, body, .app{
    min-height:100%!important;
    height:auto!important;
    overflow-y:auto!important;
  }
  #tab-pos .pos-payment-card .card-body{
    overflow:visible!important;
  }
}