/* ========================================================= */
/*  SCROLLBAR MINIMALISTA & TRANSLÚCIDA — ESTILO PRO 2025    */
/* ========================================================= */

/* Firefox + estándar */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 72, 68, 0.35) transparent; /* Thumb translúcido más elegante */
}

/* WebKit — Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track completamente etéreo */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Thumb con efecto de "vidrio ahumado" */
::-webkit-scrollbar-thumb {
    background: rgba(20, 72, 68, 0.25);        /* Verde profesional translúcido */
    backdrop-filter: blur(2px);                /* Efecto glass (soportado en navegadores que lo permiten) */
    -webkit-backdrop-filter: blur(2px);        /* Safari */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25); /* Contorno ultra sutil */
    transition: background 0.35s ease, border 0.35s ease;
}

/* Hover sutil pero elegante */
::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 72, 68, 0.42);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Esquina invisible */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Permite transparencia real en navegadores que lo soportan.
   Nota: `overflow: overlay` es no estándar y puede comportarse distinto entre navegadores.
   Si querés usarlo, mantenelo; si preferís evitar efectos inconsistentes, borralo. */
html {
    /* overflow: overlay;  /* Opcional y no estándar — descomentar si querés ese comportamiento */ 
}

/* Para evitar "saltos" si se usa ocultamiento dinámico de la scrollbar.
   Está comentado por compatibilidad; descomenta si lo necesitás. */
/*
body {
    scrollbar-gutter: stable;
}
*/