/* =========================================================================
   CITEM — Audition Book · De dónde salen las canciones
   La tabla de las cuatro variables del catálogo, con los chips de la app
   (.pill*, tokens --chip-* de campus), y el clip del catálogo al lado.
   ========================================================================= */

/* =======================================================================
   LP-FILTERS — Taxonomy Filter Table (S6)
   ======================================================================= */
.lp-filters {
    background: var(--c-carbon);
    padding: var(--spacing-xl) 0;
    color: var(--c-paper);
}

/* Header: título + lead alineados a la izquierda, bien proporcionados */
.lp-filters-header {
    margin-bottom: var(--spacing-xl);
}

.lp-filters-title {
    font-family: var(--font-heading);   /* --font-heading = Gobold (no existe --font-display) */
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;                   /* Gobold: único weight válido */
    text-transform: none;
    letter-spacing: -0.02em;
    line-height: var(--leading-display);
    color: var(--c-paper);
    margin: 0 0 var(--spacing-sm);
}

.lp-filters-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--c-text-muted-inverse);
    margin: 0;
}

.ab-filtros-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: center;
}

@media (min-width: 1024px) {
    .ab-filtros-split {
        grid-template-columns: 5fr 7fr;
    }
}

/* ── Filter Table ── */
/* 4 filas horizontales separadas por reglas estructurales */
.lp-ftable {
    border-top: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.2);
}

.lp-frow {
    display: grid;
    grid-template-columns: 3rem 14rem 1fr;
    align-items: center;
    gap: var(--spacing-md);
    padding: 1.25rem 0;
    border-bottom: var(--border-w-structural) solid rgb(var(--c-paper-rgb) / 0.12);
}

/* Número índice — pequeño, muted, anclaje visual */
.lp-findex {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 900;   /* Gobold: único weight válido */
    letter-spacing: 2px;
    color: var(--c-text-muted-inverse);
}

/* Nombre de dimensión — caps estructural, lectura limpia */
.lp-fname {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 900;   /* Gobold: único weight válido */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-text-muted-inverse);
}

/* Contenedor de pills — flex wrap */
.lp-fpills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Pills — los chips de taxonomía de la app (Manual §3.1, §5.7) ──
   La única excepción de color del sistema, y no se copia: los tokens
   --chip-<valor>-{fondo,tinta,borde} llegan de campus en /css/marca/tokens.css,
   generados de sus clases .chip-*. El fondo del chip es translúcido y está
   pensado sobre Papel, así que la pastilla lleva Papel debajo: se ve igual que
   en la app aunque la sección sea oscura. Borde de 1 px, 12 px de texto. */
.pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 900;   /* Gobold: único weight válido */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    color: var(--pill-tinta);
    background-color: var(--c-paper);
    background-image: linear-gradient(var(--pill-fondo), var(--pill-fondo));
    border: 1px solid var(--pill-borde);
}

.pill--chico { --pill-fondo: var(--chip-chico-fondo); --pill-tinta: var(--chip-chico-tinta); --pill-borde: var(--chip-chico-borde); }
.pill--chica { --pill-fondo: var(--chip-chica-fondo); --pill-tinta: var(--chip-chica-tinta); --pill-borde: var(--chip-chica-borde); }
.pill--ballad { --pill-fondo: var(--chip-ballad-fondo); --pill-tinta: var(--chip-ballad-tinta); --pill-borde: var(--chip-ballad-borde); }
.pill--midtempo { --pill-fondo: var(--chip-midtempo-fondo); --pill-tinta: var(--chip-midtempo-tinta); --pill-borde: var(--chip-midtempo-borde); }
.pill--uptempo { --pill-fondo: var(--chip-uptempo-fondo); --pill-tinta: var(--chip-uptempo-tinta); --pill-borde: var(--chip-uptempo-borde); }
.pill--legit { --pill-fondo: var(--chip-legit-fondo); --pill-tinta: var(--chip-legit-tinta); --pill-borde: var(--chip-legit-borde); }
.pill--belt { --pill-fondo: var(--chip-belt-fondo); --pill-tinta: var(--chip-belt-tinta); --pill-borde: var(--chip-belt-borde); }
.pill--abierto { --pill-fondo: var(--chip-abierto-fondo); --pill-tinta: var(--chip-abierto-tinta); --pill-borde: var(--chip-abierto-borde); }
.pill--poprock { --pill-fondo: var(--chip-poprock-fondo); --pill-tinta: var(--chip-poprock-tinta); --pill-borde: var(--chip-poprock-borde); }
.pill--comedia { --pill-fondo: var(--chip-comedia-fondo); --pill-tinta: var(--chip-comedia-tinta); --pill-borde: var(--chip-comedia-borde); }
.pill--drama { --pill-fondo: var(--chip-drama-fondo); --pill-tinta: var(--chip-drama-tinta); --pill-borde: var(--chip-drama-borde); }
.pill--familiar { --pill-fondo: var(--chip-familiar-fondo); --pill-tinta: var(--chip-familiar-tinta); --pill-borde: var(--chip-familiar-borde); }
.pill--inspiracional { --pill-fondo: var(--chip-inspiracional-fondo); --pill-tinta: var(--chip-inspiracional-tinta); --pill-borde: var(--chip-inspiracional-borde); }

/* Breakpoints → audition-book.responsive.css */

@media (max-width: 767px) {

    .lp-frow {
        grid-template-columns: 2.5rem 1fr;
        grid-template-rows: auto auto;
        gap: var(--spacing-sm) var(--spacing-md);
    }

    /* nombre: col 2, fila 1 */
    .lp-fname {
        grid-column: 2;
        grid-row: 1;
    }

    /* pills: col 2, fila 2 */
    .lp-fpills {
        grid-column: 2;
        grid-row: 2;
    }

    .lp-filters-title {
        font-size: clamp(1.4rem, 5vw, 2.2rem);
    }

    .lp-filters-lead {
        font-size: 0.9rem;
    }

    .lp-filters-header {
        margin-bottom: var(--spacing-lg);
    }
}

/* ── 7.2 Móvil pequeño ── */
@media (max-width: 479px) {

    .lp-frow {
        grid-template-columns: 1.75rem 1fr;
        /* Bug fix: era 1rem hardcoded. Reemplazado con token. */
        padding: var(--spacing-sm) 0;
        gap: var(--spacing-xs) var(--spacing-sm);
    }

    .lp-findex {
        font-size: 0.75rem;
    }

    .lp-fname {
        font-size: 0.75rem;
    }

    .pill {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
}