/* =========================================================================
   Login — Visor de Proyectos Nestlé
   Hoja independiente: esta pantalla no carga Tabler, se dibuja completa aquí.
   ========================================================================= */

:root {
    --lg-ink: #12100e;
    /* Papel cálido, no blanco clínico: junto al espresso del panel oscuro, el
       #fff puro se leía azulado. */
    --lg-paper: #fdfcfa;
    --lg-field: #f7f4f0;
    --lg-field-active: #ffffff;
    --lg-text: #17140f;
    --lg-muted: #6c635a;
    --lg-line: #e6e0d8;
    --lg-line-strong: #d5cdc2;
    --lg-red: #e31e24;
    --lg-red-dark: #b7181d;
    --lg-cream: #f3e7da;
    --lg-dim: #b7aca0;

    --lg-radius: 12px;
    --lg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Métricas del recurso de respaldo ajustadas a las de Inter: mientras la fuente
   web carga, el texto no cambia de tamaño al intercambiarse. */
@font-face {
    font-family: 'Inter respaldo';
    src: local('Arial');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    font-family: 'Inter', 'Inter respaldo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--lg-text);
    background: var(--lg-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(227, 30, 36, 0.18);
    color: var(--lg-text);
}

/* -------------------------------------------------------------------------
   Estructura
   ------------------------------------------------------------------------- */

.lg {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
    .lg {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------
   Panel de marca (oscuro)
   ------------------------------------------------------------------------- */

.lg-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Se eleva sobre el panel claro y proyecta sombra en la división: el corte
       deja de ser una línea impresa y pasa a tener profundidad. */
    z-index: 1;
    box-shadow: 26px 0 64px -32px rgba(18, 16, 14, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 5vw, 4.25rem);
    color: #fff;
    background: var(--lg-ink);
}

/* Luz ambiental: brasa cálida arriba a la izquierda, verde de bosque abajo. */
.lg-brand::before {
    content: '';
    position: absolute;
    inset: -25%;
    z-index: -2;
    background:
        radial-gradient(46% 40% at 8% 30%, rgba(227, 30, 36, 0.42), transparent 70%),
        radial-gradient(54% 50% at 82% 20%, rgba(164, 117, 81, 0.34), transparent 72%),
        radial-gradient(62% 56% at 34% 98%, rgba(27, 94, 32, 0.42), transparent 72%);
    filter: blur(6px);
}

/* Curvas de nivel: el terreno que el visor mapea. */
.lg-terrain {
    position: absolute;
    inset: -8% -12% -12% -18%;
    z-index: -1;
    background: url('../img/login-terrain.svg') no-repeat center / cover;
    opacity: 0.28;
    /* La animación se declara junto al resto del movimiento, más abajo. */
}

/* Parallax: el terreno responde al puntero con un desplazamiento máximo de
   unos 14px. Se aplica en una capa envolvente para no pelear con la deriva
   lenta, que sigue viviendo en .lg-terrain. */
.lg-parallax {
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translate3d(calc(var(--lg-px, 0) * 14px), calc(var(--lg-py, 0) * 10px), 0);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

@keyframes lg-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-3.5%, -2.5%, 0) scale(1.07); }
}

.lg-brand ::selection {
    background: rgba(243, 231, 218, 0.26);
    color: #fff;
}

/* Fila institucional: Plan Nescafé · Nestlé · Fundación COHONDUCAFÉ.
   Las alturas están igualadas por peso óptico, no por altura literal: cada
   marca tiene una proporción muy distinta. */
.lg-lockup {
    display: flex;
    align-items: center;
    gap: clamp(0.875rem, 2vw, 1.25rem);
}

.lg-lockup img {
    width: auto;
    flex: none;
}

.lg-lockup__plan { height: clamp(1.875rem, 4.6vw, 2.3rem); }
.lg-lockup__nestle { height: clamp(2.125rem, 5vw, 2.5rem); }
.lg-lockup__fcoh { height: clamp(1.25rem, 2.9vw, 1.45rem); }

.lg-lockup__rule {
    flex: none;
    width: 1px;
    height: 1.75rem;
    background: rgba(243, 231, 218, 0.22);
}

/* Marca, titular y bajada forman un solo grupo. La proximidad es lo que los
   relaciona; separarlos entre las esquinas del panel los volvía tres cosas
   sueltas flotando sobre el fondo. */
.lg-brand__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2rem, 4vw, 3.25rem);
    max-width: 40rem;
}

.lg-display {
    margin: 0;
    font-weight: 600;
    font-size: clamp(2.5rem, 4.8vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.038em;
    text-wrap: balance;
}

.lg-lede {
    margin: 1.125rem 0 0;
    max-width: 32ch;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--lg-dim);
}

