/* ═══════════════════════════════════════════════════════
   ZION — Barra de filtros (componente partilhado dos módulos do portal)
   Usado com js/zfiltros.js. Segue os tokens de css/tokens.css.
   ═══════════════════════════════════════════════════════ */
.zf { display:flex; flex-direction:column; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg-card); }
.zf-linha { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zf-busca { position:relative; flex:1 1 220px; max-width:320px; }
.zf-busca input { width:100%; padding:7px 10px 7px 30px; border-radius:8px; border:1px solid var(--border); background:var(--bg-input); color:var(--text-main); font-size:12px; outline:none; font-family:inherit; }
.zf-busca input:focus { border-color:var(--primary); }
.zf-busca svg { position:absolute; left:9px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-faint); pointer-events:none; }
.zf-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.zf-seg button { padding:6px 10px; font-size:11px; background:transparent; color:var(--text-muted); border:0; border-right:1px solid var(--border); cursor:pointer; font-family:inherit; white-space:nowrap; }
.zf-seg button:last-child { border-right:0; }
.zf-seg button:hover { background:var(--cta-faint, rgba(0,144,152,.10)); }
.zf-seg button.on { background:var(--primary); color:#fff; }
.zf-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; font-size:11px; border-radius:8px; border:1px dashed var(--border-strong, var(--border)); background:transparent; color:var(--text-muted); cursor:pointer; font-family:inherit; white-space:nowrap; }
.zf-btn:hover { border-color:var(--primary); color:var(--text-main); }
.zf-btn.ativo { border-style:solid; border-color:var(--primary); background:var(--cta-faint, rgba(0,144,152,.10)); color:var(--text-main); }
.zf-btn .zf-seta { font-size:9px; opacity:.7; }
.zf-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zf-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 10px; border-radius:999px; background:var(--cta-faint, rgba(0,144,152,.10)); border:1px solid var(--cta-soft, rgba(0,144,152,.25)); color:var(--text-main); font-size:11px; }
.zf-chip b { font-weight:600; color:var(--text-faint); }
.zf-chip button { border:0; background:transparent; color:var(--text-faint); cursor:pointer; font-size:13px; line-height:1; padding:0 4px; border-radius:50%; }
.zf-chip button:hover { color:var(--text-main); background:rgba(255,255,255,.08); }
.zf-limpar { border:0; background:transparent; color:var(--primary-dark); font-size:11px; cursor:pointer; text-decoration:underline; font-family:inherit; }
.zf-pop { position:fixed; z-index:1200; min-width:220px; max-width:320px; max-height:360px; display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border-strong, var(--border)); border-radius:10px; box-shadow:var(--shadow, 0 8px 30px rgba(0,0,0,.4)); }
.zf-pop-busca { padding:8px; border-bottom:1px solid var(--border); }
.zf-pop-busca input { width:100%; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg-input); color:var(--text-main); font-size:12px; outline:none; font-family:inherit; }
.zf-pop-lista { overflow-y:auto; padding:4px; }
.zf-opt { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; font-size:12px; color:var(--text-main); cursor:pointer; user-select:none; }
.zf-opt:hover { background:rgba(255,255,255,.05); }
.zf-opt input { accent-color:var(--primary); margin:0; }
.zf-opt .zf-n { margin-left:auto; font-size:10px; color:var(--text-faint); }
.zf-pop-rod { display:flex; justify-content:space-between; gap:8px; padding:8px; border-top:1px solid var(--border); }
.zf-pop-rod button { font-size:11px; padding:5px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-family:inherit; }
.zf-pop-rod button.zf-ok { background:var(--primary); border-color:var(--primary); color:#fff; }
.zf-datas { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; }
.zf-datas label { font-size:10px; color:var(--text-faint); display:flex; flex-direction:column; gap:4px; }
.zf-datas input { padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg-input); color:var(--text-main); font-size:12px; color-scheme:dark; }
@media (max-width:700px) { .zf-busca { max-width:none; flex-basis:100%; } .zf-seg { width:100%; overflow-x:auto; } }