/* Menú lateral del POS (solo app/index.html; owner/ no lo carga).
   Todo cuelga de .sbx para no tocar los .sidebar/.nav de layout.css que usa también owner/.
   Escritorio (>980px): riel de iconos que se expande al pasar el mouse / clic y se esconde solo (sidebar.js).
   Móvil (<=980px): sigue siendo el cajón de views.css, siempre con el aspecto expandido. */

.sbx{
  --sbx-rail: 76px;
  --sbx-open: 288px;
  --sbx-ico: 48px;
  --sbx-item-h: 40px;
  display:flex;
  flex-direction:column;
  padding:14px;
  overflow:hidden;
  background:linear-gradient(180deg,#070a12 0%,#000 100%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}

/* ---------- Cabecera ---------- */
.sbx-head{
  display:flex; align-items:center; gap:8px;
  min-height:52px; padding:0 0 10px;
  border-bottom:1px solid rgba(255,255,255,.09);
  margin-bottom:10px;
}
.sbx-brand{ flex:1 1 auto; min-width:0; overflow:hidden; }
/* Recorte del logo (LOGO1.png es cuadrado con mucho negro alrededor): se ve la "P" sola (40px) o el logo completo (178px).
   El <img id="siteLogo"> se queda tal cual porque receipt.js / state.js / labels lo leen para sacar el logo de recibos y etiquetas. */
.sbx-logo{
  position:relative; display:block; overflow:hidden;
  width:178px; height:48px; margin:0 auto 0 4px;
  transition:width .28s ease;
}
.sbx-logo img{
  position:absolute; left:-17.8px; top:-81.6px;
  width:213px; height:213px; max-width:none; display:block;
  mix-blend-mode:lighten; /* el fondo negro del PNG se funde con el degradado del menú */
}
.sbx-store{
  display:block; margin:2px 0 0 4px;
  color:rgba(255,255,255,.55); font-size:12px; line-height:15px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sbx-toggle{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:#8fb0ff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.sbx-toggle:hover{ background:rgba(47,95,224,.22); border-color:rgba(47,95,224,.5); }
.sbx-toggle svg{ width:20px; height:20px; display:block; }

/* ---------- Tarjeta de usuario ---------- */
.sbx-user{
  display:flex; align-items:center; gap:0;
  padding:0; margin:0 0 10px; min-height:48px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  overflow:hidden;
}
.sbx-avatar{
  flex:0 0 auto; width:calc(var(--sbx-ico) - 4px); height:48px;
  display:flex; align-items:center; justify-content:center;
}
.sbx-avatar b{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff; font-size:14px; font-weight:800; letter-spacing:.3px;
  box-shadow:0 0 0 2px rgba(143,176,255,.25);
}
.sbx-who{ flex:1 1 auto; min-width:0; padding:0 12px 0 4px; }
.sbx-who strong{
  display:block; color:#fff; font-size:14px; font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sbx-who span{
  display:block; color:#8fb0ff; font-size:12px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* El texto original lo sigue llenando app.js; sidebar.js lo reparte en nombre/rol */
#currentUserLabel{ display:none !important; }

/* ---------- Opciones ---------- */
.sbx-scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  margin:0 -6px; padding:0 6px;
}
.sbx-scroll::-webkit-scrollbar{ width:5px; }
.sbx .nav{ gap:2px; margin-top:0; }
.sbx .nav button,
.sbx-foot button{
  position:relative;
  width:100%; height:var(--sbx-item-h); padding:0;
  border:none; border-radius:12px;
  background:transparent;
  color:rgba(255,255,255,.72);
  font:inherit; font-weight:700; font-size:14px; text-align:left;
  display:flex; align-items:center; justify-content:flex-start; gap:0;
  cursor:pointer; overflow:hidden;
  transition:background .15s ease, color .15s ease;
}
.sbx .nav button:hover,
.sbx-foot button:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sbx .nav button.active{
  background:linear-gradient(90deg,rgba(47,95,224,.30),rgba(47,95,224,.10));
  color:#fff;
}
/* barra de color de la opción activa */
.sbx .nav button.active::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:4px;
  border-radius:0 4px 4px 0; background:var(--rose);
  box-shadow:0 0 12px rgba(76,124,255,.7);
}
.sbx-ico{
  flex:0 0 auto; width:calc(var(--sbx-ico) - 2px); height:var(--sbx-item-h);
  display:flex; align-items:center; justify-content:center;
}
.sbx-ico svg{
  width:21px; height:21px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.sbx .nav button.active .sbx-ico{ color:#8fb0ff; }
.sbx-label{
  flex:1 1 auto; min-width:0; padding-right:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .18s ease;
}

/* ---------- Resumen del día ---------- */
.sbx .sidecard{
  width:calc(var(--sbx-open) - 30px); /* ancho fijo: así no se reacomoda el texto mientras el menú se abre/cierra */
  margin:12px 0 4px; padding:12px;
  border-radius:14px; border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  transition:opacity .18s ease;
}
.sbx .sidecard .pill{ gap:7px; }
.sbx .sidecard .pill svg{
  width:14px; height:14px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Pie: cerrar sesión ---------- */
.sbx-foot{
  flex:0 0 auto; margin-top:6px; padding-top:6px;
  border-top:1px solid rgba(255,255,255,.09);
}
.sbx-foot button{ color:#ff9b9b; }
.sbx-foot button:hover{ background:rgba(220,38,38,.16); color:#ffb4b4; }

.sbx button:focus-visible{ outline:2px solid var(--rose); outline-offset:-2px; }

/* ---------- Escritorio: riel + expansión ---------- */
@media (min-width:981px){
  .app.app-sbx{ grid-template-columns:var(--sbx-rail,76px) minmax(0,1fr); }

  .sbx{
    width:var(--sbx-open);
    z-index:60;
    transition:width .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;
  }
  .sbx.is-collapsed{
    width:var(--sbx-rail);
    box-shadow:0 12px 32px rgba(0,0,0,.28);
  }
  .sbx.is-collapsed .sbx-logo{ width:40px; }
  .sbx.is-collapsed .sbx-store,
  .sbx.is-collapsed .sbx-who,
  .sbx.is-collapsed .sbx-label,
  .sbx.is-collapsed .sidecard{ opacity:0; pointer-events:none; }
  .sbx.is-collapsed .sbx-toggle{ display:none; }
  .sbx.is-collapsed .sbx-head{ justify-content:center; }
  .sbx.is-collapsed .sbx-brand{ flex:0 0 40px; width:40px; }
  .sbx.is-collapsed .sbx-logo{ margin-left:0; }
  .sbx.is-collapsed .sbx-scroll{ overflow-y:hidden; }
}

/* ---------- Móvil: cajón de views.css, siempre expandido ---------- */
@media (max-width:980px){
  .sbx{ --sbx-open:280px; border-radius:0 20px 20px 0; width:280px; }
}

@media (prefers-reduced-motion:reduce){
  .sbx, .sbx-logo, .sbx-label, .sbx .sidecard{ transition:none; }
}