/* Barras de desplazamiento con función reconocible: flechas en los extremos, tirador con rayitas de agarre y color propio.
   El color del tirador se cambia en Configuración → Apariencia («Color del tirador de las barras de desplazamiento»). */
:root{--sb-thumb-h:var(--sb-thumb,#1d4ed8);--sb-thumb-a:var(--sb-thumb,#1d4ed8);--sb-riel:#e6edf8;--sb-borde:#b9c7de;--sb-grip:rgba(255,255,255,.92);--sb-tam:16px;--sb-b:3px;--sb-grip-l:6px}
@supports (color:color-mix(in srgb,red,blue)){:root{--sb-thumb-h:color-mix(in srgb,var(--sb-thumb,#1d4ed8) 78%,#000);--sb-thumb-a:color-mix(in srgb,var(--sb-thumb,#1d4ed8) 58%,#000)}}
@media (pointer:coarse){:root{--sb-tam:var(--sb-tam-t,32px);--sb-b:var(--sb-b-t,4px);--sb-grip-l:6px}}

/* Firefox: solo permite color y grosor */
@supports not selector(::-webkit-scrollbar){*{scrollbar-color:var(--sb-thumb,#1d4ed8) var(--sb-riel);scrollbar-width:auto}}

/* Chrome, Edge, Safari */
@supports selector(::-webkit-scrollbar){
  @media not (pointer:coarse){
  ::-webkit-scrollbar{width:var(--sb-tam);height:var(--sb-tam);background:var(--sb-riel)}
  ::-webkit-scrollbar-track{background:var(--sb-riel);box-shadow:inset 0 0 0 1px var(--sb-borde)}
  ::-webkit-scrollbar-corner{background:var(--sb-riel)}
  ::-webkit-scrollbar-thumb{background-color:var(--sb-thumb,#1d4ed8);border:var(--sb-b) solid var(--sb-riel);border-radius:99px;background-clip:padding-box;background-repeat:no-repeat;min-height:44px;min-width:44px}
  ::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-h)}
  ::-webkit-scrollbar-thumb:active{background-color:var(--sb-thumb-a)}
  /* rayitas de agarre (tres líneas claras en el centro del tirador) */
  ::-webkit-scrollbar-thumb:vertical{background-image:linear-gradient(var(--sb-grip),var(--sb-grip)),linear-gradient(var(--sb-grip),var(--sb-grip)),linear-gradient(var(--sb-grip),var(--sb-grip));background-size:var(--sb-grip-l) 2px;background-position:center calc(50% - 4px),center 50%,center calc(50% + 4px)}
  ::-webkit-scrollbar-thumb:horizontal{background-image:linear-gradient(var(--sb-grip),var(--sb-grip)),linear-gradient(var(--sb-grip),var(--sb-grip)),linear-gradient(var(--sb-grip),var(--sb-grip));background-size:2px var(--sb-grip-l);background-position:calc(50% - 4px) center,50% center,calc(50% + 4px) center}
  /* flechas en los extremos (solo con ratón; en pantallas táctiles no se usan) */
  @media (pointer:fine){
    ::-webkit-scrollbar-button:single-button{display:block;width:var(--sb-tam);height:var(--sb-tam);background-color:var(--sb-riel);background-repeat:no-repeat;background-position:center;background-size:10px 10px;box-shadow:inset 0 0 0 1px var(--sb-borde)}
    ::-webkit-scrollbar-button:single-button:hover{background-color:#d2def0}
    ::-webkit-scrollbar-button:single-button:active{background-color:#bccbe4}
    ::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2L9 8H1Z' fill='%23334155'/%3E%3C/svg%3E")}
    ::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 8L9 2H1Z' fill='%23334155'/%3E%3C/svg%3E")}
    ::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5L8 1V9Z' fill='%23334155'/%3E%3C/svg%3E")}
    ::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8 5L2 1V9Z' fill='%23334155'/%3E%3C/svg%3E")}
  }
  }
}
/* Pantallas táctiles: la barra de la PÁGINA queda nativa (en Android flota y se arrastra con facilidad); las barras de zonas internas son más gruesas */
@supports selector(::-webkit-scrollbar){
  @media (pointer:coarse){
    :not(html):not(body)::-webkit-scrollbar{width:var(--sb-tam);height:var(--sb-tam);background:var(--sb-riel)}
    :not(html):not(body)::-webkit-scrollbar-track{background:var(--sb-riel);box-shadow:inset 0 0 0 1px var(--sb-borde)}
    :not(html):not(body)::-webkit-scrollbar-corner{background:var(--sb-riel)}
    :not(html):not(body)::-webkit-scrollbar-thumb{background-color:var(--sb-thumb,#1d4ed8);border:var(--sb-b) solid var(--sb-riel);border-radius:99px;background-clip:padding-box;background-repeat:no-repeat;min-height:64px;min-width:64px}
    :not(html):not(body)::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-h)}
    :not(html):not(body)::-webkit-scrollbar-thumb:active{background-color:var(--sb-thumb-a)}
    :not(html):not(body)::-webkit-scrollbar-thumb:vertical{background-image:linear-gradient(var(--sb-grip),var(--sb-grip)),linear-gradient(var(--sb-grip),var(--sb-grip)),linear-gradient(var(--sb-grip),var(--sb-grip));background-size:var(--sb-grip-l) 2px;background-position:center calc(50% - 4px),center 50%,center calc(50% + 4px)}
    :not(html):not(body)::-webkit-scrollbar-thumb:horizontal{background-image:linear-gradient(var(--sb-grip),var(--sb-grip)),linear-gradient(var(--sb-grip),var(--sb-grip)),linear-gradient(var(--sb-grip),var(--sb-grip));background-size:2px var(--sb-grip-l);background-position:calc(50% - 4px) center,50% center,calc(50% + 4px) center}
  }
}
@supports not selector(::-webkit-scrollbar){@media (pointer:coarse){html{scrollbar-color:auto;scrollbar-width:auto}}}
/* con sombra lateral y aviso «Deslice», estas zonas se mueven con el dedo: sin barra visible */
@media (pointer:coarse){[data-scx]{scrollbar-width:none}[data-scx]::-webkit-scrollbar{display:none}}
@media (forced-colors:active){::-webkit-scrollbar-thumb{background-color:ButtonText}}

/* Pantallas táctiles y angostas: sombra lateral donde hay más contenido + aviso de «deslice» (ver scroll_ayuda.js) */
@media (pointer:coarse),(max-width:900px){
  [data-scx][data-sc="inicio"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  [data-scx][data-sc="medio"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  [data-scx][data-sc="fin"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px);mask-image:linear-gradient(to right,transparent,#000 28px)}
}
.sc-hint{display:block;width:max-content;max-width:100%;margin:.25rem 0 .35rem;padding:.2rem .7rem;border-radius:99px;background:var(--sb-thumb,#1d4ed8);color:#fff;font-size:.78rem;font-weight:600;line-height:1.4}
@media print{.sc-hint{display:none!important}[data-scx]{-webkit-mask-image:none!important;mask-image:none!important}}
