/* STARLIKE POS 5.7.5.49 - INTERFAZ AMIGABLE 168.1
   SOLO PRESENTACION. NO MUEVE NI REEMPLAZA CONTROLES FUNCIONALES. */

:root{
  --ui-bg:#0b0b0e;
  --ui-sidebar:#111116;
  --ui-panel:#18181e;
  --ui-panel-2:#1e1e25;
  --ui-line:#303039;
  --ui-text:#f4f4f6;
  --ui-muted:#9b9ba6;
  --ui-pink:#ff2f91;
  --ui-pink-soft:#3a182a;
  --ui-yellow:#ffd43b;
  --ui-green:#48cf86;
  --ui-danger:#ff5e6b;
}

body{
  background:var(--ui-bg)!important;
  color:var(--ui-text);
}

.app{
  grid-template-columns:225px minmax(0,1fr)!important;
  background:var(--ui-bg);
}

/* SIDEBAR */
.sidebar{
  background:var(--ui-sidebar)!important;
  border-right:1px solid var(--ui-line);
  padding:14px 10px 18px!important;
  overflow-y:auto;
}

.sidebar .brand{
  padding:8px 10px 14px!important;
  margin-bottom:2px;
  font-size:18px;
}
.sidebar .brand small{
  display:block;
  margin-top:3px;
  color:#6f6f79!important;
  font-size:10px!important;
}

.sidebar nav{
  display:flex!important;
  flex-direction:column;
  gap:3px;
}

.sidebar .nav{
  position:relative;
  min-height:38px!important;
  border-radius:9px!important;
  padding:8px 10px!important;
  font-size:12px!important;
  color:#aaaab4!important;
  background:transparent!important;
  transition:background .14s ease,color .14s ease,transform .14s ease;
}

.sidebar .nav:hover{
  color:#fff!important;
  background:#1c1c22!important;
}

.sidebar .nav.active{
  color:#fff!important;
  background:#24242b!important;
  box-shadow:inset 3px 0 var(--ui-pink);
}

.sidebar .nav.active span{
  font-weight:800;
}

/* Etiquetas de grupo insertadas sin tocar botones */
.sl-safe-section{
  padding:13px 10px 5px;
  color:#666671;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  pointer-events:none;
}
.sl-safe-section:first-child{padding-top:4px}

/* FOOTER */
.sidebar-foot{
  border-top:1px solid var(--ui-line);
  padding-top:8px!important;
  margin-top:12px!important;
}
.sidebar-foot .nav{
  color:#85858f!important;
}

/* CONTENIDO */
.main{
  min-width:0;
  max-width:1600px;
  width:100%;
  margin:0 auto;
  padding:0 24px 42px!important;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:70px!important;
  background:rgba(11,11,14,.94)!important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ui-line);
  margin-bottom:18px!important;
}

.topbar h2{
  font-size:20px!important;
  letter-spacing:-.25px;
}
.topbar small{
  color:#85858f!important;
  font-size:11px;
}

.top-actions{
  gap:8px!important;
}

.branch-label{
  border:1px solid var(--ui-line)!important;
  background:#16161b!important;
  border-radius:10px!important;
  padding-left:9px!important;
}

.branch-label select{
  border:0!important;
  background:transparent!important;
  min-width:135px;
}

.clock{
  font-size:11px!important;
  color:#888893!important;
  min-width:90px;
  text-align:right;
}

#changePinBtn{
  background:transparent!important;
  color:#a7a7b0!important;
  border-color:#3b3b45!important;
  font-size:11px!important;
}

/* TARJETAS */
.cards{
  gap:12px!important;
}

.metric{
  background:linear-gradient(180deg,#1b1b21,#15151a)!important;
  border:1px solid #2c2c34!important;
  border-radius:13px!important;
  padding:15px!important;
  box-shadow:none!important;
}

.metric span{
  color:#9999a4!important;
  font-size:11px!important;
}
.metric strong{
  display:block;
  margin:7px 0 2px;
  font-size:26px!important;
  letter-spacing:-.5px;
}
.metric small{
  color:#777781!important;
  font-size:10px!important;
}

/* PANELES */
.panel{
  background:var(--ui-panel)!important;
  border:1px solid #2b2b33!important;
  border-radius:14px!important;
  padding:17px!important;
  box-shadow:0 8px 28px rgba(0,0,0,.09)!important;
}

.hero-panel{
  border-radius:14px!important;
  min-height:135px!important;
}
.hero-panel h3{
  font-size:22px!important;
  line-height:1.12;
}

.eyebrow{
  color:#7f7f89!important;
  font-size:9px!important;
  letter-spacing:1.25px!important;
  font-weight:900!important;
}

.section-title{
  margin-top:4px!important;
}

/* FORMULARIOS */
label{
  color:#b7b7c0;
  font-size:11px;
}

input,select,textarea{
  min-height:37px;
  border-radius:9px!important;
  border:1px solid #373740!important;
  background:#101014!important;
  color:#f2f2f4!important;
  box-shadow:none!important;
}

input:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:#696974!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.04)!important;
}

.search{
  min-width:260px;
  background:#141419!important;
}

