/* CSS ultra agresivo para sobrescribir OHIF */

/* Sobrescribir colores específicos de Tailwind en miniaturas */
aside button.bg-primary-purple,
aside button[class*="bg-primary"],
aside .bg-primary-purple,
aside .bg-blue,
aside [class*="bg-blue"],
.btn-primary,
[class*="bg-primary"] {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Borde de miniaturas - cambiar a #8942e1 */
aside button.border-primary-active,
aside button[class*="border-primary"],
aside .border-primary-active,
aside .border-primary-light,
aside [class*="border-primary"],
.border-primary-light,
button[class*="border-"] {
  border-color: #8942e1 !important;
}

/* Específico para tw-border-opacity */
[class*="tw-border-opacity"],
.tw-border-opacity-1 {
  --tw-border-opacity: 1 !important;
}

/* Texto y elementos con bg-blue o text-blue - fondo transparente */
aside .text-blue-300,
aside [class*="text-blue"],
aside div.flex[class*="text-blue"],
.text-blue-300,
[class*="text-blue"] {
  background-color: transparent !important;
}

/* FORZAR fondo negro en botones de miniaturas */
aside button,
aside [role="button"],
button.btn-primary {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a2a2a !important;
}

/* Miniatura activa/seleccionada con borde #8942e1 */
aside button[class*="active"],
aside button.border-primary-active,
aside [aria-selected="true"],
aside [class*="selected"] {
  border: 2px solid #8942e1 !important;
  box-shadow: 0 0 8px #8942e1 !important;
  background-color: #000000 !important;
}

/* Panel lateral general */
aside,
aside > div,
aside section {
  background-color: #0a0a0a !important;
}

/* Excepciones: imágenes y canvas */
aside img,
aside canvas {
  background: transparent !important;
}

/* Cambiar TODOS los bordes celestes inline a #8942e1 */
[style*="border-color: rgb(0, 188, 227)"],
[style*="border-color: rgb(0, 188"],
[style*="border-color: rgb(0,188"],
[style*="border-color: cyan"],
[style*="border-color: aqua"],
[style*="border: 3px solid rgb(0"],
[style*="border: 2px solid rgb(0"],
[style*="border: 3px solid rgb"],
[style*="border: 2px solid rgb"],
div[style*="border"][style*="rgb"],
canvas[style*="border"],
[style*="outline"][style*="rgb"] {
  border-color: #8942e1 !important;
  outline-color: #8942e1 !important;
}

/* Viewport activo y elementos con outline */
div[data-viewport-uid][style*="border"],
div[data-viewport-uid][style*="outline"],
[style*="outline: 2px"],
[style*="outline: 3px"] {
  border-color: #8942e1 !important;
  outline-color: #8942e1 !important;
  border-width: 3px !important;
}

/* Scrollbar de OHIF */
.ohif-scrollbar::-webkit-scrollbar-thumb {
  background-color: #291739 !important;
}

/* Textos en morado */
/* Textos azules a morado */
.text-blue-300,
.text-aqua-pale,
.text-primary-light,
[class*="text-blue"],
[class*="text-aqua"],
[class*="text-primary"] {
  color: var(--text-purple-light) !important;
}

/* Textos de información y datos */
aside span,
aside p,
aside div:not([role="button"]) {
  color: var(--text-purple-main) !important;
}

/* Headers y títulos */
h1, h2, h3, h4, h5, h6,
[class*="text-lg"],
[class*="text-xl"] {
  color: var(--text-purple-light) !important;
}

/* Links */
a,
[class*="text-primary"],
.text-primary {
  color: var(--text-purple-main) !important;
}

a:hover {
  color: var(--text-purple-light) !important;
}