/* ═══════════════════════════════════════════════════════════════
   css-filters-panel.css
   Filtros avanzados: chips activos, panel, sliders de rango doble, incompletos granular, dropdown personalizado, groupby wrapper.
   (Parte de styles.css — el orden de <link> respeta la cascada original)
   ═══════════════════════════════════════════════════════════════ */

    /* ── FILTROS AVANZADOS ── */

    .filters-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 1.05rem; height: 1.05rem;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0.22rem;
    background: var(--accent-car); color: var(--bg-base);
    border-radius: 999px;
    font-family: 'Space Mono', monospace; font-size: 0.6rem; font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bg-surface);
    }

    /* ── FILA DE CHIPS DE FILTROS ACTIVOS ── */
    .active-filters-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0 0.1rem;
    }
    .active-filters-row #activeFiltersChips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    }
    .af-chip {
    display: flex; align-items: center; gap: 0.35rem;
    background: var(--bg-element); border: 1px solid var(--border-bright);
    border-radius: 999px; padding: 0.28rem 0.4rem 0.28rem 0.65rem;
    font-size: 0.7rem; color: var(--text-primary);
    font-family: 'Outfit', inherit;
    }
    .af-chip .af-x {
    display: flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    color: var(--text-secondary); cursor: pointer; font-size: 0.7rem; line-height: 1;
    transition: color var(--transition), background var(--transition);
    }
    .af-chip .af-x:hover { color: var(--accent-red); background: rgba(255,77,106,0.12); }
    .af-clear {
    font-size: 0.7rem; color: var(--text-secondary); cursor: pointer;
    text-decoration: underline; font-family: 'Outfit', inherit;
    background: none; border: none; padding: 0;
    }
    .af-clear:hover { color: var(--text-primary); }

    /* ── PANEL DE FILTROS AVANZADOS ── */
    .filters-panel {
    margin-top: 0.6rem;
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.6rem;
    }
    .fp-group { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
    .fp-group.full { grid-column: 1 / -1; }
    .fp-label {
    font-family: 'Space Mono', monospace; font-size: 0.62rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);
    }
    .fp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
    .fp-chip {
    display: inline-flex; align-items: center; gap: 0.32rem;
    font-size: 0.7rem; padding: 0.28rem 0.55rem;
    border-radius: 999px; background: var(--bg-hover);
    border: 1px solid var(--border-bright); color: var(--text-secondary);
    cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition);
    font-family: 'Outfit', inherit;
    }
    .fp-chip:hover { color: var(--text-primary); border-color: var(--border-glow); }
    .fp-chip.sel {
    background: var(--accent-car-dim); border-color: var(--accent-car);
    color: var(--accent-car);
    }
    .fp-chip .fp-count { font-family: 'DM Mono', monospace; font-size: 0.6rem; opacity: 0.65; }
    .fp-swatches { display: flex; flex-wrap: wrap; gap: 0.45rem; }
    .fp-swatch {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--border-bright); cursor: pointer;
    transition: border-color var(--transition), transform 0.16s var(--ease-spring);
    }
    .fp-swatch:hover { transform: scale(1.12); }
    .fp-swatch.sel { border-color: var(--accent-car); box-shadow: 0 0 0 2px var(--accent-car-dim); }

    /* sliders de rango doble */
    .fp-range { position: relative; height: 28px; margin-top: 0.2rem; }
    .fp-range-track { position: absolute; top: 12px; left: 0; right: 0; height: 3px; background: var(--border-bright); border-radius: 2px; }
    .fp-range-fill { position: absolute; top: 12px; height: 3px; background: var(--accent-car); border-radius: 2px; }
    .fp-range input[type="range"] {
    position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 28px;
    margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
    }
    .fp-range input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto; -webkit-appearance: none; width: 14px; height: 14px;
    border-radius: 50%; background: var(--text-primary); border: 2px solid var(--accent-car);
    cursor: pointer; margin-top: 9px;
    }
    .fp-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-primary); border: 2px solid var(--accent-car); cursor: pointer;
    }
    .fp-range-labels {
    display: flex; justify-content: space-between;
    font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--text-secondary);
    }

    /* incompletos granular */
    .fp-check-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
    .fp-check {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; color: var(--text-secondary); cursor: pointer;
    font-family: 'Outfit', inherit;
    }
    .fp-check input { accent-color: var(--accent-car); cursor: pointer; }
    .fp-check:hover { color: var(--text-primary); }

    .fp-footer {
    grid-column: 1 / -1; display: flex; justify-content: flex-end;
    border-top: 1px solid var(--border-color); padding-top: 0.6rem; margin-top: 0.1rem;
    }
    .fp-clear {
    font-size: 0.72rem; color: var(--text-secondary); background: none; border: none;
    cursor: pointer; text-decoration: underline; font-family: 'Outfit', inherit;
    }
    .fp-clear:hover { color: var(--accent-red); }

    @media (max-width: 760px) {
    .filters-panel { grid-template-columns: 1fr; }
    }

    /* ── DROPDOWN PERSONALIZADO ── */
    .select-wrap { position: relative; display: inline-flex; align-items: center; }
    .select-wrap::after {
    content: '';
    position: absolute;
    right: 0.78rem;
    width: 8px; height: 8px;
    border-right: 1.6px solid var(--text-secondary);
    border-bottom: 1.6px solid var(--text-secondary);
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
    transition: border-color var(--transition), opacity var(--transition);
    }
    .select-wrap:hover::after { border-color: var(--text-primary); }
    .select-modern {
    appearance: none;
    -webkit-appearance: none;
    height: 34px;
    box-sizing: border-box;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: 'Outfit', inherit;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0 2.05rem 0 0.78rem;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
    }
    .select-modern:hover { border-color: var(--border-bright); }
    .select-modern:focus { border-color: var(--accent-car); box-shadow: 0 0 0 3px rgba(77,159,255,0.12); }
    .select-modern:disabled { opacity: 0.4; cursor: not-allowed; }
    .select-wrap:has(.select-modern:disabled)::after { opacity: 0.4; }

    /* ── GROUPBY WRAPPER (icono + select unidos) ── */
    .groupby-wrap {
        display: inline-flex;
        align-items: stretch;
        height: 34px;
    }
    .groupby-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.42rem 0 0.48rem;
        background: var(--bg-base);
        border: 1px solid var(--border-color);
        border-right: none;
        border-radius: 9px 0 0 9px;
        color: var(--text-secondary);
        flex-shrink: 0;
        transition: color var(--transition);
    }
    .groupby-wrap:hover .groupby-icon,
    .groupby-wrap:focus-within .groupby-icon {
        color: var(--text-primary);
        border-color: var(--border-bright);
    }
    .groupby-wrap .select-wrap::after { right: 0.72rem; }
    .groupby-wrap .select-modern {
        border-radius: 0 9px 9px 0;
    }
    .groupby-wrap:focus-within .select-modern {
        border-color: var(--accent-car);
        box-shadow: 0 0 0 3px rgba(77,159,255,0.12);
    }