/* STARLIKE POS 5.7.5.51 · PASO 169
   MODO OPERADOR SIMPLE
   Principio: pocas decisiones visibles, funciones avanzadas bajo supervisor.
   NO elimina funcionalidad: el modo Administración conserva la interfaz completa. */

#slOperatorHome169,
#slOperatorDock169,
#slOperatorMore169,
#slOperatorModeBtn169,
#slOperatorPosHint169,
#slClientToggle169 { display:none; }

body.sl-operator-mode{
  --op-bg:#0b0b0e;
  --op-panel:#17171d;
  --op-panel2:#202027;
  --op-line:#313139;
  --op-text:#f8f8fa;
  --op-muted:#9898a2;
  --op-pink:#ff2f91;
  --op-yellow:#ffd43b;
  --op-ok:#48d087;
}

/* La navegación original NO se elimina ni se mueve.
   En modo operador solamente queda fuera de vista. */
body.sl-operator-mode .app{
  grid-template-columns:1fr!important;
}
body.sl-operator-mode .sidebar{
  display:none!important;
}
body.sl-operator-mode .main{
  max-width:1500px!important;
  width:100%!important;
  padding:0 24px 104px!important;
}
body.sl-operator-mode .topbar{
  min-height:68px!important;
  margin-bottom:18px!important;
}
body.sl-operator-mode .topbar h2{
  font-size:20px!important;
}
body.sl-operator-mode #userLabel,
body.sl-operator-mode #clock,
body.sl-operator-mode #changePinBtn{
  display:none!important;
}
body.sl-operator-mode .branch-label{
  background:#17171d!important;
  border:1px solid #34343c!important;
}
body.sl-operator-mode .branch-label>span{
  font-size:10px!important;
  color:#83838d!important;
}

/* Botón que permite regresar a administración sin perder nada */
#slOperatorModeBtn169{
  border:1px solid #383842;
  background:#1b1b21;
  color:#b9b9c2;
  border-radius:10px;
  min-height:36px;
  padding:8px 11px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
body:not(.sl-operator-mode) #slOperatorModeBtn169{
  display:inline-flex;
  align-items:center;
}
body.sl-operator-mode #slOperatorModeBtn169{
  display:none;
}

