/* BarberTop · barra de desplazamiento estilo cadena (usada por cadena.js) */
.cadena-caja { position: relative; min-width: 0; }
.cadena-caja > .con-cadena { overflow-x: auto; scrollbar-width: none; }
.cadena-caja > .con-cadena::-webkit-scrollbar { display: none; }
.cadena-caja > .con-cadena-v { overflow-y: auto; scrollbar-width: none; }
.cadena-caja > .con-cadena-v::-webkit-scrollbar { display: none; }
.cadena-barra { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cadena-riel { position: relative; flex: 1; height: 12px; cursor: pointer; touch-action: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Crect x='1.5' y='2.5' width='13' height='7' rx='3.5' fill='none' stroke='%239C9285' stroke-opacity='.35' stroke-width='1.6'/%3E%3Cline x1='14.5' y1='6' x2='22' y2='6' stroke='%239C9285' stroke-opacity='.35' stroke-width='1.6'/%3E%3C/svg%3E") left center / 22px 12px repeat-x; }
.cadena-lleno { position: absolute; top: 0; bottom: 0; left: 0; width: 44px; border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Crect x='1.5' y='2.5' width='13' height='7' rx='3.5' fill='none' stroke='%23D9BC80' stroke-opacity='1' stroke-width='1.6'/%3E%3Cline x1='14.5' y1='6' x2='22' y2='6' stroke='%23D9BC80' stroke-opacity='1' stroke-width='1.6'/%3E%3C/svg%3E") left center / 22px 12px repeat-x;
  filter: drop-shadow(0 0 4px rgba(201,166,96,.55)); transition: left .08s linear; }
.cadena-flecha { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(201,166,96,.35); background: rgba(13,12,11,.75);
  color: #D9BC80; cursor: pointer; font: 700 16px/1 system-ui, sans-serif; display: grid; place-items: center; padding: 0; }
.cadena-flecha:hover:not(:disabled) { border-color: #C9A660; box-shadow: 0 0 10px rgba(201,166,96,.35); }
.cadena-flecha:disabled { opacity: .3; cursor: default; }
.cadena-caja.sin-scroll .cadena-barra { display: none; }
/* vertical: la cadena va a la derecha */
.cadena-caja.v { display: grid; grid-template-columns: 1fr 34px; gap: 8px; }
.cadena-caja.v .cadena-barra { flex-direction: column; margin: 0; height: 100%; max-height: inherit; }
.cadena-caja.v .cadena-riel { width: 12px; height: auto; flex: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22' viewBox='0 0 12 22'%3E%3Crect x='2.5' y='1.5' width='7' height='13' rx='3.5' fill='none' stroke='%239C9285' stroke-opacity='.35' stroke-width='1.6'/%3E%3Cline x1='6' y1='14.5' x2='6' y2='22' stroke='%239C9285' stroke-opacity='.35' stroke-width='1.6'/%3E%3C/svg%3E") center top / 12px 22px repeat-y; }
.cadena-caja.v .cadena-lleno { left: 0; right: 0; width: auto; top: 0; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22' viewBox='0 0 12 22'%3E%3Crect x='2.5' y='1.5' width='7' height='13' rx='3.5' fill='none' stroke='%23D9BC80' stroke-opacity='1' stroke-width='1.6'/%3E%3Cline x1='6' y1='14.5' x2='6' y2='22' stroke='%23D9BC80' stroke-opacity='1' stroke-width='1.6'/%3E%3C/svg%3E") center top / 12px 22px repeat-y; transition: top .08s linear; }
.cadena-caja.v.sin-scroll { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .cadena-lleno { transition: none; } }

/* Barra de desplazamiento nativa con forma de cadena (Chrome, Edge, Safari).
   Aplica a la página, a las ventanas y a toda lista con scroll. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: rgba(13,12,11,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22' viewBox='0 0 12 22'%3E%3Crect x='2.5' y='1.5' width='7' height='13' rx='3.5' fill='none' stroke='%239C9285' stroke-opacity='.35' stroke-width='1.6'/%3E%3Cline x1='6' y1='14.5' x2='6' y2='22' stroke='%239C9285' stroke-opacity='.35' stroke-width='1.6'/%3E%3C/svg%3E") center top / 12px 22px repeat-y; }
::-webkit-scrollbar-track:horizontal { background: rgba(13,12,11,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Crect x='1.5' y='2.5' width='13' height='7' rx='3.5' fill='none' stroke='%239C9285' stroke-opacity='.35' stroke-width='1.6'/%3E%3Cline x1='14.5' y1='6' x2='22' y2='6' stroke='%239C9285' stroke-opacity='.35' stroke-width='1.6'/%3E%3C/svg%3E") left center / 22px 12px repeat-x; }
::-webkit-scrollbar-thumb { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22' viewBox='0 0 12 22'%3E%3Crect x='2.5' y='1.5' width='7' height='13' rx='3.5' fill='none' stroke='%23D9BC80' stroke-opacity='1' stroke-width='1.6'/%3E%3Cline x1='6' y1='14.5' x2='6' y2='22' stroke='%23D9BC80' stroke-opacity='1' stroke-width='1.6'/%3E%3C/svg%3E") center top / 12px 22px repeat-y; border-radius: 7px; min-height: 44px;
  box-shadow: inset 0 0 0 1px rgba(201,166,96,.25); }
::-webkit-scrollbar-thumb:horizontal { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Crect x='1.5' y='2.5' width='13' height='7' rx='3.5' fill='none' stroke='%23D9BC80' stroke-opacity='1' stroke-width='1.6'/%3E%3Cline x1='14.5' y1='6' x2='22' y2='6' stroke='%23D9BC80' stroke-opacity='1' stroke-width='1.6'/%3E%3C/svg%3E") left center / 22px 12px repeat-x; min-width: 44px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(201,166,96,.12); }
::-webkit-scrollbar-corner { background: transparent; }
/* Flechas de subir/bajar de la barra: un eslabón con flecha dorada */
::-webkit-scrollbar-button:single-button { display: block; width: 14px; height: 20px; background: rgba(13,12,11,.75) center / 12px 18px no-repeat; }
::-webkit-scrollbar-button:single-button:horizontal { width: 20px; height: 14px; background-size: 18px 12px; }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18'%3E%3Cpath d='M2.5 7.5 6 3.5l3.5 4' fill='none' stroke='%23D9BC80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='3.5' y='10' width='5' height='7' rx='2.5' fill='none' stroke='%23C9A660' stroke-width='1.4'/%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' width='12' height='18' viewBox='0 0 12 18'%3E%3Crect x='3.5' y='1' width='5' height='7' rx='2.5' fill='none' stroke='%23C9A660' stroke-width='1.4'/%3E%3Cpath d='M2.5 10.5 6 14.5l3.5-4' fill='none' stroke='%23D9BC80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%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' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M7.5 2.5 3.5 6l4 3.5' fill='none' stroke='%23D9BC80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='10' y='3.5' width='7' height='5' rx='2.5' fill='none' stroke='%23C9A660' stroke-width='1.4'/%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' width='18' height='12' viewBox='0 0 18 12'%3E%3Crect x='1' y='3.5' width='7' height='5' rx='2.5' fill='none' stroke='%23C9A660' stroke-width='1.4'/%3E%3Cpath d='M10.5 2.5 14.5 6l-4 3.5' fill='none' stroke='%23D9BC80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:hover { background-color: rgba(201,166,96,.22); }
::-webkit-scrollbar-button:single-button:active { background-color: rgba(201,166,96,.4); }
::-webkit-scrollbar-button:double-button { display: none; }
/* Firefox no permite dibujos en la barra: queda dorada y delgada */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-color: #C9A660 rgba(13,12,11,.4); scrollbar-width: thin; } }