@datosgeo-atdt/geo-ui 1.11.14 → 1.12.2

package/README.md

@@ -1,42 +1,46 @@
-# @atdt/geo-ui
+# @datosgeo-atdt/geo-ui
 
 Librería de componentes reutilizables en React para aplicaciones geoespaciales. Incluye visualización de mapas con PMTiles, unión con datos tabulares CSV y estilos temáticos (booleano y Jenks).
 
-## Características
+## Novedades en v1.12
+
+**Colores personalizados para mapas**: Ahora puedes personalizar completamente los colores de tus mapas con las nuevas props `color` y `colorMunicipios`.
+
+- **Modo Boolean**: Define colores para valores verdaderos y falsos
+- **Modo Jenks**: Genera rampas automáticas entre dos colores o especifica colores exactos para cada clase
+- **Municipios**: Colores independientes para drill-down municipal
+- **Retrocompatible**: Si no especificas colores, usa los defaults actuales
+
+[Ver ejemplos de colores personalizados](#-colores-personalizados)
 
-- **MapaPMTiles**: Componente para renderizar mapas vectoriales usando MapLibre GL y PMTiles
-- **TotalesDisplay**: Componente para mostrar totales y estadísticas con soporte responsive
-- **DataTable**: Componente de tabla flexible con carga automática de CSV
-- **Join CSV**: Unión automática de datos tabulares con geometrías vectoriales
-- **Estilos temáticos**: Soporte para modo booleano y clasificación Jenks
-- **TypeScript**: Completamente tipado para mejor experiencia de desarrollo
-- **Sin SSR**: Diseñado para aplicaciones client-side (React puro, Vite, CRA)
+---
 
 ## Instalación
 
 ```bash
-npm install @atdt/geo-ui maplibre-gl pmtiles papaparse @mapbox/vector-tile pbf
+npm install @datosgeo-atdt/geo-ui maplibre-gl pmtiles papaparse @mapbox/vector-tile pbf
 ```
 
 **Importante**: Las dependencias `react` y `react-dom` son peer dependencies (versión 18+).
 
-## Uso Básico
+---
+
+## Inicio Rápido
 
-### Importar el componente
+### Importar componentes
 
 ```tsx
-import { MapaPMTiles } from '@atdt/geo-ui';
-import '@atdt/geo-ui/style.css';
+import { MapaPMTiles, TotalesDisplay, DataTable } from '@datosgeo-atdt/geo-ui';
+import '@datosgeo-atdt/geo-ui/style.css';
 ```
 
-### Ejemplo básico (usando valores por defecto)
+### Ejemplo mínimo
 
-La biblioteca incluye **integrada** la URL del PMTiles de entidades de México, por lo que no necesitas especificar `pmtilesUrl`, `sourceLayer` ni `joinGeomKey` si trabajas con entidades:
+La biblioteca incluye **integrada** la URL del PMTiles de entidades de México, por lo que no necesitas especificar `pmtilesUrl`, `sourceLayer` ni `joinGeomKey`:
 
 ```tsx
-import React from 'react';
-import { MapaPMTiles } from '@atdt/geo-ui';
-import '@atdt/geo-ui/style.css';
+import { MapaPMTiles } from '@datosgeo-atdt/geo-ui';
+import '@datosgeo-atdt/geo-ui/style.css';
 
 function App() {
   return (
@@ -44,46 +48,58 @@ function App() {
       csvUrl="https://example.com/datos.csv"
       field="valor"
       mode="boolean"
-      width="100%"
-      height={600}
     />
   );
 }
-
-export default App;
 ```
 
-### Ejemplo con csvUrl (especificando PMTiles personalizado)
+---
 
-```tsx
-import React from 'react';
-import { MapaPMTiles } from '@atdt/geo-ui';
-import '@atdt/geo-ui/style.css';
+## Componentes
 
-function App() {
-  return (
-    <MapaPMTiles
-      pmtilesUrl="https://example.com/custom.pmtiles"
-      sourceLayer="mi-capa"
-      joinGeomKey="ID"
-      csvUrl="https://example.com/datos.csv"
-      field="valor"
-      mode="boolean"
-      width="100%"
-      height={600}
-    />
-  );
-}
+- **[MapaPMTiles](#-mapapmtiles)**: Mapas vectoriales interactivos con PMTiles
+- **[TotalesDisplay](#-totalesdisplay)**: Visualización de totales y estadísticas
+- **[DataTable](#-datatable)**: Tablas de datos con carga de CSV
+
+---
+
+# MapaPMTiles
+
+Componente para renderizar mapas vectoriales usando MapLibre GL y PMTiles con soporte para unión de datos CSV y estilos temáticos.
 
-export default App;
+## Características
+
+- **PMTiles integrado**: URL de entidades de México por defecto
+- **Join CSV**: Unión automática de datos tabulares con geometrías
+- **Estilos temáticos**: Modo booleano y clasificación Jenks
+- **Colores personalizados**: Define tus propias paletas (v1.12.1+)
+- **Drill-down**: Click para explorar municipios
+- **Popup interactivo**: Información al pasar el mouse
+- **TypeScript**: Completamente tipado
+
+---
+
+## Guía de Uso
+
+### Uso Básico
+
+#### Con CSV remoto (URL)
+
+```tsx
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  field="valor"
+  mode="boolean"
+  width="100%"
+  height={600}
+/>
 ```
 
-### Ejemplo con csvFile (archivo local)
+#### Con archivo CSV local
 
 ```tsx
-import React, { useState } from 'react';
-import { MapaPMTiles } from '@atdt/geo-ui';
-import '@atdt/geo-ui/style.css';
+import { useState } from 'react';
+import { MapaPMTiles } from '@datosgeo-atdt/geo-ui';
 
 function App() {
   const [csvFile, setCsvFile] = useState<File | null>(null);
@@ -106,13 +122,28 @@ function App() {
     </div>
   );
 }
+```
 
-export default App;
+#### Con PMTiles personalizado
+
+```tsx
+<MapaPMTiles
+  pmtilesUrl="https://example.com/custom.pmtiles"
+  sourceLayer="mi-capa"
+  joinGeomKey="ID"
+  csvUrl="https://example.com/datos.csv"
+  field="valor"
+  mode="boolean"
+/>
 ```
 
-### Ejemplo con fitToIds (zoom y filtrado por entidades)
+---
+
+### Filtrado y Zoom
+
+#### Mostrar entidades específicas
 
-Muestra **solo** las entidades seleccionadas y ajusta el mapa automáticamente a su extensión (sin animación):
+Usa `fitToIds` para mostrar **solo** las entidades seleccionadas y ajustar el mapa automáticamente:
 
 ```tsx
 // Mostrar solo Ciudad de México
@@ -121,29 +152,31 @@ Muestra **solo** las entidades seleccionadas y ajusta el mapa automáticamente a
   fitToIds="09"
 />
 
-// Mostrar múltiples entidades (Ciudad de México, Estado de México y Jalisco)
+// Mostrar múltiples entidades (CDMX, Edomex y Jalisco)
 <MapaPMTiles
   csvUrl="https://example.com/datos.csv"
   fitToIds={["09", "15", "14"]}
 />
 ```
 
-**Ventajas de usar `fitToIds`:**
-- No necesitas configurar `pmtilesUrl` (está integrado)
+**Ventajas:**
 - Filtra automáticamente para mostrar solo las entidades seleccionadas
 - Calcula y ajusta el bbox combinado sin animación de zoom
 - Carga directo en la vista correcta
 
-### Ejemplo con showMunicipios (visualización municipal)
+---
+
+### Visualización Municipal
 
-Cuando activas `showMunicipios={true}`, el componente cambia a **nivel municipal**:
-- La **entidad** se muestra solo como **contorno** (outline grueso)
-- Los **municipios** dentro de esa entidad se muestran con el **relleno temático** (boolean o jenks)
-- Los datos CSV se unen usando el **cvegeo municipal** (5 dígitos)
+#### Modo municipios básico
+
+Cuando activas `showMunicipios={true}`:
+- La **entidad** se muestra solo como **contorno**
+- Los **municipios** dentro de esa entidad se muestran con el **relleno temático**
 
 ```tsx
-// Mostrar municipios de Ciudad de México (09)
-// El CSV debe tener cvegeo municipal (ej: "09002", "09010", etc.)
+// Mostrar municipios de Ciudad de México
+// El CSV debe tener cvegeo municipal (5 dígitos: "09002", "09010", etc.)
 <MapaPMTiles
   csvUrl="https://example.com/datos_municipales.csv"
   fitToIds="09"
@@ -160,12 +193,6 @@ Cuando activas `showMunicipios={true}`, el componente cambia a **nivel municipal
 />
 ```
 
-**¿Cómo funciona?**
-1. `fitToIds="09"` extrae automáticamente `cve_ent="09"` (primeros 2 dígitos)
-2. Filtra y muestra **todos los municipios** con `cve_ent="09"`
-3. La entidad "09" se dibuja solo como contorno
-4. Los municipios se rellenan según los valores del CSV unidos por `cvegeo` (5 dígitos)
-
 **Formato CSV para municipios:**
 ```csv
 cvegeo,nombre,valor
@@ -174,12 +201,119 @@ cvegeo,nombre,valor
 09010,Álvaro Obregón,175
 ```
 
-### Ejemplo con Popup (información al pasar el mouse)
+---
+
+### Colores Personalizados
+
+**Nuevo en v1.12.**: Personaliza completamente los colores de tus mapas.
+
+#### Modo Boolean
+
+Especifica dos colores: `[colorFalse, colorTrue]`
+
+```tsx
+// Colores azules
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="boolean"
+  color={['#e3f2fd', '#1976d2']}  // azul claro → azul oscuro
+/>
+
+// Colores rojos
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="boolean"
+  color={['#ffebee', '#c62828']}  // rojo claro → rojo oscuro
+/>
+```
+
+#### Modo Jenks - Rampa automática
+
+Especifica dos colores y se genera una rampa automática:
+
+```tsx
+// Rampa de naranjas
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="jenks"
+  jenksK={5}
+  color={['#fff3e0', '#e65100']}  // naranja claro → naranja oscuro
+/>
+
+// Rampa de verdes
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="jenks"
+  jenksK={7}
+  color={['#e8f5e9', '#1b5e20']}  // verde claro → verde oscuro
+/>
+```
+
+#### Modo Jenks - Colores exactos por clase
 
-Puedes habilitar un popup que se muestra al pasar el mouse sobre las features:
+Especifica exactamente tantos colores como clases:
 
 ```tsx
-// Popup simple: solo muestra el nombre de la entidad/municipio
+// 4 clases = 4 colores exactos
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="jenks"
+  jenksK={4}
+  color={['#fff9c4', '#ffeb3b', '#fbc02d', '#f57f17']}
+/>
+
+// 3 clases = 3 colores exactos
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="jenks"
+  jenksK={3}
+  color={['#bbdefb', '#42a5f5', '#0d47a1']}
+/>
+```
+
+#### Colores para municipios
+
+Usa `colorMunicipios` para colores diferentes en el nivel municipal:
+
+```tsx
+// Entidades verdes, municipios azules
+<MapaPMTiles
+  csvUrl="https://example.com/datos_entidades.csv"
+  mode="jenks"
+  color={['#e8f5e9', '#2e7d32']}  // verdes para entidades
+
+  fitToIds={["09", "15", "14"]}
+
+  csvUrlMunicipios="https://example.com/datos_municipios.csv"
+  modeMunicipios="jenks"
+  colorMunicipios={['#e3f2fd', '#1565c0']}  // azules para municipios
+/>
+
+// Boolean para entidades, Jenks custom para municipios
+<MapaPMTiles
+  csvUrl="https://example.com/datos_entidades.csv"
+  mode="boolean"
+  color={['#ffccbc', '#d84315']}  // naranjas
+
+  fitToIds={["09", "15"]}
+
+  csvUrlMunicipios="https://example.com/datos_municipios.csv"
+  modeMunicipios="jenks"
+  jenksK={6}
+  colorMunicipios={['#f3e5f5', '#6a1b9a']}  // púrpuras
+/>
+```
+
+> **Nota**: Si no especificas `color` o `colorMunicipios`, se usan los colores predeterminados (`#f3f3f3` y `#66827f`).
+
+---
+
+### Popup Interactivo
+
+Habilita popups que se muestran al pasar el mouse:
+
+```tsx
+// Popup simple (solo nombre)
 <MapaPMTiles
   csvUrl="https://example.com/datos.csv"
   fitToIds="09"
@@ -208,20 +342,21 @@ Puedes habilitar un popup que se muestra al pasar el mouse sobre las features:
 />
 ```
 
-**Comportamiento del popup:**
-- Se muestra al pasar el mouse sobre las features (hover)
-- **Nombre**: Muestra automáticamente el nombre de la entidad o municipio
-  - Entidades: usa un diccionario interno (ej: "09" → "Ciudad de México")
-  - Municipios: usa el campo `nomgeo` del PMTiles
-- **Datos adicionales**: Si especificas `popupDataLabel` y `popupDataField`, muestra el valor del CSV
-- Los números se formatean automáticamente con comas (ej: 1,234,567)
+**Comportamiento:**
+- Se muestra al pasar el mouse (hover)
+- **Entidades**: Usa diccionario interno (ej: "09" → "Ciudad de México")
+- **Municipios**: Usa el campo `nomgeo` del PMTiles
+- Números formateados automáticamente con comas
+
+---
+
+### Interactividad y Drill-Down
 
-### Ejemplo con Interactividad (click para drill-down)
+#### Click para explorar municipios
 
-Cuando especificas **2 o más entidades** en `fitToIds`, el mapa se vuelve interactivo automáticamente:
+Cuando especificas **2 o más entidades** en `fitToIds`, el mapa se vuelve interactivo:
 
 ```tsx
-// Vista inicial: 3 entidades con visualización jenks
 <MapaPMTiles
   csvUrl="https://example.com/datos.csv"
   fitToIds={["09", "15", "14"]}
@@ -229,49 +364,41 @@ Cuando especificas **2 o más entidades** en `fitToIds`, el mapa se vuelve inter
 />
 ```
 
-**Comportamiento interactivo:**
-1. **Vista inicial**: Muestra las 3 entidades con relleno (jenks/boolean)
-2. **Click en una entidad**:
-   - Hace zoom hacia esa entidad
-   - Cambia automáticamente a vista municipal
-   - Muestra municipios con relleno clasificado
-   - La entidad se muestra solo como contorno
-3. **Volver atrás**:
-   - Presiona `ESC`
-   - O haz doble click en el mapa
-
-**Ejemplo completo con todas las features:**
+**Comportamiento:**
+1. **Vista inicial**: Muestra las 3 entidades con relleno
+2. **Click en una entidad**: Hace zoom y cambia a vista municipal
+3. **Volver atrás**: Presiona `ESC` o doble click
+
+#### Ejemplo completo con todas las features
+
 ```tsx
 <MapaPMTiles
   csvUrl="https://example.com/datos.csv"
   fitToIds={["09", "15", "14"]}
   mode="jenks"
   jenksK={5}
+  color={['#e8f5e9', '#2e7d32']}
   enablePopup={true}
   popupDataLabel="Población"
   popupDataField="poblacion"
 />
 ```
 
-Esto crea una experiencia de exploración completa:
-- Vista general de 3 entidades
-- Click para explorar municipios
-- Popup con información al pasar el mouse
-- Clasificación jenks en ambos niveles
+---
 
-### Ejemplo con CSV dual (entidades y municipios con datos diferentes)
+### CSV Dual (Entidades + Municipios)
 
-Puedes usar **fuentes de datos separadas** para entidades y municipios. Cuando el usuario hace click en una entidad, los municipios se visualizarán con el CSV municipal:
+Usa **fuentes de datos separadas** para entidades y municipios:
 
 ```tsx
-// Vista inicial: entidades con datos de población total
-// Después del click: municipios con datos de densidad poblacional
+// Vista inicial: población total por entidad
+// Después del click: densidad poblacional por municipio
 <MapaPMTiles
-  // CSV para entidades (vista inicial)
+  // CSV para entidades
   csvUrl="https://example.com/datos_entidades.csv"
   field="poblacion_total"
 
-  // CSV para municipios (después del click)
+  // CSV para municipios
   csvUrlMunicipios="https://example.com/datos_municipios.csv"
   fieldMunicipios="densidad"
 
@@ -281,7 +408,8 @@ Puedes usar **fuentes de datos separadas** para entidades y municipios. Cuando e
 />
 ```
 
-**Ejemplo con archivo local para municipios:**
+#### Con archivo local para municipios
+
 ```tsx
 <MapaPMTiles
   csvUrl="https://example.com/datos_entidades.csv"
@@ -295,28 +423,16 @@ Puedes usar **fuentes de datos separadas** para entidades y municipios. Cuando e
 />
 ```
 
-**¿Cómo funciona?**
-1. **Vista inicial**: Muestra las entidades coloreadas según el CSV de entidades
-2. **Click en una entidad**:
-   - Si especificaste `csvUrlMunicipios` o `csvFileMunicipios`, carga ese CSV
-   - Recalcula la clasificación Jenks con los datos municipales
-   - Aplica los nuevos colores a los municipios
-   - **Actualiza automáticamente el popup** para mostrar datos del CSV municipal
-3. **Ventajas**:
-   - Diferentes métricas para diferentes niveles (ej: totales en entidades, densidades en municipios)
-   - Archivos CSV más pequeños y específicos para cada nivel
-   - Mayor flexibilidad en la visualización de datos
-   - Los popups se actualizan automáticamente según el nivel visualizado
-
-**Ejemplo completo con popup y CSV dual:**
+#### Con popup y CSV dual
+
 ```tsx
 <MapaPMTiles
-  // Vista inicial: entidades con clasificación booleana
+  // Entidades: clasificación booleana
   csvUrl="https://example.com/datos_entidades.csv"
   field="tiene_cobertura"
   mode="boolean"
 
-  // Drill-down: municipios con clasificación Jenks
+  // Municipios: clasificación Jenks
   csvUrlMunicipios="https://example.com/datos_municipios.csv"
   fieldMunicipios="poblacion"
   modeMunicipios="jenks"
@@ -324,9 +440,7 @@ Puedes usar **fuentes de datos separadas** para entidades y municipios. Cuando e
   fitToIds={["09", "15", "14"]}
   jenksK={5}
 
-  // Popup se adapta automáticamente:
-  // - En entidades: solo muestra nombre (sin datos)
-  // - En municipios: muestra nombre + datos del CSV municipal
+  // Popup adaptativo
   enablePopup={true}
   popupDataLabel="Habitantes"
   popupDataField="poblacion"
@@ -334,71 +448,196 @@ Puedes usar **fuentes de datos separadas** para entidades y municipios. Cuando e
 ```
 
 **Comportamiento del popup con CSV dual:**
-- **Vista de entidades**: Solo muestra el nombre (ej: "Ciudad de México") sin datos adicionales
-- **Vista de municipios** (después del click): Muestra nombre del municipio + valor del CSV municipal (ej: "Azcapotzalco - Habitantes: 385,000")
+- **Vista de entidades**: Solo muestra el nombre (sin datos adicionales)
+- **Vista de municipios**: Muestra nombre + valor del CSV municipal
 
 ---
 
-## TotalesDisplay
+## Modos de Estilo
 
-Componente para mostrar totales y estadísticas de manera flexible y responsive. Soporta datos hardcodeados, desde CSV o una combinación de ambos.
+### Modo Boolean
 
-### Características
+Pinta las geometrías en dos colores según el valor.
 
-- **Tres formas de uso**: Datos hardcodeados, CSV por URL o CSV desde archivo local
-- **Responsive**: Se adapta automáticamente a desktop, tablet y mobile
-- **Centrado por defecto**: Posicionamiento centrado configurable
-- **Personalizable**: Formateadores custom para labels y valores
-- **TypeScript**: Completamente tipado
+**Colores por defecto:**
+- `value === 1` → `#66827f` (verde azulado)
+- `value === 0 / null / undefined` → `#f3f3f3` (gris claro)
 
-### Uso Básico
+**Con colores personalizados:**
+```tsx
+<MapaPMTiles
+  mode="boolean"
+  color={['#e3f2fd', '#1976d2']}  // [colorFalse, colorTrue]
+/>
+```
+
+**Sin colores personalizados:**
+```tsx
+<MapaPMTiles mode="boolean" />
+```
+
+---
 
-#### Importar el componente
+### Modo Jenks
+
+Clasifica los valores numéricos usando el algoritmo Jenks Natural Breaks.
+
+**Colores por defecto:**
+- De `#f3f3f3` (gris claro) a `#66827f` (verde azulado)
+- Número de clases controlado por `jenksK` (default: 5)
 
+**Con rampa automática:**
 ```tsx
-import { TotalesDisplay } from '@atdt/geo-ui';
-import '@atdt/geo-ui/style.css';
+<MapaPMTiles
+  mode="jenks"
+  jenksK={5}
+  color={['#fff3e0', '#e65100']}  // [colorMin, colorMax]
+/>
 ```
 
-#### Ejemplo 1: Datos hardcodeados (más simple)
+**Con colores exactos:**
+```tsx
+<MapaPMTiles
+  mode="jenks"
+  jenksK={4}
+  color={['#fff9c4', '#ffeb3b', '#fbc02d', '#f57f17']}  // 4 colores
+/>
+```
 
+**Sin colores personalizados:**
 ```tsx
-import { TotalesDisplay } from '@atdt/geo-ui';
+<MapaPMTiles mode="jenks" jenksK={7} />
+```
 
-function App() {
-  return (
-    <TotalesDisplay
-      items={[
-        { label: "Total de caminos abiertos", value: 496 },
-        { label: "Total de caminos cerrados", value: 9 },
-      ]}
-    />
-  );
-}
+---
+
+## Props de MapaPMTiles
+
+### Props Obligatorias
+
+| Prop | Tipo | Descripción |
+|------|------|-------------|
+| `csvUrl` o `csvFile` | `string \| File` | URL del CSV remoto o archivo File local |
+
+### Props de Datos
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `pmtilesUrl` | `string` | URL de entidades de México | URL del archivo PMTiles remoto |
+| `sourceLayer` | `string` | `"entidad"` | Nombre de la capa vectorial en el PMTiles |
+| `joinGeomKey` | `string` | `"cvegeo"` | Campo de la geometría para el join |
+| `joinCsvKey` | `string` | `joinGeomKey` | Campo del CSV para el join |
+| `field` | `string` | `"valor"` | Campo del CSV con los valores a visualizar |
+
+### Props de Visualización
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `mode` | `"boolean" \| "jenks"` | `"boolean"` | Modo de estilo |
+| `jenksK` | `number` | `5` | Número de clases para Jenks |
+| `color` | `[string, string] \| string[]` | `['#f3f3f3', '#66827f']` | **v1.12.1**: Colores personalizados. Boolean: `[colorFalse, colorTrue]`. Jenks: `[colorMin, colorMax]` o array exacto |
+| `width` | `string \| number` | `"100%"` | Ancho del mapa |
+| `height` | `string \| number` | `520` | Alto del mapa (px si es número) |
+
+### Props de Navegación
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `initialView` | `object` | `{center: [-102, 23], zoom: 4}` | Vista inicial (ignorado si hay `fitToIds`) |
+| `initialView.center` | `[number, number]` | `[-102, 23]` | Centro inicial [lng, lat] |
+| `initialView.zoom` | `number` | `4` | Zoom inicial |
+| `fitToIds` | `string \| string[]` | `undefined` | IDs de features para filtrar y zoom automático |
+| `bboxField` | `string` | `"bbox"` | Campo con bbox precalculado |
+
+### Props de Municipios
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `showMunicipios` | `boolean` | `false` | Activa modo municipal |
+| `csvUrlMunicipios` | `string` | `undefined` | URL del CSV para municipios |
+| `csvFileMunicipios` | `File` | `undefined` | Archivo File para municipios |
+| `joinCsvKeyMunicipios` | `string` | `"cvegeo"` | Campo del CSV municipal para join |
+| `fieldMunicipios` | `string` | `field` | Campo del CSV municipal a visualizar |
+| `modeMunicipios` | `"boolean" \| "jenks"` | `mode` | Modo de estilo para municipios |
+| `colorMunicipios` | `[string, string] \| string[]` | `color` | **v1.12.1**: Colores para municipios |
+
+### Props de Interactividad
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `enablePopup` | `boolean` | `false` | Habilita popup con hover |
+| `popupDataLabel` | `string` | `undefined` | Etiqueta para el dato del popup |
+| `popupDataField` | `string` | `undefined` | Campo del CSV para el popup |
+| `onFeatureClick` | `(id: string, props: any) => void` | `undefined` | Callback al hacer click (solo con 2+ entidades) |
+
+---
+
+## Formato CSV
+
+El archivo CSV debe tener:
+
+- **Header row** con nombres de columnas
+- Una columna con el **join key** que coincida con `joinGeomKey`
+- Una columna con los **valores** especificada en `field`
+
+**Ejemplo:**
+
+```csv
+cvegeo,nombre,valor
+01,Aguascalientes,1
+02,Baja California,0
+09,Ciudad de México,1
 ```
 
-#### Ejemplo 2: Datos desde CSV (URL)
+---
+
+# TotalesDisplay
+
+Componente para mostrar totales y estadísticas de manera flexible y responsive.
+
+## Características
+
+- **Tres formas de uso**: Datos hardcodeados, CSV por URL o archivo local
+- **Responsive**: Se adapta a desktop, tablet y mobile
+- **Centrado por defecto**: Posicionamiento configurable
+- **Personalizable**: Formateadores custom para labels y valores
+- **TypeScript**: Completamente tipado
+
+## Uso Básico
+
+### Importar
 
 ```tsx
-import { TotalesDisplay } from '@atdt/geo-ui';
+import { TotalesDisplay } from '@datosgeo-atdt/geo-ui';
+import '@datosgeo-atdt/geo-ui/style.css';
+```
 
-function App() {
-  return (
-    <TotalesDisplay
-      csvUrl="https://example.com/datos.csv"
-      joinCsvKey="tipo"
-      field="cantidad"
-      labelFormatter={(key) => `Total de ${key.toLowerCase()}`}
-      valueFormatter={(value) => value.toLocaleString('es-MX')}
-    />
-  );
-}
+### Datos hardcodeados
+
+```tsx
+<TotalesDisplay
+  items={[
+    { label: "Total de caminos abiertos", value: 496 },
+    { label: "Total de caminos cerrados", value: 9 },
+  ]}
+/>
+```
+
+### Datos desde CSV (URL)
+
+```tsx
+<TotalesDisplay
+  csvUrl="https://example.com/datos.csv"
+  joinCsvKey="tipo"
+  field="cantidad"
+  labelFormatter={(key) => `Total de ${key.toLowerCase()}`}
+  valueFormatter={(value) => value.toLocaleString('es-MX')}
+/>
 ```
 
-#### Ejemplo 3: Datos desde archivo local
+### Datos desde archivo local
 
 ```tsx
-import { TotalesDisplay } from '@atdt/geo-ui';
 import { useState } from 'react';
 
 function App() {
@@ -424,10 +663,9 @@ function App() {
 }
 ```
 
-#### Ejemplo 4: Con filtro específico
+### Con filtro específico
 
 ```tsx
-// Mostrar solo un elemento específico del CSV
 <TotalesDisplay
   csvUrl="https://example.com/datos.csv"
   joinCsvKey="region"
@@ -438,46 +676,54 @@ function App() {
 />
 ```
 
-#### Ejemplo 5: Sin centrado
+### Integrando con MapaPMTiles
 
 ```tsx
-<TotalesDisplay
-  items={[
-    { label: "Cobertura total", value: "98%" },
-    { label: "Usuarios activos", value: 15234 },
-  ]}
-  centered={false}
-/>
+<div>
+  <TotalesDisplay
+    items={[
+      { label: "Total de caminos abiertos", value: 496 },
+      { label: "Total de caminos cerrados", value: 9 },
+    ]}
+  />
+
+  <MapaPMTiles
+    csvUrl="https://example.com/datos.csv"
+    fitToIds={["09", "15", "14"]}
+    mode="jenks"
+    enablePopup={true}
+  />
+</div>
 ```
 
-### Props de TotalesDisplay
+## Props de TotalesDisplay
 
-#### Props de Datos (una de estas opciones es requerida)
+### Props de Datos (una es requerida)
 
 | Prop | Tipo | Descripción |
 |------|------|-------------|
-| `items` | `TotalItem[]` | Array de objetos con `label` y `value` para mostrar datos hardcodeados |
+| `items` | `TotalItem[]` | Array de objetos con `label` y `value` |
 | `csvUrl` | `string` | URL del CSV remoto |
 | `csvFile` | `File` | Archivo File local |
 
-#### Props de Configuración CSV
+### Props de Configuración CSV
 
 | Prop | Tipo | Default | Descripción |
 |------|------|---------|-------------|
-| `joinCsvKey` | `string` | `"key"` | Campo del CSV para usar como identificador |
-| `field` | `string` | `"valor"` | Campo del CSV con los valores a visualizar |
-| `filterKey` | `string` | `undefined` | Si se especifica, solo muestra el elemento con este key |
+| `joinCsvKey` | `string` | `"key"` | Campo del CSV como identificador |
+| `field` | `string` | `"valor"` | Campo del CSV con valores |
+| `filterKey` | `string` | `undefined` | Mostrar solo este key |
 
-#### Props de Visualización
+### Props de Visualización
 
 | Prop | Tipo | Default | Descripción |
 |------|------|---------|-------------|
-| `centered` | `boolean` | `true` | Si el contenedor debe estar centrado |
-| `className` | `string` | `""` | Clases CSS adicionales para el contenedor |
-| `labelFormatter` | `(key: string, value: any) => string` | `undefined` | Función para formatear el label |
-| `valueFormatter` | `(value: any) => string \| number` | `undefined` | Función para formatear el valor |
+| `centered` | `boolean` | `true` | Contenedor centrado |
+| `className` | `string` | `""` | Clases CSS adicionales |
+| `labelFormatter` | `(key: string, value: any) => string` | `undefined` | Formatear label |
+| `valueFormatter` | `(value: any) => string \| number` | `undefined` | Formatear valor |
 
-#### Tipo TotalItem
+### Tipo TotalItem
 
 ```tsx
 interface TotalItem {
@@ -486,392 +732,120 @@ interface TotalItem {
 }
 ```
 
-### Ejemplos Completos
-
-#### Ejemplo con datos dinámicos según estado del mapa
-
-```tsx
-import { TotalesDisplay } from '@atdt/geo-ui';
-import { useState } from 'react';
-
-function App() {
-  const [selectedRegion, setSelectedRegion] = useState<string | null>(null);
-
-  const datosGlobales = [
-    { label: "Total nacional de escuelas", value: 12450 },
-    { label: "Total nacional de estudiantes", value: 850000 },
-  ];
-
-  return (
-    <div>
-      {!selectedRegion && (
-        <TotalesDisplay items={datosGlobales} />
-      )}
-
-      {selectedRegion && (
-        <TotalesDisplay
-          csvUrl="https://example.com/datos-regionales.csv"
-          filterKey={selectedRegion}
-          joinCsvKey="region"
-          field="total"
-          labelFormatter={(key, value) => `${key} - Total`}
-          valueFormatter={(value) => value.toLocaleString('es-MX')}
-        />
-      )}
-    </div>
-  );
-}
-```
-
-#### Ejemplo integrando con MapaPMTiles
-
-```tsx
-import { MapaPMTiles, TotalesDisplay } from '@atdt/geo-ui';
-import '@atdt/geo-ui/style.css';
+## Responsive
 
-function App() {
-  return (
-    <div>
-      <TotalesDisplay
-        items={[
-          { label: "Total de caminos abiertos", value: 496 },
-          { label: "Total de caminos cerrados", value: 9 },
-        ]}
-      />
-
-      <MapaPMTiles
-        csvUrl="https://example.com/datos.csv"
-        fitToIds={["09", "15", "14"]}
-        mode="jenks"
-        enablePopup={true}
-      />
-    </div>
-  );
-}
-```
-
-### Responsive
-
-El componente se adapta automáticamente:
-
-- **Desktop**: Layout horizontal con espaciado amplio (13.89vw entre items)
-- **Tablet** (601px - 1024px): Espaciado medio (8vw entre items)
-- **Mobile** (≤600px): Layout vertical, centrado, con espaciado vertical entre items
-
-### Personalización Avanzada
-
-```tsx
-<TotalesDisplay
-  csvUrl="https://example.com/estadisticas.csv"
-  joinCsvKey="categoria"
-  field="valor"
-  centered={true}
-  className="mis-totales-custom"
-  labelFormatter={(key, value) => {
-    // Lógica custom para el label
-    if (key === 'total') return `🏆 Total General`;
-    return `📊 ${key.charAt(0).toUpperCase() + key.slice(1)}`;
-  }}
-  valueFormatter={(value) => {
-    // Formatear números con separadores de miles
-    if (typeof value === 'number') {
-      return `${value.toLocaleString('es-MX')} unidades`;
-    }
-    return value;
-  }}
-/>
-```
-
-### Estilos CSS Personalizados
-
-Puedes sobrescribir los estilos usando tu propio CSS:
-
-```css
-.mis-totales-custom {
-  background-color: #f0f0f0;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-.mis-totales-custom .totales-item {
-  font-size: 1.2em;
-  color: #2c3e50;
-}
-
-.mis-totales-custom .totales-value {
-  color: #66827f;
-  font-weight: 900;
-}
-```
+- **Desktop**: Layout horizontal con espaciado amplio (13.89vw)
+- **Tablet** (601px - 1024px): Espaciado medio (8vw)
+- **Mobile** (≤600px): Layout vertical centrado
 
 ---
 
-## DataTable
+# DataTable
 
-Componente de tabla genérico y flexible para mostrar datos tabulares con soporte para carga automática de CSV desde la carpeta `public`.
+Componente de tabla genérico y flexible con soporte para carga automática de CSV.
 
-### Características
+## Características
 
-- **Carga automática de CSV**: Lee archivos CSV desde la carpeta `public` y parsea los datos
-- **Detección automática de columnas**: Extrae los nombres de las columnas directamente del CSV
-- **Columnas personalizables**: Define qué columnas mostrar y su ancho
-- **Tamaño ajustable**: Props `width` y `height` para controlar dimensiones
-- **Formato automático de números**: Formatea números con separadores de miles (estilo mexicano)
-- **Índice opcional**: Puede mostrar numeración de filas
-- **Responsive**: Se adapta automáticamente a móvil
-- **Estados de carga**: Muestra "Cargando datos..." mientras procesa el CSV
-- **Manejo de errores**: Muestra mensajes descriptivos si falla la carga
-- **TypeScript**: Completamente tipado
+- **Carga automática de CSV**: Lee archivos desde `public/`
+- **Detección automática de columnas**: Extrae nombres del CSV
+- **Columnas personalizables**: Define qué mostrar y anchos
+- **Formato automático**: Números con separadores de miles
+- **Índice opcional**: Numeración de filas
+- **Responsive**: Se adapta a móvil
+- **Interactividad**: Callback `onRowClick`
 
-### Uso Básico
+## Uso Básico
 
-#### Importar el componente
+### Importar
 
 ```tsx
-import { DataTable } from '@atdt/geo-ui';
-import '@atdt/geo-ui/style.css';
+import { DataTable } from '@datosgeo-atdt/geo-ui';
+import '@datosgeo-atdt/geo-ui/style.css';
 ```
 
-#### Ejemplo 1: Cargar CSV automáticamente desde public/
+### Cargar CSV desde public/
 
-Si tienes un archivo `alcaldias.csv` en la carpeta `public/` de tu proyecto:
+Si tienes `public/alcaldias.csv`:
 
 ```csv
 alcaldia,poblacion
 Iztapalapa,1815786
 Gustavo A. Madero,1185772
 Álvaro Obregón,749982
-Tlalpan,677104
-```
-
-Simplemente especifica la ruta del archivo:
-
-```tsx
-import { DataTable } from '@atdt/geo-ui';
-
-function App() {
-  return (
-    <DataTable csvPath="/alcaldias.csv" />
-  );
-}
 ```
 
-**El componente automáticamente:**
-- Carga el CSV desde `public/alcaldias.csv`
-- Detecta los nombres de las columnas (`alcaldia`, `poblacion`)
-- Los usa como headers de la tabla
-- Parsea los datos y los muestra
-- Formatea números con separadores de miles (1,815,786)
-- Distribuye las columnas equitativamente (50% cada una en este caso)
-
-#### Ejemplo 2: Personalizar nombres de columnas
-
-Puedes sobrescribir los nombres de las columnas del CSV:
+Simplemente:
 
 ```tsx
-import { DataTable } from '@atdt/geo-ui';
-
-function App() {
-  return (
-    <DataTable
-      csvPath="/alcaldias.csv"
-      columns={[
-        { key: 'alcaldia', label: 'Alcaldía', width: '60%' },
-        { key: 'poblacion', label: 'Población Total', width: '40%' }
-      ]}
-      showIndex={true}
-      indexLabel="#"
-    />
-  );
-}
+<DataTable csvPath="/alcaldias.csv" />
 ```
 
-#### Ejemplo 3: Datos directos (sin CSV)
-
-También puedes pasar datos directamente sin cargar un CSV:
-
-```tsx
-import { DataTable } from '@atdt/geo-ui';
-
-function App() {
-  const datos = [
-    { nombre: 'Ciudad de México', habitantes: 9209944 },
-    { nombre: 'Guadalajara', habitantes: 1495189 },
-    { nombre: 'Monterrey', habitantes: 1142994 }
-  ];
-
-  return (
-    <DataTable
-      data={datos}
-      columns={[
-        { key: 'nombre', label: 'Ciudad' },
-        { key: 'habitantes', label: 'Habitantes' }
-      ]}
-    />
-  );
-}
-```
+**Auto-detecta:**
+- Nombres de columnas (`alcaldia`, `poblacion`)
+- Parsea datos y formatea números (1,815,786)
+- Distribuye columnas equitativamente (50% cada una)
 
-#### Ejemplo 4: Múltiples columnas con distribución automática
+### Personalizar columnas
 
 ```tsx
-// Con 4 columnas, cada una ocupa automáticamente 25% del ancho
 <DataTable
-  csvPath="/productos.csv"
+  csvPath="/alcaldias.csv"
   columns={[
-    { key: 'nombre', label: 'Producto' },
-    { key: 'categoria', label: 'Categoría' },
-    { key: 'precio', label: 'Precio' },
-    { key: 'stock', label: 'Stock' }
+    { key: 'alcaldia', label: 'Alcaldía', width: '60%' },
+    { key: 'poblacion', label: 'Población Total', width: '40%' }
   ]}
   showIndex={true}
+  indexLabel="#"
 />
 ```
 
-#### Ejemplo 5: Control manual de anchos de columnas
+### Datos directos (sin CSV)
 
 ```tsx
-// Especifica anchos personalizados cuando necesites distribución no equitativa
+const datos = [
+  { nombre: 'Ciudad de México', habitantes: 9209944 },
+  { nombre: 'Guadalajara', habitantes: 1495189 },
+  { nombre: 'Monterrey', habitantes: 1142994 }
+];
+
 <DataTable
-  csvPath="/datos.csv"
+  data={datos}
   columns={[
-    { key: 'nombre', label: 'Nombre', width: '50%' },
-    { key: 'valor1', label: 'Valor 1', width: '25%' },
-    { key: 'valor2', label: 'Valor 2', width: '25%' }
+    { key: 'nombre', label: 'Ciudad' },
+    { key: 'habitantes', label: 'Habitantes' }
   ]}
 />
 ```
 
-### Props de DataTable
-
-#### Props de Datos (al menos una opción es requerida)
-
-| Prop | Tipo | Descripción |
-|------|------|-------------|
-| `data` | `Record<string, any>[]` | Array de objetos con los datos a mostrar |
-| `csvPath` | `string` | Ruta del archivo CSV en la carpeta `public` (ej: `/datos.csv`) |
-
-#### Props de Configuración
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `columns` | `DataTableColumn[]` | Auto-detectado | Definición de columnas a mostrar |
-| `width` | `string` | Controlado por CSS | Ancho del contenedor (por defecto 50% del viewport en desktop, 100% en móvil) |
-| `height` | `string` | Controlado por CSS | Alto del contenedor (por defecto 100% con scroll interno cuando excede 70vh) |
-| `className` | `string` | `""` | Clases CSS adicionales |
-| `showIndex` | `boolean` | `false` | Mostrar columna con índice numérico |
-| `indexLabel` | `string` | `"#"` | Etiqueta para la columna de índice |
-| `onRowClick` | `(row: Record<string, any>, index: number) => void` | `undefined` | Callback que se ejecuta al hacer click en una fila. Recibe los datos de la fila y su índice |
+### Integración con MapaPMTiles
 
-#### Tipo DataTableColumn
+Layout dashboard con mapa y tabla:
 
 ```tsx
-interface DataTableColumn {
-  key: string;        // Campo del objeto/CSV
-  label: string;      // Texto a mostrar en el header
-  width?: string;     // Ancho de la columna (ej: "40%", "200px")
-}
-```
-
-### Ejemplos Completos
-
-#### Ejemplo con CSV de productos
+<div style={{ display: 'flex', width: '100%', height: '100vh' }}>
+  {/* Mapa 50% */}
+  <MapaPMTiles
+    csvUrl="/datos_entidades.csv"
+    fitToIds={["09", "15", "14"]}
+    mode="jenks"
+    enablePopup={true}
+  />
 
-```tsx
-import { DataTable } from '@atdt/geo-ui';
-
-// public/productos.csv
-// nombre,categoria,precio,stock
-// Laptop Dell,Electrónica,15999,50
-// Mouse Logitech,Accesorios,299,150
-// Monitor Samsung,Electrónica,4599,30
-
-function App() {
-  return (
-    <DataTable
-      csvPath="/productos.csv"
-      columns={[
-        { key: 'nombre', label: 'Producto', width: '30%' },
-        { key: 'categoria', label: 'Categoría', width: '25%' },
-        { key: 'precio', label: 'Precio', width: '25%' },
-        { key: 'stock', label: 'Stock', width: '20%' }
-      ]}
-      width="900px"
-      height="500px"
-      showIndex={true}
-    />
-  );
-}
+  {/* Tabla 50% */}
+  <DataTable
+    csvPath="/datos_entidades.csv"
+    columns={[
+      { key: 'entidad', label: 'Entidad' },
+      { key: 'valor', label: 'Valor' }
+    ]}
+  />
+</div>
 ```
 
-#### Ejemplo con datos dinámicos
+### Interactividad bidireccional (Tabla ↔ Mapa)
 
 ```tsx
-import { DataTable } from '@atdt/geo-ui';
-import { useState, useEffect } from 'react';
-
-function App() {
-  const [datos, setDatos] = useState([]);
-
-  useEffect(() => {
-    // Cargar datos desde una API
-    fetch('https://api.example.com/estadisticas')
-      .then(res => res.json())
-      .then(data => setDatos(data));
-  }, []);
-
-  return (
-    <DataTable
-      data={datos}
-      columns={[
-        { key: 'region', label: 'Región' },
-        { key: 'total', label: 'Total' }
-      ]}
-    />
-  );
-}
-```
-
-#### Ejemplo integrando con MapaPMTiles
-
-Layout tipo dashboard con mapa y tabla lado a lado:
-
-```tsx
-import { MapaPMTiles, DataTable } from '@atdt/geo-ui';
-import '@atdt/geo-ui/style.css';
-
-function App() {
-  return (
-    <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
-      {/* Mapa ocupa 50% */}
-      <MapaPMTiles
-        csvPath="/datos_entidades.csv"
-        fitToIds={["09", "15", "14"]}
-        mode="jenks"
-        enablePopup={true}
-      />
-
-      {/* DataTable ocupa 50% automáticamente */}
-      <DataTable
-        csvPath="/datos_entidades.csv"
-        columns={[
-          { key: 'entidad', label: 'Entidad' },
-          { key: 'valor', label: 'Valor' }
-        ]}
-      />
-    </div>
-  );
-}
-```
-
-#### Ejemplo con interactividad bidireccional (Tabla ↔ Mapa)
-
-Crea interacción completa entre la tabla y el mapa usando `onRowClick` y `onFeatureClick`:
-
-```tsx
-import { MapaPMTiles, DataTable } from '@atdt/geo-ui';
 import { useState } from 'react';
-import '@atdt/geo-ui/style.css';
 
 function App() {
   const [nivel, setNivel] = useState<'entidad' | 'municipio'>('entidad');
@@ -881,13 +855,12 @@ function App() {
     <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
       {/* Mapa con click handler */}
       <MapaPMTiles
-        csvPath={nivel === 'entidad' ? '/prueba_entidad.csv' : `/cdmx_prueba.csv`}
+        csvUrl={nivel === 'entidad' ? '/entidades.csv' : '/municipios.csv'}
         fitToIds={selectedEnt ? [selectedEnt] : undefined}
         mode="jenks"
         showMunicipios={nivel === 'municipio'}
         enablePopup={true}
-        onFeatureClick={(featureId, properties) => {
-          // Click en mapa → cambia tabla a municipios de esa entidad
+        onFeatureClick={(featureId) => {
           if (nivel === 'entidad') {
             setSelectedEnt(featureId);
             setNivel('municipio');
@@ -897,20 +870,8 @@ function App() {
 
       {/* Tabla con click handler */}
       <DataTable
-        csvPath={nivel === 'entidad' ? '/prueba_entidad.csv' : `/cdmx_prueba.csv`}
-        columns={
-          nivel === 'entidad'
-            ? [
-                { key: 'entidad', label: 'Entidad' },
-                { key: 'total', label: 'Total' }
-              ]
-            : [
-                { key: 'municipio', label: 'Municipio' },
-                { key: 'valor', label: 'Valor' }
-              ]
-        }
+        csvPath={nivel === 'entidad' ? '/entidades.csv' : '/municipios.csv'}
         onRowClick={(row) => {
-          // Click en tabla → hace zoom en mapa a esa entidad
           if (nivel === 'entidad') {
             setSelectedEnt(row.cvegeo);
             setNivel('municipio');
@@ -920,20 +881,8 @@ function App() {
 
       {/* Botón para regresar */}
       {nivel === 'municipio' && (
-        <button
-          style={{
-            position: 'absolute',
-            top: 20,
-            left: 20,
-            zIndex: 1000,
-            padding: '10px 20px'
-          }}
-          onClick={() => {
-            setNivel('entidad');
-            setSelectedEnt(null);
-          }}
-        >
-          ← Regresar a entidades
+        <button onClick={() => { setNivel('entidad'); setSelectedEnt(null); }}>
+          ← Regresar
         </button>
       )}
     </div>
@@ -941,184 +890,38 @@ function App() {
 }
 ```
 
-**Flujo de interacción bidireccional:**
-1. **Vista inicial**: Muestra tabla con entidades (`prueba_entidad.csv`) y mapa de México
-2. **Click en MAPA**: Hace zoom a la entidad y cambia tabla a municipios
-3. **Click en TABLA**: Hace zoom en el mapa y cambia tabla a municipios
-4. **Mapa hace zoom**: Automáticamente hacia la entidad seleccionada
-5. **Tabla cambia**: Muestra datos municipales (`cdmx_prueba.csv`)
-6. **Botón "Regresar"**: Vuelve a la vista de entidades
-
-### Formato de Números
-
-Los números se formatean automáticamente con separadores de miles usando el formato mexicano:
-
-- `1815786` → `1,815,786`
-- `9209944` → `9,209,944`
-- `150` → `150`
-
-### Estados de Carga
-
-El componente muestra diferentes estados:
-
-1. **Cargando**: "Cargando datos..." mientras lee el CSV
-2. **Error**: Mensaje de error en rojo si falla la carga
-3. **Vacío**: "No hay datos para mostrar" si el CSV está vacío
-4. **Datos**: Tabla renderizada con los datos
-
-### Diseño y Layout
+## Props de DataTable
 
-El componente está diseñado para integrarse con layouts tipo dashboard:
-
-- **Desktop**:
-  - Ocupa **50% del ancho** del contenedor padre por defecto
-  - Centrado vertical y horizontal
-  - Scroll interno cuando el contenido excede **70vh**
-  - Headers y celdas con tamaño `1.11vw`
-  - Columnas se distribuyen automáticamente usando flexbox
-
-- **Mobile** (≤600px):
-  - Ocupa **100% del ancho**
-  - Headers con tamaño `3.5vw`
-  - Celdas con tamaño `4vw`
-  - Padding ajustado para pantallas pequeñas
-  - Box shadow más pronunciado
-
-### Personalización de Estilos
-
-Puedes sobrescribir los estilos usando la clase `className`:
-
-```tsx
-<DataTable
-  csvPath="/datos.csv"
-  className="mi-tabla-custom"
-/>
-```
-
-```css
-.mi-tabla-custom {
-  border: 2px solid #66827f;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-}
-
-.mi-tabla-custom .tableHeader {
-  background-color: #66827f;
-  color: white;
-}
-```
-
----
-
-## Props de MapaPMTiles
-
-### Props Obligatorias
+### Props de Datos (una es requerida)
 
 | Prop | Tipo | Descripción |
 |------|------|-------------|
-| `csvUrl` o `csvFile` | `string \| File` | URL del CSV remoto o archivo File local. **Al menos uno debe estar presente** |
+| `data` | `Record<string, any>[]` | Array de objetos |
+| `csvPath` | `string` | Ruta del CSV en `public/` |
 
-### Props Opcionales
+### Props de Configuración
 
 | Prop | Tipo | Default | Descripción |
 |------|------|---------|-------------|
-| `pmtilesUrl` | `string` | `"https://www.datosgeoespaciales.atdt.gob.mx/datalake/pmtiles/componente/entidad.pmtiles"` | URL del archivo PMTiles remoto. **Por defecto usa el PMTiles de entidades de México** |
-| `sourceLayer` | `string` | `"entidad"` | Nombre de la capa vectorial dentro del PMTiles |
-| `joinGeomKey` | `string` | `"cvegeo"` | Campo de la geometría para hacer el join (también usado como `promoteId`) |
-| `joinCsvKey` | `string` | `joinGeomKey` | Campo del CSV para hacer el join |
-| `field` | `string` | `"valor"` | Campo del CSV con los valores a visualizar |
-| `mode` | `"boolean" \| "jenks"` | `"boolean"` | Modo de estilo: booleano o clasificación Jenks |
-| `width` | `string \| number` | `"100%"` | Ancho del mapa |
-| `height` | `string \| number` | `520` | Alto del mapa (en px si es número) |
-| `initialView` | `object` | `{center: [-102, 23], zoom: 4}` | Vista inicial del mapa (ignorado si se usa `fitToIds`) |
-| `initialView.center` | `[number, number]` | `[-102, 23]` | Centro inicial [lng, lat] |
-| `initialView.zoom` | `number` | `4` | Zoom inicial |
-| `fitToIds` | `string \| string[]` | `undefined` | ID o array de IDs de features para filtrar y hacer zoom automático (sin animación) |
-| `bboxField` | `string` | `"bbox"` | Campo con bbox precalculado en PMTiles |
-| `jenksK` | `number` | `5` | Número de clases para clasificación Jenks |
-| `showMunicipios` | `boolean` | `false` | Activa modo municipal: muestra municipios con datos temáticos y entidad como contorno |
-| `enablePopup` | `boolean` | `false` | Habilita popup con hover para mostrar información |
-| `popupDataLabel` | `string` | `undefined` | Etiqueta para el dato adicional del popup (ej: "Población total") |
-| `popupDataField` | `string` | `undefined` | Campo del CSV para mostrar en el popup (usa el valor de `field` si no se especifica) |
-| `csvUrlMunicipios` | `string` | `undefined` | URL del CSV remoto para municipios (usado cuando hay drill-down interactivo) |
-| `csvFileMunicipios` | `File` | `undefined` | Archivo File local para municipios (usado cuando hay drill-down interactivo) |
-| `joinCsvKeyMunicipios` | `string` | `"cvegeo"` | Campo del CSV municipal para hacer el join (por defecto usa cvegeo de 5 dígitos) |
-| `fieldMunicipios` | `string` | `field` | Campo del CSV municipal con los valores a visualizar (por defecto usa el mismo `field` de entidades) |
-| `modeMunicipios` | `"boolean" \| "jenks"` | `mode` | Modo de estilo para municipios (permite usar diferente clasificación que entidades) |
-| `onFeatureClick` | `(featureId: string, properties: any) => void` | `undefined` | Callback que se ejecuta al hacer click en una feature del mapa. Recibe el ID de la feature y sus propiedades. Solo funciona cuando hay 2 o más entidades en `fitToIds` |
-
-## Modos de Estilo
-
-### Modo Boolean
-
-Pinta las geometrías en dos colores según el valor:
-
-- `value === 1` → **#66827f** (verde azulado)
-- `value === 0 / null / undefined` → **#f3f3f3** (gris claro)
-
-```tsx
-<MapaPMTiles
-  mode="boolean"
-  {...otherProps}
-/>
-```
-
-### Modo Jenks
-
-Clasifica los valores numéricos usando el algoritmo Jenks Natural Breaks y aplica una rampa de colores:
+| `columns` | `DataTableColumn[]` | Auto-detectado | Definición de columnas |
+| `width` | `string` | Por CSS | Ancho del contenedor (50% desktop, 100% mobile) |
+| `height` | `string` | Por CSS | Alto del contenedor (scroll si > 70vh) |
+| `className` | `string` | `""` | Clases CSS adicionales |
+| `showIndex` | `boolean` | `false` | Mostrar índice numérico |
+| `indexLabel` | `string` | `"#"` | Etiqueta para índice |
+| `onRowClick` | `(row: Record<string, any>, index: number) => void` | `undefined` | Callback al hacer click en fila |
 
-- De **#f3f3f3** (gris claro) a **#66827f** (verde azulado)
-- Número de clases controlado por `jenksK` (default: 5)
+### Tipo DataTableColumn
 
 ```tsx
-<MapaPMTiles
-  mode="jenks"
-  jenksK={7}
-  {...otherProps}
-/>
-```
-
-## Formato CSV
-
-El archivo CSV debe tener:
-
-- **Header row** con nombres de columnas
-- Una columna con el **join key** que coincida con el campo `joinGeomKey` de las geometrías
-- Una columna con los **valores** especificada en `field`
-
-Ejemplo:
-
-```csv
-CVE_ENT,nombre,valor
-01,Aguascalientes,1
-02,Baja California,0
-09,Ciudad de México,1
+interface DataTableColumn {
+  key: string;        // Campo del objeto/CSV
+  label: string;      // Texto del header
+  width?: string;     // Ancho de columna (ej: "40%", "200px")
+}
 ```
 
-## Interactividad del Mapa
-
-El componente tiene **interactividad desactivada** por defecto para mantener un estilo estático:
-
-- `boxZoom`: false
-- `doubleClickZoom`: false
-- `dragRotate`: false
-- `keyboard`: false
-- `scrollZoom`: false
-- `touchPitch`: false
-- `dragPan`: false
-- `touchZoomRotate`: true (permitido)
-
-## Notas CORS
-
-Para consumir PMTiles y CSV de dominios externos, asegúrate de que:
-
-1. El servidor tenga configurado CORS adecuadamente
-2. Para PMTiles, el servidor debe soportar **Range requests** (HTTP 206)
-3. Headers necesarios:
-   ```
-   Access-Control-Allow-Origin: *
-   Access-Control-Allow-Headers: Range
-   Accept-Ranges: bytes
-   ```
+---
 
 ## Tecnologías
 
@@ -1129,14 +932,35 @@ Para consumir PMTiles y CSV de dominios externos, asegúrate de que:
 - **PapaParse**: Parsing de CSV
 - **Vite**: Build tool
 
+---
+
 ## Licencia
 
 ISC
 
+---
+
 ## Autor
 
 Dirección de Datos Geográficos - ATDT
 
+---
+
 ## Contribuciones
 
 Issues y pull requests son bienvenidos en [GitLab](https://gitlab.com/atdt-desarrollogeo/componentes).
+
+---
+
+## Notas CORS
+
+Para consumir PMTiles y CSV de dominios externos:
+
+1. El servidor debe tener CORS configurado
+2. Para PMTiles, debe soportar **Range requests** (HTTP 206)
+3. Headers necesarios:
+   ```
+   Access-Control-Allow-Origin: *
+   Access-Control-Allow-Headers: Range
+   Accept-Ranges: bytes
+   ```