/* =========================================================
   STARLIKE POS · BRAND SHELL 2026
   SOLO CAPA VISUAL. No modifica funciones, IDs ni eventos.
   Identidad: negro + rosa + amarillo, textura urbana/ladrillo,
   acentos neón y logotipo oficial configurado en el POS.
   ========================================================= */

:root{
  --sl-black:#070709;
  --sl-black-2:#0e0e12;
  --sl-panel:#141419;
  --sl-panel-2:#1a1a21;
  --sl-pink:#ff2b93;
  --sl-pink-soft:#ff68b7;
  --sl-yellow:#ffd528;
  --sl-yellow-soft:#ffe675;
  --sl-white:#fffdf7;
  --sl-muted:#b9bac5;
  --sl-green:#4fe29c;
  --sl-red:#ff6575;
  --sl-line:rgba(255,255,255,.10);
  --sl-radius:18px;
  --sl-shadow:0 14px 34px rgba(0,0,0,.32);
}

/* Fondo urbano tipo ladrillo, generado sólo con CSS */
html,body{background:var(--sl-black)!important;color:var(--sl-white)!important}
body{
  background:
    radial-gradient(circle at 12% 10%,rgba(255,43,147,.13),transparent 24%),
    radial-gradient(circle at 86% 12%,rgba(255,213,40,.10),transparent 22%),
    linear-gradient(rgba(255,255,255,.018) 2px,transparent 2px),
    linear-gradient(90deg,rgba(255,255,255,.018) 2px,transparent 2px),
    linear-gradient(180deg,#09090d,#0a0a0e 42%,#070709)!important;
  background-size:auto,auto,82px 42px,82px 42px,auto!important;
}
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    repeating-linear-gradient(0deg,transparent 0 40px,rgba(255,255,255,.012) 40px 42px),
    repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,255,255,.012) 80px 82px);
}

/* Login con logo oficial */
.login-screen{
  background:
    radial-gradient(circle at 20% 16%,rgba(255,43,147,.18),transparent 28%),
    radial-gradient(circle at 80% 10%,rgba(255,213,40,.13),transparent 26%),
    linear-gradient(145deg,#08080b,#111118)!important;
}
.login-card{
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(24,24,31,.98),rgba(13,13,18,.98))!important;
  box-shadow:0 28px 70px rgba(0,0,0,.52),0 0 0 1px rgba(255,43,147,.08)!important;
  overflow:hidden;
}
.login-card::before{
  content:"";display:block;width:210px;height:92px;margin:0 auto 8px;
  background:url('/starlike-logo-official.jpg') center/contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.36));
}
.login-card .brand-mark{display:none!important}
.login-card h1{letter-spacing:-.04em!important}
.login-card h1 span{color:var(--sl-pink)!important}
.login-card .btn.primary{min-height:52px}

/* Sidebar */
.sidebar{
  background:
    linear-gradient(180deg,rgba(255,43,147,.06),transparent 22%),
    linear-gradient(180deg,#0b0b0e,#101015 56%,#0a0a0d)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:12px 0 34px rgba(0,0,0,.22)!important;
}
.sidebar .brand{
  min-height:118px!important;
  padding:16px 12px 12px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand::before{
  content:"";position:absolute;top:12px;left:12px;right:12px;height:70px;
  background:url('/starlike-logo-official.jpg') center/contain no-repeat;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.34));
}
.sidebar .brand>b,.sidebar .brand>span{display:none!important}
.sidebar .brand small{
  color:var(--sl-yellow)!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  font-size:9px!important;
}
.sidebar nav{padding-top:10px!important}
.sidebar .nav{
  position:relative;
  border:1px solid transparent!important;
  border-radius:12px!important;
  margin:2px 0!important;
  transition:transform .14s ease,border-color .14s ease,background .14s ease!important;
}
.sidebar .nav:hover{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.07)!important;
  transform:translateX(2px);
}
.sidebar .nav.active{
  color:#09090b!important;
  background:linear-gradient(100deg,var(--sl-yellow),#ffe66d)!important;
  border-color:rgba(255,229,99,.8)!important;
  box-shadow:0 7px 20px rgba(255,213,40,.14)!important;
  font-weight:900!important;
}
.sidebar .nav.active span{color:#09090b!important}

/* Barra superior */
.topbar{
  position:sticky!important;top:0!important;z-index:40!important;
  background:rgba(9,9,13,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.16)!important;
}
#viewTitle{
  font-weight:950!important;
  letter-spacing:-.035em!important;
  position:relative;
  padding-left:16px!important;
}
#viewTitle::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:5px;border-radius:9px;
  background:linear-gradient(var(--sl-pink),var(--sl-yellow));
}
.clock{color:var(--sl-yellow)!important;font-weight:800!important}

