/* SUS360 Painel Cirurgias v0.8.0 — filter-bar */

        /* ═══════ HIDE UF/FILTERS when Dados is active ═══════ */
        .uf-bar.view-dados,
        .filter-bar.view-dados {
            opacity: 0.3;
            pointer-events: none;
            filter: grayscale(0.8);
            transition: opacity 0.25s ease, filter 0.25s ease;
        }
        /* ═══════ FILTER BAR — 2 colunas ═══════ */
        .filter-bar {
            background:var(--bg-card); border-bottom:1px solid var(--border-color);
            box-shadow:0 1px 3px rgba(0,0,0,0.06);
            padding:12px 32px; font-size:13px;
            position:fixed !important;
            top:calc(var(--topbar-1) + var(--topbar-2)) !important;
            left:0 !important; right:0 !important;
            height:var(--topbar-3) !important;
            z-index:999 !important;
        }
        .filter-bar-split {
            display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center;
            justify-content:center;
            max-width:1400px; margin:0 auto;
        }
        .fb-group {
            display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
            min-width:0;
        }
        .fb-label {
            font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase;
            letter-spacing:0.6px; white-space:nowrap; display:flex; align-items:center; gap:4px;
            padding:4px 10px 4px 8px; border-radius:var(--radius-full);
            background:color-mix(in srgb, var(--text-muted) 8%, transparent);
        }
        .fb-label i { font-size:13px; opacity:0.7; }
        .fb-sep {
            width:1px; height:24px; background:var(--border-color); opacity:0.5;
            flex-shrink:0; align-self:center;
        }
        @media (max-width:900px) {
            .fb-sep { display:none; }
            .fb-label { display:none; }
        }
        .filter-select {
            padding:8px 32px 8px 14px; border:1px solid var(--border-color); border-radius:var(--radius-full);
            font-size:13px; font-weight:500; background-color:var(--bg-body); color:var(--text-primary);
            color-scheme:light dark; cursor:pointer; appearance:none; -webkit-appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
            background-repeat:no-repeat; background-position:right 12px center;
            transition:border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
            max-width:220px; text-overflow:ellipsis; line-height:1.3;
        }
        .filter-select option { background:var(--bg-card); color:var(--text-primary); padding:6px 12px; }
        .filter-select:hover { border-color:color-mix(in srgb, var(--sus-blue) 40%, var(--border-color)); }
        .filter-select:focus { outline:none; border-color:var(--sus-blue); box-shadow:0 0 0 3px rgba(0,102,204,0.12); }
        .filter-select.has-value { border-color:var(--sus-blue); background-color:rgba(0,102,204,0.06); font-weight:600; }
        .filter-dot { width:3px; height:3px; border-radius:50%; background:var(--border-color); flex-shrink:0; }
        .filter-label { font-size:11px; font-weight:600; color:var(--text-muted); white-space:nowrap; letter-spacing:0.01em; }

        /* ═══════ YEAR PILLS — mesma borda/arredondamento do comp-dropdown ═══════ */
        .year-pills {
            display: inline-flex;
            align-items: center;
            gap: 0;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
        }
        .year-pill {
            width: 38px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-right: 1px solid var(--border-color);
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            background: transparent;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            line-height: 1;
            white-space: nowrap;
        }
        .year-pill:last-child { border-right: none; }
        .year-pill:hover { background: rgba(0,102,204,0.06); color: var(--sus-blue); }
        .year-pill.in-range { background: rgba(0,102,204,0.06); color: var(--sus-blue); }
        .year-pill.active { background: var(--sus-blue); color: white; }
        .year-pill.active + .year-pill { }

        /* ═══════ FILTER CATEGORIES ═══════ */
        .filter-group { display:flex; align-items:center; gap:6px; }
        .filter-cat { font-size:9px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; opacity:0.7; }
        .filter-sep { width:1px; height:22px; background:var(--border-color); flex-shrink:0; margin:0 4px; }
        @media (max-width:768px) {
            .filter-cat { display:none; }
            .filter-sep { height:16px; }
        }

        /* ═══════ UPDATE BADGE ═══════ */
        .update-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; background:rgba(0,0,0,0.04); color:var(--text-muted); border-radius:var(--radius-full); font-size:10px; font-weight:500; white-space:nowrap; margin-left:auto; }
        [data-theme="dark"] .update-badge { background:rgba(255,255,255,0.06); }
        .update-badge i { font-size:10px; opacity:0.6; }

        /* ═══════ FILTER CHIPS ═══════ */
        .filter-chips-row {
            border-top:1px solid var(--border-color); margin-top:10px; padding-top:8px;
            height:28px; overflow:hidden;
        }
        .filter-chips-placeholder {
            height:28px; display:flex; align-items:center; gap:6px;
            max-width:1400px; margin:0 auto; padding:0 32px;
            font-size:11px; color:var(--text-muted); font-weight:500; opacity:0.6;
        }
        .filter-chips-placeholder i { font-size:12px; }
        .filter-chips-inner {
            display:flex; align-items:center; gap:5px; flex-wrap:wrap;
            justify-content:flex-end;
            max-width:1400px; margin:0 auto; padding:0 32px;
        }
        .filter-chips { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-left:4px; }
        .filter-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 7px; background:rgba(0,102,204,0.07); color:var(--sus-blue); border-radius:var(--radius-full); font-size:11px; font-weight:600; white-space:nowrap; }
        .filter-chip-x { background:none; border:none; color:inherit; cursor:pointer; padding:0; font-size:13px; line-height:1; opacity:0.45; transition:opacity 0.15s; margin-left:2px; }
        .filter-chip-x:hover { opacity:1; }
        .filter-clear-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:11px; font-weight:500; padding:3px 6px; border-radius:var(--radius-full); transition:color 0.15s; }
        .filter-clear-btn:hover { color:var(--color-danger); }
        @media (max-width:768px) {
            .filter-bar { padding:6px 10px; gap:5px; }
            .filter-select { font-size:11px; padding:5px 24px 5px 8px; }
            .sd-panel { min-width:280px; max-width:calc(100vw - 20px); }
        }