/* ==========================================================
   ServerPACS v550 - Vista inspirada en Orthanc Explorer
   Diseño PACS clásico:
   - oscuro sobrio
   - barra lateral compacta
   - filtros horizontales
   - tabla densa
   - menos tarjetas grandes
   ========================================================== */

:root{
  --sp550-bg:#111820;
  --sp550-sidebar:#1b2733;
  --sp550-sidebar2:#17212b;
  --sp550-panel:#1f2d3a;
  --sp550-panel2:#243443;
  --sp550-line:#34485b;
  --sp550-line2:#42586b;
  --sp550-text:#eef3f7;
  --sp550-muted:#aab7c4;
  --sp550-title:#ffffff;
  --sp550-blue:#2b8fd6;
  --sp550-blue2:#1f6fa9;
  --sp550-green:#40b27a;
  --sp550-red:#c94d4d;
  --sp550-yellow:#d7a742;
  --sp550-radius:6px;
  --sp550-font:13px;
}

html,
body{
  font-size:var(--sp550-font)!important;
}

body{
  background:var(--sp550-bg)!important;
  color:var(--sp550-text)!important;
  font-family:Arial, Helvetica, sans-serif!important;
  overflow-x:hidden!important;
}

/* Quitar apariencia demasiado moderna de versiones anteriores */
*{
  letter-spacing:normal!important;
}

.card,
.metric,
.kpi,
.panel,
.filters,
#filters,
.filter-panel,
.topbar,
.toolbar,
.header,
.table-wrap,
.table-container,
.grid,
.data-grid{
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* ==========================================================
   Sidebar estilo PACS
   ========================================================== */

aside,
.sidebar,
#sidebar{
  background:linear-gradient(180deg,var(--sp550-sidebar),var(--sp550-sidebar2))!important;
  border-right:1px solid #0b1118!important;
  color:var(--sp550-text)!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04)!important;
}

.sidebar .brand,
aside .brand,
#sidebar .brand,
.logo,
.brand{
  background:#14202c!important;
  border:1px solid #2b4053!important;
  border-radius:8px!important;
  color:white!important;
  font-weight:700!important;
  min-height:38px!important;
}

.sidebar button,
aside button,
#sidebar button,
.sidebar a,
aside a,
#sidebar a{
  background:transparent!important;
  border:1px solid transparent!important;
  color:#d7e1ea!important;
  border-radius:4px!important;
  min-height:30px!important;
  padding:7px 10px!important;
  font-weight:600!important;
  text-align:left!important;
  box-shadow:none!important;
}

.sidebar button:hover,
aside button:hover,
#sidebar button:hover,
.sidebar a:hover,
aside a:hover,
#sidebar a:hover{
  background:#263747!important;
  border-color:#40566b!important;
  transform:none!important;
}

.sidebar .active,
aside .active,
#sidebar .active,
.sidebar button.active,
aside button.active,
#sidebar button.active{
  background:#2b5876!important;
  border-color:#40799c!important;
  color:white!important;
}

/* Panel operativo lateral tipo Orthanc */
#spSidebarToolsV535,
.sp-sidebar-pro-v536{
  margin:10px!important;
  padding:10px!important;
  background:#17232e!important;
  border:1px solid #31475a!important;
  border-radius:6px!important;
  box-shadow:none!important;
}

#spSidebarToolsV535::before,
.sp-sidebar-pro-v536::before{
  content:"Panel operativo";
  display:block;
  color:#8fc7ee;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  margin:0 0 8px 2px;
}

#spSidebarToolsV535 button,
.sp-sidebar-pro-v536 button{
  width:100%!important;
  background:#203140!important;
  border:1px solid #354c60!important;
  border-radius:4px!important;
  margin-bottom:6px!important;
  color:#edf6ff!important;
  min-height:31px!important;
}

/* ==========================================================
   Cabecera compacta
   ========================================================== */

.topbar,
.toolbar,
.header,
#topbar,
#toolbar{
  background:#17212c!important;
  border:1px solid #314456!important;
  border-radius:7px!important;
  padding:10px 12px!important;
  box-shadow:none!important;
}

.topbar,
.toolbar,
.actions,
#topActions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}

