@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Features/Portfolio/Components/PinnedPortfolioBar.razor.rz.scp.css */
/*
 * La barra mide 44px de alto y los items ya la ocupan por completo: una barra de
 * scroll nativa recortaría los items. El desplazamiento queda a cargo del trackpad,
 * del arrastre y del mapeo rueda -> horizontal registrado desde el code-behind.
 */
.pinned-portfolio-viewport[b-vubfkcah3i] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pinned-portfolio-viewport[b-vubfkcah3i]::-webkit-scrollbar {
    display: none;
}

/* Insinúa que hay más instrumentos fuera del área visible. */
.pinned-portfolio-viewport--overflowing[b-vubfkcah3i] {
    mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
}

/*
 * Cada mitad del track lleva su propio gap interno más un margen derecho propio,
 * de modo que el ancho total es 2 x (mitad + margen). Así translateX(-50%)
 * desplaza exactamente una mitad completa y la costura del loop es invisible.
 */
.pinned-portfolio-track--marquee[b-vubfkcah3i] {
    animation-name: pinned-portfolio-marquee-b-vubfkcah3i;
    animation-duration: var(--pinned-marquee-duration, 30s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.pinned-portfolio-track--marquee:hover[b-vubfkcah3i],
.pinned-portfolio-viewport:focus-within .pinned-portfolio-track--marquee[b-vubfkcah3i] {
    animation-play-state: paused;
}

@keyframes pinned-portfolio-marquee-b-vubfkcah3i {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/*
 * El code-behind ya apaga el marquee cuando el sistema pide menos movimiento, pero lee esa
 * preferencia una sola vez al iniciar. Esta regla cubre los dos casos que se le escapan:
 * que el usuario cambie el ajuste con la app abierta, y que la consulta por interop falle.
 */
@media (prefers-reduced-motion: reduce) {
    .pinned-portfolio-track--marquee[b-vubfkcah3i] {
        animation: none;
    }
}
/* /Shared/Layout/MainLayout.razor.rz.scp.css */
.market-navigation__categories[b-72h4yil4ir] {
    overflow-x: auto;
}

@media (min-width: 768px) {
    .market-navigation[b-72h4yil4ir] {
        flex-direction: row;
        height: 2.5rem;
        align-items: center;
    }

    .market-navigation__categories[b-72h4yil4ir] {
        overflow-x: visible;
    }

    .market-navigation__context[b-72h4yil4ir] {
        border-top-width: 0;
    }
}