ajuste de css

.cursorrules

@@ -22,11 +22,41 @@ Construir um Design System de componentes em **Vue 3** para reutilização em m
 - TypeScript (modo estrito e tipagem forte)
 - **defineComponent** (obrigatório)
 - Sem TSX (padrão: `<template>` + `<script lang="ts">`)
-- Estilo: preferir CSS scoped por componente (se aplicável)
+- Estilo: **NÃO usar CSS scoped**. Usar namespacing estático (BEM) com prefixo `eli-` (ex: `.eli-botao__texto`).
 - Ícones: caso seja necessário o uso de ícones, usar **lucide** (biblioteca `lucide-vue-next`) como padrão do repositório.
 
 ---
 
+## Regras de Estilização (CSS) - IMPORTANTE
+
+Para garantir compatibilidade e evitar problemas de hidratação/build em projetos consumidores:
+
+1.  **NUNCA usar `<style scoped>`**.
+    *   O atributo `scoped` gera hashes dinâmicos (`data-v-xyz`) que mudam a cada build.
+    *   Isso quebra o estilo se o projeto consumidor não atualizar o CSS instantaneamente.
+
+2.  **Use Namespacing Estático (Padrão BEM)**.
+    *   Todas as classes devem começar com o prefixo do componente (ex: `.eli-tabela`).
+    *   Elementos internos devem seguir o padrão BEM ou similar (ex: `.eli-tabela__cabecalho`, `.eli-tabela--carregando`).
+    *   **Exemplo Correto:**
+        ```css
+        .eli-modal { ... }
+        .eli-modal__titulo { ... }
+        ```
+    *   **Exemplo INCORRETO:**
+        ```css
+        .container { ... } /* Muito genérico */
+        .titulo { ... }    /* Conflita com outros estilos */
+        ```
+
+3.  **Evite seletores de tag soltos**.
+    *   Não estilize tags HTML diretamente (ex: `div`, `input`, `button`) a menos que estejam estritamente aninhadas em uma classe namespaced.
+    *   Melhor ainda: coloque classes em todos os elementos que precisam de estilo.
+    *   **Válido:** `.eli-form input { ... }` (aceitável, mas prefira `.eli-form__input`)
+    *   **Proibido:** `input { ... }` (afeta a aplicação inteira do consumidor)
+
+---
+
 ## Regras de idioma e nomenclatura
 - **Variáveis, nomes de arquivos e nomes de pastas em português sempre que possível**
   - Ex.: `botao`, `cartao`, `campo_texto`, `seletor_opcoes`