/* === Dimed Viewer - Tema unificado con Dashboard === */
/* Paleta Dashboard: body #020617, header rgba(15,23,42,0.85),
   cards rgba(15,23,42,0.6), border rgba(255,255,255,0.06),
   blue #60a5fa, text #e2e8f0, muted #64748b */

/* ── Ocultar elementos no deseados ── */
[data-cy="investigational-use"],
[class*="investigational" i],
[class*="InvestigationalUseDialog" i] {
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* ── Variables ── */
:root {
  --dimed-bg: #020617;
  --dimed-surface: rgba(15,23,42,0.85);
  --dimed-surface-solid: #0f172a;
  --dimed-card: rgba(15,23,42,0.6);
  --dimed-border: rgba(255,255,255,0.06);
  --dimed-blue: #60a5fa;
  --dimed-blue-dark: #3b82f6;
  --dimed-text: #e2e8f0;
  --dimed-text-muted: #64748b;
  --dimed-text-dim: #94a3b8;
}

/* ── Font global ── */
body, * {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* ── Fondo principal ── */
body {
  background: var(--dimed-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER - Replica exacta del dashboard
   Dashboard: padding 16px 30px, logo 36px, h1 1.3rem/700, subtitle 0.65rem
   ══════════════════════════════════════════════════════════════════════════════ */

/* Contenedor del header - compacto, mismo color de fondo */
#root > div > div:first-child,
.bg-secondary-dark.z-20.border-black {
  background: var(--dimed-bg) !important;
  border-bottom: none !important;
  padding: 6px 16px !important;
  height: auto !important;
  min-height: unset !important;
}

/* Ocultar patient info (derecha) */
.bg-secondary-dark.z-20 .relative.h-\[48px\] > .absolute.right-0 {
  display: none !important;
}

/* Mover herramientas a la derecha */
.bg-secondary-dark.z-20 .relative.h-\[48px\] > .absolute.left-1\/2 {
  left: 60% !important;
}

/* bg-secondary-dark genérico: solo color, sin padding */
.bg-secondary-dark {
  background-color: var(--dimed-surface-solid) !important;
}

/* Logo: imagen - mismo tamaño que dashboard (36px) */
.header-brand img {
  height: 36px !important;
  width: 36px !important;
  object-fit: contain !important;
}

/* Titulo "Dimed Viewer" - dashboard: 1.3rem/700 */
.header-brand > div > span:first-child,
.header-brand > div > span:first-child span {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
}

/* Subtitulo "Visor Radiologico" - dashboard: 0.65rem */
.header-brand > div > span:last-child {
  font-size: 0.65rem !important;
  color: var(--dimed-text-muted) !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

/* Reloj - dashboard: 0.85rem, #64748b, weight 500 */
#dimed-clock {
  color: #64748b !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin-left: auto !important;
  white-space: nowrap !important;
  padding-right: 8px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FONDOS - Reemplazar negros puros por el slate-950 del dashboard
   Solo bg-black puro y primary-dark. NO tocar viewports (deben ser oscuros
   para lectura radiologica)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Fondo principal de la app (NO viewport) */
.bg-primary-dark,
.\!bg-primary-dark {
  background-color: var(--dimed-bg) !important;
}

/* Header y barras secundarias - color ya definido arriba */

/* Fondos negro puro -> slate-950 */
.bg-black {
  background-color: #030712 !important;
}

/* Overlays semi-transparentes */
.bg-black\/80 {
  background-color: rgba(2,6,23,0.85) !important;
}
.bg-black\/\[\.4\] {
  background-color: rgba(2,6,23,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   STUDY LIST (pagina principal) - estilo cards del dashboard
   ══════════════════════════════════════════════════════════════════════════════ */

/* Titulo "Lista de Estudios" / "Study List" */
h2.section-header, h3.section-header {
  color: var(--dimed-text) !important;
  font-weight: 700 !important;
}

/* Tabla */
table thead tr {
  background: var(--dimed-card) !important;
}
table thead th {
  color: var(--dimed-text-muted) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--dimed-border) !important;
}
table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: all 0.2s !important;
}
table tbody tr:hover {
  background: rgba(96,165,250,0.05) !important;
}
table tbody td {
  color: var(--dimed-text) !important;
  font-size: 0.85rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOOLBAR (vista de estudio) - fix padding heredado
   ══════════════════════════════════════════════════════════════════════════════ */

/* Fix 1: El headerBar compacto */
.bg-secondary-dark.z-20 > .relative.h-\[48px\] {
  flex-grow: 1 !important;
  height: 36px !important;
}

/* Fix 2: La fecha se posiciona absoluta a la derecha */
.bg-secondary-dark.z-20 > div:not(.relative) {
  position: absolute !important;
  right: 30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex-grow: 0 !important;
  width: auto !important;
  z-index: 5 !important;
}

/* Fix 3: Patient a la izquierda de la fecha */
.bg-secondary-dark.z-20 > .relative.h-\[48px\] > .absolute.right-0 {
  right: 200px !important;
}

/* Fix 4: Quitar el padding heredado en elementos .bg-secondary-dark dentro de la toolbar */
.relative.h-\[48px\] .bg-secondary-dark {
  padding: revert !important;
}

/* Re-aplicar padding SOLO al header container real */
.bg-secondary-dark.z-20.border-black {
  padding: 6px 16px !important;
}

[class*="toolbar"] button,
[class*="Toolbar"] button {
  border-radius: 8px !important;
  transition: all 0.2s !important;
}
[class*="toolbar"] button:hover,
[class*="Toolbar"] button:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PANELES LATERALES - estilo cards del dashboard
   ══════════════════════════════════════════════════════════════════════════════ */

[class*="sidepanel"],
[class*="SidePanel"],
[class*="side-panel"] {
  background: rgba(15,23,42,0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: var(--dimed-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   INPUTS - estilo unificado
   ══════════════════════════════════════════════════════════════════════════════ */

input, select {
  background: rgba(30,41,59,0.5) !important;
  border: 1px solid var(--dimed-border) !important;
  border-radius: 8px !important;
  color: var(--dimed-text) !important;
  transition: border-color 0.2s !important;
}
input:focus, select:focus {
  border-color: rgba(96,165,250,0.4) !important;
  outline: none !important;
}
input::placeholder {
  color: var(--dimed-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100,116,139,0.5);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DETALLES - badges, thumbnails, loading, viewport activo
   ══════════════════════════════════════════════════════════════════════════════ */

/* Badges de modalidad */
[class*="badge"], [class*="Badge"] {
  border-radius: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* Thumbnails */
[class*="thumbnail"], [class*="Thumbnail"] {
  border-radius: 8px !important;
  border: 1px solid var(--dimed-border) !important;
  transition: all 0.2s !important;
}
[class*="thumbnail"]:hover, [class*="Thumbnail"]:hover {
  border-color: rgba(96,165,250,0.3) !important;
}

/* Viewport activo */
[class*="viewport"][class*="active"],
[class*="Viewport"][class*="active"] {
  border-color: var(--dimed-blue) !important;
}

/* Viewport grid: dejar espacio abajo para la barra W/L y disclaimer */
[data-cy="viewport-grid"] {
  height: calc(100% - 80px) !important;
}

/* Overlay bottom-left/right: subir para no quedar detras del disclaimer */
[data-cy="viewport-overlay-bottom-left"],
[data-cy="viewport-overlay-bottom-right"] {
  bottom: 22px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   OCULTAR SEGMENTACION y herramientas avanzadas innecesarias
   ══════════════════════════════════════════════════════════════════════════════ */

/* Segmentation panel, buttons, and tools */
[data-cy*="segmentation" i],
[class*="segmentation" i],
[class*="Segmentation" i],
button[title*="Segmentation" i],
button[title*="segmentation" i],
button[title*="Segmentaci" i] {
  display: none !important;
}

/* Panel tab for segmentation */
[data-cy="panel-tab-segmentation"],
[data-cy="panelSection-segmentation"] {
  display: none !important;
}

/* Ocultar panel lateral derecho completo (segmentacion + mediciones) */
[data-cy="side-panel-header-right"] {
  display: none !important;
}
[data-cy="side-panel-header-right"],
#panelSegmentation-btn,
#trackedMeasurements-btn {
  display: none !important;
}
/* El contenedor padre del side panel derecho */
div:has(> [data-cy="side-panel-header-right"]) {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODO EMBEBIDO (iframe) — cuando OHIF esta dentro del editor de informes,
   ocultar header brand y compactar la barra de herramientas
   ══════════════════════════════════════════════════════════════════════════════ */

/* Mantener logo/brand visible en modo embebido */

/* Ocultar reloj en modo embebido (ya se ve en el dashboard) */
body.dimed-embedded #dimed-clock {
  display: none !important;
}

/* Ocultar Patient info en embebido (ya se muestra en el panel de informe) */
body.dimed-embedded .bg-secondary-dark.z-20 > .relative.h-\[48px\] > .absolute.right-0 {
  display: none !important;
}

/* Escalar contenido en modo embebido */
body.dimed-embedded {
  zoom: 0.90;
}

/* Compactar header en modo embebido: solo toolbar de herramientas */
body.dimed-embedded .bg-secondary-dark.z-20.border-black {
  padding: 4px 8px !important;
}

/* Logo visible en modo embebido */

/* Toolbar mas compacta en embebido */
body.dimed-embedded [class*="toolbar"] button,
body.dimed-embedded [class*="Toolbar"] button {
  padding: 4px 6px !important;
  min-width: unset !important;
}

/* Dimed toolbar en embebido — compensar zoom 0.80 */
body.dimed-embedded #dimed-toolbar {
  padding: 6px 14px !important;
  gap: 5px !important;
  bottom: 6px !important;
  flex-wrap: nowrap !important;
  left: 60% !important;
}
body.dimed-embedded #dimed-toolbar button {
  font-size: 0.9rem !important;
  padding: 5px 10px !important;
}

/* Dose overlay en embebido: mas compacto */
body.dimed-embedded #dimed-dose-overlay {
  font-size: 11px !important;
  line-height: 16px !important;
  margin-top: 3px !important;
}

/* Fecha/hora compacta en embebido */
body.dimed-embedded .bg-secondary-dark.z-20 > div:not(.relative) {
  position: static !important;
  transform: none !important;
  margin-left: auto !important;
  font-size: 0.7rem !important;
  white-space: nowrap !important;
}