/* ========================================================= Filtro em árvore — versão estilizada Mantém as mesmas classes/markup do seu código original ========================================================= */ /* ---------- Design tokens (tema claro) ---------- */ :root { --bg-body : #FFF; --panel-w : 340px; --panel-bg : #FFF; --panel-border : #EEE; --panel-shadow : 2px 0 24px rgba(0, 0, 0, .10); --txt : #222; --txt-muted : #888; --txt-soft : #9AA0A6; --brand : #171933; /* botões principais */ --brand-contrast : #FFF; --accent : #197643; /* seleção OK */ --accent-weak : #F3F6FA; --alert : #B70016; /* ativo/erros */ --alert-weak : #FAF8FB; --range : #E2545B; --radius-xs : 6px; --radius-sm : 10px; --radius-md : 14px; --gap : 16px; --transition : .2s ease; --sticky-blur : saturate(180%) blur(8px); } /* ---------- Dark opcional (adicione .dark em se quiser) ---------- */ body.dark { --bg-body : #0F1115; --panel-bg : #151822; --panel-border : #23283A; --panel-shadow : 2px 0 24px rgba(0, 0, 0, .35); --txt : #E6E6E6; --txt-muted : #A9B0B8; --txt-soft : #7F8790; --brand : #2D66FF; --brand-contrast : #FFF; --accent : #20C997; --accent-weak : #0F2B24; --alert : #FF5470; --alert-weak : #2A0F16; --range : #FFA464; } /* ---------- Resets leves ---------- */ *, *::before, *::after { box-sizing : border-box; } body { margin : 0; background : var(--bg-body); font-family : Arial, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, sans-serif; color : var(--txt); } :focus-visible { outline : 2px solid var(--accent); outline-offset : 2px; border-radius : 6px; } /* ---------- Painel base ---------- */ .filtro-arvore-panel { position : fixed; inset : 0 auto 0 0; /* top:0 right:auto bottom:0 left:0 */ width : var(--panel-w); height : 100vh; background : var(--panel-bg); border-right : 1px solid var(--panel-border); box-shadow : var(--panel-shadow); z-index : 3000; display : flex; flex-direction : column; transform : translateX(0); transition : transform .35s cubic-bezier(.68, -0.55, .27, 1.55); will-change : transform; } /* header sticky com desfoque sutil */ .filtro-arvore-cabecalho { position : sticky; top : 0; z-index : 1; display : flex; align-items : center; gap : 14px; padding : 18px 16px; border-bottom : 1px solid var(--panel-border); backdrop-filter : var(--sticky-blur); -webkit-backdrop-filter : var(--sticky-blur); background : color-mix(in srgb, var(--panel-bg) 88%, transparent); } .filtro-arvore-cabecalho h2 { margin : 0; flex : 1; font-size : 1.06rem; letter-spacing : .5px; font-weight : 700; color : var(--txt); } .filtro-arvore-fechar, .btn-voltar { background : none; border : 0; color : var(--txt-muted); font-size : 1.25rem; line-height : 1; cursor : pointer; padding : 6px 10px; border-radius : var(--radius-xs); transition : background var(--transition), color var(--transition), transform var(--transition); } .filtro-arvore-fechar:hover, .btn-voltar:hover { background : color-mix(in srgb, var(--txt-muted) 10%, transparent); color : var(--txt); } .filtro-arvore-fechar:active, .btn-voltar:active { transform : scale(.96); } .btn-voltar[hidden] { display : none; } .filtro-arvore-limpar { background : none; border : 0; color : var(--alert); font-weight : 700; font-size : .98rem; cursor : pointer; padding : 6px 8px; border-radius : var(--radius-xs); transition : background var(--transition), transform var(--transition); } .filtro-arvore-limpar:hover { background : color-mix(in srgb, var(--alert) 10%, transparent); } .filtro-arvore-limpar:active { transform : scale(.98); } /* conteúdo scrollável */ .painel-conteudo { flex : 1 1 auto; overflow : auto; padding : 8px 0 20px 0; scrollbar-gutter : stable; } /* scrollbar discreta */ .painel-conteudo::-webkit-scrollbar { width : 10px; } .painel-conteudo::-webkit-scrollbar-thumb { background : color-mix(in srgb, var(--txt-soft) 35%, transparent); border-radius : 8px; } .painel-conteudo::-webkit-scrollbar-track { background : transparent; } /* lista */ .lista-arvore { list-style : none; margin : 0; padding : 0; } .item-arvore { display : flex; align-items : center; justify-content : space-between; gap : 12px; padding : 12px 14px; color : var(--txt); cursor : pointer; border-bottom : 1px solid var(--panel-border); background : none; transition : background var(--transition), color var(--transition), padding var(--transition), border-color var(--transition); } .item-arvore:hover { background : color-mix(in srgb, var(--panel-bg) 0%, var(--txt) 5%); } .item-arvore .qtd { color : var(--txt-soft); font-size : .92rem; margin-left : auto; } .item-arvore .seta { color : #D86C84; margin-left : 8px; font-size : 1.05rem; } /* estados */ .item-arvore.selecionado { background : var(--accent-weak); color : var(--accent); font-weight : 700; border-left : 5px solid var(--accent); border-bottom : 2px solid var(--accent); } .item-arvore.ativo { background : var(--alert-weak); color : var(--alert); font-weight : 700; border-bottom : 2px solid var(--alert); } /* ---------- Seções de filtro (marcas / preço) ---------- */ .filtro-marca-panel, .filtro-preco-panel { border-top : 1px solid var(--panel-border); margin : 18px 0 0 0; } .filtro-marca-titulo, .filtro-preco-titulo { display : flex; align-items : center; justify-content : space-between; padding : 14px 16px; font-size : 1rem; font-weight : 800; letter-spacing : .5px; color : var(--txt); user-select : none; cursor : pointer; transition : background var(--transition), color var(--transition); } .filtro-marca-titulo:hover, .filtro-preco-titulo:hover { background : color-mix(in srgb, var(--txt) 6%, transparent); } .filtro-marca-titulo .seta, .filtro-preco-titulo .seta { color : var(--txt-muted); font-size : 1.1rem; transition : transform .18s; } .filtro-marca-titulo.expanded .seta, .filtro-preco-titulo.expanded .seta { transform : rotate(90deg); } .filtro-marca-conteudo, .filtro-preco-conteudo { padding : 2px 16px 14px 16px; } .filtro-marca-conteudo[hidden], .filtro-preco-conteudo[hidden] { display : none; } /* marcas */ .filtro-marca-conteudo input[type="text"] { width : 100%; padding : 8px 10px; margin : 6px 0 10px 0; border : 1px solid var(--panel-border); border-radius : var(--radius-sm); background : var(--panel-bg); color : var(--txt); transition : border-color var(--transition), box-shadow var(--transition); } .filtro-marca-conteudo input[type="text"]:focus { border-color : color-mix(in srgb, var(--accent) 65%, var(--panel-border)); box-shadow : 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .filtro-marca-list { max-height : 210px; overflow : auto; border-radius : var(--radius-sm); padding : 4px 0; } .filtro-marca-list label { display : flex; align-items : center; gap : 8px; padding : 6px 2px; font-size : .98rem; cursor : pointer; } .filtro-marca-list input[type="checkbox"] { width : 18px; height : 18px; accent-color : #D86C84; } .filtro-marca-qtd { color : var(--txt-soft); font-size : .92rem; margin-left : 4px; } /* preço */ .filtro-preco-slider { display : flex; flex-direction : column; align-items : center; gap : 8px; } .filtro-preco-valor { display : flex; gap : 12px; justify-content : space-between; } .filtro-preco-valor input[type="number"] { width : 110px; text-align : center; border : 1px solid var(--panel-border); border-radius : var(--radius-sm); padding : 8px 0; font-size : .98rem; background : var(--panel-bg); color : var(--txt); transition : border-color var(--transition), box-shadow var(--transition); } .filtro-preco-valor input[type="number"]:focus { border-color : color-mix(in srgb, var(--range) 60%, var(--panel-border)); box-shadow : 0 0 0 3px color-mix(in srgb, var(--range) 18%, transparent); } /* trilho/range custom (faixa dupla visual) */ .filtro-preco-rangebox { position : relative; height : 36px; width : 98%; margin : 6px auto 14px auto; } .filtro-preco-track { position : absolute; inset : 0 0 0 0; top : 50%; height : 4px; transform : translateY(-50%); background : var(--panel-border); border-radius : 999px; } .filtro-preco-range { position : absolute; top : 50%; height : 4px; transform : translateY(-50%); background : #D86C84; border-radius : 999px; z-index : 2; } /* thumbs */ .filtro-preco-thumb { position : absolute; top : 50%; width : 20px; height : 20px; border-radius : 50%; background : var(--panel-bg); border : 2px solid var(--range); box-shadow : 0 2px 10px rgba(0, 0, 0, .18); transform : translate(-50%, -50%); z-index : 5; cursor : pointer; transition : box-shadow var(--transition), transform var(--transition); } .filtro-preco-thumb:active { box-shadow : 0 4px 16px rgba(0, 0, 0, .24); transform : translate(-50%, -50%) scale(1.02); } .filtro-preco-scale { display : flex; justify-content : space-between; font-size : .9rem; color : var(--txt-soft); margin : 0 4px 6px; } /* input range “puro” (quando usar) */ .filtro-preco-slider input[type="range"] { width : 92%; margin : 0; background : transparent; accent-color : var(--range); } /* ---------- Rodapé (mobile) ---------- */ .filtro-arvore-rodape { display : flex; width : 100vw; position : fixed; left : 0; bottom : 0; z-index : 3500; background : var(--panel-bg); border-top : 1px solid var(--panel-border); box-shadow : 0 -6px 24px rgba(0, 0, 0, .08); padding-bottom : env(safe-area-inset-bottom); } .filtro-arvore-rodape button { flex : 1; padding : 10px 0; border : none; background : #C49081; color : var(--brand-contrast); font-size : 1.05rem; font-weight : 800; letter-spacing : .6px; cursor : pointer; transition : filter var(--transition), transform var(--transition); } .filtro-arvore-rodape button:hover { filter : brightness(1.05); } .filtro-arvore-rodape button:active { transform : scale(.99); } /* ---------- Responsivo ---------- */ @media (max-width : 850px) { .filtro-arvore-panel { width : min(98vw, 410px); border-radius : 0 18px 18px 0; transform : translateX(-102%); z-index : 3100; } .filtro-arvore-panel.aberto { transform : translateX(0); } .filtro-arvore-panel.fechado { transform : translateX(-102%); pointer-events : none; } .filtro-arvore-fechar { display : inline-block; } } @media (min-width : 851px) { /* modo “sidebar fixa” */ .filtro-arvore-panel { position : static !important; inset : unset !important; height : auto !important; width : 100% !important; border-radius : 0 !important; box-shadow : none !important; display : flex !important; z-index : auto !important; transform : none !important; } .filtro-arvore-fechar, .filtro-arvore-rodape { display : none !important; } .filtro-arvore-panel.aberto, .filtro-arvore-panel.fechado { transform : none !important; } } /* ---------- Motion preference ---------- */ @media (prefers-reduced-motion : reduce) { * { transition : none !important; animation : none !important; } .filtro-arvore-panel { transform : none !important; } }