/* Paneles y tarjetas */
.panel,.metric,.cart,.config-box,.table-wrap,.modal,.kds-card,.recipe-card,.qr-panel,.setup-step{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),
    var(--sl-panel)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:var(--sl-radius)!important;
  box-shadow:var(--sl-shadow)!important;
}
.panel,.metric,.cart,.config-box{position:relative}
.panel::before,.metric::before,.cart::before,.config-box::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,var(--sl-pink),var(--sl-yellow),transparent 75%);
  opacity:.88;
}
.metric strong{color:var(--sl-white)!important;font-weight:950!important}
.metric span{color:var(--sl-muted)!important}
.metric:hover,.product-card:hover,.restaurant-table:hover{
  border-color:rgba(255,213,40,.34)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.36),0 0 0 1px rgba(255,43,147,.06)!important;
}

/* Hero y cabeceras */
.hero-panel{
  background:
    linear-gradient(105deg,rgba(255,43,147,.16),transparent 44%),
    linear-gradient(285deg,rgba(255,213,40,.09),transparent 34%),
    var(--sl-panel)!important;
}
.eyebrow{
  color:var(--sl-yellow)!important;
  letter-spacing:.16em!important;
  font-weight:950!important;
}
.section-title{font-weight:950!important;letter-spacing:-.025em!important}

