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

@@ -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));

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>

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)})`)
     ));