/*
 * Tema del visor OHIF con la paleta del RIS (modo oscuro de la aplicación).
 * Nginx lo inyecta en el index.html del visor; no requiere recompilar OHIF.
 * El visor se mantiene oscuro (lectura radiológica); cambian acentos y paneles.
 *
 * Paleta RIS:  primario #1565C0 · primario (oscuro) #64B5F6 · secundario #00897B
 *              superficies del modo oscuro: #121212 / #1E1E1E / #212121
 */

/* --- Variables del tema nuevo de OHIF (valores HSL sin "hsl()") --- */
:root,
.dark {
  --background: 0 0% 4%;
  --foreground: 0 0% 96%;
  --card: 0 0% 11%;
  --card-foreground: 0 0% 96%;
  --popover: 0 0% 13%;
  --popover-foreground: 0 0% 96%;
  --primary: 210 80% 46%; /* botones: azul RIS */
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 18%;
  --secondary-foreground: 207 70% 85%;
  --muted: 0 0% 13%;
  --muted-foreground: 207 20% 70%;
  --accent: 210 45% 22%;
  --accent-foreground: 0 0% 98%;
  --highlight: 207 89% 68%; /* herramienta activa y textos destacados: #64B5F6 */
  --border: 0 0% 20%;
  --input: 0 0% 24%;
  --ring: 207 89% 68%;
  --neutral: 207 12% 60%;
  --neutral-light: 207 60% 82%;
  --neutral-dark: 0 0% 20%;
}

/* --- Clases con colores fijos del tema antiguo --- */
.bg-primary-dark { background-color: #121212 !important; }
.bg-primary-main { background-color: #1565c0 !important; }
.bg-primary-light { background-color: #64b5f6 !important; }
.bg-secondary-dark { background-color: #1e1e1e !important; }
.bg-secondary-main { background-color: #263238 !important; }
.bg-secondary-light { background-color: #37474f !important; }
.bg-customblue-30 { background-color: #1a2733 !important; }
.bg-customblue-40 { background-color: #1f3142 !important; }
.bg-inputfield-placeholder { background-color: #2b2b2b !important; }

.border-primary-dark { border-color: #121212 !important; }
.border-primary-main { border-color: #1565c0 !important; }
.border-primary-light { border-color: #64b5f6 !important; }
.border-primary-active { border-color: #42a5f5 !important; }
.border-secondary-main { border-color: #37474f !important; }
.border-secondary-light { border-color: #455a64 !important; }
.border-inputfield-main { border-color: #424242 !important; }

.text-primary-dark { color: #121212 !important; }
.text-primary-main { color: #1565c0 !important; }
.text-primary-light { color: #64b5f6 !important; }
.text-primary-active { color: #42a5f5 !important; }
.text-secondary-light { color: #90a4ae !important; }
.text-aqua-pale { color: #90caf9 !important; }

/* Fondo general y barras */
body,
#root {
  background-color: #0a0a0a;
}

/* --- Pantallas angostas (tablet y teléfono) ---
 * La barra superior de OHIF posiciona logo, herramientas y paciente de forma absoluta y se superponen.
 * En pantallas angostas pasa a una fila: logo | herramientas (con desplazamiento horizontal) | paciente. */
@media (max-width: 1023px) {
  .relative.h-\[48px\] {
    display: flex !important;
    align-items: center;
    gap: 4px;
  }
  .relative.h-\[48px\] > .absolute {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
  }
  .relative.h-\[48px\] > .left-1\/2 {
    flex: 1 1 auto !important;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .relative.h-\[48px\] > .left-1\/2::-webkit-scrollbar { display: none; }
  .relative.h-\[48px\] > .left-1\/2 > div { justify-content: flex-start !important; width: max-content; }
  /* "Patient": solo el ícono */
  .relative.h-\[48px\] > .right-0 .text-\[13px\] { display: none; }
  [data-cy='return-to-work-list'] { margin-right: 4px !important; }
}

@media (max-width: 599px) {
  [data-cy='return-to-work-list'] a { font-size: 13px !important; }
  /* Textos sobre la imagen más chicos para no taparla */
  .viewport-overlay { font-size: 11px !important; }
}