:root{
    --color-scrollbar: #D3D3D4;
    --color-background-scrollbar: #eee;
}


.content__page {
    overflow-y: auto;
    max-height: 300px;
}

/* ------------------ Firefox ------------------ */
/* Estas reglas afectan SOLO a Firefox */
.content__page {
    scrollbar-width: thin;                            /* thin / auto / none */
    scrollbar-color: var(--color-secondary) transparent; /* thumb color, track color */
}

/* ------------------ WebKit (Chrome, Edge, Safari) ------------------ */
/* Chrome/Edge usan ::-webkit-scrollbar pseudo-elements */
.content__page::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}

.content__page::-webkit-scrollbar-track {
    background: transparent;
    margin: 0; /* importante: no ocultar la barra */
}

.content__page::-webkit-scrollbar-thumb {
    background: var(--color-secondary); /* usa tu azul */
    border-radius: 40px;
    border: 3px solid transparent;
}

/* estado hover (Chrome) */
.content__page::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
    opacity: 0.9;
}


/* El contenedor debe permitir scroll */
.layout__aside {
    overflow-y: auto;
    max-height: 100vh; /* o el alto que corresponda */
}

/* ------------------ Firefox ------------------ */
.layout__aside {
    scrollbar-width: thin;
    /* thumb color, track color (track transparente) */
    scrollbar-color: var(--color-principal) transparent;
}

/* ------------------ WebKit (Chrome, Edge, Safari) ------------------ */
.layout__aside::-webkit-scrollbar {
    width: 12px;               /* ancho en px (no %!) */
    background: transparent;
}

.layout__aside::-webkit-scrollbar-track {
    background: transparent;
    margin: 0;                 /* important: no usar márgenes que oculten la barra */
}

/* Thumb: visible por defecto, con borde redondeado */
.layout__aside::-webkit-scrollbar-thumb {
    background: var(--color-principal);
    border-radius: 40px;
    border: 3px solid transparent; /* para mantener separación redondeada */
    box-shadow: none;
    transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

/* Hover sobre el área del aside (cambia apariencia del thumb) */
.layout__aside:hover::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0 3px rgba(0,0,0,0.06); /* sutil */
    opacity: 1;
}

/* Hover directo sobre el thumb (puede intensificar efecto) */
.layout__aside::-webkit-scrollbar-thumb:hover {
    border: 8px solid transparent; /* 8px, corregido */
    box-shadow: inset 0 0 0 4px var(--color-principal); /* efecto de relleno */
}