/* Barra de scroll de la casa para TODO elemento con scroll propio, sin tener que
   acordarse de darle estilo a cada lista o modal nuevo: sin esto, el navegador pinta
   su barra clara del sistema, que sobre el fondo oscuro queda como un remiendo blanco.
   - :where() deja la especificidad al mínimo, así que cualquier regla propia de una
     página (#participant-list, .admin-tabs con display:none...) sigue mandando.
   - html y body quedan fuera: en Mac la barra de la página es superpuesta, y estilarla
     la volvería fija y restaría ancho a todo el contenido.
   - Solo con ratón: en táctil la barra ya es superpuesta y fina; estilarla en Android
     la haría fija y restaría ancho a las listas.
   - scrollbar-color va solo a Firefox: Chrome ignora ::-webkit-scrollbar en cuanto un
     elemento lo lleva. */
@media (hover: hover) and (pointer: fine) {
  :where(:not(html, body))::-webkit-scrollbar { width: 8px; height: 8px; }
  :where(:not(html, body))::-webkit-scrollbar-track,
  :where(:not(html, body))::-webkit-scrollbar-corner { background: transparent; }
  :where(:not(html, body))::-webkit-scrollbar-thumb { background: var(--border2, rgba(128, 128, 128, .45)); border-radius: 999px; }
  :where(:not(html, body))::-webkit-scrollbar-thumb:hover { background: var(--muted, rgba(128, 128, 128, .7)); }

  @supports not selector(::-webkit-scrollbar) {
    :where(:not(html, body)) { scrollbar-width: thin; scrollbar-color: var(--border2, rgba(128, 128, 128, .45)) transparent; }
  }
}