/* STARLIKE POS 5.7.5.56 · PASO 171
   PUNTO DE VENTA PARA OPERADOR NUEVO
   SOLO CSS. NO CAMBIA LOGICA, BOTONES, DOM, APP.JS, BACKEND NI SUPABASE. */

/* Se aplica únicamente al POS cuando está activa la vista operador. */
body.sl-operator-mode #view-pos{
  --p171-bg:#0b0b0e;
  --p171-panel:#17171c;
  --p171-panel-2:#1d1d23;
  --p171-line:#34343d;
  --p171-text:#f7f7f9;
  --p171-muted:#9696a0;
  --p171-pink:#ff2f91;
  --p171-yellow:#ffd43b;
  --p171-green:#45d087;
  max-width:1500px;
  margin:0 auto;
}

/* Ocultar ruido general del encabezado SOLO durante venta. */
body.sl-operator-mode:has(#view-pos.active-view) .topbar{
  min-height:58px!important;
}
body.sl-operator-mode:has(#view-pos.active-view) .topbar #viewTitle{
  font-size:18px!important;
}
body.sl-operator-mode:has(#view-pos.active-view) .topbar #viewTitle:after{
  content:' · Venta';
  color:#777781;
  font-weight:600;
}
body.sl-operator-mode:has(#view-pos.active-view) .top-actions{
  gap:6px!important;
}

/* Guía visual del flujo existente. */
body.sl-operator-mode #slOperatorPosHint169{
  display:flex!important;
  min-height:42px;
  margin:0 0 14px!important;
  padding:8px 12px;
  border:1px solid #2f2f37;
  border-radius:12px;
  background:#131318;
  color:#9b9ba5!important;
  font-size:11px!important;
}
body.sl-operator-mode #slOperatorPosHint169 .sl-op-step{
  color:#d8d8dd;
}
body.sl-operator-mode #slOperatorPosHint169 .sl-op-step b{
  width:24px!important;
  height:24px!important;
  background:#25252c!important;
  color:#fff!important;
  font-size:11px!important;
}
body.sl-operator-mode #slOperatorPosHint169 .sl-op-step:last-child b{
  background:var(--p171-pink)!important;
}

/* DOS ZONAS CLARAS: productos / ticket */
body.sl-operator-mode #view-pos .pos-layout{
  grid-template-columns:minmax(0,1fr) 405px!important;
  gap:18px!important;
  align-items:start;
}

/* ZONA 1: PRODUCTOS */
body.sl-operator-mode #view-pos .pos-menu{
  background:transparent!important;
  border:0!important;
  padding:0!important;
}

body.sl-operator-mode #view-pos #categoryChips{
  position:sticky;
  top:66px;
  z-index:8;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  overflow-x:auto;
  padding:8px 2px 10px;
  margin-bottom:4px;
  background:linear-gradient(180deg,#0b0b0e 78%,rgba(11,11,14,0));
  scrollbar-width:thin;
}

body.sl-operator-mode #view-pos #categoryChips .chip{
  flex:0 0 auto;
  min-height:39px!important;
  padding:8px 14px!important;
  border:1px solid #373740!important;
  border-radius:999px!important;
  background:#17171c!important;
  color:#b5b5be!important;
  font-size:11px!important;
  font-weight:850!important;
}

body.sl-operator-mode #view-pos #categoryChips .chip.active,
body.sl-operator-mode #view-pos #categoryChips .chip:hover{
  background:var(--p171-yellow)!important;
  border-color:var(--p171-yellow)!important;
  color:#151515!important;
}

body.sl-operator-mode #view-pos #productGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(155px,1fr))!important;
  gap:11px!important;
}

body.sl-operator-mode #view-pos .product-card{
  min-height:132px!important;
  padding:15px!important;
  border:1px solid #313139!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#1a1a20,#15151a)!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:transform .1s ease,border-color .1s ease,background .1s ease;
}

body.sl-operator-mode #view-pos .product-card:hover{
  transform:translateY(-2px);
  border-color:#5a5a65!important;
  background:#202027!important;
}

body.sl-operator-mode #view-pos .product-card:active{
  transform:scale(.985);
}

body.sl-operator-mode #view-pos .product-card h4,
body.sl-operator-mode #view-pos .product-card strong:first-of-type{
  font-size:15px!important;
  line-height:1.18!important;
  color:#fff!important;
  font-weight:850!important;
}

body.sl-operator-mode #view-pos .product-card p,
body.sl-operator-mode #view-pos .product-card small{
  color:#888893!important;
  font-size:10px!important;
  line-height:1.25!important;
}

body.sl-operator-mode #view-pos .product-card .price,
body.sl-operator-mode #view-pos .product-card strong:last-child{
  font-size:20px!important;
  color:#fff!important;
  font-weight:900!important;
}

/* ZONA 2: TICKET */
body.sl-operator-mode #view-pos .cart{
  position:sticky!important;
  top:66px!important;
  max-height:calc(100vh - 86px);
  overflow:auto;
  padding:17px!important;
  border:1px solid #3a3a43!important;
  border-radius:17px!important;
  background:#17171c!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28)!important;
}

body.sl-operator-mode #view-pos .cart-head{
  min-height:38px;
  margin-bottom:9px!important;
  padding-bottom:9px;
  border-bottom:1px solid #2d2d35;
}

body.sl-operator-mode #view-pos .cart-head h3{
  font-size:18px!important;
  color:#fff!important;
}

body.sl-operator-mode #view-pos #clearCart{
  color:#888893!important;
  font-size:10px!important;
  padding:5px 7px!important;
}

