/* ---------------------------------------------------------------------------
 * Estilos propios del visor. Se inyecta DESPUÉS de app.bundle.css, así que
 * gana sin necesidad de !important salvo contra utilidades de Tailwind.
 *
 * Este archivo es opcional: si no está montado, start-ohif.sh no inyecta nada
 * y el visor arranca igual.
 *
 * ZONA SEGURA -> colores, tipografía, bordes, tamaños de panel, ocultar botones.
 * ZONA ROJA   -> ver el bloque del final. No tocar el árbol del viewport.
 * ------------------------------------------------------------------------- */

/* Centinela para comprobar que el archivo cargó. No cambia nada visual. */
:root {
  --visor-custom-css: loaded;
}

/* Respaldo visual: elimina solo el tutorial y su capa oscura. */
.shepherd-element,
.shepherd-modal-overlay-container {
  display: none !important;
  pointer-events: none !important;
}

#visor-revision {
  position: fixed;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: 90vw;
  padding: 6px 10px;
  border-radius: 6px;
  background: #12202b;
  color: #e2eef2;
  font: 12px/1.4 sans-serif;
  text-align: center;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 1. PALETA GLOBAL
 *
 * OHIF v3.10 usa tokens HSL (estilo shadcn): los valores van SIN hsl() y sin
 * comas, "H S% L%". Aqui se redefinen en :root con la paleta de connections-v,
 * asi que TODO lo que el bundle pinta con hsl(var(--x)) sale ya en la marca:
 * dialogos, avisos, paneles, botones... incluido lo que no hemos visto.
 *
 * Los bloques acotados de mas abajo (panel de series, barra, menus) siguen
 * valiendo: afinan algun token en su zona, como el --popover que en la lista
 * de series marca la activa y en los menus es el fondo.
 *
 * Valores originales de OHIF, por si hay que comparar:
 *   --background 236 62% 5%   --primary 214 98% 60%   --popover 219 90% 15%
 *   --secondary 214 66% 48%   --accent 217 79% 24%    --input 236 52% 30%
 *   --highlight 191 74% 63%   --muted 234 64% 10%     --ring 214 98% 60%
 * ------------------------------------------------------------------------- */
:root {
  --background: 216 33% 3%;           /* #05070a  fondo */
  --foreground: 195 38% 92%;          /* #e2eef2  texto */

  --card: 212 35% 7%;                 /* #0c1219  paneles */
  --card-foreground: 195 38% 92%;

  --popover: 212 32% 10%;             /* #121a23  menus, avisos, dialogos */
  --popover-foreground: 195 38% 92%;

  --primary: 184 80% 50%;             /* #19d7e5  acento: activo, foco, botones */
  --primary-foreground: 212 35% 7%;   /* texto oscuro sobre el acento */

  --secondary: 212 32% 10%;
  --secondary-foreground: 195 38% 92%;

  --muted: 212 35% 7%;                /* fondos apagados */
  --muted-foreground: 199 13% 55%;    /* #7e929b  texto secundario */

  --accent: 195 52% 11%;              /* hover de filas y botones */
  --accent-foreground: 195 38% 92%;

  --destructive: 0 62.8% 30.6%;       /* rojo de error / borrar: se deja */
  --destructive-foreground: 0 0% 98%;

  --border: 212 32% 14%;
  --input: 212 32% 14%;               /* tambien el marco del viewport */
  --ring: 184 80% 50%;

  --highlight: 184 80% 50%;
  --neutral: 199 13% 55%;

  --radius: 0.5rem;
}

/* Restos de la paleta VIEJA de OHIF. Estas clases no leen variables: traen el
 * rgb escrito a mano en el bundle, y son las que seguian saliendo en azul en
 * avisos, pestanas, marcos y botones sueltos. Se mapean a la marca. Las
 * variantes hover: van aparte porque Tailwind las compila como clases
 * distintas. */