/* Salida al sitio de los proyectos. El subrayado va atenuado en reposo para
   que se lea como enlace, y la flecha se mueve en su propia diagonal al pasar
   el cursor: el gesto anticipa que la página se abre fuera del visor. */
.lg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--lg-cream);
    text-decoration: none;
    transition: color 0.18s ease;
}

.lg-link__text {
    border-bottom: 1px solid rgba(243, 231, 218, 0.34);
    padding-bottom: 2px;
    transition: border-color 0.22s ease;
}

.lg-link__arrow {
    flex: none;
    width: 1rem;
    height: 1rem;
    transition: transform 0.32s var(--lg-ease);
}

.lg-link:hover .lg-link__text {
    border-bottom-color: var(--lg-cream);
}

.lg-link:hover .lg-link__arrow {
    transform: translate(3px, -3px);
}

.lg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lg-foot__note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--lg-muted);
}

/* La versión se muestra para que soporte pueda pedirla sin adivinar. */
.lg-foot__version {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #8b8178;
}

/* -------------------------------------------------------------------------
   Panel del formulario (claro)
   ------------------------------------------------------------------------- */

.lg-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.25rem, 5vw, 4.25rem);
    background: var(--lg-paper);
}

/* Eco del terreno en el lado claro: las mismas curvas siguen su recorrido al
   cruzar la división, así las dos mitades se leen como una sola página y no
   como dos pantallas pegadas. El SVG se reutiliza como máscara, de modo que el
   color lo pone el CSS y no hace falta una segunda copia del archivo. */
@supports ((mask-image: url('../img/login-terrain.svg')) or (-webkit-mask-image: url('../img/login-terrain.svg'))) {
    .lg-panel::before {
        content: '';
        position: absolute;
        inset: -35% -12% -35% -60%;
        z-index: -1;
        background: var(--lg-ink);
        opacity: 0.055;
        -webkit-mask: url('../img/login-terrain.svg') no-repeat left center / cover;
        mask: url('../img/login-terrain.svg') no-repeat left center / cover;
    }
}

.lg-panel__inner {
    width: 100%;
    /* Formulario un 12% más ancho y el bloque desplazado hacia arriba: el
       usuario encuentra antes dónde escribir. */
    max-width: 28rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 62rem) {
    .lg-panel__inner {
        margin-bottom: 4.5rem;
    }
}

.lg-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.027em;
    line-height: 1.15;
}

.lg-helper {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    color: var(--lg-muted);
}

.lg-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.lg-field {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

.lg-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #423b33;
    transition: color 0.16s ease;
}

/* La etiqueta se oscurece al enfocar: refuerza dónde está el cursor sin añadir
   otro elemento a la pantalla. */
.lg-field:focus-within .lg-label {
    color: var(--lg-text);
}

.lg-input {
    width: 100%;
    height: 3.25rem;
    padding: 0 1rem;
    font: inherit;
    /* 16px exactos: por debajo de esa medida iOS hace zoom al enfocar. */
    font-size: 1rem;
    color: var(--lg-text);
    /* En reposo el campo va un punto por debajo del papel; al enfocarlo sube a
       blanco. La activación se siente además de verse. */
    background: var(--lg-field);
    border: 1px solid var(--lg-line-strong);
    border-radius: var(--lg-radius);
    box-shadow: 0 1px 2px rgba(23, 20, 15, 0.04);
    caret-color: var(--lg-red);
    transition: border-color 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.lg-input:hover {
    border-color: #c4b9ab;
}

/* Al enfocar el campo sube a blanco y despega del papel con una sombra suya,
   no sólo con el anillo de color. */
.lg-input:focus {
    outline: none;
    background: var(--lg-field-active);
    border-color: var(--lg-red);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.13), 0 4px 12px rgba(23, 20, 15, 0.06);
}

/* Autorrelleno de Chrome: por defecto pinta un azul que rompe la paleta. */
.lg-input:-webkit-autofill,
.lg-input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--lg-text);
    -webkit-box-shadow: 0 0 0 100px var(--lg-field) inset;
    caret-color: var(--lg-red);
}

.lg-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--lg-field-active) inset, 0 0 0 3px rgba(227, 30, 36, 0.13);
}

/* Mensaje bajo el campo: nombra qué falta en ese campo concreto. El aviso
   general de arriba se reserva para cuando el servidor rechaza el par. */
.lg-field__msg {
    margin: 0.4375rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #a3181d;
    animation: lg-hint-in 0.24s var(--lg-ease) both;
}

.lg-field__msg[hidden] {
    display: none;
}

.lg-field--error .lg-input {
    border-color: var(--lg-red);
    background: #fdf5f4;
}

/* Contraseña + botón de visibilidad */
.lg-password {
    position: relative;
    display: flex;
}

.lg-password .lg-input {
    padding-right: 3.5rem;
}

