/* STARLIKE POS · CHECKOUT RESPONSIVE FINAL
   Ajuste visual para 1366x768 y pantallas operativas. No modifica lógica. */
.cash-calculator.hidden{display:none!important}

body.sl-operator-mode #view-pos .pos-layout{
  grid-template-columns:minmax(0,1fr) clamp(315px,25vw,350px)!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
body.sl-operator-mode #view-pos .pos-menu{
  min-width:0!important;
}
body.sl-operator-mode #view-pos .cart{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:12px!important;
  top:64px!important;
  max-height:calc(100vh - 104px)!important;
  scrollbar-gutter:stable;
}
body.sl-operator-mode #view-pos .cart > *,
body.sl-operator-mode #view-pos .cart label,
body.sl-operator-mode #view-pos .cart input,
body.sl-operator-mode #view-pos .cart select,
body.sl-operator-mode #view-pos .cart textarea{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.sl-operator-mode #view-pos .cart input,
body.sl-operator-mode #view-pos .cart select{
  width:100%!important;
}
body.sl-operator-mode #view-pos .cart-head{
  margin-bottom:7px!important;
  padding-bottom:7px!important;
}
body.sl-operator-mode #view-pos .cart > label{
  margin:7px 0!important;
}
body.sl-operator-mode #view-pos .cart .top-gap{
  margin-top:7px!important;
}
body.sl-operator-mode #view-pos .cart .button-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
body.sl-operator-mode #view-pos .cart .button-row .btn{
  flex:1 1 120px!important;
  min-width:0!important;
}
body.sl-operator-mode #view-pos .cart-totals{
  margin-top:8px!important;
  padding:9px 10px!important;
}
body.sl-operator-mode #view-pos .cart-totals .grand{
  margin-top:6px!important;
  padding-top:8px!important;
}
body.sl-operator-mode #view-pos #posCashCalculator{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  padding:9px!important;
  margin-top:7px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.sl-operator-mode #view-pos #posCashCalculator.hidden{
  display:none!important;
}
body.sl-operator-mode #view-pos #posCashCalculator > div:first-child{
  display:none!important;
}
body.sl-operator-mode #view-pos #posCashCalculator > label{
  display:block!important;
  margin:0!important;
  width:100%!important;
}
body.sl-operator-mode #view-pos #posCashCalculator #posCashReceived{
  width:100%!important;
  margin-top:4px!important;
}
body.sl-operator-mode #view-pos #posCashCalculator #posCashExact{
  display:none!important;
}
body.sl-operator-mode #view-pos #posCashCalculator .stl-cash-pad-wrap{
  grid-column:1/-1!important;
  width:100%!important;
  max-width:100%!important;
  margin:7px 0 0!important;
  box-sizing:border-box!important;
}
body.sl-operator-mode #view-pos #posCashCalculator .stl-cash-quick{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  justify-items:stretch!important;
  box-sizing:border-box!important;
}
body.sl-operator-mode #view-pos #posCashCalculator .stl-cash-key{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:36px!important;
  padding:7px 6px!important;
  font-size:11px!important;
  line-height:1.1!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
body.sl-operator-mode #view-pos #posCashCalculator .stl-cash-exact{
  grid-column:1/-1!important;
  min-height:39px!important;
}
body.sl-operator-mode #view-pos #posCashCalculator .cash-change{
  min-height:42px!important;
  padding:7px 9px!important;
}
body.sl-operator-mode #view-pos #posCashCalculator .cash-change strong{
  font-size:20px!important;
}
body.sl-operator-mode #view-pos #checkoutBtn{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-top:9px!important;
  box-sizing:border-box!important;
}

/* Diálogo de cobro posterior: compacto y sin desbordamiento. */
#orderPaymentDialog form{
  width:min(560px,calc(100vw - 32px))!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#orderPaymentDialog .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
#orderPaymentDialog .cash-calculator{
  grid-template-columns:1fr!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  gap:7px!important;
  padding:10px!important;
}
#orderPaymentDialog .cash-calculator.hidden{display:none!important}
#orderPaymentDialog #orderCashCalculator > div:first-child{display:none!important}
#orderPaymentDialog #orderCashCalculator > label{margin:0!important;min-width:0!important;width:100%!important}
#orderPaymentDialog #orderCashCalculator > .stl-cash-pad-wrap{grid-column:1/-1!important;width:100%!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}
#orderPaymentDialog #orderCashCalculator #orderCashExact{display:none!important}
#orderPaymentDialog .stl-cash-quick{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  max-width:100%!important;
  gap:7px!important;
  box-sizing:border-box!important;
}
#orderPaymentDialog .stl-cash-key{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:38px!important;
  padding:8px 7px!important;
  box-sizing:border-box!important;
}
#orderPaymentDialog .stl-cash-exact{
  grid-column:1/-1!important;
  min-height:41px!important;
}
#orderPaymentDialog input,#orderPaymentDialog select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

@media(max-width:1450px) and (min-width:901px){
  body.sl-operator-mode #view-pos .pos-layout{
    grid-template-columns:minmax(0,1fr) 330px!important;
    gap:10px!important;
  }
  body.sl-operator-mode #view-pos #productGrid{
    grid-template-columns:repeat(4,minmax(135px,1fr))!important;
    gap:9px!important;
  }
}
@media(max-height:800px) and (min-width:901px){
  body.sl-operator-mode #view-pos .cart{
    top:60px!important;
    max-height:calc(100vh - 92px)!important;
    padding:10px!important;
  }
  body.sl-operator-mode #view-pos .cart-lines{
    max-height:150px!important;
    overflow:auto!important;
  }
  body.sl-operator-mode #view-pos .cart > label{
    margin:5px 0!important;
  }
  body.sl-operator-mode #view-pos .cart .btn{
    min-height:38px!important;
  }
}
@media(max-width:900px){
  body.sl-operator-mode #view-pos .pos-layout{
    grid-template-columns:1fr!important;
  }
  body.sl-operator-mode #view-pos .cart{
    position:static!important;
    max-height:none!important;
  }
}