/* Carriles rápidos del Mercado — PROTOTIPO VISUAL (ver
 * `templates/components/mercado/_quick_filters.html.twig`).
 *
 * Full-bleed como `.board-rail`: el carril llega al borde en vez de quedar
 * cortado 16px adentro por el gutter de la pantalla, así se ve que hay más
 * chips a la derecha sin tener que empujarlos.
 *
 * Reutiliza el idioma de `.mk-echip` (escudo + nombre, píldora) para que los
 * recientes se lean como los chips de entidad que ya existen en el modal — es
 * la MISMA cosa, y que se parezcan no es decoración, es que el usuario
 * reconozca lo que está tocando.
 */
@layer components {
    .mk-quick {
        margin-block: 4px 10px;
    }

    /* En modo filtrado el carril DESAPARECE, igual que el marquee, el board y
       las pestañas. Esa pantalla es una vista enfocada cuyo único mando es la
       barra de "Limpiar", y los atajos ahí sobran de dos maneras: Seguidos
       parecería otro filtro compitiendo con el que ya está puesto, y un
       reciente al lado del "Limpiar" invita a saltar a otra búsqueda desde una
       barra que existe para salir de esta.

       Va por la clase del body porque el carril vive FUERA del fragmento que se
       intercambia: `#paintMode` la conmuta en cada swap, así que entrar y salir
       de filtros no necesita recargar. */
    .mercado-filtered .mk-quick {
        display: none;
    }

    .mk-quick__rail {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        /* Full-bleed: sale del gutter y repone el padding por dentro, para que
           el primer chip quede alineado con el título y el último respire. */
        margin-inline: calc(var(--_gutter, 16px) * -1);
        padding-inline: var(--_gutter, 16px);
        scroll-padding-inline: var(--_gutter, 16px);
        -webkit-overflow-scrolling: touch;
    }

    .mk-quick__rail::-webkit-scrollbar { display: none; }

    .mk-quick__chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        padding: 4px 12px 4px 8px;
        min-block-size: 36px;
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--color-text);
        background: var(--color-surface-hover);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        cursor: pointer;
        white-space: nowrap;
        transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
        /* Tope de ancho: medido, los chips van de 100 a 187px con nombres
           cortos, así que un "Borussia Mönchengladbach · Traspasos" se comería
           el carril entero él solo. Se recorta el NOMBRE, nunca el segundo eje:
           esa letra pequeña es la que evita que el chip mienta sobre lo que
           restaura, y un "Real Madrid · Ces…" sería peor que no ponerla. */
        max-inline-size: min(220px, 62vw);
    }

    .mk-quick__chip:hover:not(:disabled) {
        border-color: var(--color-accent);
    }

    /* Seguidos en REPOSO es un chip como los demás: el acento significa
       "aplicado", y pintarlo de marca sin estar pulsado hacía creer que el feed
       ya venía acotado. El color es estado, no jerarquía — la jerarquía ya la
       da ir el primero y llevar separador.

       Tampoco la estrella lleva acento: en reposo NADA de esta píldora puede
       parecer encendido. El acento entra entero al pulsarla, y solo ahí. */
    .mk-quick__chip--follow {
        padding-inline-start: 10px;
    }

    /* Aplicado: ahí sí manda el acento, y el icono pasa a heredar para que la
       píldora se lea como UNA cosa encendida y no como un chip con una pegatina. */
    .mk-quick__chip--follow[aria-pressed="true"] {
        color: var(--color-bg);
        background: var(--color-accent);
        border-color: var(--color-accent);
    }

    .mk-quick__chip--follow[aria-pressed="true"] .mk-quick__icon {
        color: inherit;
    }

    /* Mientras el fragmento viaja: la píldora ya contestó (aria-pressed) pero
       el feed aún no ha llegado, así que se atenúa en vez de quedarse muda. */
    .mk-quick__chip--follow:disabled {
        opacity: 0.6;
        cursor: progress;
    }

    .mk-quick__icon {
        inline-size: 15px;
        block-size: 15px;
        flex: 0 0 auto;
    }

    /* El nombre es lo único elástico del chip: cede él para que el escudo y el
       segundo eje se mantengan enteros. `min-inline-size: 0` es obligatorio —
       sin él un hijo flex no baja de su contenido y el ellipsis no llega a
       aplicarse nunca. */
    .mk-quick__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-inline-size: 0;
    }

    .mk-quick__crest {
        inline-size: 22px;
        block-size: 22px;
        object-fit: contain;
        border-radius: 50%;
        flex: 0 0 auto;
    }

    /* El segundo eje de una búsqueda guardada. En secundario y sin negrita: la
       entidad es lo que reconoces, esto es la letra pequeña que evita que el
       chip mienta sobre lo que restaura. */
    .mk-quick__sub {
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--color-text-secondary);
        padding-inline-start: 5px;
        border-inline-start: 1px solid var(--color-border);
        margin-inline-start: 2px;
    }

    .mk-quick__icon--slot {
        inline-size: 18px;
        block-size: 18px;
        opacity: 0.65;
    }

    /* Cierre del carril: el embudo de siempre, en gris para que no compita con
       los recientes ni con Seguidos. Es una salida, no un atajo. */
    .mk-quick__chip--more {
        color: var(--color-text-secondary);
        background: transparent;
        border-style: dashed;
        padding-inline-start: 12px;
    }

    /* Transparente al layout: los recientes que inyecta el JS tienen que ser
       hijos DIRECTOS del flex del carril, o se apilarían dentro de este nodo. */
    .mk-quick__recents {
        display: contents;
    }

    /* Separador entre el atajo y los recientes: son dos ideas distintas —
       "lo mío" y "lo de antes"— y sin la pausa se leen como una lista sola. */
    .mk-quick__sep {
        flex: 0 0 auto;
        inline-size: 1px;
        block-size: 20px;
        background: var(--color-border);
    }
}