/* ESTILOS PARA BARRA DE DESPLAZAMIENTO ELEGANTE */

/* Estilos globales para todos los elementos con clase 'panel-media-scrollable' */
.panel-media-scrollable {
  overflow-y: scroll !important; /* Forzar la barra de desplazamiento siempre visible */
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  max-height: 600px !important; /* Altura mayor para incluir desde DEBUG hasta el final */
  scrollbar-gutter: stable; /* Mantener espacio cuando aparece scroll */
}

/* Estilos para la barra de desplazamiento - WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: #1f2937 !important; /* Fondo oscuro que coincide con el tema */
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
  background: #f97316 !important; /* Color naranja que coincide con los botones */
  border-radius: 4px !important;
  border: 1px solid #374151 !important; /* Borde oscuro */
}

::-webkit-scrollbar-thumb:hover {
  background: #ea580c !important; /* Naranja más oscuro al hover */
}

/* Estilos para la barra de desplazamiento - Firefox */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #f97316 #1f2937 !important; /* Color naranja y fondo oscuro */
}

/* Estilos para el contenedor de medios encontrados */
#medios-encontrados-container {
  border: 1px solid #515963 !important;
  border-radius: 0.75rem !important;
  position: relative !important;
  background: #1f2937 !important;
  padding: 1rem !important;
}

/* Mejorar la apariencia del panel cuando está activo */
#medios-encontrados-container.show {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Estilo para fade out cuando hay scroll */
#medios-encontrados-container::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 20px !important;
  pointer-events: none !important;
  border-radius: 0 0 0.75rem 0.75rem !important;
} 