/* Botones */
.btn,.table-btn,.link-btn{
  border-radius:11px!important;
  font-weight:850!important;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease!important;
}
.btn:hover,.table-btn:hover{transform:translateY(-1px)}
.btn.primary{
  color:#fff!important;
  background:linear-gradient(115deg,#e90f76,var(--sl-pink))!important;
  border-color:#ff55ab!important;
  box-shadow:0 9px 22px rgba(255,43,147,.18)!important;
}
.btn.primary:hover{filter:brightness(1.08)}
#checkoutBtn{
  min-height:58px!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
  border-radius:15px!important;
  background:linear-gradient(105deg,var(--sl-yellow),#ffea79)!important;
  color:#09090b!important;
  -webkit-text-fill-color:#09090b!important;
  border-color:#ffef9e!important;
  box-shadow:0 10px 26px rgba(255,213,40,.20)!important;
}
#checkoutBtn:hover{box-shadow:0 13px 32px rgba(255,213,40,.27)!important}
.btn.danger,.table-btn.danger{background:#32151d!important;border-color:#6c2938!important;color:#ff98a4!important}

/* Campos */
input,select,textarea,.search{
  background:#0e0f14!important;
  color:var(--sl-white)!important;
  -webkit-text-fill-color:var(--sl-white)!important;
  border:1px solid #363943!important;
  border-radius:11px!important;
}
input:focus,select:focus,textarea:focus,.search:focus{
  border-color:var(--sl-yellow)!important;
  box-shadow:0 0 0 3px rgba(255,213,40,.10)!important;
  outline:none!important;
}
select option{background:#121319!important;color:#fff!important}

/* POS */
.pos-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)!important;
}
.chip{
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:#15161c!important;
  color:#eee!important;
}
.chip.active{
  color:#09090b!important;
  -webkit-text-fill-color:#09090b!important;
  background:var(--sl-yellow)!important;
  border-color:var(--sl-yellow)!important;
  font-weight:950!important;
}
.product-card{
  background:
    linear-gradient(145deg,rgba(255,43,147,.04),transparent 44%),
    #15161c!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:16px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
}
.product-card .cat{color:var(--sl-yellow)!important;font-weight:850!important}
.product-card h4{font-weight:900!important}
.product-card strong{color:var(--sl-pink-soft)!important;font-size:18px!important}
.cart{
  border-color:rgba(255,213,40,.20)!important;
}
.cart-head h3{font-weight:950!important}
.cart-totals .grand{
  margin-top:8px!important;padding-top:12px!important;
  border-top:1px solid rgba(255,213,40,.26)!important;
}
.cart-totals .grand b{color:var(--sl-yellow)!important;font-size:28px!important}
.cart-line{border-bottom-color:rgba(255,255,255,.08)!important}

/* Mesas / buffet */
.restaurant-table{
  border-radius:16px!important;
  box-shadow:0 8px 18px rgba(0,0,0,.18)!important;
}
.restaurant-table.free{background:#11271d!important;border-color:#275a40!important}
.restaurant-table.occupied{background:#2b1b17!important;border-color:#6e4436!important}
.restaurant-table.buffet{
  background:linear-gradient(135deg,rgba(255,43,147,.15),rgba(255,213,40,.06)),#231423!important;
  border-color:#75416c!important;
}
.buffet-clock{
  background:linear-gradient(100deg,rgba(255,43,147,.18),rgba(255,213,40,.08))!important;
  border-color:rgba(255,43,147,.40)!important;
}

/* Domicilios y estados */
.badge,.status-pill,.pill{border-radius:999px!important;font-weight:850!important}
.badge.paid,.status-pill.active{background:#143b29!important;color:#7ef0b1!important}
.badge.unpaid{background:#461b27!important;color:#ff9eab!important}
.notice{
  border-radius:12px!important;
  border:1px dashed rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.025)!important;
}
.notice b{color:var(--sl-yellow)!important}

/* Tablas */
table{border-collapse:separate!important;border-spacing:0!important}
thead th{
  color:var(--sl-yellow)!important;
  background:#111218!important;
  text-transform:uppercase!important;
  letter-spacing:.065em!important;
  font-size:10px!important;
  border-bottom:1px solid rgba(255,213,40,.18)!important;
}
tbody tr:nth-child(even){background:rgba(255,255,255,.012)!important}
tbody tr:hover{background:rgba(255,43,147,.035)!important}
td{border-bottom-color:rgba(255,255,255,.055)!important}

/* Modales */
dialog,.modal{
  background:#111218!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.62)!important;
}
dialog::backdrop{background:rgba(3,3,5,.78)!important}
.modal-head{
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding-bottom:12px!important;
}

/* Club */
.club-registration,.club-card,.club-panel{
  background:
    radial-gradient(circle at 88% 16%,rgba(255,213,40,.09),transparent 26%),
    linear-gradient(140deg,rgba(255,43,147,.09),transparent 38%),
    var(--sl-panel)!important;
}
.segment-VIP{background:var(--sl-pink)!important}
.segment-frecuente{background:#16885a!important}
.segment-en-riesgo{background:#d59a00!important}

/* Impresoras y configuración */
#view-printers .config-box{
  background:
    linear-gradient(140deg,rgba(255,43,147,.035),transparent 40%),
    var(--sl-panel)!important;
}
#paSaveStatus{
  border:1px solid rgba(255,255,255,.14)!important;
  background:#171820!important;
}
#paSaveStatus.ok{color:#79ecae!important;border-color:#24583e!important}
#paSaveStatus.warn{color:var(--sl-yellow)!important;border-color:#66551d!important}
#paSaveStatus.bad{color:#ff8f9b!important;border-color:#6d2834!important}

/* KDS */
.kds-card{border-left:4px solid var(--sl-pink)!important}
.kds-card.ready{border-left-color:var(--sl-green)!important}
.kds-card h4{font-weight:950!important}

/* Scroll */
*{scrollbar-color:#383944 #101116}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0d0e12}
::-webkit-scrollbar-thumb{background:#343640;border:2px solid #0d0e12;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#4a4d59}

/* Mobile / operador compacto */
@media(max-width:780px){
  .sidebar .brand{min-height:74px!important;padding:8px!important}
  .sidebar .brand::before{top:8px;left:8px;right:8px;height:48px}
  .topbar{padding-top:10px!important;padding-bottom:10px!important}
  .product-card{min-height:104px!important}
  #checkoutBtn{min-height:62px!important}
}

/* Respeta estados funcionales existentes */
.hidden{display:none!important}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.58!important;cursor:not-allowed!important}


/* =========================================================
   STARLIKE POS · OPERATIVE UI FINISH 2026-09-18
   CSS ONLY: no altera IDs, lógica, eventos ni flujos.
   ========================================================= */
.cash-calculator{
  margin-top:10px!important;
  padding:13px 14px!important;
  display:grid!important;
  grid-template-columns:minmax(150px,1fr) minmax(120px,.72fr) minmax(120px,.72fr)!important;
  gap:10px!important;align-items:end!important;
  border:1px solid rgba(255,213,40,.25)!important;
  border-radius:15px!important;
  background:
    linear-gradient(120deg,rgba(255,213,40,.08),transparent 48%),
    linear-gradient(300deg,rgba(255,43,147,.07),transparent 42%),
    #111218!important;
}
.cash-calculator small{display:block;color:var(--sl-muted)!important;margin-top:3px}
.cash-change{
  min-height:48px!important;padding:8px 12px!important;border-radius:12px!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  background:#08090d!important;border:1px solid rgba(255,255,255,.10)!important;
  color:var(--sl-muted)!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important
}
.cash-change strong{font-size:23px!important;color:var(--sl-green)!important;letter-spacing:-.02em!important}
.cash-change strong.negative{color:var(--sl-red)!important}
#paymentTipWrap,#orderPaymentTipWrap,[id^="rdPay"][id$="TipWrap"]{
  border:1px solid rgba(255,43,147,.24)!important;
  background:rgba(255,43,147,.055)!important;
  padding:9px 11px!important;border-radius:12px!important
}
#paymentTipWrap small,#orderPaymentTipWrap small,[id^="rdPay"][id$="TipWrap"] small{
  display:block!important;color:#eebbd5!important;margin-top:4px!important
}
#orderPaymentDialog .notice{
  background:linear-gradient(90deg,rgba(255,213,40,.08),rgba(255,43,147,.04))!important;
  border-style:solid!important;border-color:rgba(255,213,40,.20)!important
}
#orderPaymentTotal{font-size:22px!important;color:var(--sl-yellow)!important;font-weight:950!important}

/* STARLIKE CLUB: la recompensa disponible debe ser evidente para caja */
#clubGateCard{
  border:1px solid rgba(255,213,40,.24)!important;
  background:
    radial-gradient(circle at 95% 0,rgba(255,213,40,.12),transparent 34%),
    linear-gradient(135deg,rgba(255,43,147,.10),transparent 46%),
    #17181e!important
}
#clubGateRedeemNow{
  background:linear-gradient(105deg,var(--sl-yellow),#ffeb80)!important;
  color:#08090b!important;-webkit-text-fill-color:#08090b!important;
  border-color:#fff0a4!important;font-weight:950!important;
  box-shadow:0 8px 20px rgba(255,213,40,.15)!important
}

/* Conteo térmico de inventario */
#printInventoryGuideBtn{
  border-color:rgba(255,213,40,.34)!important;
  background:linear-gradient(105deg,rgba(255,213,40,.11),rgba(255,43,147,.05))!important;
  color:#ffe36a!important
}