/* BOTONES: MISMA CANTIDAD, MENOS RUIDO VISUAL */
.btn{
  min-height:36px!important;
  padding:8px 11px!important;
  border-radius:9px!important;
  font-size:11px!important;
  font-weight:760!important;
  box-shadow:none!important;
  background:#25252c!important;
  border:1px solid #3a3a43!important;
  color:#e0e0e5!important;
}

.btn:hover{
  background:#303038!important;
  border-color:#50505a!important;
}

.btn.primary{
  background:linear-gradient(135deg,var(--ui-pink),#dc1f76)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(255,47,145,.12)!important;
}

.btn.big{
  min-height:46px!important;
  font-size:13px!important;
}

.button-row{
  gap:6px!important;
  flex-wrap:wrap;
}

/* En barras de acciones, los secundarios se ven ligeros, el principal conserva fuerza */
.toolbar{
  min-height:48px;
  gap:12px!important;
  margin-bottom:13px!important;
}

.toolbar .button-row .btn:not(.primary){
  background:transparent!important;
  border-color:#383841!important;
  color:#aaaab4!important;
}

.toolbar .button-row .btn:not(.primary):hover{
  background:#202026!important;
  color:#fff!important;
}

/* Inventario: los cuatro siguen ahí y siguen funcionando.
   Se reduce peso visual de tres de ellos. */
#view-inventory #wasteBtn,
#view-inventory #countBtn,
#view-inventory #refreshInventory{
  background:transparent!important;
  color:#aaaab4!important;
}
#view-inventory #bulkCountBtn{
  background:linear-gradient(135deg,var(--ui-pink),#dc1f76)!important;
  color:white!important;
}

/* TABLAS */
.table-wrap{
  border-radius:10px!important;
  border:1px solid #2d2d35!important;
  overflow:auto;
}

table{
  background:transparent!important;
}

thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#1d1d23!important;
  color:#8d8d98!important;
  font-size:9px!important;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:9px 11px!important;
}

tbody td{
  padding:9px 11px!important;
  border-bottom-color:#28282f!important;
  font-size:11px!important;
}

tbody tr:hover td{
  background:rgba(255,255,255,.018)!important;
}

.table-btn{
  border-radius:7px!important;
  background:#25252c!important;
  padding:6px 8px!important;
  font-size:10px!important;
}

.badge{
  border-radius:999px!important;
}

/* ELEMENTOS DE CONFIGURACION */
.config-box{
  background:#15151a!important;
  border:1px solid #2f2f37!important;
  border-radius:11px!important;
}

.notice{
  border-radius:9px!important;
  font-size:11px!important;
}

.line-editor .editor-line{
  border-radius:9px;
}

/* PUNTO DE VENTA */
.pos-menu,
.cart{
  border-radius:13px!important;
}
.product-card{
  border-radius:12px!important;
}
.chip{
  border-radius:999px!important;
}

/* Login */
.login-card{
  border-radius:16px!important;
  box-shadow:0 22px 70px rgba(0,0,0,.4)!important;
}

/* Botón seguro para contraer SOLO visualmente sidebar */
#slSafeCollapse1681{
  position:fixed;
  left:185px;
  bottom:16px;
  z-index:35;
  width:30px;
  height:30px;
  border-radius:9px;
  border:1px solid #393942;
  background:#1c1c22;
  color:#9999a4;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:12px;
  transition:left .15s ease;
}

body.sl-safe-collapsed .app{
  grid-template-columns:68px minmax(0,1fr)!important;
}
body.sl-safe-collapsed .sidebar{
  padding-left:7px!important;
  padding-right:7px!important;
}
body.sl-safe-collapsed .sidebar .brand{
  font-size:0!important;
  text-align:center;
}
body.sl-safe-collapsed .sidebar .brand:before{
  content:'★';
  color:var(--ui-pink);
  font-size:24px;
}
body.sl-safe-collapsed .sidebar .brand b,
body.sl-safe-collapsed .sidebar .brand span,
body.sl-safe-collapsed .sidebar .brand small,
body.sl-safe-collapsed .sidebar .nav span,
body.sl-safe-collapsed .sl-safe-section{
  display:none!important;
}
body.sl-safe-collapsed .sidebar .nav{
  text-align:center!important;
  padding:9px 5px!important;
  font-size:15px!important;
}
body.sl-safe-collapsed #slSafeCollapse1681{
  left:25px;
}

/* Móvil / pantallas pequeñas */
@media(max-width:980px){
  .app{grid-template-columns:72px minmax(0,1fr)!important}
  .sidebar{padding:8px 7px!important}
  .sidebar .brand{
    font-size:0!important;
    text-align:center;
  }
  .sidebar .brand:before{
    content:'★';
    color:var(--ui-pink);
    font-size:24px;
  }
  .sidebar .brand b,.sidebar .brand span,.sidebar .brand small,
  .sidebar .nav span,.sl-safe-section{display:none!important}
  .sidebar .nav{
    text-align:center!important;
    padding:9px 5px!important;
    font-size:15px!important;
  }
  #slSafeCollapse1681{display:none}
  .main{padding:0 13px 28px!important}
  .clock{display:none}
  .branch-label>span{display:none}
}

@media(max-width:680px){
  .topbar{
    align-items:flex-start!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  .top-actions{flex-wrap:wrap;justify-content:flex-end}
  .cards{grid-template-columns:1fr 1fr!important}
  .two-col{grid-template-columns:1fr!important}
  .admin-grid{grid-template-columns:1fr!important}
}