/* ============================================================
 *  DIBAL UIX v1.0 – OverlayScrollbars Override (corporativo)
 *  Aplica sobre los temas os-theme-light / os-theme-dark
 * ============================================================ */

/* Tamaño y posición generales del scrollbar */
.dibal-theme .os-theme-light > .os-scrollbar-horizontal,
.dibal-theme .os-theme-dark > .os-scrollbar-horizontal {
    height: 8px;
    right: 4px;
}

.dibal-theme .os-theme-light > .os-scrollbar-vertical,
.dibal-theme .os-theme-dark > .os-scrollbar-vertical {
    width: 8px;
    bottom: 4px;
}

/* Ajuste RTL */
.dibal-theme .os-theme-light.os-host-rtl > .os-scrollbar-horizontal,
.dibal-theme .os-theme-dark.os-host-rtl > .os-scrollbar-horizontal {
    left: 4px;
    right: 0;
}

/* Esquina (corner) */
.dibal-theme .os-theme-light > .os-scrollbar-corner,
.dibal-theme .os-theme-dark > .os-scrollbar-corner {
    height: 8px;
    width: 8px;
    background-color: transparent;
}

/* Track base – sin fondo grueso */
.dibal-theme .os-theme-light > .os-scrollbar,
.dibal-theme .os-theme-dark > .os-scrollbar {
    padding: 2px;
    box-sizing: border-box;
    background: transparent;
}

/* Track interior */
.dibal-theme .os-theme-light > .os-scrollbar > .os-scrollbar-track,
.dibal-theme .os-theme-dark > .os-scrollbar > .os-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

/* Handle mínimo (tamaño del “thumb”) */
.dibal-theme .os-theme-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
.dibal-theme .os-theme-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    min-width: 30px;
}

.dibal-theme .os-theme-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
.dibal-theme .os-theme-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    min-height: 30px;
}

/* Transición suave de color al hover */
.dibal-theme .os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.dibal-theme .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    transition: background-color .25s ease, box-shadow .25s ease;
}

/* Forma general del handle */
.dibal-theme .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.dibal-theme .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    border-radius: 999px;
}

/* ===========================
 *  LIGHT – fondos claros (contenido, body)
 * =========================== */

/* Estado normal */
.dibal-theme .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(148, 163, 184, 0.55);      /* gris medio */
}

/* Hover */
.dibal-theme .os-theme-light > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
    background: var(--dibal-primary);
    box-shadow: 0 0 0 2px rgba(37,157,205,0.25);
}

/* Activo (drag) */
.dibal-theme .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: var(--dibal-primary-dark);
    box-shadow: 0 0 0 2px rgba(4,128,190,0.30);
}

/* ===========================
 *  DARK – fondos oscuros (sidebar, paneles oscuros)
 * =========================== */

/* Track sobre fondo oscuro: una leve pista */
.dibal-theme .os-theme-dark > .os-scrollbar > .os-scrollbar-track {
    background: rgba(15, 23, 42, 0.35);
}

/* Estado normal */
.dibal-theme .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(243, 244, 246, 0.65);      /* gris muy claro */
}

/* Hover */
.dibal-theme .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
    background: var(--dibal-primary-light);
}

/* Activo (drag) */
.dibal-theme .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: #ffffff;
}

/* ===========================
 *  Área de click expandida del handle
 *  (pseudoelemento que ya trae el plugin)
 * =========================== */

.dibal-theme .os-theme-light > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.dibal-theme .os-theme-dark  > .os-scrollbar-horizontal .os-scrollbar-handle:before {
    top: -6px;
    bottom: -2px;
}

.dibal-theme .os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before,
.dibal-theme .os-theme-dark  > .os-scrollbar-vertical .os-scrollbar-handle:before {
    left: -6px;
    right: -2px;
}

/* Ocultar pseudo cuando no hay scroll */
.dibal-theme .os-theme-light.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.dibal-theme .os-theme-light.os-host-scrollbar-vertical-hidden   > .os-scrollbar-vertical   .os-scrollbar-handle:before,
.dibal-theme .os-theme-dark.os-host-scrollbar-horizontal-hidden  > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.dibal-theme .os-theme-dark.os-host-scrollbar-vertical-hidden    > .os-scrollbar-vertical   .os-scrollbar-handle:before {
    display: none;
}