/* Refuerzo de identidad visual sin tocar funcionalidad */
.main{background:transparent!important}
.view{animation:none!important}
.toolbar{
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  padding-bottom:12px!important;margin-bottom:14px!important
}
.sidebar::after{
  content:"";position:absolute;left:0;right:0;bottom:56px;height:90px;pointer-events:none;opacity:.07;
  background:
    linear-gradient(150deg,transparent 0 38%,var(--sl-pink) 39% 42%,transparent 43% 56%,var(--sl-yellow) 57% 60%,transparent 61%);
}
.topbar::after{
  content:"STARLIKE PIZZA";font-weight:950;letter-spacing:.18em;font-size:9px;color:rgba(255,255,255,.18);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none
}
.product-card::after{
  content:"★";position:absolute;right:10px;bottom:7px;font-size:18px;color:rgba(255,213,40,.08);pointer-events:none
}
.product-card{position:relative;overflow:hidden}
.product-card:active,.btn:active,.table-btn:active{transform:translateY(1px) scale(.995)!important}
.cart{
  background:
    radial-gradient(circle at 100% 0,rgba(255,213,40,.055),transparent 26%),
    linear-gradient(180deg,rgba(255,43,147,.035),transparent 28%),
    var(--sl-panel)!important
}
.cart-head{
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  padding-bottom:10px!important
}
#saleMessage:not(:empty){
  margin-top:10px!important;padding:11px 12px!important;border-radius:11px!important;
  background:rgba(79,226,156,.055)!important;border:1px solid rgba(79,226,156,.20)!important
}
.modal-actions{
  border-top:1px solid rgba(255,255,255,.07)!important;
  padding-top:13px!important;margin-top:14px!important
}
.table-btn{
  border:1px solid rgba(255,255,255,.12)!important;
  background:#191a21!important;color:#f6f6f8!important
}
.table-btn:hover{border-color:rgba(255,213,40,.30)!important}
code{
  color:#ffe36a!important;background:#0c0d11!important;padding:2px 6px!important;border-radius:6px!important
}