.lg-reveal {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8b8178;
    cursor: pointer;
    transition: color 0.16s ease, background-color 0.16s ease;
}

.lg-reveal:hover {
    color: var(--lg-text);
    background: rgba(23, 20, 15, 0.05);
}

.lg-reveal:active {
    transform: translateY(-50%) scale(0.92);
}

/* Los dos iconos se superponen y hacen crossfade: cambiarlos con display
   producía un salto seco justo donde el usuario está mirando. */
.lg-reveal svg {
    grid-area: 1 / 1;
    width: 1.125rem;
    height: 1.125rem;
    transition: opacity 0.18s ease, transform 0.22s var(--lg-ease);
}

.lg-reveal .lg-icon-off {
    opacity: 0;
    transform: scale(0.7);
}

.lg-reveal[aria-pressed='true'] .lg-icon-on {
    opacity: 0;
    transform: scale(0.7);
}

.lg-reveal[aria-pressed='true'] .lg-icon-off {
    opacity: 1;
    transform: none;
}

/* Aviso de Bloq Mayús */
.lg-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--lg-muted);
    animation: lg-hint-in 0.24s var(--lg-ease) both;
}

.lg-hint[hidden] {
    display: none;
}

.lg-hint svg {
    flex: none;
    width: 1rem;
    height: 1rem;
}

@keyframes lg-hint-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

/* Aviso de error en línea */
.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6875rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #8f1418;
    background: rgba(227, 30, 36, 0.07);
    border: 1px solid rgba(227, 30, 36, 0.22);
    border-radius: 10px;
    animation: lg-alert-in 0.32s var(--lg-ease) both;
}

.lg-alert[hidden] {
    display: none;
}

.lg-alert svg {
    flex: none;
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: 0.0625rem;
}

@keyframes lg-alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Recordar sesión */
.lg-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #423b33;
    cursor: pointer;
    user-select: none;
}

.lg-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lg-check__box {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--lg-field-active);
    border: 1px solid var(--lg-line-strong);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(23, 20, 15, 0.04);
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.lg-check__box svg {
    width: 0.75rem;
    height: 0.75rem;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.16s ease, transform 0.22s var(--lg-ease);
}

.lg-check:hover .lg-check__box {
    border-color: #c4b9ab;
}

.lg-check input:checked + .lg-check__box {
    background: var(--lg-red);
    border-color: var(--lg-red);
}

.lg-check input:checked + .lg-check__box svg {
    opacity: 1;
    transform: none;
}

.lg-check input:focus-visible + .lg-check__box {
    outline: 2px solid var(--lg-red);
    outline-offset: 2px;
}

/* Botón principal */
.lg-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3.25rem;
    margin-top: 0.25rem;
    padding: 0 1.25rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: #fff;
    background: var(--lg-red);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(183, 24, 29, 0.22);
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s var(--lg-ease), box-shadow 0.22s ease;
}

.lg-submit:hover {
    background: var(--lg-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(183, 24, 29, 0.7);
}

.lg-submit:active {
    transform: translateY(0);
    box-shadow: none;
}

.lg-submit:disabled {
    cursor: progress;
    background: var(--lg-red-dark);
    opacity: 0.72;
    transform: none;
    box-shadow: none;
}

/* El spinner siempre ocupa su hueco; en reposo está invisible y el bloque se
   desplaza media medida para que la etiqueta quede centrada. Así el cambio a
   "cargando" es transform y opacidad, sin tocar el layout. */
.lg-submit__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* El spinner mide 1.0625rem más 0.5rem de separación; correr el bloque la
       mitad de esa suma deja la etiqueta centrada en el botón mientras el
       spinner está invisible. */
    transform: translateX(-0.78rem);
    transition: transform 0.26s var(--lg-ease);
}

.lg-submit__spinner {
    flex: none;
    width: 1.0625rem;
    height: 1.0625rem;
    opacity: 0;
    transition: opacity 0.26s ease;
    animation: lg-spin 0.8s linear infinite;
}

.lg-submit[aria-busy='true'] .lg-submit__inner {
    transform: none;
}

.lg-submit[aria-busy='true'] .lg-submit__spinner {
    opacity: 1;
}

@keyframes lg-spin {
    to { transform: rotate(360deg); }
}

/* Credenciales rechazadas: un solo desplazamiento amortiguado, no un temblor.
   Confirma que el envío ocurrió y que la respuesta fue negativa. */
.lg-form.is-rejected {
    animation: lg-reject 0.42s var(--lg-ease) both;
}

