/* ============================================================
   OHIF / MedicView — Ajustes para celulares y tablets
   1) Barra superior: fila flex, sin superposición de nombres
   2) Barra del viewport: nombres de serie/estudio recortados
   3) Overlays DICOM: no se pisan entre esquinas
   4) Scrollbar de cortes: zona táctil de 48 px
   ============================================================ */

@media (max-width: 900px) {
  /* --- 1. Header ---------------------------------------------------------
     OHIF posiciona logo / herramientas / info paciente con position:absolute
     (left:50% / left:250px). En pantallas angostas se pisan. */
  [data-ohif="viewer-header"],
  div.relative.h-\[48px\] {
    display: flex !important;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-ohif="viewer-header"]::-webkit-scrollbar,
  div.relative.h-\[48px\]::-webkit-scrollbar {
    display: none;
  }

  [data-ohif="viewer-header"] > div,
  div.relative.h-\[48px\] > div {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto;
  }

  /* Las herramientas primarias ocupan el espacio libre y hacen scroll */
  [data-ohif="viewer-header"] > div:nth-child(3),
  div.relative.h-\[48px\] > div:nth-child(3) {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  /* Ocultar logo (se mantiene la flecha "volver a la lista") */
  [data-cy="return-to-work-list"] > div.ml-1 {
    display: none !important;
  }
  [data-cy="return-to-work-list"] {
    margin-right: 0 !important;
  }

  /* Undo/redo ocupan mucho en pantallas muy angostas */
  .ohif-header-undoredo,
  [data-ohif="viewer-header"] > div:last-child > :nth-child(-n+2),
  div.relative.h-\[48px\] > div:last-child > :nth-child(-n+2) {
    display: none !important;
  }

  /* Paciente + engranaje fijos a la derecha, sin que el nombre se monte encima */
  [data-ohif="viewer-header"] > div:last-child,
  div.relative.h-\[48px\] > div:last-child {
    position: sticky !important;
    right: 0;
    margin-left: auto;
    z-index: 1;
    background: hsl(var(--secondary-dark, 220 13% 13%));
    background-color: var(--ohif-header-bg, #151a1f);
  }

  /* Nombre de paciente: recortar para que no pise las herramientas */
  [data-ohif="header-patient-info"],
  [data-ohif="viewer-header"] > div:last-child > :nth-child(3),
  div.relative.h-\[48px\] > div:last-child > :nth-child(3) {
    max-width: min(42vw, 160px);
    overflow: hidden;
  }
  [data-ohif="header-patient-info"] .ohif-patient-name,
  [data-ohif="header-patient-info"] .ohif-patient-meta {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- 2. Barra del viewport (fecha + descripción de serie) ------------- */
  .pointer-events-auto.flex.h-8.items-center.overflow-visible,
  .pointer-events-auto.flex.h-8.items-center.overflow-hidden {
    overflow: hidden !important;
    min-width: 0 !important;
  }

  [data-cy="studyDate"] {
    max-width: 4.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* La descripción de serie es el texto que más se pisa con el nombre */
  [data-cy="studyDate"] + div + span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* --- 3. Overlays de metadatos en las esquinas del viewport ------------ */
  [data-cy="viewport-overlay-top-left"],
  [data-cy="viewport-overlay-top-right"],
  [data-cy="viewport-overlay-bottom-left"],
  [data-cy="viewport-overlay-bottom-right"] {
    max-width: 46%;
    overflow: hidden;
  }
  [data-cy^="viewport-overlay-"] span,
  [data-cy^="viewport-overlay-"] div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- 5. Panel derecho: no tapar la imagen ------------------------------
     En desktop arranca expandido (~280 px). En celular lo ocultamos;
     queda el panel izquierdo colapsado para thumbnails. */
  [data-panel-id="viewerLayoutResizableRightPanel"],
  [data-panel="viewerLayoutResizableRightPanel"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
  }
  [data-panel-group-id="viewerLayoutResizablePanelGroup"] > [data-panel-resize-handle-id]:last-of-type,
  [data-panel-group] > [data-panel-resize-handle-id]:last-of-type {
    display: none !important;
    width: 0 !important;
  }

  /* --- 6. Panel izquierdo: drawer usable, series en columna -------------
     La grilla auto-fit minmax(0,135px) en un panel angosto crea columnas
     de ancho 0 y todas las miniaturas se apilan/pisan. */
  [data-panel-id="viewerLayoutResizableLeftPanel"] {
    z-index: 40 !important;
  }
  [data-panel-id="viewerLayoutResizableLeftPanel"]:has([data-cy="studyBrowser-panel"]) {
    min-width: min(82vw, 280px) !important;
    max-width: min(82vw, 280px) !important;
    width: min(82vw, 280px) !important;
    flex: 0 0 min(82vw, 280px) !important;
    overflow: hidden auto !important;
  }
  #ohif-thumbnail-list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    gap: 6px !important;
  }
  [data-cy="study-browser-thumbnail"],
  [data-cy="study-browser-thumbnail-no-image"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    position: relative !important;
    z-index: 1;
    pointer-events: auto !important;
  }
}

/* --- 4. Scrollbar de cortes ----------------------------------------------
   El SmartScrollbar tiene 8 px de ancho fijo. Agrandamos sólo la zona de
   toque (hacia la imagen); la barra visible queda igual. El mapeo de
   posición usa sólo la coordenada Y, así que no altera el comportamiento. */
@media (pointer: coarse) {
  [role="slider"][aria-orientation="vertical"][aria-label="Image navigation scrollbar"] {
    width: 48px !important;
    margin-left: -37px !important;
  }
  input[type="range"].imageSlider,
  .scroll input[type="range"] {
    height: 40px !important;
  }
}