/* ==========================================================
   ServerPACS v553
   Menús tipo sandwich + acciones con iconos
   ========================================================== */

/* ----------------------------------------------------------
   Corrige el problema de textos duplicados de versiones previas
   ---------------------------------------------------------- */
button[data-sp551-icon]::before,
button[data-sp551-short]::after{
  content:none!important;
}

/* ----------------------------------------------------------
   Cabecera limpia: solo título + botón menú
   ---------------------------------------------------------- */
.sp553-toolbar-menu-wrap{
  display:inline-flex!important;
  align-items:center!important;
  position:relative!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
}

.sp553-menu-toggle{
  min-width:34px!important;
  width:34px!important;
  height:30px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:5px!important;
  font-size:16px!important;
  font-weight:900!important;
}

.sp553-toolbar-panel{
  display:none;
  position:absolute;
  right:0;
  top:36px;
  z-index:26000;
  width:290px;
  max-width:calc(100vw - 20px);
  padding:8px;
  border:1px solid #3a5368;
  border-radius:6px;
  background:#1a2632;
  box-shadow:0 22px 55px rgba(0,0,0,.48);
}

.sp553-toolbar-panel.open{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.sp553-toolbar-panel button,
.sp553-toolbar-panel .btn{
  min-height:34px!important;
  height:34px!important;
  width:100%!important;
  max-width:none!important;
  padding:4px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  font-size:0!important;
  overflow:hidden!important;
  border-radius:5px!important;
}

.sp553-toolbar-panel button::before,
.sp553-toolbar-panel .btn::before{
  content:attr(data-sp553-icon);
  font-size:15px!important;
  line-height:1!important;
}

.sp553-toolbar-panel button:hover::after,
.sp553-toolbar-panel .btn:hover::after{
  content:attr(title);
  position:absolute;
  right:4px;
  top:100%;
  margin-top:4px;
  padding:4px 6px;
  background:#0f1822;
  border:1px solid #3a5368;
  border-radius:4px;
  color:#fff;
  font-size:11px!important;
  white-space:nowrap;
  z-index:26010;
}

/* Solo dejamos visibles fuera del menú el título y el botón sandwich */
.sp553-moved-to-menu{
  margin:0!important;
}

/* ----------------------------------------------------------
   Acciones de estudios: iconos reales, sin texto
   ---------------------------------------------------------- */
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;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:0!important;
  margin:1px 2px!important;
  border-radius:4px!important;
  vertical-align:middle!important;
}

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

/* Si algún botón no tiene icono asignado, se muestra una rueda para evitar texto largo */
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:"⚙";
}

/* Tooltip de acciones */
tbody td button[title]:hover::after,
tbody td .btn[title]:hover::after,
td button[title]:hover::after,
td .btn[title]:hover::after{
  content:attr(title);
  position:absolute;
  transform:translateY(-28px);
  background:#0f1822;
  border:1px solid #3a5368;
  color:#fff;
  border-radius:4px;
  padding:3px 6px;
  font-size:11px!important;
  white-space:nowrap;
  z-index:1000;
  pointer-events:none;
}

/* Celda acciones más compacta */
td:has(.sp553-row-action),
td:has(.sp-delete-row-action-v552){
  white-space:nowrap!important;
}

/* Botón eliminar en acciones */
.sp-delete-row-action-v552{
  width:27px!important;
  min-width:27px!important;
  max-width:27px!important;
  height:25px!important;
  min-height:25px!important;
  padding:0!important;
  margin:1px 2px!important;
  font-size:0!important;
}

.sp-delete-row-action-v552::before{
  content:"🗑"!important;
  font-size:13px!important;
}

.sp-delete-row-icon-v552,
.sp-delete-row-text-v552{
  display:none!important;
}

/* ----------------------------------------------------------
   Botón flotante de eliminar eliminado completamente
   ---------------------------------------------------------- */
.sp-delete-floating-wrap-v548,
.sp-delete-floating-btn-v548,
#spDeleteFloatingWrapV548,
#spFloatingDeleteStudyV548{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* ----------------------------------------------------------
   Panel PACS también más discreto
   ---------------------------------------------------------- */
.sp550-orthanc-toggle,
.sp549-view-toggle{
  min-width:34px!important;
  width:34px!important;
  height:30px!important;
  padding:0!important;
  font-size:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.sp550-orthanc-toggle::before,
.sp549-view-toggle::before{
  content:"▦";
  font-size:15px!important;
}

/* ----------------------------------------------------------
   Expansión real y tabla más útil
   ---------------------------------------------------------- */
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.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;
}

.table-wrap,
.table-container,
.data-grid,
.grid{
  max-height:calc(100vh - 180px)!important;
}

html.sp550-hide-header .table-wrap,
html.sp550-hide-header .table-container,
html.sp550-hide-header .data-grid,
html.sp550-hide-header .grid,
html.sp550-hide-filters .table-wrap,
html.sp550-hide-filters .table-container,
html.sp550-hide-filters .data-grid,
html.sp550-hide-filters .grid,
html.sp550-hide-metrics .table-wrap,
html.sp550-hide-metrics .table-container,
html.sp550-hide-metrics .data-grid,
html.sp550-hide-metrics .grid{
  max-height:calc(100vh - 95px)!important;
}

/* ----------------------------------------------------------
   Botones superiores previos más pequeños por si alguno queda fuera
   ---------------------------------------------------------- */
.topbar button,
.toolbar button,
.header button,
#topbar button,
#toolbar button,
.actions button,
#topActions button{
  min-height:28px!important;
  height:28px!important;
  padding:3px 7px!important;
  font-size:11px!important;
  max-width:110px!important;
}

/* ----------------------------------------------------------
   Modo claro
   ---------------------------------------------------------- */
html[data-servpacs-theme='light'] .sp553-toolbar-panel{
  background:#ffffff!important;
  border-color:#c5d5df!important;
  box-shadow:0 18px 45px rgba(80,110,130,.25)!important;
}

html[data-servpacs-theme='light'] tbody td button[title]:hover::after,
html[data-servpacs-theme='light'] td button[title]:hover::after{
  background:#ffffff!important;
  color:#263645!important;
  border-color:#b8cbd8!important;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media(max-width:760px){
  .sp553-toolbar-panel{
    right:-4px;
    width:230px;
    grid-template-columns:repeat(3,1fr)!important;
  }

  tbody td button,
  tbody td .btn,
  td button,
  td .btn{
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
  }
}