/* ════════════════════════════════════════════════════════════════════
   DrakLive · barras de scroll (2026-10-19)
   ------------------------------------------------------------------
   El feed de videos NO muestra barra (el scroll sigue con rueda, teclado,
   gestos y las flechas ▲▼). Todo lo demás —menú lateral, comentarios,
   mensajes, selectores y paneles— lleva una barra fina de 8 px, con el
   riel transparente y el pulgar gris azulado translúcido y redondeado,
   que se aclara al pasar el mouse.

   · Solo en pantallas con mouse (hover + puntero fino): en el teléfono
     los navegadores ya usan barras que flotan y no ocupan ancho; ponerles
     estilo las haría «clásicas» y le quitaría ancho al diseño.
   · Chrome/Edge/Safari usan ::-webkit-scrollbar (permite redondear y el
     efecto hover). Firefox no lo conoce: usa scrollbar-width y
     scrollbar-color. Se separan con @supports porque Chrome ≥121 IGNORA
     ::-webkit-scrollbar si encuentra scrollbar-color.
   · Los colores salen de la variable --gris del sitio (o el valor
     de respaldo); --sb-pulgar y --sb-pulgar-hover se pueden cambiar por
     tema sin tocar nada más.
   · scrollbar-gutter: stable en las listas que se desplazan, así el
     contenido no se corre al aparecer o desaparecer la barra.
   ════════════════════════════════════════════════════════════════════ */
:root{--sb-w:8px;--sb-pulgar:rgba(159,176,187,.30);--sb-pulgar-hover:rgba(159,176,187,.62)}
@supports (color:color-mix(in srgb,red,blue)){
  :root{
    --sb-pulgar:color-mix(in srgb,var(--gris,#9fb0bb) 32%,transparent);
    --sb-pulgar-hover:color-mix(in srgb,var(--gris,#9fb0bb) 64%,transparent);
  }
}

/* El feed: sin barra, en todos los dispositivos. Sigue desplazándose igual. */
#feed{scrollbar-width:none;-ms-overflow-style:none}
#feed::-webkit-scrollbar{display:none;width:0;height:0}

@media (hover:hover) and (pointer:fine){
  /* Firefox */
  @supports not selector(::-webkit-scrollbar){
    *{scrollbar-width:thin;scrollbar-color:var(--sb-pulgar) transparent}
    #feed{scrollbar-width:none}
  }
  /* Chrome, Edge, Safari */
  @supports selector(::-webkit-scrollbar){
    *::-webkit-scrollbar{width:var(--sb-w);height:var(--sb-w);background:transparent}
    *::-webkit-scrollbar-track{background:transparent}
    *::-webkit-scrollbar-corner{background:transparent}
    *::-webkit-scrollbar-thumb{
      background:var(--sb-pulgar);border:1px solid transparent;background-clip:padding-box;
      border-radius:99px;min-height:40px;min-width:40px}
    *::-webkit-scrollbar-thumb:hover,*::-webkit-scrollbar-thumb:active{
      background:var(--sb-pulgar-hover);border:1px solid transparent;background-clip:padding-box}
    #feed::-webkit-scrollbar{display:none;width:0;height:0}
  }
  /* Las listas que se desplazan reservan su sitio: el contenido no salta. */
  #lateral,#perfil,#estad,.hojaAj,.hojaCom .lista,.hojaCon .lista,.hojaMira .mLista,
  .charVivo .ccuerpo,.compLista,.visor .pie,.wz .wzpistas,#lateral_panel,.lateralPanel{
    scrollbar-gutter:stable}
}