.bg-primary-dark, .hover\:bg-primary-dark:hover, .bg-bkg-med { background-color: #121a23; }
.text-primary-dark { color: #0c1219; }
.border-primary-dark { border-color: #121a23; }

.bg-primary-light, .hover\:bg-primary-light:hover { background-color: #19d7e5; }
.text-primary-light, .hover\:text-primary-light:hover { color: #19d7e5; }
.border-primary-light { border-color: #19d7e5; }

.bg-primary-main, .hover\:bg-primary-main:hover { background-color: rgba(25, 215, 229, 0.18); }
.text-primary-main { color: #19d7e5; }
.border-primary-main { border-color: rgba(25, 215, 229, 0.55); }

.bg-primary-active, .hover\:bg-primary-active:hover { background-color: #19d7e5; }
.text-primary-active, .hover\:text-primary-active:hover { color: #19d7e5; }
.border-primary-active { border-color: #19d7e5; }

.bg-secondary-light, .hover\:bg-secondary-light:hover { background-color: #121a23; }
.bg-secondary-main, .hover\:bg-secondary-main:hover { background-color: #0c1219; }
.border-secondary-light, .border-secondary-main { border-color: rgba(255, 255, 255, 0.07); }

.text-aqua-pale { color: #7e929b; }
/* actions-*: otra familia con el rgb a mano. text-actions-primary es el azul
 * del icono inactivo del conmutador lista/cuadricula del panel de series; en
 * la marca los iconos en reposo van en texto tenue y pasan al acento al
 * activarse o al pasar el raton (eso ya lo hacen sus data-[state=on] y hover:,
 * que si leen variables). */
.text-actions-primary { color: #7e929b; }
.bg-actions-primary { background-color: rgba(25, 215, 229, 0.18); }
.border-actions-primary { border-color: rgba(25, 215, 229, 0.55); }
.text-actions-highlight, .bg-actions-highlight { color: #19d7e5; }
.bg-bkg-low { background-color: #0c1219; }
[class*='bg-customblue'] { background-color: #0c1219; }

/* ---------------------------------------------------------------------------
 * 2. PANEL DE SERIES CON LA PALETA DE connections-v
 *
 * Los colores salen del componente del visor Angular (dist/connections-v,
 * bloque [_nghost] del main.js), traducidos a HSL porque OHIF los consume así:
 *
 *   --acento       #19d7e5   184 80% 50%
 *   --fondo        #05070a   216 33% 3%
 *   --panel        #0c1219   212 35% 7%
 *   --panel-alto   #121a23   212 32% 10%
 *   --texto        #e2eef2   195 38% 92%
 *   --texto-tenue  #7e929b   199 13% 55%
 *
 * Las variables se redefinen SOLO dentro del panel izquierdo. Como las clases
 * del bundle son hsl(var(--x)) — bg-muted, bg-popover, bg-primary/65,
 * hover:bg-primary/30 — con esto se repinta todo el panel, incluidas las
 * variantes con opacidad, sin sobrescribir ni un selector de Tailwind.
 * ------------------------------------------------------------------------- */
#viewerLayoutResizableLeftPanel {
  --background: 216 33% 3%;         /* #05070a  hueco de la miniatura */
  --muted: 212 35% 7%;              /* #0c1219  tarjeta de serie en reposo */
  --popover: 192 59% 13%;           /* serie activa: acento al 14% sobre panel */
  --accent: 195 52% 11%;            /* hover de la cabecera del estudio */
  --primary: 184 80% 50%;           /* #19d7e5  acento: cuadro de modalidad, iconos */
  --highlight: 184 80% 50%;         /* el cuadrito de la serie activa usa bg-highlight */
  --foreground: 195 38% 92%;        /* #e2eef2  texto */
  --muted-foreground: 199 13% 55%;  /* #7e929b  texto secundario */
  --border: 212 32% 14%;
}

/* Estas dos clases del bundle traen el color escrito a mano (rgb(5 6 21) y
 * rgb(9 12 41)), no leen ninguna variable, así que hay que fijarlas aparte:
 * son el fondo de la lista de miniaturas y el de la cabecera "Estudios". */
#viewerLayoutResizableLeftPanel .bg-bkg-low { background-color: #0c1219; }
#viewerLayoutResizableLeftPanel .bg-bkg-med { background-color: #121a23; }

/* El contenido del panel tiene que medir lo que el panel, no lo que pida la
 * cuadricula. El ScrollArea de Radix envuelve todo en un div con "display:
 * table; min-width: 100%", y una tabla crece hasta su contenido: con el panel
 * a 160px ese envoltorio media 272 (sitio para dos columnas), la unica tarjeta
 * se centraba en esos 272 y quedaba en x=70, cortada por el borde del panel.
 * Era lo que hacia que las miniaturas se vieran pegadas a la derecha y
 * "descentradas", en especial las de mastografia. Pasarlo a block al 100%
 * encierra la cadena en el ancho real; la cuadricula centra entonces sobre
 * 160 y la tarjeta cae donde debe. En movil hace falta por la misma razon,
 * asi que la regla es global. */
#viewerLayoutResizableLeftPanel [data-radix-scroll-area-viewport] > div {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Borde y halo de la serie activa, replicando .serie--activa del Angular.
 * El borde no descuadra nada porque el bundle aplica box-sizing:border-box
 * de forma global (viene en el preflight de Tailwind).
 *
 * OJO: OHIF mueve esta marca con DOBLE click, no con click simple. El click
 * simple no modifica el DOM ni da el foco a la tarjeta (no tiene tabindex),
 * así que desde CSS no hay forma de marcar "la que acabo de clicar". */
#ohif-thumbnail-list .bg-popover {
  border: 1px solid rgba(25, 215, 229, 0.55);
  box-shadow: 0 0 12px rgba(25, 215, 229, 0.35);
}

/* El número de columnas NO se toca aquí a propósito.
 *
 * La grilla original del bundle ya es repeat(auto-fit, minmax(0,135px)): pone
 * tantas columnas como quepan. El problema nunca fue la grilla sino el ancho
 * del panel, que OHIF abre clavado en 292px, y ahí entran justo dos tarjetas
 * (135 + 4 de hueco + 135 = 274). Al estrecharlo desde custom.js a un ancho de
 * una sola tarjeta, auto-fit da una columna por sí solo, y si el usuario
 * arrastra el divisor para ensanchar, vuelven a aparecer dos sin más código.
 *
 * Lo único que se añade es el centrado, para que la tarjeta no quede pegada al
 * borde. Replica el justify-content:safe center de .series__tira del Angular;
 * el "safe" evita que se recorte si alguna vez no cupiera. */
#ohif-thumbnail-list {
  justify-content: safe center;
}

/* Respuesta al pulsar, copiada de .serie:active del Angular. No sustituye a la
 * marca de activa, pero al menos el click simple deja de sentirse muerto.
 * El scale va sobre la tarjeta del panel lateral, no sobre el viewport, así
 * que no toca las coordenadas de las herramientas (ver zona roja al final).
 * El hover ya sale en el cian de la marca porque el bundle lo resuelve como
 * hsl(var(--primary)/.3), y --primary está redefinido arriba. */
#ohif-thumbnail-list [data-cy='study-browser-thumbnail'] {
  transition: background-color 0.18s ease, transform 0.14s ease;
}
#ohif-thumbnail-list [data-cy='study-browser-thumbnail']:active {
  transform: scale(0.96);
}

/* Vista previa de la serie: proporción correcta y caja cuadrada.
 *
 * OHIF genera la vista previa como un PNG de 256x256 y la mete en una caja de
 * 128x114 con el object-fit por defecto, que es "fill": la estira. En un TC
 * (imagen cuadrada) el error pasa desapercibido, pero una mastografía es muy
 * vertical —aquí 2560x3328— y se nota. Medido: la caja deformaba un 12%
 * (128/114) y el contenido útil del PNG es una franja de 120x248, relación
 * 0.48, o sea lo más sensible posible a ese estiramiento.
 *
 * "contain" respeta la proporción; y como el PNG es cuadrado, dejar la caja
 * cuadrada también evita desperdiciar ancho en franjas negras. La tarjeta pasa
 * de 170 a 184px de alto para acomodar los 128. Sube la superficie útil de
 * 114x114 a 128x128, un 26% más.
 *
 * El recuadro es cuadrado para TODAS las modalidades, a proposito. Se probo
 * darle a cada miniatura la proporcion de su imagen, y las mastografias salian
 * desproporcionadas frente a las de TC: lo que se gana en tamano se pierde en
 * que la lista deje de leerse como una lista. Una mama es alta y estrecha, asi
 * que llena el alto y deja margen a los lados; eso es correcto y es como se ve
 * un TC tambien. */
#viewerLayoutResizableLeftPanel [data-cy^='study-browser-thumbnail'] {
  height: 184px;
}
/* La clase h-[114px] la llevan DOS elementos: el hueco de la vista previa y la
 * propia <img>. Hay que fijar los dos, por eso el selector no se acota mas. */
#viewerLayoutResizableLeftPanel [data-cy^='study-browser-thumbnail'] .h-\[114px\] {
  height: 128px;
}
/* contain respeta la proporcion y object-position centra lo que sobra. Las dos
 * juntas son las que dejan la miniatura centrada dentro del cuadrado, sea la
 * imagen cuadrada (TC) o alta y estrecha (mastografia). */
#viewerLayoutResizableLeftPanel [data-cy^='study-browser-thumbnail'] img {
  object-fit: contain;
  object-position: center;
}

/* ---------------------------------------------------------------------------
 * 3. BARRA SUPERIOR
 *
 * La barra es .bg-secondary-dark, un resto de la paleta vieja de OHIF que en
 * el bundle está escrito a mano como rgb(4 28 74) y no lee ninguna variable.
 * Ese azul hay que fijarlo a pelo; los botones, en cambio, sí resuelven contra
 * variables, así que se redefinen dentro de la barra y todos sus estados
 * —reposo, hover y activo— pasan al acento sin tocar un solo selector suyo.
 * ------------------------------------------------------------------------- */
.bg-secondary-dark {
  background-color: #05070a; /* el --fondo del Angular, negro azulado */

  --primary: 184 80% 50%; /* iconos y separadores verticales */
  --highlight: 184 80% 50%; /* fondo del botón de herramienta activa */
  --foreground: 195 38% 92%; /* iconos en reposo, que se pintan al 80% */
  --background: 212 35% 7%; /* hover de botón, y el icono sobre el activo */
}

/* Los otros dos restos de la paleta vieja que aparecen en la barra: también
 * llevan el color escrito a mano, así que no bastan las variables. */
.bg-secondary-dark .hover\:bg-primary-dark:hover {
  background-color: #0c1219;
}
.bg-secondary-dark .hover\:text-primary-light:hover {
  color: #19d7e5;
}

/* Los menús desplegables (Layout, el "···" de cada serie, los tooltips) NO se
 * dibujan dentro de la barra: Radix los saca a un portal colgado de <body>,
 * fuera de #root. Por eso no les llegaban las variables de arriba y seguían en
 * azul. data-radix-popper-content-wrapper es el envoltorio que Radix le pone a
 * todos ellos, así que sirve como gancho único y estable. */
[data-radix-popper-content-wrapper] {
  --popover: 212 32% 10%; /* #121a23  fondo del menú */
  --popover-foreground: 195 38% 92%; /* #e2eef2  texto */
  --muted: 212 35% 7%; /* #0c1219  columna "Custom" */
  --accent: 195 52% 11%; /* hover de cada fila */
  --primary: 184 80% 50%; /* #19d7e5  icono al pasar por encima */
  --foreground: 195 38% 92%;
  --muted-foreground: 199 13% 55%; /* #7e929b  títulos "Common"/"Advanced" */
  --input: 212 32% 14%;
}

/* La cuadrícula de "Custom" trae sus dos colores escritos a mano en el bundle:
 * bg-[#04225b] la celda en reposo y bg-primary-active las que quedan marcadas
 * al pasar el ratón. Son la única señal de qué disposición vas a aplicar al
 * hacer click, así que tienen que distinguirse sí o sí.
 *
 * La celda en reposo NO puede ser el color del panel: la columna "Custom" ya
 * es #0c1219 y las celdas desaparecerían. Se usa el acento muy diluido, que
 * sobre ese fondo da un #0e363e bien visible, y al marcarse salta al acento
 * pleno. Queda una progresión clara de cian apagado a cian encendido. */
[data-radix-popper-content-wrapper] .bg-\[\#04225b\] {
  background-color: rgba(25, 215, 229, 0.18);
}
[data-radix-popper-content-wrapper] .bg-primary-active {
  background-color: #19d7e5;
}

/* El engrane de la esquina superior derecha. Su menu tiene "Acerca de" y
 * "Preferencias"; esta ultima abre el selector de idioma y el editor de atajos
 * de teclado. Ocultarlo NO desactiva los atajos, que siguen funcionando con sus
 * valores por defecto: solo deja de poder personalizarlos desde la interfaz.
 *
 * El gancho es el id del icono dentro del svg, que viene del archivo de iconos
 * y no lo genera React (a diferencia de los id "radix-:r0:", que cambian entre
 * arranques). Comprobado que es unico en toda la pagina.
 *
 * Basta con ocultar el boton: su contenedor no tiene ancho propio y colapsa
 * solo, asi que no queda hueco. Medido: 28px -> 0px. */
.bg-secondary-dark button:has(#icon-settings) {
  display: none;
}

/* Alternativa, si algun dia se quiere conservar el engrane y quitar unicamente
 * la entrada "Acerca de": comentar la regla de arriba y descomentar esta. El
 * menu se dibuja en el portal de Radix, de ahi el otro selector raiz. */
/* [data-radix-popper-content-wrapper] [role='menuitem']:has(#icon-download) {
  display: none;
} */

/* ---------------------------------------------------------------------------
 * 4. PANTALLAS ESTRECHAS: las series pasan a una tira horizontal DEBAJO de la
 *    imagen, como en el visor Angular (.series__tira)
 *
 * OHIF esta pensado para escritorio: cabecera con bloques en posicion absoluta
 * y un panel lateral de 292px. En un telefono de 390px eso deja la imagen en
 * un tercio de la pantalla y la cabecera con los iconos cortados y el nombre
 * del paciente montado encima.
 *
 * Aqui, por debajo de 640px:
 *   - la cabecera pasa a dos filas: paciente arriba, herramientas debajo con
 *     desplazamiento lateral;
 *   - el grupo de paneles pasa de fila a columna, la imagen ocupa todo lo que
 *     queda y el panel de series se coloca debajo, como tira horizontal;
 *   - dentro del panel se ocultan la cabecera "Estudios", la fila de opciones
 *     y la fila del estudio (fecha/modalidad ya estan en la cabecera y en el
 *     viewport), y las tarjetas se compactan a 100x146;
 *   - el panel derecho y los divisores de arrastre se ocultan.
 *
 * Los !important son inevitables: react-resizable-panels y el SidePanel de
 * OHIF escriben flex, width, min/max-width y margin en el atributo style.
 *
 * Medido a 390x844: imagen 606px de alto (canvas 388x600), tira de 162px con
 * las 10 tarjetas desplazables, y nada se sale de la pantalla.
 * ------------------------------------------------------------------------- */
/* La cabecera se reordena mucho antes que la tira. Sus bloques van en absoluto
 * y solo caben en una fila cuando el grupo de herramientas centrado (434px) no
 * choca con el bloque del paciente (308px) pegado a la derecha: eso ocurre a
 * partir de unos 1060px. Medido en el barrido: a 768 (iPad vertical) se
 * solapaban 145px y a 1024 (iPad horizontal) 17px. Por debajo de ese ancho
 * pasa a dos filas; la tira de series abajo, en cambio, solo a partir de 640.
 */
@media (max-width: 1060px) {
  /* --- cabecera en dos filas ------------------------------------------- */
  .bg-secondary-dark > .relative {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .bg-secondary-dark > .relative > div {
    position: static;
    transform: none;
    width: 100%;
  }
  /* 4 es el bloque del paciente; 3 el de herramientas. Es :nth-child porque
   * esos bloques no traen id ni data-cy. Si OHIF los reordena, la cabecera se
   * vera rara en movil pero no se rompe nada funcional. */
  .bg-secondary-dark > .relative > div:nth-child(4) {
    order: 1;
    justify-content: center;
  }
  .bg-secondary-dark > .relative > div:nth-child(3) {
    order: 2;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 6px;
  }
  /* Safari real en iPhone lo delato: la fila interna de herramientas viene con
   * justify-content:center, y un flex centrado que desborda lo hace por AMBOS
   * lados, con lo que la primera herramienta quedaba cortada a la izquierda y
   * no habia manera de desplazarse hasta ella. Con "safe center" se centra
   * mientras cabe y cae a "start" cuando desborda, que es lo que hace falta. */
  .bg-secondary-dark > .relative > div:nth-child(3) > div,
  .bg-secondary-dark > .relative > div:nth-child(3) > div > div {
    justify-content: safe center;
  }
  /* 1 es el logo del whiteLabeling (apunta a un logo.png que no existe: nginx
   * devuelve el index.html por el fallback) y 2 un separador vertical. */
  .bg-secondary-dark > .relative > div:nth-child(1),
  .bg-secondary-dark > .relative > div:nth-child(2) {
    display: none;
  }

  /* --- el contenido rellena lo que la cabecera deje ---------------------- */
  /* OHIF da al contenedor de paneles "height: calc(100vh - 52px)", contando
   * con una cabecera de 52px. Con dos filas mide mas, y ese exceso empujaba la
   * tira 24px por debajo del borde. Se pone el envoltorio en columna y el
   * contenido en flex:1 para que se adapte a la cabecera que haya. */
  #root > div {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }
  #root > div > [style*='100vh'] {
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  /* --- de fila a columna: imagen arriba, series abajo -------------------- */
  #viewerLayoutResizablePanelGroup {
    flex-direction: column !important;
  }
  #viewerLayoutResizableViewportGridPanel {
    order: 1;
    flex: 1 1 auto !important;
    min-height: 0;
  }
  #viewerLayoutResizableLeftPanel {
    order: 2;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 162px !important;
  }
  #viewerLayoutResizableRightPanel,
  [data-panel-resize-handle-id] {
    display: none !important;
  }
  /* el SidePanel interno trae width y un margin-left negativo pensados para
   * el panel lateral; en la tira tiene que ocupar todo el ancho */
  #viewerLayoutResizableLeftPanel > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
  }

  /* --- dentro del panel: solo la tira -------------------------------------- */
  #viewerLayoutResizableLeftPanel .bg-bkg-med,              /* cabecera "Estudios" */
  #viewerLayoutResizableLeftPanel .bg-muted.h-\[40px\],      /* fila lista/cuadricula */
  #viewerLayoutResizableLeftPanel button[data-state][aria-expanded] { /* fila del estudio */
    display: none !important;
  }
  /* La tira tiene que desplazarse ELLA. Sin esto no se movia de lado: el
   * ScrollArea de Radix envuelve el contenido en un div con "display: table;
   * min-width: 100%", y una tabla crece hasta su contenido, asi que la lista
   * y todos sus ancestros median 1074px (medido) y el overflow-x:auto de la
   * lista no tenia nada que desplazar; el recorte lo hacia mas arriba el
   * viewport del ScrollArea con "overflow: hidden scroll". Se pasa ese div a
   * block al 100% para que la cadena entera mida lo que la pantalla, y la
   * lista, ya mas estrecha que su contenido, desplaza por si misma. */
  #viewerLayoutResizableLeftPanel [data-radix-scroll-area-viewport] {
    overflow: hidden !important;
  }
  #ohif-thumbnail-list {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 4px 6px;
  }
  /* Flechas de la tira (las crea custom.js). Van sobre los bordes del panel
   * con un degradado del color del panel, para que se lea que la tira sigue.
   * Fuera de este media query estan ocultas (regla mas abajo). */
  #viewerLayoutResizableLeftPanel {
    position: relative;
  }
  .visor-tira-flecha {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    z-index: 5;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #19d7e5;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  /* El atributo hidden lo pone el JS cuando no hay mas series hacia ese lado.
   * Su display:none viene de la hoja del navegador, que pierde contra el
   * display:flex de la clase de arriba; sin esta regla se veian siempre las
   * dos flechas. */
  .visor-tira-flecha[hidden] {
    display: none;
  }
  .visor-tira-flecha--izq {
    left: 0;
    background: linear-gradient(to right, #0c1219 55%, rgba(12, 18, 25, 0));
  }
  .visor-tira-flecha--der {
    right: 0;
    background: linear-gradient(to left, #0c1219 55%, rgba(12, 18, 25, 0));
  }
  .visor-tira-flecha::before {
    content: '\2039'; /* ‹ */
    font-weight: 700;
    text-shadow: 0 0 8px rgba(25, 215, 229, 0.55);
  }
  .visor-tira-flecha--der::before {
    content: '\203A'; /* › */
  }
  .visor-tira-flecha:active::before {
    transform: scale(0.85);
  }

  /* tarjetas compactas: 100 de ancho, imagen de 90x90 */
  #viewerLayoutResizableLeftPanel [data-cy^='study-browser-thumbnail'] {
    width: 100px !important;
    height: 146px !important;
    flex: 0 0 auto;
  }
  #viewerLayoutResizableLeftPanel [data-cy^='study-browser-thumbnail'] .h-\[114px\] {
    height: 90px !important;
    width: 90px !important;
  }
  #viewerLayoutResizableLeftPanel [data-cy^='study-browser-thumbnail'] .w-\[128px\] {
    width: 90px !important;
  }
}

/* Las flechas de la tira solo tienen sentido en pantalla estrecha; el JS las
 * crea siempre pero aqui se ocultan salvo dentro del media query de arriba. */
@media (min-width: 641px) {
  .visor-tira-flecha {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * 5. GANCHOS ESTABLES
 *
 * Estos selectores NO son clases de Tailwind hasheadas, así que sobreviven a
 * un rebuild del bundle. Son los únicos que conviene usar.
 *
 *   #viewerLayoutResizablePanelGroup       contenedor del layout
 *   #viewerLayoutResizableLeftPanel        panel de estudios/series
 *   #viewerLayoutResizableRightPanel       panel de mediciones/segmentación
 *   #viewerLayoutResizableViewportGridPanel  grilla de viewports
 *   #ohif-thumbnail-list                   lista de miniaturas
 *   [data-cy="Zoom"], [data-cy="Pan"], ... cada botón de la barra
 *   [data-series="..."]                    fila de una serie
 *   .viewport-overlay                      textos sobre la imagen (W/L, fecha)
 *
 * Ejemplos (descomentar para usar):
 * ------------------------------------------------------------------------- */

/* Ocultar un botón concreto de la barra de herramientas */
/* [data-cy="TrackballRotate"] { display: none; } */

/* Ancho inicial del panel izquierdo */
/* #viewerLayoutResizableLeftPanel { min-width: 260px; } */

/* Tipografía de toda la interfaz (no afecta a la imagen) */
/* html { font-family: "Inter", system-ui, sans-serif; } */

/* Textos superpuestos sobre la imagen: color y tamaño sí, posición con cuidado */
/* .viewport-overlay { font-size: 13px; } */

/* ---------------------------------------------------------------------------
 * 6. ZONA ROJA — esto sí rompe el visor
 *
 * El canvas se dimensiona por ResizeObserver y las herramientas (medir, W/L,
 * zoom) convierten coordenadas de ratón a píxeles usando getBoundingClientRect
 * de .viewport-element. Cualquier regla que altere esa geometría descuadra las
 * mediciones o deja la imagen en negro:
 *
 *   NO  transform / scale / zoom / rotate sobre .viewport-wrapper,
 *       .cornerstone-viewport-element, .viewport-element o cualquier ancestro
 *       -> el clic deja de caer donde se ve; las mediciones salen desplazadas.
 *
 *   NO  display:none sobre esos contenedores para "ocultar" un viewport
 *       -> queda 0x0, Cornerstone deja de renderizar y no siempre se recupera.
 *           Usar visibility u opacity si hace falta.
 *
 *   NO  padding / border / box-sizing sobre .viewport-element
 *       -> el canvas y el área de eventos dejan de coincidir.
 *
 *   NO  position: static sobre .viewport-wrapper o .viewport-element
 *       -> el canvas es absolute y los overlays se despegan.
 *
 *   NO  overflow: visible en los contenedores del viewport.
 *
 *   NO  tocar canvas.cornerstone-canvas (ni width/height, ni transform).
 *       Lo dibuja Cornerstone; el CSS solo lo desincroniza.
 * ------------------------------------------------------------------------- */