/* INICIO PARA OPERADOR */
body.sl-operator-mode #view-dashboard > *:not(#slOperatorHome169){
  display:none!important;
}
body.sl-operator-mode #slOperatorHome169{
  display:block;
  max-width:980px;
  margin:28px auto 0;
}
.sl-op-welcome{
  text-align:center;
  padding:18px 10px 22px;
}
.sl-op-welcome .sl-op-kicker{
  color:#777782;
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:900;
}
.sl-op-welcome h1{
  margin:8px 0 6px;
  font-size:30px;
  line-height:1.05;
}
.sl-op-welcome p{
  margin:0;
  color:#a2a2ac;
  font-size:13px;
}
.sl-op-home-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.sl-op-home-card{
  min-height:150px;
  background:linear-gradient(180deg,#1b1b21,#15151a);
  border:1px solid #303038;
  border-radius:18px;
  padding:22px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.13s ease;
}
.sl-op-home-card:hover{
  transform:translateY(-2px);
  border-color:#555560;
}
.sl-op-home-card.primary{
  background:linear-gradient(145deg,#ff2f91,#c91a68);
  border-color:transparent;
}
.sl-op-home-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  font-size:21px;
}
.sl-op-home-card strong{
  display:block;
  margin-top:22px;
  font-size:20px;
}
.sl-op-home-card small{
  display:block;
  margin-top:4px;
  color:#a9a9b2;
  line-height:1.3;
}
.sl-op-home-card.primary small{color:#ffe6f2}
#slOperatorBranch169{
  margin-top:18px;
  text-align:center;
  color:#777781;
  font-size:11px;
}

/* BARRA INFERIOR: solo 5 decisiones */
body.sl-operator-mode #slOperatorDock169{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:9000;
  display:flex;
  align-items:stretch;
  gap:5px;
  padding:7px;
  background:rgba(20,20,25,.96);
  backdrop-filter:blur(18px);
  border:1px solid #3b3b44;
  border-radius:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.48);
}
.sl-op-dock-btn{
  min-width:92px;
  height:54px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#a8a8b2;
  cursor:pointer;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  font-size:10px;
  font-weight:800;
}
.sl-op-dock-btn span:first-child{
  font-size:18px;
  line-height:18px;
}
.sl-op-dock-btn:hover{
  background:#28282f;
  color:#fff;
}
.sl-op-dock-btn.active{
  background:#31212a;
  color:#ff8fc3;
}
.sl-op-dock-btn.sl-sale{
  color:#fff;
  background:linear-gradient(145deg,#ff2f91,#d51d72);
}
.sl-op-dock-btn.sl-sale.active{
  box-shadow:0 0 0 2px rgba(255,255,255,.12) inset;
}

/* MAS: funciones menos frecuentes */
body.sl-operator-mode #slOperatorMore169{
  position:fixed;
  left:50%;
  bottom:84px;
  transform:translateX(104px);
  width:245px;
  z-index:9001;
  background:#1a1a20;
  border:1px solid #3b3b45;
  border-radius:15px;
  padding:7px;
  box-shadow:0 20px 65px rgba(0,0,0,.55);
}
body.sl-operator-mode #slOperatorMore169:not(.open){
  display:none!important;
}
.sl-op-more-title{
  padding:8px 9px 5px;
  color:#777781;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}
.sl-op-more-btn{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:#dedee4;
  padding:10px 11px;
  border-radius:9px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
}
.sl-op-more-btn:hover{background:#292930}
.sl-op-more-btn.supervisor{
  margin-top:4px;
  border-top:1px solid #33333b;
  border-radius:0 0 9px 9px;
  color:#ffd86a;
}
.sl-op-more-btn.danger{color:#ff8b94}

/* POS: el usuario solo necesita Producto -> Ticket -> Pago */
body.sl-operator-mode #view-pos{
  max-width:1420px;
  margin:0 auto;
}
body.sl-operator-mode #slOperatorPosHint169{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 0 13px;
  color:#85858f;
  font-size:11px;
  font-weight:800;
}
.sl-op-step{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.sl-op-step b{
  width:20px;height:20px;
  display:grid;place-items:center;
  background:#24242b;
  border-radius:50%;
  color:#d6d6dc;
  font-size:10px;
}
body.sl-operator-mode #view-pos .pos-layout{
  grid-template-columns:minmax(0,1fr) 390px!important;
  gap:16px!important;
}
body.sl-operator-mode #view-pos .product-grid{
  grid-template-columns:repeat(4,minmax(150px,1fr))!important;
  gap:10px!important;
  margin-top:12px!important;
}
body.sl-operator-mode #view-pos .product-card{
  min-height:112px!important;
  border-radius:14px!important;
  padding:14px!important;
}
body.sl-operator-mode #view-pos .product-card h4{
  font-size:16px!important;
}
body.sl-operator-mode #view-pos .product-card strong{
  font-size:20px!important;
}
body.sl-operator-mode #view-pos .chips{
  gap:6px!important;
}
body.sl-operator-mode #view-pos .chip{
  padding:8px 12px!important;
  font-size:11px!important;
}
body.sl-operator-mode #view-pos .cart{
  top:86px!important;
  padding:17px!important;
  border-radius:15px!important;
  box-shadow:0 16px 45px rgba(0,0,0,.18);
}
body.sl-operator-mode #view-pos .cart-head h3:after{
  content:'';
}
body.sl-operator-mode #view-pos .cart label{
  font-size:11px!important;
  margin:11px 0!important;
}
body.sl-operator-mode #view-pos #serviceType,
body.sl-operator-mode #view-pos #paymentMethod{
  min-height:44px!important;
  font-size:14px!important;
  font-weight:750!important;
  border-color:#484852!important;
}
body.sl-operator-mode #view-pos .cart .form-grid.compact{
  display:none!important;
}
body.sl-operator-mode #view-pos .cart.sl-show-client169 .form-grid.compact{
  display:grid!important;
}
body.sl-operator-mode #slClientToggle169{
  display:block;
  width:100%;
  border:1px dashed #3e3e47;
  background:#15151a;
  color:#9f9fa9;
  min-height:35px;
  border-radius:9px;
  margin:10px 0 2px;
  cursor:pointer;
  font-size:11px;
  font-weight:750;
}
body.sl-operator-mode #slClientToggle169:hover{
  color:#fff;
  border-color:#5a5a65;
}
body.sl-operator-mode #checkoutBtn{
  position:sticky;
  bottom:0;
  z-index:3;
  min-height:54px!important;
  margin-top:12px;
  font-size:16px!important;
  letter-spacing:.1px;
}
body.sl-operator-mode #clearCart{
  color:#888893!important;
  font-size:10px!important;
}
body.sl-operator-mode .cart-totals .grand{
  font-size:24px!important;
}

