/* STARLIKE POS · TOUCH PROFESSIONAL · 2026-09-21 */
body.sl-operator-mode{
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-size:15px!important;
  color:#f7f7fa!important;
  overflow:hidden!important;
  background:#0a0a0d!important;
}
body.sl-operator-mode .app{height:100vh!important;min-height:100vh!important;overflow:hidden!important}
body.sl-operator-mode .main{
  height:100vh!important;max-width:none!important;width:100%!important;
  padding:0 18px 76px!important;overflow:hidden!important;
}
body.sl-operator-mode .topbar{
  height:54px!important;min-height:54px!important;margin:0 0 8px!important;
  padding:0 4px!important;border-bottom:1px solid #2b2b33!important;
}
body.sl-operator-mode .topbar h2{font-size:22px!important;font-weight:800!important;letter-spacing:-.02em!important}
body.sl-operator-mode .view{height:calc(100vh - 138px)!important;max-height:calc(100vh - 138px)!important;overflow:hidden!important;padding-bottom:0!important}
body.sl-operator-mode input,body.sl-operator-mode select,body.sl-operator-mode button{font-family:inherit!important}
body.sl-operator-mode input,body.sl-operator-mode select{font-size:15px!important;color:#fff!important}
body.sl-operator-mode label{font-size:13px!important;font-weight:750!important;color:#ededf1!important}
body.sl-operator-mode #slOperatorHome169{
  display:flex!important;flex-direction:column!important;
  width:100%!important;max-width:1180px!important;height:100%!important;
  margin:0 auto!important;padding:0 0 4px!important;
}
body.sl-operator-mode .sl-op-welcome{padding:5px 4px 7px!important;text-align:left!important}
body.sl-operator-mode .sl-op-welcome .sl-op-kicker{font-size:11px!important;color:#a2a2ac!important}
body.sl-operator-mode .sl-op-welcome h1{margin:2px 0 1px!important;font-size:28px!important;font-weight:850!important}
body.sl-operator-mode .sl-op-welcome p{font-size:13px!important;color:#c4c4ca!important}
body.sl-operator-mode .sl-op-cash-gate{
  min-height:58px!important;margin:0 0 8px!important;padding:8px 12px!important;border-radius:13px!important;
}
body.sl-operator-mode .sl-op-cash-gate b{font-size:17px!important}
body.sl-operator-mode .sl-op-cash-gate small{font-size:12px!important}
body.sl-operator-mode .sl-op-cash-gate button{min-height:40px!important;min-width:116px!important;font-size:13px!important}
body.sl-operator-mode .sl-op-home-grid{
  flex:1!important;min-height:0!important;display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:10px!important;
}
body.sl-operator-mode .sl-op-home-card{
  min-height:0!important;height:100%!important;padding:13px 15px!important;border-radius:15px!important;
  flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;
}
body.sl-operator-mode .sl-op-home-icon{
  width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;
  flex:0 0 58px!important;border-radius:15px!important;font-size:34px!important;
}
body.sl-operator-mode .sl-op-home-card strong{
  margin:0!important;font-size:20px!important;line-height:1.05!important;font-weight:850!important;
}
body.sl-operator-mode .sl-op-home-card small{
  margin-top:5px!important;font-size:13px!important;line-height:1.25!important;color:#d1d1d7!important;
}
body.sl-operator-mode .sl-op-home-card.primary small{color:#fff!important}
body.sl-operator-mode #slOperatorBranch169{margin:5px 0 0!important;font-size:11px!important;color:#aaaab3!important}
body.sl-operator-mode #slOperatorDock169{
  bottom:8px!important;min-height:62px!important;height:62px!important;padding:5px!important;gap:4px!important;border-radius:16px!important;
}
body.sl-operator-mode .sl-op-dock-btn{
  min-width:104px!important;height:52px!important;border-radius:11px!important;font-size:12px!important;font-weight:850!important;
}
body.sl-operator-mode .sl-op-dock-btn span:first-child{
  min-width:28px!important;min-height:26px!important;font-size:25px!important;line-height:26px!important;
}
body.sl-operator-mode #slOpMoreBtn169 span:first-child{font-size:27px!important;line-height:26px!important}
body.sl-operator-mode #slOperatorMore169{bottom:74px!important}
body.sl-operator-mode #view-pos{display:flex!important;flex-direction:column!important}
body.sl-operator-mode #slOperatorPosHint169{
  flex:0 0 28px!important;height:28px!important;margin:0 0 6px!important;font-size:12px!important;color:#b8b8c0!important;
}
body.sl-operator-mode #view-pos .pos-layout{
  flex:1!important;min-height:0!important;height:auto!important;
  grid-template-columns:minmax(0,1fr) 380px!important;gap:12px!important;overflow:hidden!important;
}
body.sl-operator-mode #view-pos .pos-menu{
  min-height:0!important;height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;
}
body.sl-operator-mode #view-pos .chips{
  flex:0 0 auto!important;display:flex!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;
  padding:0 0 5px!important;scrollbar-width:thin!important;
}
body.sl-operator-mode #view-pos .chip{
  min-height:38px!important;padding:8px 13px!important;font-size:13px!important;font-weight:800!important;white-space:nowrap!important;
}
body.sl-operator-mode #view-pos .product-grid{
  flex:1!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  grid-template-columns:repeat(4,minmax(130px,1fr))!important;gap:8px!important;margin-top:3px!important;padding:0 4px 4px 0!important;
}
body.sl-operator-mode #view-pos .product-card{
  min-height:104px!important;padding:11px!important;border-radius:12px!important;
}
body.sl-operator-mode #view-pos .product-card h4{font-size:16px!important;line-height:1.15!important;font-weight:850!important}
body.sl-operator-mode #view-pos .product-card strong{font-size:20px!important}
body.sl-operator-mode #view-pos .cart{
  position:static!important;top:auto!important;height:100%!important;min-height:0!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important;padding:11px!important;border-radius:14px!important;
  border:1px solid #34343d!important;background:#141419!important;
}
body.sl-operator-mode #view-pos .cart-head{flex:0 0 auto!important;margin-bottom:3px!important}
body.sl-operator-mode #view-pos .cart-head h3{font-size:18px!important;font-weight:850!important;margin:0!important}
body.sl-operator-mode #view-pos .cart-lines{
  flex:1 1 auto!important;min-height:70px!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  margin:4px 0!important;padding-right:3px!important;
}
body.sl-operator-mode #view-pos .cart-line{font-size:13px!important;line-height:1.2!important;padding:6px 2px!important}
body.sl-operator-mode #view-pos .cart label{margin:4px 0!important;font-size:12px!important}
body.sl-operator-mode #view-pos #serviceType,body.sl-operator-mode #view-pos #paymentMethod{
  min-height:38px!important;height:38px!important;font-size:14px!important;font-weight:800!important;
}
body.sl-operator-mode #view-pos .cart-totals{flex:0 0 auto!important;padding:5px 0!important}
body.sl-operator-mode #view-pos .cart-totals>div{padding:2px 0!important;font-size:13px!important}
body.sl-operator-mode #view-pos .cart-totals .grand{font-size:22px!important;font-weight:900!important}
body.sl-operator-mode #view-pos .button-row.top-gap{margin-top:4px!important;gap:6px!important}
body.sl-operator-mode #view-pos #manualDiscountBtn,body.sl-operator-mode #view-pos #staffMealBtn{
  min-height:38px!important;padding:7px 10px!important;font-size:12px!important;font-weight:850!important;
}
body.sl-operator-mode #slClientToggle169{min-height:32px!important;margin:4px 0!important;font-size:11px!important}
body.sl-operator-mode #view-pos .payment-details{flex:0 0 auto!important;margin:3px 0!important;padding:6px!important;border-radius:10px!important}
body.sl-operator-mode #view-pos .payment-details label{margin:2px 0!important}
body.sl-operator-mode #view-pos .payment-details input,body.sl-operator-mode #view-pos .payment-details select{min-height:34px!important;height:34px!important}
body.sl-operator-mode #view-pos .cash-calculator{
  flex:0 0 auto!important;margin:4px 0!important;padding:7px 8px!important;border-radius:10px!important;gap:5px!important;
}
body.sl-operator-mode #view-pos .cash-calculator>div:first-child small{display:none!important}
body.sl-operator-mode #view-pos .cash-calculator input{min-height:36px!important;height:36px!important}
body.sl-operator-mode #view-pos .cash-change{font-size:13px!important}
body.sl-operator-mode #view-pos .cash-change strong{font-size:18px!important}
body.sl-operator-mode #view-pos #checkoutBtn{
  position:static!important;flex:0 0 54px!important;min-height:54px!important;height:54px!important;
  margin:5px 0 0!important;font-size:18px!important;font-weight:900!important;border-radius:12px!important;
}
body.sl-operator-mode #saleMessage{flex:0 0 auto!important;max-height:42px!important;overflow:auto!important;font-size:12px!important;margin-top:4px!important}
body.sl-operator-mode #view-pos .notice{font-size:12px!important;line-height:1.25!important;padding:6px 8px!important;margin:3px 0!important}
body.sl-operator-mode #view-pos #discountStatus:empty{display:none!important}
body.sl-operator-mode #view-pos #posCustomerPhoneWrap input,body.sl-operator-mode #view-pos #posCoupon{min-height:35px!important;height:35px!important}
body.sl-operator-mode #view-restaurant{display:flex!important;flex-direction:column!important;min-height:0!important}
body.sl-operator-mode #view-restaurant>.toolbar{flex:0 0 44px!important;min-height:44px!important;margin:0 0 5px!important}
body.sl-operator-mode #view-restaurant .section-title{font-size:20px!important;margin:0!important;font-weight:850!important}
body.sl-operator-mode #view-restaurant .restaurant-metrics{
  flex:0 0 62px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;margin:0 0 7px!important;
}
body.sl-operator-mode #view-restaurant .restaurant-metrics .metric{min-height:62px!important;padding:8px 12px!important}
body.sl-operator-mode #view-restaurant .restaurant-metrics .metric span{font-size:11px!important}
body.sl-operator-mode #view-restaurant .restaurant-metrics .metric strong{font-size:22px!important;line-height:1!important}
body.sl-operator-mode #view-restaurant .restaurant-layout{
  flex:1!important;min-height:0!important;margin-top:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) 390px!important;gap:10px!important;overflow:hidden!important;
}
body.sl-operator-mode #view-restaurant .restaurant-layout>.panel{min-height:0!important;overflow:hidden!important;padding:10px!important}
body.sl-operator-mode #restaurantTableGrid{height:calc(100% - 48px)!important;overflow-y:auto!important;align-content:start!important}
body.sl-operator-mode #view-restaurant .restaurant-table{min-height:92px!important;font-size:15px!important}
body.sl-operator-mode #view-restaurant .restaurant-session-panel{height:100%!important;overflow-y:auto!important}
body.sl-operator-mode #view-restaurant .config-head h3{font-size:18px!important;margin:0!important}
body.sl-operator-mode #view-restaurant .config-head small{font-size:12px!important;color:#b9b9c1!important}
body.sl-operator-mode #view-cash{overflow:hidden!important}
body.sl-operator-mode #view-cash #cashClosed{
  height:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:28px!important;border-radius:18px!important;
}
body.sl-operator-mode #view-cash #cashClosed h3{font-size:28px!important;margin:4px 0!important}
body.sl-operator-mode #view-cash #cashClosed p{font-size:15px!important;color:#c6c6cd!important}
body.sl-operator-mode #view-cash #cashClosed .inline-form{min-width:420px!important;gap:10px!important}
body.sl-operator-mode #view-cash #openingCash,body.sl-operator-mode #view-cash #openCashBtn{min-height:54px!important;height:54px!important;font-size:18px!important}
body.sl-operator-mode #view-cash #cashOpen{height:100%!important;overflow-y:auto!important;padding-right:3px!important}
body.sl-operator-mode #view-cash #cashOpen>.cards{grid-template-columns:repeat(4,1fr)!important;gap:8px!important;margin-bottom:8px!important}
body.sl-operator-mode #view-cash #cashOpen>.cards .metric{padding:10px 12px!important;min-height:74px!important}
body.sl-operator-mode #view-cash #cashOpen>.cards strong{font-size:23px!important}
body.sl-operator-mode #view-cash .two-col{gap:10px!important}
body.sl-operator-mode #view-cash .panel{padding:13px!important;border-radius:14px!important}
body.sl-operator-mode #view-cash .panel h3{font-size:19px!important;margin:0 0 7px!important}
body.sl-operator-mode #view-cash #cashMoveBtn,body.sl-operator-mode #view-cash #closeCashBtn,body.sl-operator-mode #view-cash #cashXBtn{min-height:46px!important;font-size:14px!important;font-weight:850!important}
body.sl-operator-mode #view-cash .table-wrap{max-height:150px!important;overflow:auto!important}
body.sl-supervisor-mode{font-family:"Segoe UI",Arial,sans-serif!important;color:#f7f7fa!important}
body.sl-supervisor-mode .main{padding:0 22px 28px!important}
body.sl-supervisor-mode .topbar{min-height:58px!important;margin-bottom:12px!important}
body.sl-supervisor-mode .topbar h2{font-size:22px!important;font-weight:850!important}
body.sl-supervisor-mode #slSupervisorHome{max-width:1180px!important;margin:0 auto!important}
body.sl-supervisor-mode .sl-sup-head{padding:18px 20px!important;margin-bottom:12px!important;border-radius:16px!important}
body.sl-supervisor-mode .sl-sup-head h1{font-size:28px!important;line-height:1!important;margin:4px 0 5px!important}
body.sl-supervisor-mode .sl-sup-head p{font-size:14px!important;color:#c7c7ce!important}
body.sl-supervisor-mode .sl-sup-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
body.sl-supervisor-mode .sl-sup-card{min-height:126px!important;padding:16px!important;gap:14px!important;border-radius:15px!important}
body.sl-supervisor-mode .sl-sup-icon{width:60px!important;height:60px!important;min-width:60px!important;font-size:34px!important;border-radius:14px!important}
body.sl-supervisor-mode .sl-sup-card b{font-size:19px!important;line-height:1.08!important;margin-bottom:4px!important}
body.sl-supervisor-mode .sl-sup-card small{font-size:13px!important;line-height:1.3!important;color:#c5c5cc!important}
body.sl-supervisor-mode .sl-sup-note{font-size:13px!important;margin-top:12px!important;padding:11px 14px!important}
body.sl-supervisor-mode .sidebar .nav{font-size:14px!important;min-height:44px!important;font-weight:750!important}
body.sl-operator-mode button{touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important}
body.sl-operator-mode button:focus-visible{outline:3px solid #ffd43b!important;outline-offset:2px!important}
@media(max-height:800px) and (min-width:900px){
  body.sl-operator-mode .topbar{height:48px!important;min-height:48px!important}
  body.sl-operator-mode .view{height:calc(100vh - 126px)!important;max-height:calc(100vh - 126px)!important}
  body.sl-operator-mode .sl-op-welcome{padding:2px 4px 4px!important}
  body.sl-operator-mode .sl-op-welcome h1{font-size:25px!important}
  body.sl-operator-mode .sl-op-welcome p{font-size:12px!important}
  body.sl-operator-mode .sl-op-cash-gate{min-height:52px!important;margin-bottom:6px!important;padding:6px 10px!important}
  body.sl-operator-mode .sl-op-home-card{padding:10px 12px!important;gap:11px!important}
  body.sl-operator-mode .sl-op-home-icon{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;flex-basis:52px!important;font-size:31px!important}
  body.sl-operator-mode .sl-op-home-card strong{font-size:18px!important}
  body.sl-operator-mode .sl-op-home-card small{font-size:12px!important}
  body.sl-operator-mode #slOperatorDock169{height:58px!important;min-height:58px!important}
  body.sl-operator-mode .sl-op-dock-btn{height:48px!important}
}
@media(max-width:1150px) and (min-width:821px){
  body.sl-operator-mode #view-pos .pos-layout{grid-template-columns:minmax(0,1fr) 350px!important}
  body.sl-operator-mode #view-pos .product-grid{grid-template-columns:repeat(3,minmax(130px,1fr))!important}
  body.sl-operator-mode #view-restaurant .restaurant-layout{grid-template-columns:minmax(0,1fr) 340px!important}
}
body.sl-operator-mode .sl-op-cash-gate{
  width:100%!important;box-sizing:border-box!important;flex-flow:row nowrap!important;justify-content:flex-start!important;
  border:2px solid #4a4a55!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
}
body.sl-operator-mode .sl-op-cash-gate>div{
  display:flex!important;flex:1 1 auto!important;min-width:0!important;flex-direction:column!important;justify-content:center!important;
}
body.sl-operator-mode .sl-op-cash-gate b{display:block!important;color:#fff!important}
body.sl-operator-mode .sl-op-cash-gate small{display:block!important;color:#d2d2d8!important}
body.sl-operator-mode .sl-op-cash-gate button{margin-left:auto!important;align-self:center!important;flex:0 0 auto!important;color:#fff!important;background:#26262e!important;border:1px solid #555562!important}
body.sl-operator-mode .sl-op-cash-gate.open{border-color:#2f8054!important;background:#11251a!important}
body.sl-operator-mode .sl-op-cash-gate.closed{border-color:#b84651!important;background:#2b1518!important}
/* Etapas compactas de venta: nunca mezclar armado y cobro en la misma altura */
body.sl-operator-mode #view-pos.sl-kitchen-stage label:has(#paymentMethod),
body.sl-operator-mode #view-pos.sl-kitchen-stage .payment-details,
body.sl-operator-mode #view-pos.sl-kitchen-stage .cash-calculator,
body.sl-operator-mode #view-pos.sl-kitchen-stage #slClientToggle169,
body.sl-operator-mode #view-pos.sl-kitchen-stage .cart .form-grid.compact{
  display:none!important;
}
body.sl-operator-mode #view-pos.sl-payment-stage label:has(#serviceType),
body.sl-operator-mode #view-pos.sl-payment-stage .button-row.top-gap,
body.sl-operator-mode #view-pos.sl-payment-stage #discountStatus,
body.sl-operator-mode #view-pos.sl-payment-stage #slClientToggle169,
body.sl-operator-mode #view-pos.sl-payment-stage .cart .form-grid.compact{
  display:none!important;
}
body.sl-operator-mode #view-pos.sl-payment-stage .cart-lines{
  flex:0 1 118px!important;min-height:42px!important;max-height:118px!important;
}
body.sl-operator-mode #view-pos.sl-payment-stage .payment-details:not(.hidden){
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px 7px!important;
}
body.sl-operator-mode #view-pos.sl-payment-stage .payment-details label{margin:0!important}
body.sl-operator-mode #view-pos.sl-payment-stage #paymentTipWrap{grid-column:1/-1!important}
body.sl-operator-mode #saleMessage:empty{display:none!important}
/* Cobro touch: foco absoluto en total y pago */
body.sl-operator-mode #view-pos.sl-payment-stage #slOperatorPosHint169{display:none!important}
body.sl-operator-mode #view-pos.sl-payment-stage .cart-lines{
  flex:0 1 58px!important;min-height:34px!important;max-height:58px!important;margin:2px 0!important;
}
body.sl-operator-mode #view-pos.sl-payment-stage .cart-totals>div:not(.grand){display:none!important}
body.sl-operator-mode #view-pos.sl-payment-stage .cart-totals{padding:2px 0!important}
body.sl-operator-mode #view-pos.sl-payment-stage .cart-totals .grand{font-size:24px!important;padding:3px 0!important}
body.sl-operator-mode #view-pos.sl-payment-stage label:has(#paymentMethod){margin:2px 0!important}
body.sl-operator-mode #view-pos.sl-payment-stage .payment-details{padding:4px!important;margin:2px 0!important}
body.sl-operator-mode #view-pos.sl-payment-stage .payment-details input,
body.sl-operator-mode #view-pos.sl-payment-stage .payment-details select{height:31px!important;min-height:31px!important;font-size:13px!important}
body.sl-operator-mode #view-pos.sl-payment-stage .cash-calculator{
  display:grid!important;grid-template-columns:1fr 1fr!important;align-items:end!important;gap:6px!important;
  padding:5px 7px!important;margin:2px 0!important;
}
body.sl-operator-mode #view-pos.sl-payment-stage .cash-calculator>div:first-child{display:none!important}
body.sl-operator-mode #view-pos.sl-payment-stage .cash-calculator label{margin:0!important}
body.sl-operator-mode #view-pos.sl-payment-stage .cash-change{margin:0!important;padding:4px 6px!important}