h1,h2,h3,
.page-title,
.title{
  color:#ffffff!important;
  font-weight:700!important;
  margin-top:0!important;
}

/* Título principal similar a Orthanc */
h1,
.page-title{
  font-size:19px!important;
}

h2{
  font-size:17px!important;
}

h3{
  font-size:15px!important;
}

/* ==========================================================
   Botones estilo herramienta PACS
   ========================================================== */

button,
.btn,
input[type="button"],
input[type="submit"]{
  background:linear-gradient(#314455,#223240)!important;
  border:1px solid #455c70!important;
  border-radius:4px!important;
  color:#f2f7fb!important;
  font-weight:700!important;
  min-height:30px!important;
  padding:6px 10px!important;
  box-shadow:none!important;
  text-shadow:0 1px 0 rgba(0,0,0,.25)!important;
  transition:none!important;
}

button:hover,
.btn:hover{
  background:linear-gradient(#3a5164,#273949)!important;
  border-color:#5c758b!important;
  transform:none!important;
}

button.primary,
.btn-primary,
#refresh,
#actualizar,
button[id*="refresh" i]{
  background:linear-gradient(#3b9ae0,#1f75b4)!important;
  border-color:#56aee9!important;
  color:white!important;
}

button.danger,
[id*="Delete" i],
[id*="delete" i]{
  background:linear-gradient(#d45b5b,#9f2f2f)!important;
  border-color:#e07171!important;
  color:white!important;
}

/* ==========================================================
   Métricas más pequeñas
   ========================================================== */

.metrics,
.cards,
.stats,
.kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(120px,1fr))!important;
  gap:8px!important;
  margin:10px 0!important;
}

.card,
.metric,
.kpi,
.panel{
  background:#1b2834!important;
  border:1px solid #31475a!important;
  border-radius:6px!important;
  padding:10px!important;
  color:var(--sp550-text)!important;
}

.card small,
.metric small,
.kpi small,
.panel small{
  color:#95a9ba!important;
  font-size:10px!important;
  text-transform:uppercase!important;
}

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

/* ==========================================================
   Filtros estilo formulario PACS
   ========================================================== */

.filters,
#filters,
.filter-panel{
  background:#1a2632!important;
  border:1px solid #31475a!important;
  border-radius:6px!important;
  padding:10px!important;
  margin:8px 0!important;
}

.filters h2,
#filters h2,
.filter-panel h2{
  margin:0 0 8px!important;
  font-size:16px!important;
  color:#ffffff!important;
}

.filters label,
#filters label,
.filter-panel label{
  color:#cbd9e5!important;
  font-size:12px!important;
  font-weight:700!important;
}

input,
select,
textarea{
  background:#0f1822!important;
  border:1px solid #3b5063!important;
  border-radius:4px!important;
  color:#f4f8fb!important;
  min-height:30px!important;
  padding:5px 8px!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35)!important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:#4aa3db!important;
  box-shadow:0 0 0 2px rgba(74,163,219,.20), inset 0 1px 2px rgba(0,0,0,.35)!important;
}

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

/* ==========================================================
   Barra de selección / paginador
   ========================================================== */

.table-actions,
.pager,
.pagination,
.bulk-actions,
.selection-actions{
  background:#17212c!important;
  border:1px solid #31475a!important;
  border-radius:6px!important;
  padding:8px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}

/* ==========================================================
   Tabla PACS compacta
   ========================================================== */

.table-wrap,
.table-container,
.grid,
.data-grid{
  background:#121c26!important;
  border:1px solid #31475a!important;
  border-radius:6px!important;
  overflow:auto!important;
}

table{
  width:100%!important;
  border-collapse:collapse!important;
  border-spacing:0!important;
  background:#121c26!important;
  color:#e9f1f7!important;
}

thead th{
  position:sticky!important;
  top:0!important;
  z-index:10!important;
  background:linear-gradient(#273848,#1e2d3b)!important;
  color:#d9edf9!important;
  border-bottom:1px solid #42596d!important;
  border-right:1px solid #34495a!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  padding:7px 8px!important;
  white-space:nowrap!important;
}

tbody td{
  border-bottom:1px solid #263746!important;
  border-right:1px solid rgba(52,73,90,.45)!important;
  padding:6px 8px!important;
  font-size:12px!important;
  vertical-align:middle!important;
}

tbody tr:nth-child(even){
  background:#15212c!important;
}

tbody tr:nth-child(odd){
  background:#111b25!important;
}

tbody tr:hover{
  background:#22384a!important;
}

tbody tr.selected,
tbody tr.sp-study-selected,
tbody tr.selected-row,
tbody tr[aria-selected="true"]{
  background:#284f6a!important;
  outline:1px solid #59a7d8!important;
}

/* Badges */
.badge,
.tag,
.status,
[class*="badge" i]{
  border-radius:4px!important;
  padding:3px 6px!important;
  font-size:10px!important;
  font-weight:700!important;
}

/* ==========================================================
   Modales
   ========================================================== */

.sp-pro-modal-v536,
.delete-study-modal-v547,
.admin-tools-modal,
.admin-modal,
#adminToolsModal{
  background:rgba(6,12,18,.78)!important;
  backdrop-filter:none!important;
}

.sp-pro-box-v536,
.delete-study-box-v547,
.admin-tools-box,
.adm-box,
.admin-box,
#adminToolsBox{
  background:#1a2632!important;
  border:1px solid #3a5368!important;
  border-radius:7px!important;
  box-shadow:0 20px 70px rgba(0,0,0,.55)!important;
  color:#edf6ff!important;
}