/* SALÓN: operador no necesita configuración técnica */
body.sl-operator-mode #restaurantConfigBtn{
  display:none!important;
}
body.sl-operator-mode #view-restaurant .toolbar .eyebrow,
body.sl-operator-mode #view-restaurant .toolbar p{
  display:none!important;
}
body.sl-operator-mode #view-restaurant .restaurant-metrics .metric{
  padding:12px 14px!important;
}
body.sl-operator-mode #view-restaurant .restaurant-metrics .metric strong{
  font-size:23px!important;
}

/* CAJA: acentuar acciones que sí necesita el operador */
body.sl-operator-mode #view-cash #openCashBtn,
body.sl-operator-mode #view-cash #closeCashBtn{
  min-height:48px!important;
  font-size:14px!important;
}
body.sl-operator-mode #view-cash #cashXBtn{
  background:transparent!important;
  color:#9999a4!important;
}

/* Pedidos y cocina: más aire y botones táctiles */
body.sl-operator-mode #view-kds .kds-actions .btn,
body.sl-operator-mode #view-online .btn{
  min-height:40px!important;
}
body.sl-operator-mode #view-kds .kds-card{
  border-radius:15px!important;
}

/* Si accidentalmente se abre una vista administrativa desde un enlace interno,
   no la ocultamos: la funcionalidad sigue disponible. */
body.sl-operator-mode .view{
  padding-bottom:8px;
}

/* Administración: se conserva la interfaz 168.1 completa. */
body:not(.sl-operator-mode) #slOperatorDock169,
body:not(.sl-operator-mode) #slOperatorMore169,
body:not(.sl-operator-mode) #slOperatorHome169,
body:not(.sl-operator-mode) #slOperatorPosHint169,
body:not(.sl-operator-mode) #slClientToggle169{
  display:none!important;
}

@media(max-width:1050px){
  body.sl-operator-mode #view-pos .product-grid{
    grid-template-columns:repeat(3,minmax(140px,1fr))!important;
  }
}
@media(max-width:820px){
  body.sl-operator-mode .main{
    padding:0 12px 98px!important;
  }
  .sl-op-home-grid{
    grid-template-columns:1fr 1fr;
  }
  body.sl-operator-mode #view-pos .pos-layout{
    grid-template-columns:1fr!important;
  }
  body.sl-operator-mode #view-pos .cart{
    position:static!important;
  }
  body.sl-operator-mode #slOperatorDock169{
    left:10px;
    right:10px;
    transform:none;
    bottom:10px;
    justify-content:space-between;
  }
  .sl-op-dock-btn{
    flex:1;
    min-width:0;
  }
  body.sl-operator-mode #slOperatorMore169{
    left:auto;
    right:12px;
    transform:none;
    bottom:78px;
  }
}
@media(max-width:600px){
  .sl-op-home-grid{grid-template-columns:1fr}
  .sl-op-welcome h1{font-size:25px}
  body.sl-operator-mode #view-pos .product-grid{
    grid-template-columns:repeat(2,minmax(120px,1fr))!important;
  }
  .sl-op-dock-btn{
    height:50px;
    font-size:9px;
  }
}


/* STARLIKE POS 5.9.2 · ICONOS GRANDES FIJOS OPERADOR · 2026-09-21
   Evita que los accesos principales reduzcan su icono por responsive/zoom visual. */
