From 5fef71d157def4b4984bad003b74a19449c104bb Mon Sep 17 00:00:00 2001
From: Gustavo <gustavk.saj11@gmail.com>
Date: Mon, 3 Aug 2026 08:27:35 -0300
Subject: [PATCH] Fix segment picker misusing removable-tag .chip/.chips
 styling

The new-campaign segment checkboxes reused .chip/.chips, which is
reserved codebase-wide for click-to-remove selected tags (adds a
trailing " x" and removable-tag hover styling). Give the segment
picker its own segmento-opcao/segmento-lista classes with a minimal
non-removable style instead.
---
 public/css/app.css     | 14 ++++++++++++++
 public/index.html      |  2 +-
 public/js/campanhas.js |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 481bc15..5761c1b 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -459,6 +459,20 @@ button:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important
 .chips .chip { cursor: pointer; }
 .chips .chip::after { content: " x"; color: var(--muted); }
 .chips .chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
+.segmento-lista { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }
+.segmento-opcao {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--ink-2);
+  border-radius: 999px;
+  padding: 5px 11px;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
 .nichos-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
diff --git a/public/index.html b/public/index.html
index 3b423fa..69b1892 100644
--- a/public/index.html
+++ b/public/index.html
@@ -249,7 +249,7 @@
         </div>
         <div class="field">
           <label>Segmentos</label>
-          <div id="campanha-segmentos" class="chips"></div>
+          <div id="campanha-segmentos" class="segmento-lista"></div>
         </div>
         <div class="field">
           <label>Variantes de mensagem (A/B/C)</label>
diff --git a/public/js/campanhas.js b/public/js/campanhas.js
index ebc67fa..a660e3d 100644
--- a/public/js/campanhas.js
+++ b/public/js/campanhas.js
@@ -27,7 +27,7 @@ const Campanhas = (() => {
     if (!produto) { container.replaceChildren(); return; }
     const { segmentos } = await API.get(`/api/campaigns/segmentos?produto=${encodeURIComponent(produto)}`);
     container.replaceChildren(...segmentos.map((s) =>
-      h('label', { class: 'chip' },
+      h('label', { class: 'segmento-opcao' },
         h('input', { type: 'checkbox', value: s.value, class: 'campanha-segmento-check' }),
         ` ${s.value} (${fmt.format(s.total)})`)
     ));