.sp-pro-head-v536,
.delete-study-head-v547,
.adm-head,
.admin-head{
  background:#17212c!important;
  border-bottom:1px solid #354c60!important;
}

.sp-pro-tabs-v536,
.adm-tabs,
.admin-tabs{
  background:#111b25!important;
  border-bottom:1px solid #354c60!important;
}

.sp-pro-card-v536,
.adm-card,
.admin-card,
.edit-card,
.tag-card{
  background:#1f2d3a!important;
  border:1px solid #354c60!important;
  border-radius:6px!important;
}

/* ==========================================================
   Panel Orthanc view
   ========================================================== */

.sp550-orthanc-panel{
  position:fixed;
  right:16px;
  top:76px;
  z-index:25000;
  width:270px;
  background:#1b2834;
  border:1px solid #3a5368;
  border-radius:6px;
  color:#edf6ff;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  padding:10px;
  display:none;
}

.sp550-orthanc-panel.open{
  display:block;
}

.sp550-orthanc-panel h3{
  margin:0 0 8px;
  font-size:14px;
}

.sp550-orthanc-panel label{
  display:flex;
  gap:8px;
  align-items:center;
  padding:7px 3px;
  color:#dce9f3;
}

.sp550-orthanc-toggle{
  position:fixed;
  right:16px;
  top:22px;
  z-index:25001;
  background:linear-gradient(#3b9ae0,#1f75b4)!important;
  border-color:#56aee9!important;
  border-radius:4px!important;
}

/* Opciones */
html.sp550-hide-sidebar aside,
html.sp550-hide-sidebar .sidebar,
html.sp550-hide-sidebar #sidebar{
  display:none!important;
}

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

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

html.sp550-hide-header .topbar,
html.sp550-hide-header .toolbar,
html.sp550-hide-header .header,
html.sp550-hide-header #topbar,
html.sp550-hide-header #toolbar{
  display:none!important;
}

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

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

html.sp550-fullwidth main,
html.sp550-fullwidth .main,
html.sp550-fullwidth .content{
  max-width:none!important;
  width:100%!important;
}

/* ==========================================================
   Modo claro tipo Orthanc clásico
   ========================================================== */

html[data-servpacs-theme="light"],
html[data-servpacs-theme="light"] body{
  --sp550-bg:#edf2f6;
  --sp550-sidebar:#dce6ee;
  --sp550-sidebar2:#d2dee8;
  --sp550-panel:#ffffff;
  --sp550-panel2:#f6f9fb;
  --sp550-line:#bfd0dc;
  --sp550-line2:#a9bfce;
  --sp550-text:#263645;
  --sp550-muted:#667988;
  background:#edf2f6!important;
  color:#263645!important;
}