body.sl-operator-mode .sl-op-home-card{
  min-height:190px!important;
  padding:24px!important;
}
body.sl-operator-mode .sl-op-home-icon{
  width:68px!important;
  height:68px!important;
  min-width:68px!important;
  min-height:68px!important;
  flex:0 0 68px!important;
  border-radius:18px!important;
  font-size:40px!important;
  line-height:1!important;
  font-weight:900!important;
}
body.sl-operator-mode .sl-op-home-card strong{
  font-size:23px!important;
  line-height:1.12!important;
}
body.sl-operator-mode .sl-op-home-card small{
  font-size:14px!important;
  line-height:1.35!important;
}
body.sl-operator-mode #slOperatorDock169{
  min-height:78px!important;
  padding:8px!important;
  gap:6px!important;
}
body.sl-operator-mode .sl-op-dock-btn{
  min-width:112px!important;
  height:68px!important;
  border-radius:14px!important;
  gap:4px!important;
  font-size:12px!important;
  line-height:1.1!important;
}
body.sl-operator-mode .sl-op-dock-btn span:first-child{
  display:block!important;
  min-width:38px!important;
  min-height:36px!important;
  font-size:32px!important;
  line-height:36px!important;
  text-align:center!important;
  font-weight:900!important;
}
body.sl-operator-mode #slOpMoreBtn169 span:first-child{
  font-size:34px!important;
  letter-spacing:3px!important;
}
body.sl-operator-mode .sl-op-more-btn{
  min-height:48px!important;
  font-size:14px!important;
  font-weight:800!important;
}
body.sl-operator-mode #view-pos .product-card{
  min-height:126px!important;
}
body.sl-operator-mode #view-pos .product-card h4{
  font-size:17px!important;
}
body.sl-operator-mode #checkoutBtn{
  min-height:62px!important;
  font-size:18px!important;
}

/* Mantener iconos grandes también en ventanas angostas. */
@media(max-width:820px){
  body.sl-operator-mode .sl-op-home-icon{
    width:62px!important;
    height:62px!important;
    min-width:62px!important;
    min-height:62px!important;
    flex-basis:62px!important;
    font-size:37px!important;
  }
  body.sl-operator-mode .sl-op-dock-btn{
    min-width:0!important;
    height:66px!important;
    font-size:11px!important;
  }
  body.sl-operator-mode .sl-op-dock-btn span:first-child{
    font-size:30px!important;
    line-height:34px!important;
    min-height:34px!important;
  }
}
@media(max-width:600px){
  body.sl-operator-mode .sl-op-home-card{
    min-height:170px!important;
  }
  body.sl-operator-mode .sl-op-home-icon{
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    min-height:60px!important;
    flex-basis:60px!important;
    font-size:36px!important;
  }
  body.sl-operator-mode .sl-op-dock-btn{
    height:64px!important;
    font-size:10px!important;
  }
  body.sl-operator-mode .sl-op-dock-btn span:first-child{
    font-size:28px!important;
    line-height:32px!important;
  }
}


/* Caja visible y obligatoria en Vista Operador · 2026-09-21 */
body.sl-operator-mode .sl-op-cash-gate{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-height:74px!important;
  margin:0 0 18px!important;
  padding:14px 16px!important;
  border:2px solid #454550!important;
  border-radius:16px!important;
  background:#19191f!important;
}
body.sl-operator-mode .sl-op-cash-gate .sl-op-cash-dot{
  width:18px!important;height:18px!important;min-width:18px!important;border-radius:999px!important;background:#777!important;
}
body.sl-operator-mode .sl-op-cash-gate>div{flex:1!important}
body.sl-operator-mode .sl-op-cash-gate b{
  display:block!important;font-size:19px!important;line-height:1.1!important;letter-spacing:.04em!important;
}
body.sl-operator-mode .sl-op-cash-gate small{
  display:block!important;margin-top:4px!important;font-size:13px!important;line-height:1.3!important;
}
body.sl-operator-mode .sl-op-cash-gate button{
  min-width:128px!important;min-height:48px!important;padding:10px 14px!important;border-radius:12px!important;font-size:14px!important;font-weight:900!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.open .sl-op-cash-dot{background:#46d17c!important;box-shadow:0 0 0 6px rgba(70,209,124,.12)!important}
body.sl-operator-mode .sl-op-cash-gate.closed{border-color:#a93d48!important;background:#2b1518!important}
body.sl-operator-mode .sl-op-cash-gate.closed .sl-op-cash-dot{background:#ff5a67!important;box-shadow:0 0 0 6px rgba(255,90,103,.12)!important}
body.sl-operator-mode .sl-op-home-card.cash-locked,
body.sl-operator-mode .sl-op-dock-btn.cash-locked{
  opacity:.48!important;filter:saturate(.45)!important;
}
body.sl-operator-mode .sl-op-home-card.cash-locked::after{
  content:"ABRE CAJA PRIMERO"!important;
  display:block!important;
  margin-top:8px!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
}
@media(max-width:700px){
  body.sl-operator-mode .sl-op-cash-gate{align-items:flex-start!important;flex-wrap:wrap!important}
  body.sl-operator-mode .sl-op-cash-gate button{width:100%!important}
}