/* Logo oficial visible, sin sustituir controles funcionales */
.topbar::before{
  content:"";display:block;width:84px;height:38px;flex:0 0 84px;
  background:url('/starlike-logo-official.jpg') center/contain no-repeat;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.28));
  margin-right:12px
}

/* Touch targets para caja */
#view-pos .btn,#view-pos select,#view-pos input{min-height:42px}
#view-pos .product-card{min-height:112px}
#view-pos .chip{min-height:38px;padding-inline:14px!important}
#orderPaymentDialog select,#orderPaymentDialog input{min-height:44px}

@media(max-width:900px){
  .topbar::after{display:none}
  .topbar::before{width:68px;height:32px;flex-basis:68px}
  .cash-calculator{grid-template-columns:1fr 1fr!important}
  .cash-calculator>div:first-child{grid-column:1/-1}
}
@media(max-width:620px){
  .cash-calculator{grid-template-columns:1fr!important}
  .cash-calculator>div:first-child{grid-column:auto}
}

/* STARLIKE FINAL UI PASS · Club reminder dashboard */
.starlike-club-reminder{
  margin:14px 0!important;padding:16px 18px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;
  background:
    radial-gradient(circle at 92% 20%,rgba(255,213,40,.16),transparent 28%),
    linear-gradient(115deg,rgba(255,43,147,.18),rgba(255,43,147,.055) 42%,transparent 72%),
    var(--sl-panel)!important;
  border-color:rgba(255,213,40,.28)!important;
}
.starlike-club-reminder h3{margin:5px 0!important;font-size:20px!important;line-height:1.16!important;letter-spacing:.015em!important;color:var(--sl-white)!important}
.starlike-club-reminder p{margin:0!important;max-width:820px!important;color:#d7d7df!important;line-height:1.45!important}
.starlike-club-reminder .btn{min-width:120px!important;border-color:rgba(255,213,40,.38)!important;background:#18191f!important;color:var(--sl-yellow)!important}
@media(max-width:760px){
  .starlike-club-reminder{align-items:stretch!important;flex-direction:column!important}
  .starlike-club-reminder .btn{width:100%!important}
}