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`

IA.md

@@ -61,6 +61,9 @@ createApp(App)
   .mount("#app");
 ```
 
+> **IMPORTANTE**: O import do CSS (`import "eli-vue/dist/eli-vue.css";`) é **obrigatório**. 
+> O pacote utiliza **namespacing estático (BEM)** e não estilos scoped, portanto o arquivo CSS contém toda a estilização necessária.
+
 ### 2) Importação direta (quando não quiser plugin)
 
 ```ts
@@ -75,11 +78,8 @@ import {
   EliEntradaParagrafo,
   EliEntradaSelecao,
 } from "eli-vue";
-```
 
-> Observação: ainda pode ser necessário importar o CSS do pacote:
-
-```ts
+// OBRIGATÓRIO: Importar o CSS global
 import "eli-vue/dist/eli-vue.css";
 ```
 
@@ -532,11 +532,19 @@ Provável causa: componente não foi registrado.
 - Se estiver usando plugin: confirme `app.use(EliVue)`
 - Se estiver importando direto: registre localmente no componente
 
-### 2) Estilos não aplicam
+### 2) Estilos não aplicam ou componentes "quebrados"
 
-Confirme que o projeto importou:
-- `vuetify/styles`
-- `eli-vue/dist/eli-vue.css`
+**Causa provável**: O CSS do pacote não foi importado.
+
+O `eli-vue` removeu o uso de `<style scoped>` para evitar problemas de hidratação e compatibilidade entre builds.
+Todo o estilo reside em arquivos CSS estáticos que precisam ser carregados.
+
+**Solução**:
+Adicione no seu `main.ts` ou componente raiz:
+
+```ts
+import "eli-vue/dist/eli-vue.css";
+```
 
 ### 3) Erro de tipo em `celulaTabela`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eli-vue",
-  "version": "0.1.88",
+  "version": "0.1.89",
   "private": false,
   "main": "./dist/eli-vue.umd.js",
   "module": "./dist/eli-vue.es.js",

src/componentes/EliEntrada/EliEntradaDataHora.vue

@@ -213,7 +213,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-data-hora {
   width: 100%;
 }

src/componentes/EliEntrada/EliEntradaNumero.vue

@@ -218,7 +218,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-entrada__prefixo,
 .eli-entrada__sufixo {
   opacity: 0.75;

src/componentes/EliEntrada/EliEntradaParagrafo.vue

@@ -63,4 +63,4 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style></style>

src/componentes/EliEntrada/EliEntradaSelecao.vue

@@ -105,4 +105,4 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style></style>

src/componentes/EliEntrada/EliEntradaTexto.vue

@@ -98,4 +98,4 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style></style>

src/componentes/EliTabela/EliTabelaCabecalho.vue

@@ -114,7 +114,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-tabela__busca-grupo {
   display: inline-flex;
   align-items: center;

src/componentes/EliTabela/EliTabelaCaixaDeBusca.vue

@@ -66,7 +66,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-tabela__busca {
   display: flex;
   align-items: center;

src/componentes/EliTabela/EliTabelaDetalhesLinha.vue

@@ -30,6 +30,6 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 /* estilos base ficam no EliTabela.css (global do componente) */
 </style>

src/componentes/EliTabela/EliTabelaModalColunas.vue

@@ -265,7 +265,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-tabela-modal-colunas__overlay {
   position: fixed;
   inset: 0;

src/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue

@@ -243,7 +243,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-tabela-modal-filtro__overlay {
   position: fixed;
   inset: 0;

src/componentes/EliTabela/EliTabelaPaginacao.vue

@@ -180,7 +180,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-tabela__paginacao {
   display: flex;
   align-items: center;

src/componentes/EliTabela/celulas/EliTabelaCelulaData.vue

@@ -54,7 +54,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-tabela__celula-link {
   all: unset;
   display: inline;

src/componentes/EliTabela/celulas/EliTabelaCelulaNumero.vue

@@ -40,7 +40,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style>
 .eli-tabela__celula-link {
   all: unset;
   display: inline;

src/componentes/EliTabela/celulas/EliTabelaCelulaTags.vue

@@ -43,7 +43,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-tabela__celula-tags {
   display: flex;
   flex-wrap: wrap;

src/componentes/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue

@@ -35,7 +35,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style>
 .eli-tabela__celula-link {
   all: unset;
   display: inline;

src/componentes/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue

@@ -29,7 +29,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-tabela__texto-truncado {
   display: inline-block;
   max-width: 260px;

src/componentes/cartao/EliCartao.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style>
 .eli-cartao {
   border-radius: 12px;
 }

src/componentes/indicador/EliBadge.vue

@@ -111,9 +111,9 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
-:deep(.v-badge__badge),
-:deep(.v-badge__content) {
+<style>
+.eli-badge .v-badge__badge,
+.eli-badge .v-badge__content {
   border-radius: var(--eli-badge-radius) !important;
 }
 </style>