/* Servicio y pago son decisiones importantes, se hacen obvias. */
body.sl-operator-mode #view-pos .cart > label{
  display:block;
  margin:10px 0!important;
  color:#cfcfd5!important;
  font-size:11px!important;
  font-weight:800!important;
}

body.sl-operator-mode #view-pos #serviceType,
body.sl-operator-mode #view-pos #paymentMethod{
  width:100%;
  min-height:48px!important;
  margin-top:5px;
  padding:8px 11px!important;
  border:1px solid #494953!important;
  border-radius:11px!important;
  background:#101014!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:850!important;
}

/* Líneas del ticket fáciles de leer. */
body.sl-operator-mode #view-pos #cartLines{
  min-height:120px;
  max-height:300px;
  overflow:auto;
  margin:8px 0 10px;
  padding:5px 0;
}

body.sl-operator-mode #view-pos #cartLines .empty{
  min-height:105px;
  display:grid;
  place-items:center;
  padding:14px;
  border:1px dashed #34343d;
  border-radius:11px;
  color:#73737d!important;
  font-size:11px!important;
  text-align:center;
}

body.sl-operator-mode #view-pos .cart-line{
  padding:10px 0!important;
  border-bottom:1px solid #292930!important;
}

body.sl-operator-mode #view-pos .cart-line b{
  color:#fff!important;
  font-size:12px!important;
}

body.sl-operator-mode #view-pos .cart-line small{
  color:#868690!important;
  font-size:10px!important;
}

/* Total domina visualmente. */
body.sl-operator-mode #view-pos .cart-totals{
  margin:8px 0 12px;
  padding:11px 12px;
  border:1px solid #33333c;
  border-radius:12px;
  background:#111116;
}

body.sl-operator-mode #view-pos .cart-totals > div:first-child{
  color:#898993!important;
  font-size:10px!important;
}

body.sl-operator-mode #view-pos .cart-totals .grand{
  margin-top:5px;
  padding-top:7px;
  border-top:1px solid #2d2d35;
  font-size:14px!important;
}

body.sl-operator-mode #view-pos .cart-totals .grand span{
  color:#cfcfd6!important;
  font-weight:800!important;
}

body.sl-operator-mode #view-pos #cartTotal{
  font-size:30px!important;
  line-height:1!important;
  color:var(--p171-yellow)!important;
  font-weight:950!important;
  letter-spacing:-.8px;
}

/* Opcionales siguen ocultos por PASO 169; aquí solo hacemos el acceso más discreto. */
body.sl-operator-mode #view-pos #slClientToggle169{
  min-height:32px!important;
  margin:7px 0!important;
  border:0!important;
  background:transparent!important;
  color:#777781!important;
  text-decoration:underline;
  text-decoration-color:#3b3b44;
  font-size:10px!important;
}

body.sl-operator-mode #view-pos #slClientToggle169:hover{
  color:#cfcfd6!important;
}

body.sl-operator-mode #view-pos .form-grid.compact{
  margin:8px 0!important;
  padding:10px!important;
  border:1px solid #303038;
  border-radius:10px;
  background:#121217;
}

body.sl-operator-mode #view-pos .form-grid.compact label{
  font-size:10px!important;
  color:#9999a4!important;
}

/* Detalles de tarjeta/transferencia permanecen funcionales pero claros. */
body.sl-operator-mode #view-pos #paymentDetails{
  margin:8px 0!important;
  padding:10px!important;
  border:1px solid #393942;
  border-radius:10px;
  background:#121217;
}

body.sl-operator-mode #view-pos #paymentDetails label{
  font-size:10px!important;
  color:#aaaab4!important;
}

body.sl-operator-mode #view-pos #paymentDetails input,
body.sl-operator-mode #view-pos #paymentDetails select{
  min-height:39px!important;
}

/* ACCIÓN FINAL */
body.sl-operator-mode #view-pos #checkoutBtn{
  position:sticky!important;
  bottom:0!important;
  z-index:5;
  width:100%;
  min-height:58px!important;
  margin-top:12px!important;
  border:0!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#ff2f91,#d51d72)!important;
  color:#fff!important;
  font-size:17px!important;
  font-weight:950!important;
  letter-spacing:.2px;
  box-shadow:0 12px 32px rgba(255,47,145,.20)!important;
}

body.sl-operator-mode #view-pos #checkoutBtn:hover{
  filter:brightness(1.06);
}

body.sl-operator-mode #view-pos #checkoutBtn:active{
  transform:scale(.99);
}

body.sl-operator-mode #view-pos #saleMessage:empty{
  display:none!important;
}

body.sl-operator-mode #view-pos #saleMessage:not(:empty){
  margin-top:9px!important;
  padding:9px!important;
  border-radius:9px!important;
  font-size:11px!important;
}

/* No permitir que la barra inferior tape el botón de cobro. */
body.sl-operator-mode #view-pos{
  padding-bottom:26px!important;
}

/* Responsive táctil */
@media(max-width:1200px){
  body.sl-operator-mode #view-pos #productGrid{
    grid-template-columns:repeat(3,minmax(145px,1fr))!important;
  }
  body.sl-operator-mode #view-pos .pos-layout{
    grid-template-columns:minmax(0,1fr) 370px!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;
  }
  body.sl-operator-mode #view-pos #productGrid{
    grid-template-columns:repeat(3,minmax(130px,1fr))!important;
  }
}

@media(max-width:620px){
  body.sl-operator-mode #view-pos #productGrid{
    grid-template-columns:repeat(2,minmax(120px,1fr))!important;
  }
  body.sl-operator-mode #view-pos .product-card{
    min-height:118px!important;
  }
}