/*
 * Rail horizontal: la fila de chips que en el telefono se navega con el dedo.
 * ---------------------------------------------------------------------------
 * Una barra de lentes o de filtros activos envuelve a dos o tres lineas en una
 * pantalla de 375px y empuja la lista fuera de la vista: el usuario entra al
 * listado y lo primero que ve son los filtros, no sus socios. Aqui la barra
 * pasa a una sola linea que se desplaza en horizontal, como las pestanas de
 * Gmail o los chips de YouTube.
 *
 * En escritorio NO hay rail: sobra el ancho, y un carrusel donde cabe todo solo
 * esconde opciones. El rail se vuelve `display: contents`, asi que sus chips
 * pasan a ser hijos directos del grupo y la barra envuelve como siempre.
 *
 * Estructura esperada:
 *
 *   <div class="athena-rail-group">     grupo: envuelve en escritorio
 *     <span class="athena-rail-pin">    (opcional) no se desplaza nunca
 *     <div class="athena-rail">         lo que se desplaza en movil
 *       ...chips...
 *     <button class="athena-rail-pin">  (opcional) ej. la pill "Mas"
 *
 * Los `pin` quedan FUERA del scroll a proposito: la pill "Mas" es la puerta al
 * resto de lentes, y una puerta que hay que buscar desplazando no es una
 * puerta.
 *
 * Los degradados de los bordes dicen que hay mas chips a ese lado. Se pintan
 * con `mask-image` (no con un overlay de color) para no tener que adivinar el
 * fondo del tema, y las clases `can-scroll-*` las pone athena-rail.js. Sin JS
 * no hay degradado, pero el desplazamiento sigue funcionando.
 */

.athena-rail-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--athena-rail-gap, 0.4rem);
    min-width: 0;
}

/* Escritorio: el rail desaparece como caja y sus chips entran en el grupo. */
.athena-rail {
    display: contents;
}

.athena-rail-pin {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .athena-rail-group {
        flex-wrap: nowrap;
    }

    .athena-rail {
        display: flex;
        flex: 1 1 auto;
        /* Sin esto, un flex item no baja de su contenido y el rail se lleva la
           pagina entera al ancho de todos los chips (scroll horizontal del
           body, el sintoma clasico). */
        min-width: 0;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--athena-rail-gap, 0.4rem);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        /* La barra de desplazamiento se oculta: el degradado ya dice que hay mas. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .athena-rail::-webkit-scrollbar {
        display: none;
    }

    .athena-rail > * {
        flex: 0 0 auto;
    }

    /* Degradado solo del lado que tiene chips escondidos. */
    .athena-rail.can-scroll-start,
    .athena-rail.can-scroll-end {
        -webkit-mask-image: linear-gradient(
            to right,
            var(--athena-rail-fade-start, #000) 0,
            #000 var(--athena-rail-fade-size, 1.5rem),
            #000 calc(100% - var(--athena-rail-fade-size, 1.5rem)),
            var(--athena-rail-fade-end, #000) 100%
        );
        mask-image: linear-gradient(
            to right,
            var(--athena-rail-fade-start, #000) 0,
            #000 var(--athena-rail-fade-size, 1.5rem),
            #000 calc(100% - var(--athena-rail-fade-size, 1.5rem)),
            var(--athena-rail-fade-end, #000) 100%
        );
    }

    .athena-rail.can-scroll-start { --athena-rail-fade-start: transparent; }
    .athena-rail.can-scroll-end { --athena-rail-fade-end: transparent; }
}

/* Quien no quiera animaciones tampoco quiere el desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
    .athena-rail {
        scroll-behavior: auto;
    }
}