@keyframes lg-reject {
    0%   { transform: translateX(0); }
    18%  { transform: translateX(-7px); }
    42%  { transform: translateX(5px); }
    68%  { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

/* Pie: aviso institucional + versión */
.lg-foot {
    padding-top: 1.5rem;
    border-top: 1px solid var(--lg-line);
}

/* Selector de idioma anclado arriba a la derecha: deja de leerse como parte
   del pie y pasa a ser un ajuste de la pantalla, donde se espera encontrarlo. */
.lg-lang {
    position: absolute;
    top: clamp(1.5rem, 3.5vw, 2.5rem);
    right: clamp(1.5rem, 3.5vw, 2.5rem);
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 3px;
    background: var(--lg-field);
    border: 1px solid var(--lg-line);
    border-radius: 10px;
}

.lg-lang__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 2.75rem;
    height: calc(100% - 6px);
    background: var(--lg-field-active);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(23, 20, 15, 0.14);
    /* El cambio de idioma ya no recarga la página, así que este recorrido se
       ve completo: el indicador viaja de un lado al otro. */
    transition: transform 0.42s var(--lg-ease);
}

.lg-lang[data-active='en'] .lg-lang__thumb {
    transform: translateX(100%);
}

.lg-lang a {
    position: relative;
    z-index: 1;
    width: 2.75rem;
    padding: 0.4375rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--lg-muted);
    text-decoration: none;
    transition: color 0.24s ease;
}

.lg-lang a:hover,
.lg-lang a[aria-current='true'] {
    color: var(--lg-text);
}

/* -------------------------------------------------------------------------
   Foco visible — un solo tratamiento en toda la pantalla
   ------------------------------------------------------------------------- */

.lg :focus-visible {
    outline: 2px solid var(--lg-red);
    outline-offset: 2px;
    border-radius: 6px;
}

.lg-input:focus-visible {
    outline: none;
}

.lg-brand :focus-visible {
    outline-color: var(--lg-cream);
}

/* -------------------------------------------------------------------------
   Entrada escalonada
   ------------------------------------------------------------------------- */

/* Entrada: el desenfoque hace que los elementos se resuelvan en vez de sólo
   deslizarse, y la curva exponencial frena casi todo el recorrido al principio. */
.lg-reveal-up {
    animation: lg-up 0.85s var(--lg-ease) both;
}

@keyframes lg-up {
    from { opacity: 0; transform: translateY(16px); filter: blur(9px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

.lg-d1 { animation-delay: 0.04s; }
.lg-d2 { animation-delay: 0.12s; }
.lg-d3 { animation-delay: 0.2s; }
.lg-d4 { animation-delay: 0.27s; }
.lg-d5 { animation-delay: 0.34s; }
.lg-d6 { animation-delay: 0.41s; }

/* El terreno se asienta una vez y luego queda en la deriva lenta. */
.lg-terrain {
    animation:
        lg-terrain-in 1.6s var(--lg-ease) both,
        lg-drift 48s var(--lg-ease) 1.6s infinite alternate;
}

@keyframes lg-terrain-in {
    from { opacity: 0; transform: scale(1.14); }
    to   { opacity: 0.28; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .lg-submit:hover,
    .lg-reveal:active {
        transform: none;
    }

    .lg-reveal:active {
        transform: translateY(-50%);
    }
}

/* -------------------------------------------------------------------------
   Móvil: el panel de marca se vuelve una franja de cabecera
   ------------------------------------------------------------------------- */

@media (max-width: 61.999rem) {
    .lg-brand {
        gap: 1.75rem;
        padding-block: 2.25rem 2.5rem;
        /* Apilado, la sombra cae hacia abajo, no hacia el costado. */
        box-shadow: 0 26px 56px -34px rgba(18, 16, 14, 0.7);
    }

    .lg-display {
        font-size: clamp(1.75rem, 6.8vw, 2.25rem);
    }

    .lg-lede {
        margin-top: 0.625rem;
        font-size: 0.9375rem;
    }

    /* El selector vive en la esquina del panel claro; apilado necesita su
       propia banda o se monta sobre el título. */
    .lg-panel {
        padding-block: 5rem 2.25rem;
    }

    .lg-lang {
        top: 1.75rem;
    }
}

/* -------------------------------------------------------------------------
   Punteros gruesos: ningún control baja de 44px
   ------------------------------------------------------------------------- */

@media (pointer: coarse) {
    .lg-reveal {
        width: 2.75rem;
        height: 2.75rem;
    }

    .lg-password .lg-input {
        padding-right: 3.375rem;
    }

    /* El indicador deslizante se mide sobre el enlace, así que crece con él. */
    .lg-lang a {
        width: 3rem;
        padding-block: 0.75rem;
    }

    .lg-lang__thumb {
        width: 3rem;
    }
}

/* -------------------------------------------------------------------------
   Superficies del navegador
   ------------------------------------------------------------------------- */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--lg-line-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: var(--lg-line-strong);
    border: 3px solid var(--lg-paper);
    border-radius: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}