html[data-servpacs-theme="light"] aside,
html[data-servpacs-theme="light"] .sidebar,
html[data-servpacs-theme="light"] #sidebar{
  background:linear-gradient(180deg,#e8f0f6,#dce6ee)!important;
  color:#263645!important;
  border-color:#c4d4df!important;
}

html[data-servpacs-theme="light"] .topbar,
html[data-servpacs-theme="light"] .toolbar,
html[data-servpacs-theme="light"] .header,
html[data-servpacs-theme="light"] #topbar,
html[data-servpacs-theme="light"] #toolbar,
html[data-servpacs-theme="light"] .filters,
html[data-servpacs-theme="light"] #filters,
html[data-servpacs-theme="light"] .filter-panel,
html[data-servpacs-theme="light"] .card,
html[data-servpacs-theme="light"] .metric,
html[data-servpacs-theme="light"] .kpi,
html[data-servpacs-theme="light"] .panel,
html[data-servpacs-theme="light"] .table-wrap,
html[data-servpacs-theme="light"] .table-container{
  background:#ffffff!important;
  border-color:#c5d5df!important;
  color:#263645!important;
}

html[data-servpacs-theme="light"] button,
html[data-servpacs-theme="light"] .btn{
  background:linear-gradient(#ffffff,#e5edf3)!important;
  color:#263645!important;
  border-color:#aebfca!important;
  text-shadow:none!important;
}

html[data-servpacs-theme="light"] button.primary,
html[data-servpacs-theme="light"] .btn-primary,
html[data-servpacs-theme="light"] #refresh{
  background:linear-gradient(#74bcec,#3d8fc7)!important;
  color:white!important;
  border-color:#6eacd2!important;
}

html[data-servpacs-theme="light"] input,
html[data-servpacs-theme="light"] select,
html[data-servpacs-theme="light"] textarea{
  background:#fbfdfe!important;
  color:#263645!important;
  border-color:#afc1cd!important;
}

html[data-servpacs-theme="light"] table{
  background:white!important;
  color:#263645!important;
}

html[data-servpacs-theme="light"] thead th{
  background:linear-gradient(#e4edf4,#d2e0eb)!important;
  color:#30485b!important;
  border-color:#b8cbd8!important;
}

html[data-servpacs-theme="light"] tbody td{
  border-color:#d6e2ea!important;
}

html[data-servpacs-theme="light"] tbody tr:nth-child(even){
  background:#f6f9fb!important;
}

html[data-servpacs-theme="light"] tbody tr:nth-child(odd){
  background:#ffffff!important;
}

html[data-servpacs-theme="light"] tbody tr:hover{
  background:#eaf5fc!important;
}

html[data-servpacs-theme="light"] tbody tr.selected,
html[data-servpacs-theme="light"] tbody tr.sp-study-selected,
html[data-servpacs-theme="light"] tbody tr.selected-row,
html[data-servpacs-theme="light"] tbody tr[aria-selected="true"]{
  background:#d7ecfa!important;
  outline:1px solid #75b8e3!important;
}

html[data-servpacs-theme="light"] .sp550-orthanc-panel{
  background:#ffffff!important;
  color:#263645!important;
  border-color:#c5d5df!important;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media(max-width:980px){
  .metrics,.cards,.stats,.kpis{
    grid-template-columns:repeat(2,minmax(130px,1fr))!important;
  }

  .topbar,.toolbar,.actions,#topActions,
  .table-actions,.pager,.pagination,.bulk-actions,.selection-actions{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
  }

  .topbar button,.toolbar button,.actions button,#topActions button,
  .table-actions button,.pager button,.pagination button,.bulk-actions button{
    flex:0 0 auto!important;
  }
}

@media(max-width:720px){
  :root{--sp550-font:12px}

  .metrics,.cards,.stats,.kpis{
    grid-template-columns:1fr!important;
  }

  .sp550-orthanc-toggle{
    top:auto;
    bottom:14px;
    right:14px;
  }

  .sp550-orthanc-panel{
    top:auto;
    bottom:60px;
    left:10px;
    right:10px;
    width:auto;
  }
}