/* ==========================================================
   ServerPACS v551
   Corrección vista PACS:
   - al ocultar elementos se expande el espacio real
   - botones compactos con iconos
   - tabla con más anchura y altura
   ========================================================== */

:root{
  --sp551-sidebar-width:260px;
  --sp551-compact-button-h:28px;
  --sp551-font:12px;
}

/* Fuente general un poco más pequeña */
html, body{
  font-size:var(--sp551-font)!important;
}

/* ==========================================================
   EXPANSIÓN REAL DEL CONTENIDO
   ========================================================== */

/* Cuando se oculta sidebar en v549 o v550, forzamos layout ancho real */
html.sp550-hide-sidebar body,
html.sp549-hide-sidebar body,
html.sp551-no-sidebar body{
  padding-left:0!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 .app-main,
html.sp550-hide-sidebar #main,
html.sp550-hide-sidebar #content,
html.sp550-hide-sidebar .shell,
html.sp550-hide-sidebar .layout,

html.sp549-hide-sidebar main,
html.sp549-hide-sidebar .main,
html.sp549-hide-sidebar .content,
html.sp549-hide-sidebar .page,
html.sp549-hide-sidebar .app-main,
html.sp549-hide-sidebar #main,
html.sp549-hide-sidebar #content,
html.sp549-hide-sidebar .shell,
html.sp549-hide-sidebar .layout{
  margin-left:0!important;
  padding-left:8px!important;
  width:100vw!important;
  max-width:100vw!important;
  grid-template-columns:1fr!important;
}

/* Si el layout usa grid con aside + main */
html.sp550-hide-sidebar .app,
html.sp550-hide-sidebar .layout,
html.sp550-hide-sidebar .shell,
html.sp549-hide-sidebar .app,
html.sp549-hide-sidebar .layout,
html.sp549-hide-sidebar .shell{
  grid-template-columns:1fr!important;
}

/* Si sidebar está oculto, cualquier contenedor principal debe ocupar todo */
html.sp550-hide-sidebar .container,
html.sp550-hide-sidebar .wrap,
html.sp550-hide-sidebar .workspace,
html.sp549-hide-sidebar .container,
html.sp549-hide-sidebar .wrap,
html.sp549-hide-sidebar .workspace{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
}

/* Vista fullwidth siempre real */
html.sp550-fullwidth main,
html.sp550-fullwidth .main,
html.sp550-fullwidth .content,
html.sp550-fullwidth .page,
html.sp550-fullwidth .app-main,
html.sp550-fullwidth #main,
html.sp550-fullwidth #content,
html.sp549-wide main,
html.sp549-wide .main,
html.sp549-wide .content,
html.sp549-wide .page,
html.sp549-wide .app-main,
html.sp549-wide #main,
html.sp549-wide #content{
  max-width:none!important;
  width:100%!important;
}

/* Ganar altura al ocultar cabecera/filtros/métricas */
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 - 110px)!important;
}

/* Tabla debe ocupar más pantalla */
.table-wrap,
.table-container,
.data-grid,
.grid{
  width:100%!important;
  max-width:100%!important;
}

/* ==========================================================
   CABECERA COMPACTA
   ========================================================== */

.topbar,
.toolbar,
.header,
#topbar,
#toolbar{
  min-height:auto!important;
  padding:7px 9px!important;
  gap:5px!important;
  border-radius:5px!important;
}

/* Título más pequeño */
.topbar h1,
.toolbar h1,
.header h1,
#topbar h1,
#toolbar h1,
h1.page-title,
.page-title{
  font-size:16px!important;
  line-height:1.1!important;
}

h1,h2,h3{
  margin-bottom:4px!important;
}

/* ==========================================================
   BOTONES COMPACTOS
   ========================================================== */

button,
.btn,
input[type="button"],
input[type="submit"]{
  min-height:var(--sp551-compact-button-h)!important;
  padding:4px 7px!important;
  font-size:12px!important;
  border-radius:4px!important;
  line-height:1.15!important;
  gap:4px!important;
  white-space:nowrap!important;
}

/* Botones de cabecera más pequeños */
.topbar button,
.toolbar button,
.header button,
#topbar button,
#toolbar button,
.actions button,
#topActions button{
  min-width:auto!important;
  max-width:130px!important;
}

/* Iconos añadidos mediante CSS para ahorrar texto */
button[id*="toggleSide" i]::before,
button:has-text("Ocultar menú")::before{ content:"☰ "; }

button[id*="toggleHead" i]::before{ content:"▴ "; }
button[id*="toggleFilters" i]::before{ content:"⌕ "; }
button[id*="maxTable" i]::before{ content:"⛶ "; }
button[id*="compact" i]::before{ content:"≡ "; }
button[id*="refresh" i]::before,
#refresh::before{ content:"⟳ "; }

/* Compatibilidad sin :has-text real: usamos JS para poner data-icon */
button[data-sp551-icon]::before{
  content:attr(data-sp551-icon) " ";
}

/* Texto abreviado */
button[data-sp551-short]{
  font-size:0!important;
}

button[data-sp551-short]::before{
  font-size:13px!important;
}

button[data-sp551-short]::after{
  content:attr(data-sp551-short);
  font-size:11px!important;
}

