/* ==========================================================
   ServerPACS v554
   Menú sandwich corregido:
   - panel lateral derecho fijo
   - visible siempre por encima de todo
   - no depende de la cabecera
   ========================================================== */

/* Botón menú fijo */
#sp554MenuButton{
  position:fixed!important;
  top:10px!important;
  right:10px!important;
  z-index:30010!important;
  width:42px!important;
  height:34px!important;
  min-width:42px!important;
  min-height:34px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:18px!important;
  font-weight:900!important;
  border-radius:6px!important;
  background:linear-gradient(#3b9ae0,#1f75b4)!important;
  border:1px solid #56aee9!important;
  color:white!important;
  box-shadow:0 8px 24px rgba(0,0,0,.35)!important;
}

/* Panel lateral */
#sp554MenuPanel{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:320px!important;
  max-width:calc(100vw - 20px)!important;
  z-index:30009!important;
  background:#17212c!important;
  border-left:1px solid #3a5368!important;
  box-shadow:-18px 0 50px rgba(0,0,0,.55)!important;
  transform:translateX(110%)!important;
  transition:transform .18s ease!important;
  padding:12px!important;
  color:#edf6ff!important;
  overflow:auto!important;
}

#sp554MenuPanel.open{
  transform:translateX(0)!important;
}

.sp554-menu-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:10px!important;
  padding-bottom:10px!important;
  margin-bottom:10px!important;
  border-bottom:1px solid #34495a!important;
}

.sp554-menu-head b{
  font-size:16px!important;
  color:#ffffff!important;
}

#sp554MenuClose{
  width:30px!important;
  height:28px!important;
  min-width:30px!important;
  min-height:28px!important;
  padding:0!important;
  font-size:16px!important;
}

/* Grid de opciones */
.sp554-menu-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}

.sp554-menu-grid button{
  width:100%!important;
  min-height:54px!important;
  height:auto!important;
  padding:8px 6px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  font-size:11px!important;
  line-height:1.15!important;
  text-align:center!important;
  border-radius:6px!important;
  background:linear-gradient(#314455,#223240)!important;
  border:1px solid #455c70!important;
  color:#f2f7fb!important;
  white-space:normal!important;
}

.sp554-menu-grid button .sp554-icon{
  font-size:18px!important;
  line-height:1!important;
}

.sp554-menu-grid button .sp554-text{
  font-size:11px!important;
  font-weight:800!important;
}

/* Fondo oscuro al abrir */
#sp554MenuBackdrop{
  position:fixed!important;
  inset:0!important;
  z-index:30008!important;
  background:rgba(0,0,0,.35)!important;
  display:none!important;
}

#sp554MenuBackdrop.open{
  display:block!important;
}

/* Ocultar el panel antiguo del v553 si existe */
.sp553-toolbar-panel,
.sp553-toolbar-menu-wrap{
  display:none!important;
}

/* Mantener acciones por fila como iconos */
tbody td button,
tbody td .btn,
td button,
td .btn{
  min-height:25px!important;
  height:25px!important;
  min-width:27px!important;
  width:27px!important;
  max-width:27px!important;
  padding:0!important;
  font-size:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

tbody td button::before,
tbody td .btn::before,
td button::before,
td .btn::before{
  content:attr(data-sp553-icon);
  font-size:13px!important;
}

tbody td button:not([data-sp553-icon])::before,
tbody td .btn:not([data-sp553-icon])::before,
td button:not([data-sp553-icon])::before,
td .btn:not([data-sp553-icon])::before{
  content:"⚙";
}

/* Modo claro */
html[data-servpacs-theme='light'] #sp554MenuPanel{
  background:#ffffff!important;
  color:#263645!important;
  border-left-color:#c5d5df!important;
}

html[data-servpacs-theme='light'] .sp554-menu-head{
  border-bottom-color:#d6e2ea!important;
}

html[data-servpacs-theme='light'] .sp554-menu-head b{
  color:#263645!important;
}

html[data-servpacs-theme='light'] .sp554-menu-grid button{
  background:linear-gradient(#ffffff,#e5edf3)!important;
  color:#263645!important;
  border-color:#aebfca!important;
}

@media(max-width:760px){
  #sp554MenuPanel{
    width:280px!important;
  }

  .sp554-menu-grid{
    grid-template-columns:1fr!important;
  }
}