/* ==========================================================
   ServerPACS v556
   Menú corregido con acciones directas.
   No depende de botones originales ocultos.
   ========================================================== */

/* Ocultamos panel/botón anterior v554 para evitar dobles menús */
#sp554MenuButton,
#sp554MenuPanel,
#sp554MenuBackdrop{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Botón fijo nuevo */
#sp556MenuButton{
  position:fixed!important;
  top:10px!important;
  right:10px!important;
  z-index:31010!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;
}

/* Backdrop */
#sp556MenuBackdrop{
  position:fixed!important;
  inset:0!important;
  z-index:31008!important;
  background:rgba(0,0,0,.36)!important;
  display:none!important;
}

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

/* Panel lateral derecho */
#sp556MenuPanel{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:335px!important;
  max-width:calc(100vw - 20px)!important;
  z-index:31009!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;
}

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

.sp556-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;
}

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

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

.sp556-section-title{
  margin:14px 0 8px!important;
  color:#8fc7ee!important;
  font-size:11px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}

.sp556-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}

.sp556-grid button{
  width:100%!important;
  min-height:58px!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;
}

.sp556-grid button.active{
  background:linear-gradient(#2b8fd6,#1f6fa9)!important;
  border-color:#56aee9!important;
  color:#ffffff!important;
}

.sp556-icon{
  font-size:19px!important;
  line-height:1!important;
}

.sp556-text{
  font-size:11px!important;
  font-weight:800!important;
}

.sp556-info{
  margin-top:12px;
  padding:8px;
  border:1px solid #34495a;
  border-radius:6px;
  color:#aab7c4;
  font-size:11px;
  line-height:1.35;
}

/* Asegurar expansión real al ocultar menú lateral */
html.sp556-sidebar-hidden aside,
html.sp556-sidebar-hidden .sidebar,
html.sp556-sidebar-hidden #sidebar,
html.sp550-hide-sidebar aside,
html.sp550-hide-sidebar .sidebar,
html.sp550-hide-sidebar #sidebar,
html.sp549-hide-sidebar aside,
html.sp549-hide-sidebar .sidebar,
html.sp549-hide-sidebar #sidebar{
  display:none!important;
}

html.sp556-sidebar-hidden .layout,
html.sp556-sidebar-hidden .shell,
html.sp556-sidebar-hidden .app,
html.sp550-hide-sidebar .layout,
html.sp550-hide-sidebar .shell,
html.sp550-hide-sidebar .app,
html.sp549-hide-sidebar .layout,
html.sp549-hide-sidebar .shell,
html.sp549-hide-sidebar .app{
  grid-template-columns:1fr!important;
}

html.sp556-sidebar-hidden main,
html.sp556-sidebar-hidden .main,
html.sp556-sidebar-hidden .content,
html.sp556-sidebar-hidden .page,
html.sp556-sidebar-hidden #main,
html.sp556-sidebar-hidden #content,
html.sp550-hide-sidebar main,
html.sp550-hide-sidebar .main,
html.sp550-hide-sidebar .content,
html.sp550-hide-sidebar .page,
html.sp550-hide-sidebar #main,
html.sp550-hide-sidebar #content,
html.sp549-hide-sidebar main,
html.sp549-hide-sidebar .main,
html.sp549-hide-sidebar .content,
html.sp549-hide-sidebar .page,
html.sp549-hide-sidebar #main,
html.sp549-hide-sidebar #content{
  margin-left:0!important;
  width:100%!important;
  max-width:none!important;
  padding-left:6px!important;
  padding-right:6px!important;
}

/* Ocultaciones directas v556 */
html.sp556-header-hidden .topbar,
html.sp556-header-hidden .toolbar,
html.sp556-header-hidden .header,
html.sp556-header-hidden #topbar,
html.sp556-header-hidden #toolbar{
  display:none!important;
}

html.sp556-filters-hidden .filters,
html.sp556-filters-hidden #filters,
html.sp556-filters-hidden .filter-panel{
  display:none!important;
}

html.sp556-metrics-hidden .metrics,
html.sp556-metrics-hidden .cards,
html.sp556-metrics-hidden .stats,
html.sp556-metrics-hidden .kpis{
  display:none!important;
}

html.sp556-wide main,
html.sp556-wide .main,
html.sp556-wide .content,
html.sp556-wide .page,
html.sp556-wide #main,
html.sp556-wide #content{
  width:100%!important;
  max-width:none!important;
}

html.sp556-compact tbody td{
  font-size:10px!important;
  padding:3px 5px!important;
}

html.sp556-compact thead th{
  font-size:9px!important;
  padding:4px 5px!important;
}

/* Más altura de tabla cuando se ocultan secciones */
html.sp556-header-hidden .table-wrap,
html.sp556-header-hidden .table-container,
html.sp556-header-hidden .data-grid,
html.sp556-header-hidden .grid,
html.sp556-filters-hidden .table-wrap,
html.sp556-filters-hidden .table-container,
html.sp556-filters-hidden .data-grid,
html.sp556-filters-hidden .grid,
html.sp556-metrics-hidden .table-wrap,
html.sp556-metrics-hidden .table-container,
html.sp556-metrics-hidden .data-grid,
html.sp556-metrics-hidden .grid{
  max-height:calc(100vh - 100px)!important;
}

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

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

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

html[data-servpacs-theme='light'] .sp556-section-title{
  color:#2b719d!important;
}

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

html[data-servpacs-theme='light'] .sp556-grid button.active{
  background:linear-gradient(#74bcec,#3d8fc7)!important;
  color:#ffffff!important;
  border-color:#6eacd2!important;
}

html[data-servpacs-theme='light'] .sp556-info{
  color:#526b80!important;
  border-color:#d6e2ea!important;
}

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

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