/* En pantallas estrechas, solo iconos */
@media(max-width:1100px){
  .topbar button,
  .toolbar button,
  .header button,
  #topbar button,
  #toolbar button,
  .actions button,
  #topActions button{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    padding:4px!important;
    font-size:0!important;
    overflow:hidden!important;
  }

  .topbar button::before,
  .toolbar button::before,
  .header button::before,
  #topbar button::before,
  #toolbar button::before,
  .actions button::before,
  #topActions button::before{
    font-size:14px!important;
    margin:0!important;
  }

  .topbar button::after,
  .toolbar button::after,
  .header button::after,
  #topbar button::after,
  #toolbar button::after,
  .actions button::after,
  #topActions button::after{
    content:""!important;
  }
}

/* ==========================================================
   FILTROS MÁS COMPACTOS
   ========================================================== */

.filters,
#filters,
.filter-panel{
  padding:8px!important;
  margin:6px 0!important;
}

.filters h2,
#filters h2,
.filter-panel h2{
  font-size:14px!important;
  margin-bottom:6px!important;
}

.filters label,
#filters label,
.filter-panel label{
  font-size:11px!important;
}

input,
select,
textarea{
  min-height:28px!important;
  font-size:12px!important;
  padding:4px 7px!important;
}

/* Buscador no tan alto */
input[type="search"],
input[placeholder*="Buscar" i],
input[placeholder*="paciente" i]{
  min-width:230px!important;
}

/* ==========================================================
   MÉTRICAS MÁS PEQUEÑAS
   ========================================================== */

.metrics,
.cards,
.stats,
.kpis{
  gap:6px!important;
  margin:6px 0!important;
}

.card,
.metric,
.kpi,
.panel{
  padding:7px!important;
  border-radius:5px!important;
}

.card b,
.metric b,
.kpi b{
  font-size:16px!important;
}

.card small,
.metric small,
.kpi small{
  font-size:9px!important;
}

/* ==========================================================
   TABLA MÁS DENSA Y CON MÁS ESPACIO
   ========================================================== */

.table-actions,
.pager,
.pagination,
.bulk-actions,
.selection-actions{
  padding:6px!important;
  gap:5px!important;
}

thead th{
  font-size:10px!important;
  padding:5px 6px!important;
}

tbody td{
  font-size:11px!important;
  padding:4px 6px!important;
}

html.sp551-ultra-dense tbody td{
  font-size:10px!important;
  padding:3px 5px!important;
}

html.sp551-ultra-dense thead th{
  font-size:9px!important;
  padding:4px 5px!important;
}

/* Scroll más útil */
.table-wrap,
.table-container,
.data-grid,
.grid{
  max-height:calc(100vh - 220px)!important;
}

/* Si filtros/metricas ocultos, tabla crece */
html.sp550-hide-filters.sp550-hide-metrics .table-wrap,
html.sp550-hide-filters.sp550-hide-metrics .table-container,
html.sp550-hide-filters.sp550-hide-metrics .data-grid,
html.sp550-hide-filters.sp550-hide-metrics .grid{
  max-height:calc(100vh - 95px)!important;
}

/* ==========================================================
   BOTÓN ELIMINAR NO DEBE TAPAR LA TABLA
   ========================================================== */

.sp-delete-floating-wrap-v548{
  right:10px!important;
  bottom:10px!important;
  z-index:23000!important;
}

.sp-delete-floating-btn-v548{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:50%!important;
  padding:0!important;
  font-size:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.sp-delete-floating-btn-v548::before{
  content:"🗑";
  font-size:18px!important;
}

.sp-delete-floating-btn-v548::after{
  content:"";
}

/* mostrar texto solo al pasar ratón */
.sp-delete-floating-btn-v548:hover{
  width:auto!important;
  min-width:42px!important;
  border-radius:999px!important;
  padding:0 12px!important;
  font-size:12px!important;
}

.sp-delete-floating-btn-v548:hover::before{
  margin-right:6px!important;
}

.sp-delete-floating-btn-v548:hover::after{
  content:"Eliminar";
  font-size:12px!important;
}

/* ==========================================================
   PANEL PACS MÁS PEQUEÑO
   ========================================================== */

.sp550-orthanc-toggle,
.sp549-view-toggle{
  right:10px!important;
  top:10px!important;
  min-height:28px!important;
  padding:5px 8px!important;
  font-size:12px!important;
}

.sp550-orthanc-panel,
.sp549-view-panel{
  top:48px!important;
  right:10px!important;
  width:250px!important;
  padding:8px!important;
}

/* ==========================================================
   MODO CLARO MÁS LIMPIO
   ========================================================== */

html[data-servpacs-theme="light"] body{
  background:#eef4f8!important;
}

html[data-servpacs-theme="light"] button,
html[data-servpacs-theme="light"] .btn{
  color:#25384a!important;
}

html[data-servpacs-theme="light"] .table-wrap,
html[data-servpacs-theme="light"] .table-container,
html[data-servpacs-theme="light"] .data-grid,
html[data-servpacs-theme="light"] .grid{
  background:#ffffff!important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:760px){
  :root{
    --sp551-font:11px;
  }

  input[type="search"],
  input[placeholder*="Buscar" i],
  input[placeholder*="paciente" i]{
    min-width:170px!important;
  }

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