npm - @luis-angel-martin-dzul/input-styles - Versions diffs - 0.0.34 → 0.0.38 - Mend

@luis-angel-martin-dzul/input-styles 0.0.34 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -1,1361 +1,1420 @@
-# 📦 Input Style
-**Librería de componentes y formularios Vue 3**
-Incluye componentes de inputs, selects, botones, paginación y más, estilizados con TailwindCSS y listos para producción.
-------
-![Última actualización](https://img.shields.io/badge/Actualizado-16%20de%20Septiembre%20del%2026-blue)
-![Versión](https://img.shields.io/badge/versión-0.0.29-indigo)
-------
-# 📦 Instalación
-La librería se distribuye mediante **npm**:
-```
-npm install @luis-angel-martin-dzul/input-styles
-```
-------
-# 🚀 Uso en Vue + Vite
-En `main.js` o `main.ts`:
-```js
-import { createApp } from 'vue'
-import App from './App.vue'
-import '@luis-angel-martin-dzul/input-styles/style.css'
-import InputStyle from '@luis-angel-martin-dzul/input-styles'
-const app = createApp(App)
-app.use(InputStyle)
-app.mount('#app')
-```
-Al instalar el plugin se registran automáticamente todos los componentes y las siguientes **propiedades globales** (disponibles en cualquier componente con la Options API):
-| Propiedad global | Equivale a | Descripción |
-| ---------------- | ---------- | ----------- |
-| `$alertstyle` | `AlertStyle` | Notificaciones tipo toast (ver [AlertStyle](#alertstyle-notificaciones-tipo-toast)). |
-| `$dialogstyle` | `DialogStyle` | Diálogos de confirmación / info / carga (ver [DialogStyle](#dialogstyle-diálogos-modales)). |
-| `$utilstyle` | `UtilStyle` | Utilidades internas (ej: generación de UUID). |
-------
-# Estilos default
-Para cargar correctamente los estilos debes realizar algo como lo siguiente:
-Agrega el @source para indicar que el componente requiere de tailwindcss
-```css
-@import "tailwindcss";
-@source "../node_modules/@luis-angel-martin-dzul/input-styles/**/*"
-```
-# 🎨 Estilos personalizados (Style Registry)
-La librería expone un sistema de **tokens de estilo configurables** que permite cambiar la apariencia de todos los componentes desde un solo lugar, sin necesidad de modificar el código fuente.
-Los estilos se configuran **antes de montar la app**, importando `configureStyles` directamente.
-## Opción A — vía `app.use` (recomendado)
-```js
-import VueInputYuc from '@luis-angel-martin-dzul/input-styles'
-app.use(VueInputYuc, {
-  styles: {
-    INPUT_BASE: 'w-full px-0 py-2 bg-transparent border-b focus:outline-none ...',
-    ICON_VALID:  'text-emerald-500',
-    // solo los tok ens que quieras cambiar
-  }
-})
-```
-## Opción B — importación directa
-```js
-import { configureStyles } from '@luis-angel-martin-dzul/input-styles'
-configureStyles({
-  LOADER_ARC_STROKE: '#3B82F6',
-  REQUIRED_ASTERISK: 'text-red-500',
-})
-```
-⚠️ `configureStyles()` debe llamarse **antes** de que los componentes se monten. Los cambios no son reactivos después del montaje inicial.
-------
-## 📋 Referencia completa de tokens
-### Tokens auxiliares de label
-_Afecta: todos los componentes que tienen `label` o `description`_
-Estos tokens controlan partes individuales del label y del texto descriptivo. Al sobrescribir uno, las funciones `inputLabelClass`, `inputCheckLabelClass` e `inputDescriptionClass` lo recogen automáticamente **sin necesidad de sobreescribir la función entera**.
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `INPUT_BASE_TITLE` | `string` | `'block text-sm font-medium'` | Clases estructurales del `<label>` de inputs de texto. |
-| `INPUT_CHECK_BASE_TITLE` | `string` | `'block text-sm font-medium'` | Clases estructurales del `<label>` de checkbox, radio y switch. |
-| `LABEL_DISABLED_STATIC` | `string` | `'text-gray-400'` | Color del label y descripción cuando el campo está deshabilitado. |
-| `LABEL_ENABLED_STATIC` | `string` | `'text-gray-700'` | Color del label cuando el campo está habilitado. |
-```js
-configureStyles({
-    LABEL_DISABLED_STATIC: 'text-gray-400',
-    LABEL_ENABLED_STATIC:  'text-gray-900',
-    INPUT_BASE_TITLE:      'block font-semibold mb-1 text-sm',
-})
-```
----
-### Inputs de texto
-_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`, `InputAutocompleteStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `INPUT_BASE` | `string` | `'w-full text-gray-800 bg-white px-3 py-1.5 rounded border ...'` | Clases base del `<input>`. No incluye borde ni ring (eso lo maneja `inputValidateClass`). |
-| `inputValidateClass` | `function(validate)` | Ver abajo | Retorna las clases de borde y ring según el estado de validación. `validate`: `true` / `false` / `null`. |
-| `inputLabelClass` | `function(disabled)` | Ver abajo | Retorna las clases del `<label>`. Internamente usa `INPUT_BASE_TITLE`, `LABEL_DISABLED_STATIC` y `LABEL_ENABLED_STATIC`. |
-| `inputDescriptionClass` | `function(validate, alignRight?)` | Ver abajo | Retorna las clases del texto de descripción. Internamente usa `ICON_VALID`, `ICON_INVALID` y `LABEL_DISABLED_STATIC`. |
-> 💡 Si solo quieres cambiar un color de validación, basta con sobrescribir `ICON_INVALID` o `ICON_VALID` — `inputDescriptionClass` los recoge automáticamente.
-```js
-configureStyles({
-    ICON_INVALID: 'text-red-500',
-    ICON_VALID:   'text-emerald-500',
-})
-// Override completo de las funciones (cuando necesitas control total)
-configureStyles({
-    inputValidateClass: (validate) => {
-        if (validate === false) return 'border-red-500 focus:ring-red-200'
-        if (validate === true)  return 'border-emerald-500 focus:ring-emerald-200'
-        return 'border-gray-200 focus:ring-indigo-200'
-    },
-    inputLabelClass: (disabled) => ['block font-bold mb-2', disabled ? 'text-gray-400' : 'text-gray-900'],
-    inputDescriptionClass: (validate, alignRight = true) => [
-        'block w-full text-sm',
-        alignRight && 'text-right',
-        validate === false ? 'text-red-500' : validate === true ? 'text-emerald-500' : 'text-gray-500',
-    ],
-})
-```
----
-### Select
-_Afecta: `SelectStyle`, `InputAutocompleteStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `SELECT_DISABLED` | `string` | `'w-full px-3 py-1.5 rounded bg-gray-100 ...'` | Clases del input en estado disabled. |
-| `SELECT_DROPDOWN` | `string` | `'absolute z-20 w-full bg-white border ...'` | Clases del contenedor `<ul>` del dropdown. |
-| `SELECT_OPTION_BASE` | `string` | `'px-3 py-1 cursor-pointer text-md'` | Clases base de cada `<li>` del dropdown. |
-| `selectOptionClass` | `function(isSelected, isHighlighted)` | Ver abajo | Retorna clases dinámicas por opción según su estado. |
-| `SELECT_OPTGROUP` | `string` | `'px-2 pt-1 pb-0.5 text-xs font-semibold uppercase ...'` | Clases del encabezado de un grupo de opciones (`optgroup`). |
-| `SELECT_EMPTY` | `string` | `'px-3 py-1 text-gray-400 cursor-not-allowed'` | Clases del mensaje "Sin registros". |
-```js
-configureStyles({
-    selectOptionClass: (isSelected, isHighlighted) => {
-        if (isSelected)    return 'bg-indigo-100 text-indigo-900 font-medium'
-        if (isHighlighted) return 'bg-indigo-50 text-gray-900'
-        return 'hover:bg-indigo-50 text-gray-800'
-    },
-})
-```
----
-### Checkbox, Radio y Switch
-_Afecta: `InputCheckStyle`, `InputRadioStyle`, `InputSwitchStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `inputCheckLabelClass` | `function(disabled)` | Ver abajo | Clases del label de checks. |
-| `CHECK_BOX_BASE` | `string` | `'w-5 h-5 flex items-center justify-center rounded border-2 transition'` | Estructura base del cuadro del checkbox. |
-| `RADIO_BASE` | `string` | `'w-5 h-5 flex items-center justify-center rounded-full transition'` | Estructura base del círculo del radio. |
-| `SWITCH_BASE` | `string` | `'w-10 h-5 relative flex items-center rounded-full transition border-2'` | Estructura base de la pista del switch. |
-| `checkBoxClass` | `function(model, disabled)` | Ver abajo | Clases de color del checkbox según estado activo/disabled. |
-| `radioClass` | `function(model, disabled)` | Ver abajo | Clases de color del radio button según estado. |
-| `switchClass` | `function(model, disabled)` | Ver abajo | Clases de color de la pista del switch. |
-| `switchDotClass` | `function(model, disabled)` | Ver abajo | Clases de color de la bola interior del switch. |
-```js
-configureStyles({
-    checkBoxClass: (model, disabled) => {
-        if (disabled) return model
-            ? 'bg-indigo-200 border-indigo-200 cursor-not-allowed'
-            : 'bg-gray-100 border-gray-200 cursor-not-allowed'
-        return model
-            ? 'bg-indigo-500 border-indigo-500 peer-focus:ring-2 peer-focus:ring-indigo-200'
-            : 'bg-white border-gray-300 peer-focus:ring-2 peer-focus:ring-indigo-200'
-    },
-})
-```
----
-### Paginación
-_Afecta: `PaginationStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `PAGINATION_NAV_PREV` | `string` | `'bg-white hover:bg-indigo-50 border ...'` | Clases del botón de página anterior. |
-| `PAGINATION_NAV_NEXT` | `string` | `'bg-white hover:bg-indigo-50 border ...'` | Clases del botón de página siguiente. |
-| `PAGINATION_PAGE_BASE` | `string` | `'border px-2.5 py-2 cursor-pointer w-8 relative'` | Clases base de cada botón de página. |
-| `paginationPageClass` | `function(page, actualPage, index)` | Ver abajo | Retorna clases dinámicas por botón de página. |
-| `PAGINATION_SUMMARY` | `string` | `'text-sm text-gray-700'` | Clases del texto de resumen de registros. |
----
-### Loader
-_Afecta: `LoaderStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `LOADER_ARC_STROKE` | `string` | `'#6366F1'` | Color hex del arco animado del loader (indigo-500). |
-| `LOADER_MESSAGE` | `string` | `'text-gray-600 text-lg font-medium'` | Clases del mensaje de carga. |
----
-### Iconos y asterisco de requerido
-_Afecta: todos los componentes con `required` o iconos de validación_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `REQUIRED_ASTERISK` | `string` | `'text-red-500'` | Clase de color del asterisco `*` en campos requeridos. |
-| `ICON_VALID` | `string` | `'text-emerald-500'` | Clase de color del ícono de validación correcta. |
-| `ICON_INVALID` | `string` | `'text-red-500'` | Clase de color del ícono de validación errónea. |
-| `ICON_STATIC` | `string` | `'text-indigo-400'` | Clase de color de los íconos estáticos (reloj, calendario, ojo, chevron). |
-| `ICON_SIZE_STATIC` | `string` | `'w-5 h-5'` | Clases de tamaño de todos los íconos. |
----
-### File Upload y Download
-_Afecta: `InputFileUploadStyle`, `InputFileDownloadStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `FILE_BUTTON_BASE` | `string` | `'flex items-center justify-center gap-3 px-4 py-2 border-2 rounded-xl ...'` | Clases estructurales del botón (compartido entre upload y download). |
-| `FILE_BUTTON_ACTIVE` | `string` | `'border-gray-200 bg-white text-gray-700 hover:border-indigo-400 ...'` | Clases del botón en estado normal/activo. |
-| `FILE_BUTTON_DISABLED` | `string` | `'border-gray-200 bg-gray-100 text-gray-400'` | Clases del botón en estado disabled. |
-| `FILE_ICON_BG` | `string` | `'bg-indigo-300'` | Fondo del círculo de ícono en estado activo. |
-| `FILE_ICON_BG_COMPLETE` | `string` | `'bg-emerald-500'` | Fondo del círculo de ícono cuando la descarga está completa. |
-| `FILE_ICON_BG_DISABLED` | `string` | `'bg-gray-300'` | Fondo del círculo de ícono en estado disabled. |
----
-### Time Picker
-_Afecta: `InputTimeStyle`_
-| Token | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `TIME_PICKER_WRAPPER` | `string` | `'absolute z-20 left-0 top-full rounded-lg bg-white'` | Contenedor flotante del picker. |
-| `TIME_PICKER_CONTAINER` | `string` | `'border border-gray-300 rounded-lg p-3'` | Borde interior del picker. |
-| `TIME_PICKER_COLUMN` | `string` | `'h-48 overflow-y-auto border border-gray-200 rounded-md ...'` | Columna scrollable de horas/minutos. |
-| `TIME_PICKER_AMPM_COLUMN` | `string` | `'h-48 overflow-y-auto border border-gray-200 rounded-md ...'` | Columna scrollable AM/PM. |
-| `TIME_PICKER_COLUMN_LABEL` | `string` | `'block text-xs font-medium text-gray-500 mb-1 text-center'` | Label de cada columna ("Hora", "Minuto", "AM/PM"). |
-| `TIME_PICKER_ITEM` | `string` | `'px-3 py-1 text-center cursor-pointer hover:bg-indigo-50 ...'` | Fila base de cada ítem del picker. |
-| `timePickerItemClass` | `function(isActive)` | Ver abajo | Clases dinámicas de cada ítem según si está seleccionado. |
-------
-# 🧩 Componentes
-## Props comunes
-La mayoría de los componentes comparten las siguientes props:
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number \| Boolean` | — | Valor del campo (v-model). |
-| `id` | `String` | `null` | Id propio del control. Si se omite, se genera automáticamente (uuid) y se mantiene enlazado con el `<label for>`. |
-| `name` | `String` | `null` | Atributo `name` nativo del control (`input` / `textarea` / `file` / `button`). Útil para envío de formularios, autocompletado y accesibilidad. |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo automáticamente al montarse. |
-| `label` | `String` | `''` | Texto del label del campo. |
-| `description` | `String` | `''` | Texto de ayuda debajo del campo. Cambia de color según el estado de validación. |
-| `placeholder` | `String` | `''` | Placeholder del input. |
-| `disabled` | `Boolean` | `false` | Deshabilita el campo. |
-| `required` | `Boolean` | `false` | Marca el campo como requerido (muestra asterisco `*`). |
-| `validate` | `Boolean \| null` | `null` | Estado de validación: `true` = válido, `false` = inválido, `null` = sin estado. |
-| `mclass` | `String` | `null` | Clases CSS adicionales aplicadas directamente al elemento del input. |
-## Eventos comunes
-| Evento | Payload | Descripción |
-| ------ | ------- | ----------- |
-| `update:modelValue` | `value` | Se dispara al cambiar el valor (permite `v-model`). |
-| `change` | `value` | Se dispara al cambiar el valor. |
-| `blur` | `event` | Se dispara al perder el foco. |
-------
-## InputTextStyle
-Input de texto genérico. Soporta tipos `text`, `email`, `search`, `tel`, `url` y `number`.
-```vue
-<InputTextStyle
-    v-model="nombre"
-    label="Nombre"
-    placeholder="Escribe tu nombre"
-    :required="true"
-    :validate="validate"
-    description="Campo requerido"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number` | `''` | Valor del campo. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autocomplete` | `String` | `null` | Atributo `autocomplete` nativo (ej: `email`, `username`, `off`). |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `readonly` | `Boolean` | `false` | Solo lectura: no editable, pero se envía en el formulario. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `type` | `String` | `'text'` | Tipo del input: `text`, `email`, `search`, `tel`, `url`, `number`. |
-| `maxlength` | `String` | `null` | Longitud máxima de caracteres. |
-| `minlength` | `String` | `null` | Longitud mínima de caracteres. |
-| `min` | `String` | `null` | Valor mínimo (solo cuando `type="number"`, aplicado al perder el foco). |
-| `max` | `String` | `null` | Valor máximo (solo cuando `type="number"`, aplicado al perder el foco). |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-------
-## InputNumberStyle
-Input numérico con control preciso de dígitos, decimales, rango y formato de visualización. El valor se emite siempre como string numérico limpio (ej: `"1234.56"`). Al perder el foco se formatea con `toLocaleString`.
-```vue
-<InputNumberStyle
-    v-model="monto"
-    label="Monto"
-    numeric="10,2"
-    min="0"
-    max="9999999999"
-    :required="true"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number` | `''` | Valor del campo. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autocomplete` | `String` | `null` | Atributo `autocomplete` nativo. |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `readonly` | `Boolean` | `false` | Solo lectura: bloquea la edición y los botones ▲/▼, pero se envía en el formulario. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `numeric` | `String` | `null` | Formato tipo SQL: `"10,2"` → 10 dígitos enteros, 2 decimales. Si se omite, usa `10,2` por defecto. |
-| `min` | `String` | `null` | Valor mínimo (aplicado al perder el foco). Si es `null` o negativo, permite negativos. |
-| `max` | `String` | `null` | Valor máximo (aplicado al perder el foco). |
-| `alignLeft` | `Boolean` | `false` | Posición de los botones de paso (▲/▼) respecto al valor. `false` = botones a la izquierda, valor a la derecha (`Rows \| Input`); `true` = botones a la derecha, valor a la izquierda (`Input \| Rows`). |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Comportamiento:**
-- Incluye botones **caret ▲ / ▼** para aumentar/disminuir el valor en unidades (respetando `min`/`max`). Por defecto se alinean a la izquierda del campo (con el valor a la derecha); con `alignLeft` se mueven a la derecha y el valor pasa a la izquierda. No tienen separador y usan el color global de los iconos (`ICON_STATIC`).
-- Si **mantienes presionado** un botón, tras una breve pausa el valor cambia de forma **continua** hasta soltar.
-- Puedes escribir `0` y luego `.` para empezar los decimales: el punto se conserva a la espera de los dígitos decimales (solo si los decimales están activados en `numeric`).
-- Al **enfocar** el campo, si el valor es `0` (o está vacío) se limpia, para que al escribir reemplaces el valor en lugar de anteponerlo.
-- Al **perder el foco**, si el campo queda vacío o en `0`, se conserva el valor `0` formateado (ej: `"0.00"`), aplicando además los límites `min`/`max`.
-**Navegación por teclado:**
-- `↑` / `↓` — aumentar/disminuir el valor en unidades, respetando `min`/`max`.
-------
-## InputPasswordStyle
-Input de contraseña con toggle para mostrar/ocultar el texto.
-```vue
-<InputPasswordStyle
-    v-model="password"
-    label="Contraseña"
-    placeholder="Mínimo 8 caracteres"
-    :required="true"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number` | `''` | Valor del campo. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autocomplete` | `String` | `null` | Atributo `autocomplete` nativo (ej: `current-password`, `new-password`). |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `readonly` | `Boolean` | `false` | Solo lectura: no editable, pero se envía en el formulario. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `maxlength` | `String` | `null` | Longitud máxima. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-------
-## TextAreaStyle
-Área de texto multi-línea.
-```vue
-<TextAreaStyle
-    v-model="comentario"
-    label="Comentario"
-    placeholder="Escribe aquí..."
-    row="5"
-    :maxlength="500"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String` | `''` | Valor del campo. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<textarea>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autocomplete` | `String` | `null` | Atributo `autocomplete` nativo. |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `readonly` | `Boolean` | `false` | Solo lectura: no editable, pero se envía en el formulario. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `row` | `String` | `'3'` | Número de filas visibles del textarea. |
-| `maxlength` | `String` | `null` | Longitud máxima de caracteres. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-------
-## SelectStyle
-Select personalizado con dropdown, navegación por teclado y búsqueda por tipeo. El dropdown se posiciona automáticamente arriba o abajo según el espacio disponible.
-```vue
-<SelectStyle
-    v-model="pais"
-    label="País"
-    :list="paises"
-    return-value="value"
-    :required="true"
-    :validate="validate"
-/>
-```
-```js
-// Formato del array `list` — lista plana
-const paises = [
-    { value: 1, text: 'México' },
-    { value: 2, text: 'España' },
-    { value: 3, text: 'Argentina' },
-]
-// El `value` es opcional: si se omite, se usa el `text` como valor
-const colores = [
-    { text: 'Rojo' },
-    { text: 'Verde' },
-]
-// Lista agrupada — cada grupo tiene un `label` y sus `options`
-const ubicaciones = [
-    { label: 'América', options: [{ value: 1, text: 'México' }, { value: 2, text: 'Argentina' }] },
-    { label: 'Europa',  options: [{ value: 3, text: 'España' }, { value: 4, text: 'Francia' }] },
-]
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
-| `list` | `Array` | `[]` | Array de opciones. Acepta lista plana `{ value, text }` o agrupada `{ label, options: [...] }`. El `value` es opcional: si se omite, se usa el `text` como valor. |
-| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Navegación por teclado:**
-- `↑` / `↓` — navegar opciones
-- `Enter` — seleccionar la opción resaltada
-- `Escape` — cerrar el dropdown
-- Tipear letras — búsqueda inmediata en la lista
-------
-## InputAutocompleteStyle
-Autocomplete basado en `SelectStyle`, pero con el **input editable**: el usuario escribe para filtrar las opciones en vivo. Mantiene el mismo formato de `list` (plana o agrupada) y la misma navegación por teclado y posicionamiento automático del dropdown.
-Incluye un estado de **carga/búsqueda** controlado por la prop `loading`: cuando es `true`, oculta las opciones y muestra el mensaje _"Buscando coincidencias..."_ — pensado para búsquedas asíncronas donde el listado se resuelve en el servidor.
-```vue
-<InputAutocompleteStyle
-    v-model="pais"
-    label="País"
-    :list="paises"
-    placeholder="Escribe para buscar"
-    :loading="buscando"
-    return-value="value"
-    :validate="validate"
-    @search="onSearch"
-/>
-```
-```js
-// El evento @search se emite en cada tecleo; úsalo para disparar una
-// búsqueda asíncrona y controlar la prop `loading`.
-function onSearch(query) {
-    buscando.value = true
-    fetchPaises(query).then(res => {
-        paises.value = res
-        buscando.value = false
-    })
-}
-```
-```js
-// Formato del array `list` — idéntico a SelectStyle (plana o agrupada)
-const paises = [
-    { value: 1, text: 'México' },
-    { value: 2, text: 'España' },
-    { value: 3, text: 'Argentina' },
-]
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
-| `list` | `Array` | `[]` | Array de opciones. Acepta lista plana `{ value, text }` o agrupada `{ label, options: [...] }`. El `value` es opcional: si se omite, se usa el `text` como valor. |
-| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
-| `loading` | `Boolean` | `false` | Cuando es `true`, oculta las opciones y muestra "Buscando coincidencias...". Úsalo mientras resuelves una búsqueda asíncrona. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `placeholder` | `String` | `''` | |
-| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Eventos:**
-- `search` — se emite en cada cambio del texto escrito, con el `query` actual como payload. Ideal para búsquedas asíncronas.
-- `update:modelValue` / `change` — emiten el valor al seleccionar una opción (según `returnValue`).
-- `blur` — al cerrarse el dropdown.
-**Comportamiento:**
-- Al abrir (foco o clic en el chevron) muestra todas las opciones; al teclear, filtra por coincidencia de texto (sin distinguir mayúsculas).
-- Al seleccionar una opción, el input muestra su `text`.
-- Si se cierra el dropdown sin seleccionar, el input vuelve a reflejar la selección real (descarta el texto escrito sin confirmar).
-**Navegación por teclado:**
-- `↑` / `↓` — navegar opciones
-- `Enter` — seleccionar la opción resaltada
-- `Escape` — cerrar el dropdown
-------
-## InputCheckStyle
-Checkbox estilizado con label y descripción.
-```vue
-<InputCheckStyle
-    v-model="aceptaTerminos"
-    label="Acepto los términos y condiciones"
-    :required="true"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `Boolean \| Array \| String \| Number` | `false` | Estado del check (modo simple) o array de valores seleccionados (modo grupo). |
-| `value` | `String \| Number \| Boolean` | `null` | Valor que aporta este checkbox al grupo. Se usa cuando `modelValue` es un `Array` (checkbox múltiple nativo). |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. Comparte el mismo `name` entre las casillas del grupo. |
-| `id` | `String` | `null` | Id propio del `<input>`; si se omite se genera automáticamente. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | Clases adicionales del cuadro del checkbox. |
-**Dos modos de uso:**
-- **Modo simple (por defecto):** con `modelValue` booleano, se comporta como un check `true`/`false`.
-  ```vue
-  <InputCheckStyle v-model="acepto" label="Acepto los términos" />
-  ```
-- **Modo grupo nativo:** enlaza varias casillas a un `v-model` de tipo **array**, cada una con su `value` y el mismo `name`. Marcar/desmarcar agrega o quita el `value` del array, y en un `<form>` nativo el navegador envía un `name=<value>` por cada casilla marcada (`FormData.getAll`).
-  ```vue
-  <form @submit.prevent="onSubmit">
-      <InputCheckStyle v-model="perms" name="perm" value="read"   label="Leer" />
-      <InputCheckStyle v-model="perms" name="perm" value="write"  label="Escribir" />
-      <InputCheckStyle v-model="perms" name="perm" value="delete" label="Eliminar" />
-  </form>
-  ```
-  ```js
-  // perms === ['read', 'write']  →  FormData del <form>: perm=read, perm=write
-  data() { return { perms: ['read', 'write'] } },
-  onSubmit(e) { console.log(new FormData(e.target).getAll('perm')) }
-  ```
-**Eventos:** `update:modelValue` y `change` emiten el array actualizado (modo grupo) o el booleano (modo simple).
-------
-## InputRadioStyle
-Radio button estilizado con label y descripción.
-```vue
-<InputRadioStyle
-    v-model="opcionA"
-    label="Opción A"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Number \| Boolean` | `false` | Valor seleccionado del grupo (modo grupo) o estado del toggle (modo booleano). |
-| `value` | `String \| Number \| Boolean` | `null` | Valor que representa este radio dentro del grupo. Si se define, actúa como radio nativo real (`type="radio"`); si se omite, se comporta como toggle booleano. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. **Requerido** para agrupar varios radios en modo nativo. |
-| `id` | `String` | `null` | Id propio del `<input>`; si se omite se genera automáticamente. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | Clases adicionales del círculo del radio. |
-**Dos modos de uso:**
-- **Modo booleano (por defecto):** sin `value`, se comporta como un toggle `true`/`false`. Útil para una sola opción.
-  ```vue
-  <InputRadioStyle v-model="acepto" label="Acepto" />
-  ```
-- **Modo grupo nativo:** al definir `value` en cada radio y compartir el mismo `name`, se comportan como un grupo de radios reales (`type="radio"`): seleccionar uno deselecciona los demás, `v-model` guarda el `value` elegido y en un `<form>` nativo el navegador envía `name=<value seleccionado>`.
-  ```vue
-  <form @submit.prevent="onSubmit">
-      <InputRadioStyle v-model="plan" name="plan" value="free"  label="Free" />
-      <InputRadioStyle v-model="plan" name="plan" value="pro"   label="Pro" />
-      <InputRadioStyle v-model="plan" name="plan" value="enterprise" label="Enterprise" />
-  </form>
-  ```
-  ```js
-  // plan === 'pro'  →  FormData del <form> contiene plan=pro
-  onSubmit(e) { console.log(new FormData(e.target).get('plan')) }
-  ```
-**Eventos:** `update:modelValue` y `change` emiten el `value` seleccionado (modo grupo) o el booleano (modo toggle).
-------
-## InputSwitchStyle
-Toggle switch estilizado.
-```vue
-<InputSwitchStyle
-    v-model="activo"
-    label="Activar notificaciones"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `Boolean` | `false` | Estado del switch. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio del `<input>`; si se omite se genera automáticamente. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | Clases adicionales de la pista del switch. |
-------
-## InputDateStyle
-Selector de fecha con máscara `dd/mm/aaaa`, navegación por teclado entre secciones y calendario visual nativo (sin dependencias externas). El valor se emite en formato `YYYY-MM-DD`.
-El calendario incluye vistas de días, meses y años, y un botón **Hoy** para navegar rápidamente a la fecha actual.
-```vue
-<InputDateStyle
-    v-model="fechaNacimiento"
-    label="Fecha de nacimiento"
-    min="1900-01-01"
-    max="2100-12-31"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Date` | — | Valor de la fecha en formato `YYYY-MM-DD` o `Date`. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable en el calendario (formato `YYYY-MM-DD`). |
-| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable en el calendario (formato `YYYY-MM-DD`). |
-| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o objetos `Date`. |
-| `disabled` | `Boolean` | `false` | |
-| `readonly` | `Boolean` | `false` | Solo lectura: muestra el valor pero bloquea la edición por teclado. |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Valor emitido:** `'YYYY-MM-DD'` (string) o `''` si la fecha es inválida o está vacía.
-**Navegación por teclado:**
-- Escribe los dígitos y el foco avanza automáticamente entre día → mes → año
-- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha resultante se ajusta a los límites `min`/`max`)
-- `←` / `→` — mover entre secciones
-- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
-- `Backspace` / `Delete` — limpiar la sección activa
-- Clic en el ícono 📅 — abre/cierra el calendario visual
-------
-## InputTimeStyle
-Selector de hora con picker de columnas scrollables. Soporta formato 12h (AM/PM) o 24h. El valor se emite en formato `HH:mm`.
-```vue
-<InputTimeStyle
-    v-model="horaInicio"
-    label="Hora de inicio"
-    min="08:00"
-    max="18:00"
-    :is24h="true"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String` | — | Valor de la hora en formato `HH:mm`. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `min` | `String` | `null` | Hora mínima (ej: `'08:00'`). |
-| `max` | `String` | `null` | Hora máxima (ej: `'18:00'`). |
-| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector AM/PM. |
-| `disabled` | `Boolean` | `false` | |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Valor emitido:** `'HH:mm'` en formato 24h siempre, independientemente del modo de visualización.
-------
-## InputDateTimeStyle
-Selector combinado de fecha y hora con máscara `dd/mm/aaaa hh:mm` (o `dd/mm/aaaa hh:mm a.m.` en modo 12h), calendario visual nativo y picker de columnas scrollables para la hora. El valor se emite en formato `YYYY-MM-DDTHH:mm:00.000`.
-```vue
-<InputDateTimeStyle
-    v-model="fechaHora"
-    label="Fecha y hora"
-    min="2000-01-01"
-    max="2100-12-31"
-    :is24h="true"
-    :validate="validate"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `String \| Date` | — | Valor en formato `YYYY-MM-DDTHH:mm:00.000` o `Date`. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
-| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
-| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
-| `label` | `String` | `''` | |
-| `description` | `String` | `''` | |
-| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable (formato `YYYY-MM-DD`). |
-| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable (formato `YYYY-MM-DD`). |
-| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o `Date`. |
-| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector a.m./p.m. |
-| `disabled` | `Boolean` | `false` | |
-| `readonly` | `Boolean` | `false` | Solo lectura. |
-| `required` | `Boolean` | `false` | |
-| `validate` | `Boolean \| null` | `null` | |
-| `mclass` | `String` | `null` | |
-**Valor emitido:** `'YYYY-MM-DDTHH:mm:00.000'` (string) o `''` si la fecha/hora es inválida o está vacía.
-**Comportamiento del picker:**
-- El calendario permanece abierto al seleccionar la fecha, para que puedas ajustar también la hora.
-- El selector de hora embebido en el picker usa las mismas columnas scrollables que `InputTimeStyle`.
-- Botón **Ahora** — establece la fecha y hora actuales de un solo clic.
-**Navegación por teclado:**
-- Escribe los dígitos y el foco avanza automáticamente: día → mes → año → hora → minuto → a.m./p.m.
-- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha se ajusta a los límites `min`/`max`)
-- `←` / `→` — mover entre secciones
-- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
-- `Backspace` / `Delete` — limpiar la sección activa
-- `a` / `p` — cambiar entre a.m. y p.m. (solo modo 12h)
-- Clic en el ícono 📅 — abre/cierra el picker
-------
-## InputFileUploadStyle
-Botón para adjuntar archivos con validación de tamaño y formato.
-```vue
-<InputFileUploadStyle
-    v-model="archivo"
-    :formats="['pdf', 'docx']"
-    max-size-m-b="10"
-    :state="uploadState"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `File` | `null` | Archivo seleccionado. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<input type="file">`. |
-| `id` | `String` | `null` | Id propio del `<input type="file">`. |
-| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
-| `formats` | `Array` | `[]` | Extensiones permitidas (ej: `['pdf', 'xlsx', 'png']`). Array vacío = todos los formatos. |
-| `maxSizeMB` | `String \| Number` | `5` | Tamaño máximo del archivo en MB. |
-| `state` | `String` | `'uphold'` | Estado del botón: `'uphold'` (normal) o `'loader'` (cargando, muestra spinner). |
-| `delay` | `String` | `'1.5'` | Segundos de bloqueo del botón tras un clic, para evitar doble envío. |
-**Eventos:**
-- `update:modelValue` — emite el `File` seleccionado, o `null` si el archivo no es válido.
-- `change` — igual que `update:modelValue`.
-El componente valida automáticamente el tamaño y el formato, mostrando un mensaje de error inline si la validación falla.
-------
-## InputFileDownloadStyle
-Botón para descargar archivos con tres estados visuales.
-```vue
-<InputFileDownloadStyle
-    :state="downloadState"
-    :disabled="false"
-    @click="descargarArchivo"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
-| `state` | `String` | `'download'` | Estado: `'download'` (normal), `'loader'` (descargando, spinner), `'complete'` (completado, check verde). |
-| `delay` | `String` | `'1.5'` | Segundos de bloqueo del botón tras un clic. |
-**Eventos:**
-- `click` — se dispara al hacer clic (solo si no está deshabilitado).
-------
-## ButtonStyle
-Botón genérico con bloqueo automático anti-doble-clic.
-```vue
-<ButtonStyle
-    class="px-4 py-2 bg-indigo-500 text-white rounded"
-    :disabled="cargando"
-    @click="guardar"
->
-    Guardar
-</ButtonStyle>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `type` | `String` | `'button'` | Tipo del botón: `'button'` o `'submit'`. |
-| `name` | `String` | `null` | Atributo `name` nativo del `<button>`. |
-| `id` | `String` | `null` | Id propio del `<button>`. |
-| `autofocus` | `Boolean` | `false` | Enfoca el botón al montarse. |
-| `class` | `String` | `''` | Clases CSS del botón (TailwindCSS). |
-| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
-| `delay` | `String` | `'1.5'` | Segundos de bloqueo automático tras hacer clic (anti-doble-clic). |
-**Eventos:**
-- `click` — se dispara al hacer clic (solo si no está deshabilitado ni en periodo de bloqueo).
-Acepta contenido mediante `<slot>` (texto, íconos, etc.).
-> **Nota:** con `type="submit"` funciona como botón de envío nativo dentro de un `<form>`. El bloqueo anti-doble-clic se aplica de forma diferida para no cancelar el envío nativo del formulario.
-------
-## LoaderStyle
-Indicador de carga circular animado.
-```vue
-<LoaderStyle message="Procesando datos..." />
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `message` | `String` | `'Cargando...'` | Texto que se muestra debajo del arco animado. |
-El color del arco se controla con el token `LOADER_ARC_STROKE`.
-------
-## PaginationStyle
-Paginador con navegación anterior/siguiente, botones de página y resumen de registros.
-```vue
-<PaginationStyle
-    :total-pages="totalPaginas"
-    :actual-page="paginaActual"
-    :records="totalRegistros"
-    :limit="registrosPorPagina"
-    :summary="true"
-    @page="cambiarPagina"
-/>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `totalPages` | `Number` | `0` | Total de páginas. |
-| `actualPage` | `Number` | `1` | Página actualmente activa. |
-| `records` | `Number` | `0` | Total de registros (para el resumen). |
-| `limit` | `Number` | `0` | Registros por página (para calcular el rango del resumen). |
-| `summary` | `Boolean` | `false` | `true` = muestra el texto "Mostrando X - Y de Z". |
-**Eventos:**
-- `page` — emite el número de página a la que se desea navegar.
-El paginador muestra hasta 7 botones con elipsis (`...`) inteligentes cuando hay más páginas.
-------
-## ModalStyle
-Ventana modal con `Teleport` al `body`, animaciones de entrada/salida, bloqueo del scroll de fondo y cierre por tecla `Escape`. El estado de apertura se controla con `v-model`.
-```vue
-<ButtonStyle @click="showModal = true">Abrir modal</ButtonStyle>
-<ModalStyle v-model="showModal" title="Detalles" size="lg">
-    <p>Contenido del modal...</p>
-    <template #footer="{ close }">
-        <div class="flex justify-end gap-2">
-            <ButtonStyle class="px-4 py-2 border rounded" @click="close">Cerrar</ButtonStyle>
-        </div>
-    </template>
-</ModalStyle>
-```
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `modelValue` | `Boolean` | `false` | Controla la visibilidad del modal (`v-model`). |
-| `title` | `String` | `'Sin titulo asignado'` | Título mostrado en el header (si no se usa el slot `title`). |
-| `size` | `String` | `'lg'` | Ancho máximo: `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'`, `'5xl'`, `'full'`. |
-| `showCloseButton` | `Boolean` | `true` | Muestra el botón `✕` de cierre en el header. |
-| `closeOnEscape` | `Boolean` | `true` | Permite cerrar el modal con la tecla `Escape`. |
-| `closeOnOverlayClick` | `Boolean` | `true` | Permite cerrar el modal al hacer clic en el fondo. |
-**Slots:**
-- `title` — reemplaza el título del header.
-- *default* — contenido principal. Recibe `{ close }` para cerrar desde dentro.
-- `footer` — pie del modal (solo se renderiza si se provee). Recibe `{ close }`.
-**Eventos:**
-- `update:modelValue` — emite `false` al cerrarse.
-------
-## AlertStyle (notificaciones tipo toast)
-Utilidad JavaScript (no es un componente) para mostrar notificaciones flotantes que se auto-descartan. Disponible como propiedad global `$alertstyle` tras instalar el plugin, o mediante importación directa.
-```js
-// Vía global property (Options API)
-this.$alertstyle.success('Guardado', 'Los cambios se guardaron correctamente')
-// Vía importación directa
-import { AlertStyle } from '@luis-angel-martin-dzul/input-styles'
-AlertStyle.error('Error', 'No se pudo completar la operación')
-```
-| Método | Parámetros | Descripción |
-| ------ | ---------- | ----------- |
-| `success(title, message?)` | `String, String` | Notificación verde de éxito. |
-| `error(title, message?)` | `String, String` | Notificación roja de error. |
-| `warning(title, message?)` | `String, String` | Notificación de advertencia. |
-| `info(title, message?)` | `String, String` | Notificación informativa. |
-| `neutral(title, message?)` | `String, String` | Notificación neutral. |
-Cada notificación se cierra automáticamente a los 4 segundos o manualmente con su botón `×`.
-------
-## DialogStyle (diálogos modales)
-Utilidad JavaScript para diálogos de confirmación, información y carga, con interfaz fluida (encadenable). Disponible como global `$dialogstyle` o por importación directa.
-```js
-// Confirmación
-this.$dialogstyle.confirm('¿Eliminar registro?', 'Esta acción no se puede deshacer')
-    .onAccept(() => eliminar())
-    .onCancel(() => console.log('Cancelado'))
-// Información (un solo botón)
-this.$dialogstyle.info('Operación completada')
-    .onConfirm(() => console.log('Aceptado'))
-// Carga (bloqueante, se cierra manualmente)
-const loader = this.$dialogstyle.loading('Procesando...', 'Espere un momento')
-loader.updateMessage('Casi listo...')
-loader.close()
-```
-| Método | Retorna | Descripción |
-| ------ | ------- | ----------- |
-| `confirm(title, description?)` | controlador con `.onAccept(cb)` / `.onCancel(cb)` | Diálogo con botones Aceptar / Cancelar. |
-| `info(title, description?)` | controlador con `.onConfirm(cb)` | Diálogo informativo con un solo botón Aceptar. |
-| `loading(title, description?)` | `{ close, updateTitle, updateMessage }` | Diálogo de carga con spinner; se cierra con `.close()`. |
-| `finish(immediate?)` | `Promise` | Cierra el diálogo abierto manualmente. |
-> 💡 La tecla `Escape` no cierra el diálogo (hace una animación de "shake"), para forzar una decisión explícita del usuario.
-------
-# 🧭 Directivas
-## `v-title-style`
-Muestra un **tooltip** ("globo de diálogo") sobre **cualquier etiqueta o componente**, reemplazando al atributo `title` nativo del navegador. Su **fondo es ligeramente transparente** con un sutil desenfoque del contenido que queda detrás.
-- **Escritorio (mouse):** aparece al pasar el cursor y se oculta al salir.
-- **Móvil (touch):** se muestra al tocar el elemento y se oculta al tocar de nuevo o fuera.
-- Acepta **texto plano** (fijo o desde una variable reactiva).
-Si instalas la librería con `app.use(InputStyles)`, la directiva queda registrada **global** automáticamente. Si la usas en un componente que no instala el plugin, regístrala local: `import { TitleStyle } from '@luis-angel-martin-dzul/input-styles'` y `directives: { titleStyle: TitleStyle }`.
-```vue
-<!-- Texto fijo (nota las comillas simples internas) -->
-<button v-title-style="'Guarda los cambios'">Guardar</button>
-<!-- Sobre cualquier etiqueta o componente -->
-<span v-title-style="'Información adicional'">ⓘ</span>
-<button-style v-title-style="'Tooltip translúcido sobre un ButtonStyle'">Con tooltip</button-style>
-<!-- Texto dinámico -->
-<button v-title-style="mensajeAyuda">Enviar</button>
-```
-------
-## UtilStyle (utilidades)
-Clase con métodos estáticos de utilidad (formateo, validaciones, manejo de archivos, etc.). Disponible como propiedad global `$utilstyle` tras instalar el plugin, o mediante importación directa.
-```js
-// Vía global property (Options API)
-this.$utilstyle.formatMoney(1234.5)
-// Vía importación directa
-import { UtilStyle } from '@luis-angel-martin-dzul/input-styles'
-UtilStyle.getUUID()
-```
-| Método | Parámetros | Descripción |
-| ------ | ---------- | ----------- |
-| `getUUID()` | — | Genera un UUID v4 (usa `crypto.randomUUID` con fallback manual). |
-| `formatMoney(valor, dollar?, digit?)` | `Number, String, Number` | Formatea un número como moneda (ej: `$1,234.56`). |
-| `formatNumber(valor, digit?)` | `Number, Number` | Formatea un número con separadores de miles y decimales fijos. |
-| `formatBytes(bytes, digit?)` | `Number, Number` | Formatea un tamaño en bytes a `B` / `KB` / `MB` legible (ej: `296.0 KB`). |
-| `formatDateShort(dateString)` | `String` | Fecha en formato corto en español (ej: `9 jul 2026`). |
-| `formatDateLong(dateString)` | `String` | Fecha en formato largo en español (ej: `9 de julio de 2026`). |
-| `formatDateTimeShort(dateString, hour12?)` | `String, Boolean` | Fecha y hora en formato corto en español (ej: `9 jul 2026, 12:00 p. m.`). `hour12` (default `true`) alterna entre 12h y 24h. |
-| `formatDateTimeLong(dateString, hour12?)` | `String, Boolean` | Fecha y hora en formato largo en español (ej: `9 de julio de 2026, 12:00 p. m.`). `hour12` (default `true`) alterna entre 12h y 24h. |
-| `getDateTimeNow()` | — | Fecha y hora actual (zona `America/Mexico_City`) en formato `YYYY-MM-DDTHH:mm:ss`. |
-| `porcentaje(valor, total)` | `Number, Number` | Calcula el porcentaje de `valor` respecto a `total` (ej: `50`). Retorna `0` si `total` es `0` o negativo. |
-| `blockKeyNumber(event)` | `Event` | Bloquea las teclas `e`, `E`, `+`, `-` en un `@keydown`. |
-| `blockKeys(event, keys)` | `Event, Array` | Bloquea las teclas indicadas en un `@keydown`. |
-| `validateTel(value, required?)` | `String, Boolean` | Valida un teléfono con formato `999 9 99 99 99`. Acepta prefijo de región opcional `+XXX 999 9 99 99 99` (XXX = 1 a 3 dígitos). Retorna `true` o mensaje de error. |
-| `validateEmail(value, required?)` | `String, Boolean` | Valida un correo con las condiciones mínimas `xx@xx.x`. Retorna `true` o mensaje de error. |
-| `validateFileExtension(file, allowedExtensions?)` | `File, Array` | Valida la extensión del archivo. Retorna `true` o mensaje de error. |
-| `validateFileType(file, allowedTypes?)` | `File, Array` | Valida el MIME type del archivo. Retorna `true` o mensaje de error. |
-| `validateFileSize(file, maxSizeMB?)` | `File, Number` | Valida el tamaño del archivo. Retorna `true` o mensaje de error. |
-| `downloadBlob(blobData, fileName?, mimeType?)` | `Blob, String, String` | Descarga un blob como archivo. |
-| `fileToBase64(file)` | `File` | Convierte un `File` a base64 (async, retorna `Promise`). |
-| `base64ToBlob(base64, mimeType?)` | `String, String` | Convierte una cadena base64 a `Blob`. |
-| `base64ToFile(base64, fileName?, mimeType?)` | `String, String, String` | Convierte una cadena base64 a `File`. |
-| `fileToImage(file)` | `File` | Carga un `File` de imagen en un `HTMLImageElement` (async, retorna `Promise`). Libera el object URL al terminar. |
-| `compressToWebp(file, quality?, maxWidth?)` | `File, Number, Number` | Comprime una imagen a **WebP** en el navegador (async). Ver [Compresión de imágenes a WebP](#compresión-de-imágenes-a-webp). |
-> 💡 Los métodos de validación (`validateTel`, `validateEmail`, `validateFile*`) devuelven `true` si el valor es válido, o un `String` con el mensaje de error si no lo es.
-------
-# 🖼️ Compresión de imágenes a WebP
-Convierte imágenes (PNG, JPEG, etc.) a **WebP** directamente en el navegador —sin subir nada al servidor— usando la Canvas API. Útil para reducir el peso de las imágenes **antes** de enviarlas a tu backend.
-El método principal es `UtilStyle.compressToWebp(file, quality, maxWidth)`.
-```js
-// file: Number, quality: 0 a 1 (ej. 0.8 = 80%), maxWidth: px (opcional)
-const res = await UtilStyle.compressToWebp(file, 0.8, 1920)
-```
-| Parámetro | Tipo | Default | Descripción |
-| --------- | ---- | ------- | ----------- |
-| `file` | `File` | — | Archivo de imagen original (PNG/JPEG/etc). |
-| `quality` | `Number` | `0.8` | Calidad de `0` a `1` (ej: `0.8` = 80%). Solo aplica en WebP con pérdida. |
-| `maxWidth` | `Number \| null` | `null` | Si se indica, redimensiona manteniendo proporción. Recomendado para fotos grandes. |
-**Retorna** una `Promise` que resuelve a un objeto:
-```js
-{
-  blob,            // Blob de la imagen WebP (listo para subir o descargar)
-  originalSize,    // Tamaño original en bytes
-  compressedSize,  // Tamaño comprimido en bytes
-  ratio,           // % de ahorro (positivo = más ligero; negativo = más pesado)
-  width, height,   // Dimensiones finales del WebP
-}
-```
-## ¿Cuándo usarlo?
-✅ **Úsalo cuando:**
-- Quieras **reducir el peso** de imágenes que suben tus usuarios antes de enviarlas al servidor (ahorra ancho de banda y almacenamiento).
-- Trabajes con **fotos** o imágenes con muchos colores/degradados (es donde WebP más ahorra).
-- Quieras **previsualizar** el ahorro antes de confirmar la subida.
-⚠️ **Evítalo / revísalo cuando:**
-- Necesites soportar **Safari**: su canvas no codifica WebP de forma fiable y puede devolver un PNG disfrazado. El método **detecta esto y lanza un error explícito** en vez de entregar un archivo "mentiroso". Para soporte universal usa un encoder WASM (p. ej. `@jsquash/webp`) como fallback.
-- La imagen sea un **ícono/ilustración plana con pocos colores**: el ahorro de WebP con pérdida es mínimo y puede generar ruido en los bordes. Considera dejarla como PNG.
-- Necesites conservar **metadatos EXIF** (orientación, geolocalización): el canvas los descarta. Pásale `maxWidth` y ten en cuenta que fotos con orientación EXIF podrían rotarse.
-> 💡 **Referencia de ahorro** (cifras oficiales del equipo WebP de Google): lossless ≈ 26% menos que PNG; con pérdida 25–34% menos que JPEG a calidad visual equivalente. No hay un porcentaje fijo: depende del contenido. **Calidad recomendada:** 75–85% para fotos (a partir de 75% la diferencia suele ser imperceptible).
-## Uso básico (un archivo)
-```js
-import { UtilStyle } from '@luis-angel-martin-dzul/input-styles'
-async function comprimir(file) {
-    try {
-        const res = await UtilStyle.compressToWebp(file, 0.8, 1920)
-        console.log(`Ahorro: ${res.ratio}%`)
-        console.log(`${UtilStyle.formatBytes(res.originalSize)} → ${UtilStyle.formatBytes(res.compressedSize)}`)
-        // Subir al servidor
-        const formData = new FormData()
-        formData.append('imagen', res.blob, file.name.replace(/\.\w+$/, '.webp'))
-        // await fetch('/api/upload', { method: 'POST', body: formData })
-        // O descargar localmente (reutiliza downloadBlob de UtilStyle)
-        UtilStyle.downloadBlob(res.blob, 'imagen.webp', 'image/webp')
-    } catch (e) {
-        console.error(e.message) // p. ej. error de Safari
-    }
-}
-```
-## Uso con validación y múltiples archivos (Options API)
-```vue
-<template>
-    <input type="file" accept="image/*" multiple @change="onFiles" />
-    <p v-if="error" class="text-red-500">{{ error }}</p>
-</template>
-<script>
-export default {
-    data() {
-        return { error: '', resultados: [] }
-    },
-    methods: {
-        async onFiles(e) {
-            this.error = ''
-            const files = Array.from(e.target.files || [])
-            for (const file of files) {
-                // Reutiliza las validaciones de UtilStyle
-                const extOk = this.$utilstyle.validateFileExtension(file, ['png', 'jpg', 'jpeg'])
-                if (extOk !== true) { this.error = extOk; continue }
-                const sizeOk = this.$utilstyle.validateFileSize(file, 10)
-                if (sizeOk !== true) { this.error = sizeOk; continue }
-                try {
-                    const res = await this.$utilstyle.compressToWebp(file, 0.8, 1920)
-                    this.resultados.push(res)
-                } catch (err) {
-                    this.error = err.message
-                }
-            }
-        }
-    }
-}
-</script>
-```
-> ℹ️ La librería expone **solo los métodos** de compresión en `UtilStyle`; no incluye un componente visual. Si necesitas una UI lista (selector + comparación de tamaños + descarga), puedes construirla sobre estos métodos como en el ejemplo anterior.
-------
-## Ejemplo de uso completo
-```vue
-<template>
-    <div class="p-6 space-y-4 max-w-md">
-        <InputTextStyle
-            v-model="form.nombre"
-            label="Nombre completo"
-            placeholder="Ej: Juan Pérez"
-            :required="true"
-            :validate="validaciones.nombre"
-        />
-        <InputNumberStyle
-            v-model="form.monto"
-            label="Monto"
-            numeric="10,2"
-            min="0"
-            :validate="validaciones.monto"
-        />
-        <InputPasswordStyle
-            v-model="form.password"
-            label="Contraseña"
-            :required="true"
-            :validate="validaciones.password"
-        />
-        <SelectStyle
-            v-model="form.pais"
-            label="País"
-            :list="paises"
-            return-value="value"
-            :validate="validaciones.pais"
-        />
-        <InputDateStyle
-            v-model="form.fecha"
-            label="Fecha"
-            :validate="validaciones.fecha"
-        />
-        <InputDateTimeStyle
-            v-model="form.fechaHora"
-            label="Fecha y hora"
-            :is24h="true"
-            :validate="validaciones.fechaHora"
-        />
-        <InputTimeStyle
-            v-model="form.hora"
-            label="Hora"
-            :is24h="true"
-        />
-        <InputCheckStyle
-            v-model="form.acepta"
-            label="Acepto los términos"
-            :required="true"
-        />
-        <ButtonStyle
-            class="w-full px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600"
-            @click="enviar"
-        >
-            Enviar
-        </ButtonStyle>
-    </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-import {
-    InputTextStyle, InputNumberStyle, InputPasswordStyle,
-    SelectStyle, InputDateStyle, InputDateTimeStyle, InputTimeStyle,
-    InputCheckStyle, ButtonStyle
-} from '@luis-angel-martin-dzul/input-styles'
-const form = ref({
-    nombre: '', monto: '', password: '',
-    pais: null, fecha: '', fechaHora: '', hora: '', acepta: false
-})
-const validaciones = ref({
-    nombre: null, monto: null, password: null,
-    pais: null, fecha: null, fechaHora: null
-})
-const paises = [
-    { value: 1, text: 'México' },
-    { value: 2, text: 'España' },
-]
-function enviar() {
-    validaciones.value.nombre = form.value.nombre.length > 0
-    // ... resto de validaciones
-}
-</script>
-```
+# 📦 Input Style
+**Librería de componentes y formularios Vue 3**
+Incluye componentes de inputs, selects, botones, paginación y más, estilizados con **Tailwind CSS 4** y listos para producción.
+> ⚠️ **Solo compatible con Tailwind CSS 4.** La librería usa la sintaxis y los nombres de utilidades de la v4 (`outline-hidden`, `backdrop-blur-xs`, `z-100`, etc.) y se configura con `@import "tailwindcss"` + `@source`. **No funciona con Tailwind CSS 3** (`tailwind.config.js` / `content`).
+------
+![Última actualización](https://img.shields.io/badge/Actualizado-19%20de%20Octubre%20del%2026-blue)
+![Versión](https://img.shields.io/badge/versión-0.0.37-indigo)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-4.x-38bdf8)
+------
+# 📋 Requisitos
+| Dependencia | Versión |
+| ----------- | ------- |
+| `vue` | `^3.3.0` |
+| `tailwindcss` | `^4.0.0` |
+| `@tailwindcss/vite` (o `@tailwindcss/postcss`) | `^4.0.0` |
+------
+# 📦 Instalación
+La librería se distribuye mediante **npm**:
+```
+npm install @luis-angel-martin-dzul/input-styles
+```
+Si todavía no tienes Tailwind CSS 4 en tu proyecto:
+```
+npm install tailwindcss @tailwindcss/vite
+```
+------
+# 🚀 Uso en Vue + Vite
+En `main.js` o `main.ts`:
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@luis-angel-martin-dzul/input-styles/style.css'
+import InputStyle from '@luis-angel-martin-dzul/input-styles'
+const app = createApp(App)
+app.use(InputStyle)
+app.mount('#app')
+```
+Al instalar el plugin se registran automáticamente todos los componentes y las siguientes **propiedades globales** (disponibles en cualquier componente con la Options API):
+| Propiedad global | Equivale a | Descripción |
+| ---------------- | ---------- | ----------- |
+| `$alertstyle` | `AlertStyle` | Notificaciones tipo toast (ver [AlertStyle](#alertstyle-notificaciones-tipo-toast)). |
+| `$dialogstyle` | `DialogStyle` | Diálogos de confirmación / info / carga (ver [DialogStyle](#dialogstyle-diálogos-modales)). |
+| `$utilstyle` | `UtilStyle` | Utilidades internas (ej: generación de UUID). |
+------
+# 🎨 Configuración de Tailwind CSS 4
+Tailwind CSS 4 se configura desde el CSS (no existe `tailwind.config.js` ni la opción `content`). Se necesitan **dos pasos**.
+**1. Activa el plugin de Tailwind en Vite** (`vite.config.js`):
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+})
+```
+**2. Importa Tailwind e indica con `@source` dónde está la librería.** En el CSS principal de tu app (por ejemplo `src/style.css`):
+```css
+@import "tailwindcss";
+/* Tailwind 4 ignora node_modules; sin esta línea no se generan las clases que usa la librería. */
+@source "../node_modules/@luis-angel-martin-dzul/input-styles/dist";
+```
+> 💡 La ruta de `@source` es **relativa al archivo CSS** donde la escribes. Ajusta los `../` según su ubicación. Recuerda el `;` al final: es una regla CSS.
+El CSS propio de la librería (alertas, diálogos y animaciones) se importa aparte, en `main.js`:
+```js
+import '@luis-angel-martin-dzul/input-styles/style.css'
+```
+**Sin `@source`** los componentes se verán sin estilos o a medias, porque las clases de Tailwind que usan no se generan.
+# 🎨 Estilos personalizados (Style Registry)
+La librería expone un sistema de **tokens de estilo configurables** que permite cambiar la apariencia de todos los componentes desde un solo lugar, sin necesidad de modificar el código fuente.
+Los estilos se configuran **antes de montar la app**, importando `configureStyles` directamente.
+> ⚠️ **Los tokens deben escribirse con clases de Tailwind CSS 4.** Además, las clases de tus tokens **tienen que ser visibles para Tailwind**: como se definen en tu propio código (`main.js`), quedan cubiertas por el escaneo automático de tu proyecto. Si las defines en un paquete dentro de `node_modules`, agrégalas con `@source`.
+>
+> Nombres que cambiaron respecto a Tailwind 3 y que debes tener en cuenta al personalizar:
+>
+> | Tailwind 3 | Tailwind 4 |
+> | ---------- | ---------- |
+> | `outline-none` | `outline-hidden` (en v4, `outline-none` quita el contorno por completo) |
+> | `shadow-sm` / `shadow` | `shadow-xs` / `shadow-sm` |
+> | `rounded-sm` / `rounded` | `rounded-xs` / `rounded-sm` |
+> | `blur-sm` / `backdrop-blur-sm` | `blur-xs` / `backdrop-blur-xs` |
+> | `ring` (3px) | `ring-3` (`ring` ahora es de 1px) |
+> | `flex-shrink-0` / `flex-grow` | `shrink-0` / `grow` |
+> | `bg-opacity-50` | `bg-black/50` (modificador de opacidad) |
+> | `bg-[--mi-var]` | `bg-(--mi-var)` |
+> | `!px-2` (important al inicio) | `px-2!` (important al final) |
+## Opción A — vía `app.use` (recomendado)
+```js
+import InputStyle from '@luis-angel-martin-dzul/input-styles'
+app.use(InputStyle, {
+  styles: {
+    INPUT_BASE: 'w-full px-0 py-2 bg-transparent border-b focus:outline-hidden ...',
+    ICON_VALID:  'text-emerald-500',
+    // solo los tokens que quieras cambiar
+  }
+})
+```
+## Opción B — importación directa
+```js
+import { configureStyles } from '@luis-angel-martin-dzul/input-styles'
+configureStyles({
+  LOADER_ARC_STROKE: '#3B82F6',
+  REQUIRED_ASTERISK: 'text-red-500',
+})
+```
+⚠️ `configureStyles()` debe llamarse **antes** de que los componentes se monten. Los cambios no son reactivos después del montaje inicial.
+------
+## 📋 Referencia completa de tokens
+### Tokens auxiliares de label
+_Afecta: todos los componentes que tienen `label` o `description`_
+Estos tokens controlan partes individuales del label y del texto descriptivo. Al sobrescribir uno, las funciones `inputLabelClass`, `inputCheckLabelClass` e `inputDescriptionClass` lo recogen automáticamente **sin necesidad de sobreescribir la función entera**.
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `INPUT_BASE_TITLE` | `string` | `'block text-sm font-medium'` | Clases estructurales del `<label>` de inputs de texto. |
+| `INPUT_CHECK_BASE_TITLE` | `string` | `'block text-sm font-medium'` | Clases estructurales del `<label>` de checkbox, radio y switch. |
+| `LABEL_DISABLED_STATIC` | `string` | `'text-gray-400'` | Color del label y descripción cuando el campo está deshabilitado. |
+| `LABEL_ENABLED_STATIC` | `string` | `'text-gray-700'` | Color del label cuando el campo está habilitado. |
+```js
+configureStyles({
+    LABEL_DISABLED_STATIC: 'text-gray-400',
+    LABEL_ENABLED_STATIC:  'text-gray-900',
+    INPUT_BASE_TITLE:      'block font-semibold mb-1 text-sm',
+})
+```
+---
+### Inputs de texto
+_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`, `InputAutocompleteStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `INPUT_BASE` | `string` | `'w-full text-gray-800 bg-white px-3 py-1.5 rounded border ...'` | Clases base del `<input>`. No incluye borde ni ring (eso lo maneja `inputValidateClass`). |
+| `inputValidateClass` | `function(validate)` | Ver abajo | Retorna las clases de borde y ring según el estado de validación. `validate`: `true` / `false` / `null`. |
+| `inputLabelClass` | `function(disabled)` | Ver abajo | Retorna las clases del `<label>`. Internamente usa `INPUT_BASE_TITLE`, `LABEL_DISABLED_STATIC` y `LABEL_ENABLED_STATIC`. |
+| `inputDescriptionClass` | `function(validate, alignRight?)` | Ver abajo | Retorna las clases del texto de descripción. Internamente usa `ICON_VALID`, `ICON_INVALID` y `LABEL_DISABLED_STATIC`. |
+> 💡 Si solo quieres cambiar un color de validación, basta con sobrescribir `ICON_INVALID` o `ICON_VALID` — `inputDescriptionClass` los recoge automáticamente.
+```js
+configureStyles({
+    ICON_INVALID: 'text-red-500',
+    ICON_VALID:   'text-emerald-500',
+})
+// Override completo de las funciones (cuando necesitas control total)
+configureStyles({
+    inputValidateClass: (validate) => {
+        if (validate === false) return 'border-red-500 focus:ring-red-200'
+        if (validate === true)  return 'border-emerald-500 focus:ring-emerald-200'
+        return 'border-gray-200 focus:ring-indigo-200'
+    },
+    inputLabelClass: (disabled) => ['block font-bold mb-2', disabled ? 'text-gray-400' : 'text-gray-900'],
+    inputDescriptionClass: (validate, alignRight = true) => [
+        'block w-full text-sm',
+        alignRight && 'text-right',
+        validate === false ? 'text-red-500' : validate === true ? 'text-emerald-500' : 'text-gray-500',
+    ],
+})
+```
+---
+### Select
+_Afecta: `SelectStyle`, `InputAutocompleteStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `SELECT_DISABLED` | `string` | `'w-full px-3 py-1.5 rounded bg-gray-100 ...'` | Clases del input en estado disabled. |
+| `SELECT_DROPDOWN` | `string` | `'absolute z-20 w-full bg-white border ...'` | Clases del contenedor `<ul>` del dropdown. |
+| `SELECT_OPTION_BASE` | `string` | `'px-3 py-1 cursor-pointer text-md'` | Clases base de cada `<li>` del dropdown. |
+| `selectOptionClass` | `function(isSelected, isHighlighted)` | Ver abajo | Retorna clases dinámicas por opción según su estado. |
+| `SELECT_OPTGROUP` | `string` | `'px-2 pt-1 pb-0.5 text-xs font-semibold uppercase ...'` | Clases del encabezado de un grupo de opciones (`optgroup`). |
+| `SELECT_EMPTY` | `string` | `'px-3 py-1 text-gray-400 cursor-not-allowed'` | Clases del mensaje "Sin registros". |
+```js
+configureStyles({
+    selectOptionClass: (isSelected, isHighlighted) => {
+        if (isSelected)    return 'bg-indigo-100 text-indigo-900 font-medium'
+        if (isHighlighted) return 'bg-indigo-50 text-gray-900'
+        return 'hover:bg-indigo-50 text-gray-800'
+    },
+})
+```
+---
+### Checkbox, Radio y Switch
+_Afecta: `InputCheckStyle`, `InputRadioStyle`, `InputSwitchStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `inputCheckLabelClass` | `function(disabled)` | Ver abajo | Clases del label de checks. |
+| `CHECK_BOX_BASE` | `string` | `'w-5 h-5 flex items-center justify-center rounded border-2 transition'` | Estructura base del cuadro del checkbox. |
+| `RADIO_BASE` | `string` | `'w-5 h-5 flex items-center justify-center rounded-full transition'` | Estructura base del círculo del radio. |
+| `SWITCH_BASE` | `string` | `'w-10 h-5 relative flex items-center rounded-full transition border-2'` | Estructura base de la pista del switch. |
+| `checkBoxClass` | `function(model, disabled)` | Ver abajo | Clases de color del checkbox según estado activo/disabled. |
+| `radioClass` | `function(model, disabled)` | Ver abajo | Clases de color del radio button según estado. |
+| `switchClass` | `function(model, disabled)` | Ver abajo | Clases de color de la pista del switch. |
+| `switchDotClass` | `function(model, disabled)` | Ver abajo | Clases de color de la bola interior del switch. |
+```js
+configureStyles({
+    checkBoxClass: (model, disabled) => {
+        if (disabled) return model
+            ? 'bg-indigo-200 border-indigo-200 cursor-not-allowed'
+            : 'bg-gray-100 border-gray-200 cursor-not-allowed'
+        return model
+            ? 'bg-indigo-500 border-indigo-500 peer-focus:ring-2 peer-focus:ring-indigo-200'
+            : 'bg-white border-gray-300 peer-focus:ring-2 peer-focus:ring-indigo-200'
+    },
+})
+```
+---
+### Paginación
+_Afecta: `PaginationStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `PAGINATION_NAV_PREV` | `string` | `'bg-white hover:bg-indigo-50 border ...'` | Clases del botón de página anterior. |
+| `PAGINATION_NAV_NEXT` | `string` | `'bg-white hover:bg-indigo-50 border ...'` | Clases del botón de página siguiente. |
+| `PAGINATION_PAGE_BASE` | `string` | `'border px-2.5 py-2 cursor-pointer w-8 relative'` | Clases base de cada botón de página. |
+| `paginationPageClass` | `function(page, actualPage, index)` | Ver abajo | Retorna clases dinámicas por botón de página. |
+| `PAGINATION_SUMMARY` | `string` | `'text-sm text-gray-700'` | Clases del texto de resumen de registros. |
+---
+### Loader
+_Afecta: `LoaderStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `LOADER_ARC_STROKE` | `string` | `'#6366F1'` | Color hex del arco animado del loader (indigo-500). |
+| `LOADER_MESSAGE` | `string` | `'text-gray-600 text-lg font-medium'` | Clases del mensaje de carga. |
+---
+### Iconos y asterisco de requerido
+_Afecta: todos los componentes con `required` o iconos de validación_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `REQUIRED_ASTERISK` | `string` | `'text-red-500'` | Clase de color del asterisco `*` en campos requeridos. |
+| `ICON_VALID` | `string` | `'text-emerald-500'` | Clase de color del ícono de validación correcta. |
+| `ICON_INVALID` | `string` | `'text-red-500'` | Clase de color del ícono de validación errónea. |
+| `ICON_STATIC` | `string` | `'text-indigo-400'` | Clase de color de los íconos estáticos (reloj, calendario, ojo, chevron). |
+| `ICON_SIZE_STATIC` | `string` | `'w-5 h-5'` | Clases de tamaño de todos los íconos. |
+---
+### File Upload y Download
+_Afecta: `InputFileUploadStyle`, `InputFileDownloadStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `FILE_BUTTON_BASE` | `string` | `'flex items-center justify-center gap-3 px-4 py-2 border-2 rounded-xl ...'` | Clases estructurales del botón (compartido entre upload y download). |
+| `FILE_BUTTON_ACTIVE` | `string` | `'border-gray-200 bg-white text-gray-700 hover:border-indigo-400 ...'` | Clases del botón en estado normal/activo. |
+| `FILE_BUTTON_DISABLED` | `string` | `'border-gray-200 bg-gray-100 text-gray-400'` | Clases del botón en estado disabled. |
+| `FILE_ICON_BG` | `string` | `'bg-indigo-300'` | Fondo del círculo de ícono en estado activo. |
+| `FILE_ICON_BG_COMPLETE` | `string` | `'bg-emerald-500'` | Fondo del círculo de ícono cuando la descarga está completa. |
+| `FILE_ICON_BG_DISABLED` | `string` | `'bg-gray-300'` | Fondo del círculo de ícono en estado disabled. |
+---
+### Time Picker
+_Afecta: `InputTimeStyle`_
+| Token | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `TIME_PICKER_WRAPPER` | `string` | `'absolute z-20 left-0 top-full rounded-lg bg-white'` | Contenedor flotante del picker. |
+| `TIME_PICKER_CONTAINER` | `string` | `'border border-gray-300 rounded-lg p-3'` | Borde interior del picker. |
+| `TIME_PICKER_COLUMN` | `string` | `'h-48 overflow-y-auto border border-gray-200 rounded-md ...'` | Columna scrollable de horas/minutos. |
+| `TIME_PICKER_AMPM_COLUMN` | `string` | `'h-48 overflow-y-auto border border-gray-200 rounded-md ...'` | Columna scrollable AM/PM. |
+| `TIME_PICKER_COLUMN_LABEL` | `string` | `'block text-xs font-medium text-gray-500 mb-1 text-center'` | Label de cada columna ("Hora", "Minuto", "AM/PM"). |
+| `TIME_PICKER_ITEM` | `string` | `'px-3 py-1 text-center cursor-pointer hover:bg-indigo-50 ...'` | Fila base de cada ítem del picker. |
+| `timePickerItemClass` | `function(isActive)` | Ver abajo | Clases dinámicas de cada ítem según si está seleccionado. |
+------
+# 🧩 Componentes
+## Props comunes
+La mayoría de los componentes comparten las siguientes props:
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number \| Boolean` | — | Valor del campo (v-model). |
+| `id` | `String` | `null` | Id propio del control. Si se omite, se genera automáticamente (uuid) y se mantiene enlazado con el `<label for>`. |
+| `name` | `String` | `null` | Atributo `name` nativo del control (`input` / `textarea` / `file` / `button`). Útil para envío de formularios, autocompletado y accesibilidad. |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo automáticamente al montarse. |
+| `label` | `String` | `''` | Texto del label del campo. |
+| `description` | `String` | `''` | Texto de ayuda debajo del campo. Cambia de color según el estado de validación. |
+| `placeholder` | `String` | `''` | Placeholder del input. |
+| `disabled` | `Boolean` | `false` | Deshabilita el campo. |
+| `required` | `Boolean` | `false` | Marca el campo como requerido (muestra asterisco `*`). |
+| `validate` | `Boolean \| null` | `null` | Estado de validación: `true` = válido, `false` = inválido, `null` = sin estado. |
+| `mclass` | `String` | `null` | Clases CSS adicionales aplicadas directamente al elemento del input. |
+## Eventos comunes
+| Evento | Payload | Descripción |
+| ------ | ------- | ----------- |
+| `update:modelValue` | `value` | Se dispara al cambiar el valor (permite `v-model`). |
+| `change` | `value` | Se dispara al cambiar el valor. |
+| `blur` | `event` | Se dispara al perder el foco. |
+------
+## InputTextStyle
+Input de texto genérico. Soporta tipos `text`, `email`, `search`, `tel`, `url` y `number`.
+```vue
+<InputTextStyle
+    v-model="nombre"
+    label="Nombre"
+    placeholder="Escribe tu nombre"
+    :required="true"
+    :validate="validate"
+    description="Campo requerido"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number` | `''` | Valor del campo. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autocomplete` | `String` | `null` | Atributo `autocomplete` nativo (ej: `email`, `username`, `off`). |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `readonly` | `Boolean` | `false` | Solo lectura: no editable, pero se envía en el formulario. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `type` | `String` | `'text'` | Tipo del input: `text`, `email`, `search`, `tel`, `url`, `number`. |
+| `maxlength` | `String` | `null` | Longitud máxima de caracteres. |
+| `minlength` | `String` | `null` | Longitud mínima de caracteres. |
+| `min` | `String` | `null` | Valor mínimo (solo cuando `type="number"`, aplicado al perder el foco). |
+| `max` | `String` | `null` | Valor máximo (solo cuando `type="number"`, aplicado al perder el foco). |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+------
+## InputNumberStyle
+Input numérico con control preciso de dígitos, decimales, rango y formato de visualización. El valor se emite siempre como string numérico limpio (ej: `"1234.56"`). Al perder el foco se formatea con `toLocaleString`.
+```vue
+<InputNumberStyle
+    v-model="monto"
+    label="Monto"
+    numeric="10,2"
+    min="0"
+    max="9999999999"
+    :required="true"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number` | `''` | Valor del campo. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autocomplete` | `String` | `null` | Atributo `autocomplete` nativo. |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `readonly` | `Boolean` | `false` | Solo lectura: bloquea la edición y los botones ▲/▼, pero se envía en el formulario. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `numeric` | `String` | `null` | Formato tipo SQL: `"10,2"` → 10 dígitos enteros, 2 decimales. Si se omite, usa `10,2` por defecto. |
+| `min` | `String` | `null` | Valor mínimo (aplicado al perder el foco). Si es `null` o negativo, permite negativos. |
+| `max` | `String` | `null` | Valor máximo (aplicado al perder el foco). |
+| `alignLeft` | `Boolean` | `false` | Posición de los botones de paso (▲/▼) respecto al valor. `false` = botones a la izquierda, valor a la derecha (`Rows \| Input`); `true` = botones a la derecha, valor a la izquierda (`Input \| Rows`). |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Comportamiento:**
+- Incluye botones **caret ▲ / ▼** para aumentar/disminuir el valor en unidades (respetando `min`/`max`). Por defecto se alinean a la izquierda del campo (con el valor a la derecha); con `alignLeft` se mueven a la derecha y el valor pasa a la izquierda. No tienen separador y usan el color global de los iconos (`ICON_STATIC`).
+- Si **mantienes presionado** un botón, tras una breve pausa el valor cambia de forma **continua** hasta soltar.
+- Puedes escribir `0` y luego `.` para empezar los decimales: el punto se conserva a la espera de los dígitos decimales (solo si los decimales están activados en `numeric`).
+- Al **enfocar** el campo, si el valor es `0` (o está vacío) se limpia, para que al escribir reemplaces el valor en lugar de anteponerlo.
+- Al **perder el foco**, si el campo queda vacío o en `0`, se conserva el valor `0` formateado (ej: `"0.00"`), aplicando además los límites `min`/`max`.
+**Navegación por teclado:**
+- `↑` / `↓` — aumentar/disminuir el valor en unidades, respetando `min`/`max`.
+------
+## InputPasswordStyle
+Input de contraseña con toggle para mostrar/ocultar el texto.
+```vue
+<InputPasswordStyle
+    v-model="password"
+    label="Contraseña"
+    placeholder="Mínimo 8 caracteres"
+    :required="true"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number` | `''` | Valor del campo. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autocomplete` | `String` | `null` | Atributo `autocomplete` nativo (ej: `current-password`, `new-password`). |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `readonly` | `Boolean` | `false` | Solo lectura: no editable, pero se envía en el formulario. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `maxlength` | `String` | `null` | Longitud máxima. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+------
+## TextAreaStyle
+Área de texto multi-línea.
+```vue
+<TextAreaStyle
+    v-model="comentario"
+    label="Comentario"
+    placeholder="Escribe aquí..."
+    row="5"
+    :maxlength="500"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String` | `''` | Valor del campo. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<textarea>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autocomplete` | `String` | `null` | Atributo `autocomplete` nativo. |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `readonly` | `Boolean` | `false` | Solo lectura: no editable, pero se envía en el formulario. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `row` | `String` | `'3'` | Número de filas visibles del textarea. |
+| `maxlength` | `String` | `null` | Longitud máxima de caracteres. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+------
+## SelectStyle
+Select personalizado con dropdown, navegación por teclado y búsqueda por tipeo. El dropdown se posiciona automáticamente arriba o abajo según el espacio disponible.
+```vue
+<SelectStyle
+    v-model="pais"
+    label="País"
+    :list="paises"
+    return-value="value"
+    :required="true"
+    :validate="validate"
+/>
+```
+```js
+// Formato del array `list` — lista plana
+const paises = [
+    { value: 1, text: 'México' },
+    { value: 2, text: 'España' },
+    { value: 3, text: 'Argentina' },
+]
+// El `value` es opcional: si se omite, se usa el `text` como valor
+const colores = [
+    { text: 'Rojo' },
+    { text: 'Verde' },
+]
+// Lista agrupada — cada grupo tiene un `label` y sus `options`
+const ubicaciones = [
+    { label: 'América', options: [{ value: 1, text: 'México' }, { value: 2, text: 'Argentina' }] },
+    { label: 'Europa',  options: [{ value: 3, text: 'España' }, { value: 4, text: 'Francia' }] },
+]
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
+| `list` | `Array` | `[]` | Array de opciones. Acepta lista plana `{ value, text }` o agrupada `{ label, options: [...] }`. El `value` es opcional: si se omite, se usa el `text` como valor. |
+| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Navegación por teclado:**
+- `↑` / `↓` — navegar opciones
+- `Enter` — seleccionar la opción resaltada
+- `Escape` — cerrar el dropdown
+- Tipear letras — búsqueda inmediata en la lista
+------
+## InputAutocompleteStyle
+Autocomplete basado en `SelectStyle`, pero con el **input editable**: el usuario escribe para filtrar las opciones en vivo. Mantiene el mismo formato de `list` (plana o agrupada) y la misma navegación por teclado y posicionamiento automático del dropdown.
+Incluye un estado de **carga/búsqueda** controlado por la prop `loading`: cuando es `true`, oculta las opciones y muestra el mensaje _"Buscando coincidencias..."_ — pensado para búsquedas asíncronas donde el listado se resuelve en el servidor.
+```vue
+<InputAutocompleteStyle
+    v-model="pais"
+    label="País"
+    :list="paises"
+    placeholder="Escribe para buscar"
+    :loading="buscando"
+    return-value="value"
+    :validate="validate"
+    @search="onSearch"
+/>
+```
+```js
+// El evento @search se emite en cada tecleo; úsalo para disparar una
+// búsqueda asíncrona y controlar la prop `loading`.
+function onSearch(query) {
+    buscando.value = true
+    fetchPaises(query).then(res => {
+        paises.value = res
+        buscando.value = false
+    })
+}
+```
+```js
+// Formato del array `list` — idéntico a SelectStyle (plana o agrupada)
+const paises = [
+    { value: 1, text: 'México' },
+    { value: 2, text: 'España' },
+    { value: 3, text: 'Argentina' },
+]
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
+| `list` | `Array` | `[]` | Array de opciones. Acepta lista plana `{ value, text }` o agrupada `{ label, options: [...] }`. El `value` es opcional: si se omite, se usa el `text` como valor. |
+| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
+| `loading` | `Boolean` | `false` | Cuando es `true`, oculta las opciones y muestra "Buscando coincidencias...". Úsalo mientras resuelves una búsqueda asíncrona. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Eventos:**
+- `search` — se emite en cada cambio del texto escrito, con el `query` actual como payload. Ideal para búsquedas asíncronas.
+- `update:modelValue` / `change` — emiten el valor al seleccionar una opción (según `returnValue`).
+- `blur` — al cerrarse el dropdown.
+**Comportamiento:**
+- Al abrir (foco o clic en el chevron) muestra todas las opciones; al teclear, filtra por coincidencia de texto (sin distinguir mayúsculas).
+- Al seleccionar una opción, el input muestra su `text`.
+- Si se cierra el dropdown sin seleccionar, el input vuelve a reflejar la selección real (descarta el texto escrito sin confirmar).
+**Navegación por teclado:**
+- `↑` / `↓` — navegar opciones
+- `Enter` — seleccionar la opción resaltada
+- `Escape` — cerrar el dropdown
+------
+## InputCheckStyle
+Checkbox estilizado con label y descripción.
+```vue
+<InputCheckStyle
+    v-model="aceptaTerminos"
+    label="Acepto los términos y condiciones"
+    :required="true"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `Boolean \| Array \| String \| Number` | `false` | Estado del check (modo simple) o array de valores seleccionados (modo grupo). |
+| `value` | `String \| Number \| Boolean` | `null` | Valor que aporta este checkbox al grupo. Se usa cuando `modelValue` es un `Array` (checkbox múltiple nativo). |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. Comparte el mismo `name` entre las casillas del grupo. |
+| `id` | `String` | `null` | Id propio del `<input>`; si se omite se genera automáticamente. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | Clases adicionales del cuadro del checkbox. |
+**Dos modos de uso:**
+- **Modo simple (por defecto):** con `modelValue` booleano, se comporta como un check `true`/`false`.
+  ```vue
+  <InputCheckStyle v-model="acepto" label="Acepto los términos" />
+  ```
+- **Modo grupo nativo:** enlaza varias casillas a un `v-model` de tipo **array**, cada una con su `value` y el mismo `name`. Marcar/desmarcar agrega o quita el `value` del array, y en un `<form>` nativo el navegador envía un `name=<value>` por cada casilla marcada (`FormData.getAll`).
+  ```vue
+  <form @submit.prevent="onSubmit">
+      <InputCheckStyle v-model="perms" name="perm" value="read"   label="Leer" />
+      <InputCheckStyle v-model="perms" name="perm" value="write"  label="Escribir" />
+      <InputCheckStyle v-model="perms" name="perm" value="delete" label="Eliminar" />
+  </form>
+  ```
+  ```js
+  // perms === ['read', 'write']  →  FormData del <form>: perm=read, perm=write
+  data() { return { perms: ['read', 'write'] } },
+  onSubmit(e) { console.log(new FormData(e.target).getAll('perm')) }
+  ```
+**Eventos:** `update:modelValue` y `change` emiten el array actualizado (modo grupo) o el booleano (modo simple).
+------
+## InputRadioStyle
+Radio button estilizado con label y descripción.
+```vue
+<InputRadioStyle
+    v-model="opcionA"
+    label="Opción A"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number \| Boolean` | `false` | Valor seleccionado del grupo (modo grupo) o estado del toggle (modo booleano). |
+| `value` | `String \| Number \| Boolean` | `null` | Valor que representa este radio dentro del grupo. Si se define, actúa como radio nativo real (`type="radio"`); si se omite, se comporta como toggle booleano. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. **Requerido** para agrupar varios radios en modo nativo. |
+| `id` | `String` | `null` | Id propio del `<input>`; si se omite se genera automáticamente. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | Clases adicionales del círculo del radio. |
+**Dos modos de uso:**
+- **Modo booleano (por defecto):** sin `value`, se comporta como un toggle `true`/`false`. Útil para una sola opción.
+  ```vue
+  <InputRadioStyle v-model="acepto" label="Acepto" />
+  ```
+- **Modo grupo nativo:** al definir `value` en cada radio y compartir el mismo `name`, se comportan como un grupo de radios reales (`type="radio"`): seleccionar uno deselecciona los demás, `v-model` guarda el `value` elegido y en un `<form>` nativo el navegador envía `name=<value seleccionado>`.
+  ```vue
+  <form @submit.prevent="onSubmit">
+      <InputRadioStyle v-model="plan" name="plan" value="free"  label="Free" />
+      <InputRadioStyle v-model="plan" name="plan" value="pro"   label="Pro" />
+      <InputRadioStyle v-model="plan" name="plan" value="enterprise" label="Enterprise" />
+  </form>
+  ```
+  ```js
+  // plan === 'pro'  →  FormData del <form> contiene plan=pro
+  onSubmit(e) { console.log(new FormData(e.target).get('plan')) }
+  ```
+**Eventos:** `update:modelValue` y `change` emiten el `value` seleccionado (modo grupo) o el booleano (modo toggle).
+------
+## InputSwitchStyle
+Toggle switch estilizado.
+```vue
+<InputSwitchStyle
+    v-model="activo"
+    label="Activar notificaciones"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `Boolean` | `false` | Estado del switch. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio del `<input>`; si se omite se genera automáticamente. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | Clases adicionales de la pista del switch. |
+------
+## InputDateStyle
+Selector de fecha con máscara `dd/mm/aaaa`, navegación por teclado entre secciones y calendario visual nativo (sin dependencias externas). El valor se emite en formato `YYYY-MM-DD`.
+El calendario incluye vistas de días, meses y años, y un botón **Hoy** para navegar rápidamente a la fecha actual.
+```vue
+<InputDateStyle
+    v-model="fechaNacimiento"
+    label="Fecha de nacimiento"
+    min="1900-01-01"
+    max="2100-12-31"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Date` | — | Valor de la fecha en formato `YYYY-MM-DD` o `Date`. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable en el calendario (formato `YYYY-MM-DD`). |
+| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable en el calendario (formato `YYYY-MM-DD`). |
+| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o objetos `Date`. |
+| `disabled` | `Boolean` | `false` | |
+| `readonly` | `Boolean` | `false` | Solo lectura: muestra el valor pero bloquea la edición por teclado. |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Valor emitido:** `'YYYY-MM-DD'` (string) o `''` si la fecha es inválida o está vacía.
+**Navegación por teclado:**
+- Escribe los dígitos y el foco avanza automáticamente entre día → mes → año
+- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha resultante se ajusta a los límites `min`/`max`)
+- `←` / `→` — mover entre secciones
+- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
+- `Backspace` / `Delete` — limpiar la sección activa
+- Clic en el ícono 📅 — abre/cierra el calendario visual
+------
+## InputTimeStyle
+Selector de hora con picker de columnas scrollables. Soporta formato 12h (AM/PM) o 24h. El valor se emite en formato `HH:mm`.
+```vue
+<InputTimeStyle
+    v-model="horaInicio"
+    label="Hora de inicio"
+    min="08:00"
+    max="18:00"
+    :is24h="true"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String` | — | Valor de la hora en formato `HH:mm`. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `min` | `String` | `null` | Hora mínima (ej: `'08:00'`). |
+| `max` | `String` | `null` | Hora máxima (ej: `'18:00'`). |
+| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector AM/PM. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Valor emitido:** `'HH:mm'` en formato 24h siempre, independientemente del modo de visualización.
+------
+## InputDateTimeStyle
+Selector combinado de fecha y hora con máscara `dd/mm/aaaa hh:mm` (o `dd/mm/aaaa hh:mm a.m.` en modo 12h), calendario visual nativo y picker de columnas scrollables para la hora. El valor se emite en formato `YYYY-MM-DDTHH:mm:00.000`.
+```vue
+<InputDateTimeStyle
+    v-model="fechaHora"
+    label="Fecha y hora"
+    min="2000-01-01"
+    max="2100-12-31"
+    :is24h="true"
+    :validate="validate"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Date` | — | Valor en formato `YYYY-MM-DDTHH:mm:00.000` o `Date`. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input>`. |
+| `id` | `String` | `null` | Id propio; si se omite se genera y se enlaza al `<label>`. |
+| `autofocus` | `Boolean` | `false` | Enfoca el campo al montarse. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable (formato `YYYY-MM-DD`). |
+| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable (formato `YYYY-MM-DD`). |
+| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o `Date`. |
+| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector a.m./p.m. |
+| `disabled` | `Boolean` | `false` | |
+| `readonly` | `Boolean` | `false` | Solo lectura. |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+**Valor emitido:** `'YYYY-MM-DDTHH:mm:00.000'` (string) o `''` si la fecha/hora es inválida o está vacía.
+**Comportamiento del picker:**
+- El calendario permanece abierto al seleccionar la fecha, para que puedas ajustar también la hora.
+- El selector de hora embebido en el picker usa las mismas columnas scrollables que `InputTimeStyle`.
+- Botón **Ahora** — establece la fecha y hora actuales de un solo clic.
+**Navegación por teclado:**
+- Escribe los dígitos y el foco avanza automáticamente: día → mes → año → hora → minuto → a.m./p.m.
+- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha se ajusta a los límites `min`/`max`)
+- `←` / `→` — mover entre secciones
+- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
+- `Backspace` / `Delete` — limpiar la sección activa
+- `a` / `p` — cambiar entre a.m. y p.m. (solo modo 12h)
+- Clic en el ícono 📅 — abre/cierra el picker
+------
+## InputFileUploadStyle
+Botón para adjuntar archivos con validación de tamaño y formato.
+```vue
+<InputFileUploadStyle
+    v-model="archivo"
+    :formats="['pdf', 'docx']"
+    max-size-m-b="10"
+    :state="uploadState"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `File` | `null` | Archivo seleccionado. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<input type="file">`. |
+| `id` | `String` | `null` | Id propio del `<input type="file">`. |
+| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
+| `formats` | `Array` | `[]` | Extensiones permitidas (ej: `['pdf', 'xlsx', 'png']`). Array vacío = todos los formatos. |
+| `maxSizeMB` | `String \| Number` | `5` | Tamaño máximo del archivo en MB. |
+| `state` | `String` | `'uphold'` | Estado del botón: `'uphold'` (normal) o `'loader'` (cargando, muestra spinner). |
+| `delay` | `String` | `'1.5'` | Segundos de bloqueo del botón tras un clic, para evitar doble envío. |
+**Eventos:**
+- `update:modelValue` — emite el `File` seleccionado, o `null` si el archivo no es válido.
+- `change` — igual que `update:modelValue`.
+El componente valida automáticamente el tamaño y el formato, mostrando un mensaje de error inline si la validación falla.
+------
+## InputFileDownloadStyle
+Botón para descargar archivos con tres estados visuales.
+```vue
+<InputFileDownloadStyle
+    :state="downloadState"
+    :disabled="false"
+    @click="descargarArchivo"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
+| `state` | `String` | `'download'` | Estado: `'download'` (normal), `'loader'` (descargando, spinner), `'complete'` (completado, check verde). |
+| `delay` | `String` | `'1.5'` | Segundos de bloqueo del botón tras un clic. |
+**Eventos:**
+- `click` — se dispara al hacer clic (solo si no está deshabilitado).
+------
+## ButtonStyle
+Botón genérico con bloqueo automático anti-doble-clic.
+```vue
+<ButtonStyle
+    class="px-4 py-2 bg-indigo-500 text-white rounded"
+    :disabled="cargando"
+    @click="guardar"
+>
+    Guardar
+</ButtonStyle>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `type` | `String` | `'button'` | Tipo del botón: `'button'` o `'submit'`. |
+| `name` | `String` | `null` | Atributo `name` nativo del `<button>`. |
+| `id` | `String` | `null` | Id propio del `<button>`. |
+| `autofocus` | `Boolean` | `false` | Enfoca el botón al montarse. |
+| `class` | `String` | `''` | Clases CSS del botón (TailwindCSS). |
+| `disabled` | `Boolean` | `false` | Deshabilita el botón. |
+| `delay` | `String` | `'1.5'` | Segundos de bloqueo automático tras hacer clic (anti-doble-clic). |
+**Eventos:**
+- `click` — se dispara al hacer clic (solo si no está deshabilitado ni en periodo de bloqueo).
+Acepta contenido mediante `<slot>` (texto, íconos, etc.).
+> **Nota:** con `type="submit"` funciona como botón de envío nativo dentro de un `<form>`. El bloqueo anti-doble-clic se aplica de forma diferida para no cancelar el envío nativo del formulario.
+------
+## LoaderStyle
+Indicador de carga circular animado.
+```vue
+<LoaderStyle message="Procesando datos..." />
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `message` | `String` | `'Cargando...'` | Texto que se muestra debajo del arco animado. |
+El color del arco se controla con el token `LOADER_ARC_STROKE`.
+------
+## PaginationStyle
+Paginador con navegación anterior/siguiente, botones de página y resumen de registros.
+```vue
+<PaginationStyle
+    :total-pages="totalPaginas"
+    :actual-page="paginaActual"
+    :records="totalRegistros"
+    :limit="registrosPorPagina"
+    :summary="true"
+    @page="cambiarPagina"
+/>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `totalPages` | `Number` | `0` | Total de páginas. |
+| `actualPage` | `Number` | `1` | Página actualmente activa. |
+| `records` | `Number` | `0` | Total de registros (para el resumen). |
+| `limit` | `Number` | `0` | Registros por página (para calcular el rango del resumen). |
+| `summary` | `Boolean` | `false` | `true` = muestra el texto "Mostrando X - Y de Z". |
+**Eventos:**
+- `page` — emite el número de página a la que se desea navegar.
+El paginador muestra hasta 7 botones con elipsis (`...`) inteligentes cuando hay más páginas.
+------
+## ModalStyle
+Ventana modal con `Teleport` al `body`, animaciones de entrada/salida, bloqueo del scroll de fondo y cierre por tecla `Escape`. El estado de apertura se controla con `v-model`.
+```vue
+<ButtonStyle @click="showModal = true">Abrir modal</ButtonStyle>
+<ModalStyle v-model="showModal" title="Detalles" size="lg">
+    <p>Contenido del modal...</p>
+    <template #footer="{ close }">
+        <div class="flex justify-end gap-2">
+            <ButtonStyle class="px-4 py-2 border rounded" @click="close">Cerrar</ButtonStyle>
+        </div>
+    </template>
+</ModalStyle>
+```
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `Boolean` | `false` | Controla la visibilidad del modal (`v-model`). |
+| `title` | `String` | `'Sin titulo asignado'` | Título mostrado en el header (si no se usa el slot `title`). |
+| `size` | `String` | `'lg'` | Ancho máximo: `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'`, `'5xl'`, `'full'`. |
+| `showCloseButton` | `Boolean` | `true` | Muestra el botón `✕` de cierre en el header. |
+| `closeOnEscape` | `Boolean` | `true` | Permite cerrar el modal con la tecla `Escape`. |
+| `closeOnOverlayClick` | `Boolean` | `true` | Permite cerrar el modal al hacer clic en el fondo. |
+**Slots:**
+- `title` — reemplaza el título del header.
+- *default* — contenido principal. Recibe `{ close }` para cerrar desde dentro.
+- `footer` — pie del modal (solo se renderiza si se provee). Recibe `{ close }`.
+**Eventos:**
+- `update:modelValue` — emite `false` al cerrarse.
+------
+## AlertStyle (notificaciones tipo toast)
+Utilidad JavaScript (no es un componente) para mostrar notificaciones flotantes que se auto-descartan. Disponible como propiedad global `$alertstyle` tras instalar el plugin, o mediante importación directa.
+```js
+// Vía global property (Options API)
+this.$alertstyle.success('Guardado', 'Los cambios se guardaron correctamente')
+// Vía importación directa
+import { AlertStyle } from '@luis-angel-martin-dzul/input-styles'
+AlertStyle.error('Error', 'No se pudo completar la operación')
+```
+| Método | Parámetros | Descripción |
+| ------ | ---------- | ----------- |
+| `success(title, message?)` | `String, String` | Notificación verde de éxito. |
+| `error(title, message?)` | `String, String` | Notificación roja de error. |
+| `warning(title, message?)` | `String, String` | Notificación de advertencia. |
+| `info(title, message?)` | `String, String` | Notificación informativa. |
+| `neutral(title, message?)` | `String, String` | Notificación neutral. |
+Cada notificación se cierra automáticamente a los 4 segundos o manualmente con su botón `×`.
+------
+## DialogStyle (diálogos modales)
+Utilidad JavaScript para diálogos de confirmación, información y carga, con interfaz fluida (encadenable). Disponible como global `$dialogstyle` o por importación directa.
+```js
+// Confirmación
+this.$dialogstyle.confirm('¿Eliminar registro?', 'Esta acción no se puede deshacer')
+    .onAccept(() => eliminar())
+    .onCancel(() => console.log('Cancelado'))
+// Información (un solo botón)
+this.$dialogstyle.info('Operación completada')
+    .onConfirm(() => console.log('Aceptado'))
+// Carga (bloqueante, se cierra manualmente)
+const loader = this.$dialogstyle.loading('Procesando...', 'Espere un momento')
+loader.updateMessage('Casi listo...')
+loader.close()
+```
+| Método | Retorna | Descripción |
+| ------ | ------- | ----------- |
+| `confirm(title, description?)` | controlador con `.onAccept(cb)` / `.onCancel(cb)` | Diálogo con botones Aceptar / Cancelar. |
+| `info(title, description?)` | controlador con `.onConfirm(cb)` | Diálogo informativo con un solo botón Aceptar. |
+| `loading(title, description?)` | `{ close, updateTitle, updateMessage }` | Diálogo de carga con spinner; se cierra con `.close()`. |
+| `finish(immediate?)` | `Promise` | Cierra el diálogo abierto manualmente. |
+> 💡 La tecla `Escape` no cierra el diálogo (hace una animación de "shake"), para forzar una decisión explícita del usuario.
+------
+# 🧭 Directivas
+## `v-title-style`
+Muestra un **tooltip** ("globo de diálogo") sobre **cualquier etiqueta o componente**, reemplazando al atributo `title` nativo del navegador. Su **fondo es sky y semitransparente**, para no ocultar del todo el contenido que queda detrás.
+- **Escritorio (mouse):** aparece al pasar el cursor y se oculta al salir.
+- **Móvil (touch):** se muestra al tocar el elemento y se oculta al tocar de nuevo o fuera.
+- Acepta **texto plano** (fijo o desde una variable reactiva).
+Si instalas la librería con `app.use(InputStyles)`, la directiva queda registrada **global** automáticamente. Si la usas en un componente que no instala el plugin, regístrala local: `import { TitleStyle } from '@luis-angel-martin-dzul/input-styles'` y `directives: { titleStyle: TitleStyle }`.
+```vue
+<!-- Texto fijo (nota las comillas simples internas) -->
+<button v-title-style="'Guarda los cambios'">Guardar</button>
+<!-- Sobre cualquier etiqueta o componente -->
+<span v-title-style="'Información adicional'">ⓘ</span>
+<button-style v-title-style="'Tooltip translúcido sobre un ButtonStyle'">Con tooltip</button-style>
+<!-- Texto dinámico -->
+<button v-title-style="mensajeAyuda">Enviar</button>
+```
+------
+## UtilStyle (utilidades)
+Clase con métodos estáticos de utilidad (formateo, validaciones, manejo de archivos, etc.). Disponible como propiedad global `$utilstyle` tras instalar el plugin, o mediante importación directa.
+```js
+// Vía global property (Options API)
+this.$utilstyle.formatMoney(1234.5)
+// Vía importación directa
+import { UtilStyle } from '@luis-angel-martin-dzul/input-styles'
+UtilStyle.getUUID()
+```
+| Método | Parámetros | Descripción |
+| ------ | ---------- | ----------- |
+| `getUUID()` | — | Genera un UUID v4 (usa `crypto.randomUUID` con fallback manual). |
+| `formatMoney(valor, dollar?, digit?)` | `Number, String, Number` | Formatea un número como moneda (ej: `$1,234.56`). |
+| `formatNumber(valor, digit?)` | `Number, Number` | Formatea un número con separadores de miles y decimales fijos. |
+| `formatBytes(bytes, digit?)` | `Number, Number` | Formatea un tamaño en bytes a `B` / `KB` / `MB` legible (ej: `296.0 KB`). |
+| `formatDateShort(dateString)` | `String` | Fecha en formato corto en español (ej: `9 jul 2026`). |
+| `formatDateLong(dateString)` | `String` | Fecha en formato largo en español (ej: `9 de julio de 2026`). |
+| `formatDateTimeShort(dateString, hour12?)` | `String, Boolean` | Fecha y hora en formato corto en español (ej: `9 jul 2026, 12:00 p. m.`). `hour12` (default `true`) alterna entre 12h y 24h. |
+| `formatDateTimeLong(dateString, hour12?)` | `String, Boolean` | Fecha y hora en formato largo en español (ej: `9 de julio de 2026, 12:00 p. m.`). `hour12` (default `true`) alterna entre 12h y 24h. |
+| `getDateTimeNow()` | — | Fecha y hora actual (zona `America/Mexico_City`) en formato `YYYY-MM-DDTHH:mm:ss`. |
+| `porcentaje(valor, total)` | `Number, Number` | Calcula el porcentaje de `valor` respecto a `total` (ej: `50`). Retorna `0` si `total` es `0` o negativo. |
+| `blockKeyNumber(event)` | `Event` | Bloquea las teclas `e`, `E`, `+`, `-` en un `@keydown`. |
+| `blockKeys(event, keys)` | `Event, Array` | Bloquea las teclas indicadas en un `@keydown`. |
+| `validateTel(value, required?)` | `String, Boolean` | Valida un teléfono con formato `999 9 99 99 99`. Acepta prefijo de región opcional `+XXX 999 9 99 99 99` (XXX = 1 a 3 dígitos). Retorna `true` o mensaje de error. |
+| `validateEmail(value, required?)` | `String, Boolean` | Valida un correo con las condiciones mínimas `xx@xx.x`. Retorna `true` o mensaje de error. |
+| `validateFileExtension(file, allowedExtensions?)` | `File, Array` | Valida la extensión del archivo. Retorna `true` o mensaje de error. |
+| `validateFileType(file, allowedTypes?)` | `File, Array` | Valida el MIME type del archivo. Retorna `true` o mensaje de error. |
+| `validateFileSize(file, maxSizeMB?)` | `File, Number` | Valida el tamaño del archivo. Retorna `true` o mensaje de error. |
+| `downloadBlob(blobData, fileName?, mimeType?)` | `Blob, String, String` | Descarga un blob como archivo. |
+| `fileToBase64(file)` | `File` | Convierte un `File` a base64 (async, retorna `Promise`). |
+| `base64ToBlob(base64, mimeType?)` | `String, String` | Convierte una cadena base64 a `Blob`. |
+| `base64ToFile(base64, fileName?, mimeType?)` | `String, String, String` | Convierte una cadena base64 a `File`. |
+| `fileToImage(file)` | `File` | Carga un `File` de imagen en un `HTMLImageElement` (async, retorna `Promise`). Libera el object URL al terminar. |
+| `compressToWebp(file, quality?, maxWidth?)` | `File, Number, Number` | Comprime una imagen a **WebP** en el navegador (async). Ver [Compresión de imágenes a WebP](#compresión-de-imágenes-a-webp). |
+> 💡 Los métodos de validación (`validateTel`, `validateEmail`, `validateFile*`) devuelven `true` si el valor es válido, o un `String` con el mensaje de error si no lo es.
+------
+# 🖼️ Compresión de imágenes a WebP
+Convierte imágenes (PNG, JPEG, etc.) a **WebP** directamente en el navegador —sin subir nada al servidor— usando la Canvas API. Útil para reducir el peso de las imágenes **antes** de enviarlas a tu backend.
+El método principal es `UtilStyle.compressToWebp(file, quality, maxWidth)`.
+```js
+// file: Number, quality: 0 a 1 (ej. 0.8 = 80%), maxWidth: px (opcional)
+const res = await UtilStyle.compressToWebp(file, 0.8, 1920)
+```
+| Parámetro | Tipo | Default | Descripción |
+| --------- | ---- | ------- | ----------- |
+| `file` | `File` | — | Archivo de imagen original (PNG/JPEG/etc). |
+| `quality` | `Number` | `0.8` | Calidad de `0` a `1` (ej: `0.8` = 80%). Solo aplica en WebP con pérdida. |
+| `maxWidth` | `Number \| null` | `null` | Si se indica, redimensiona manteniendo proporción. Recomendado para fotos grandes. |
+**Retorna** una `Promise` que resuelve a un objeto:
+```js
+{
+  blob,            // Blob de la imagen WebP (listo para subir o descargar)
+  originalSize,    // Tamaño original en bytes
+  compressedSize,  // Tamaño comprimido en bytes
+  ratio,           // % de ahorro (positivo = más ligero; negativo = más pesado)
+  width, height,   // Dimensiones finales del WebP
+}
+```
+## ¿Cuándo usarlo?
+✅ **Úsalo cuando:**
+- Quieras **reducir el peso** de imágenes que suben tus usuarios antes de enviarlas al servidor (ahorra ancho de banda y almacenamiento).
+- Trabajes con **fotos** o imágenes con muchos colores/degradados (es donde WebP más ahorra).
+- Quieras **previsualizar** el ahorro antes de confirmar la subida.
+⚠️ **Evítalo / revísalo cuando:**
+- Necesites soportar **Safari**: su canvas no codifica WebP de forma fiable y puede devolver un PNG disfrazado. El método **detecta esto y lanza un error explícito** en vez de entregar un archivo "mentiroso". Para soporte universal usa un encoder WASM (p. ej. `@jsquash/webp`) como fallback.
+- La imagen sea un **ícono/ilustración plana con pocos colores**: el ahorro de WebP con pérdida es mínimo y puede generar ruido en los bordes. Considera dejarla como PNG.
+- Necesites conservar **metadatos EXIF** (orientación, geolocalización): el canvas los descarta. Pásale `maxWidth` y ten en cuenta que fotos con orientación EXIF podrían rotarse.
+> 💡 **Referencia de ahorro** (cifras oficiales del equipo WebP de Google): lossless ≈ 26% menos que PNG; con pérdida 25–34% menos que JPEG a calidad visual equivalente. No hay un porcentaje fijo: depende del contenido. **Calidad recomendada:** 75–85% para fotos (a partir de 75% la diferencia suele ser imperceptible).
+## Uso básico (un archivo)
+```js
+import { UtilStyle } from '@luis-angel-martin-dzul/input-styles'
+async function comprimir(file) {
+    try {
+        const res = await UtilStyle.compressToWebp(file, 0.8, 1920)
+        console.log(`Ahorro: ${res.ratio}%`)
+        console.log(`${UtilStyle.formatBytes(res.originalSize)} → ${UtilStyle.formatBytes(res.compressedSize)}`)
+        // Subir al servidor
+        const formData = new FormData()
+        formData.append('imagen', res.blob, file.name.replace(/\.\w+$/, '.webp'))
+        // await fetch('/api/upload', { method: 'POST', body: formData })
+        // O descargar localmente (reutiliza downloadBlob de UtilStyle)
+        UtilStyle.downloadBlob(res.blob, 'imagen.webp', 'image/webp')
+    } catch (e) {
+        console.error(e.message) // p. ej. error de Safari
+    }
+}
+```
+## Uso con validación y múltiples archivos (Options API)
+```vue
+<template>
+    <input type="file" accept="image/*" multiple @change="onFiles" />
+    <p v-if="error" class="text-red-500">{{ error }}</p>
+</template>
+<script>
+export default {
+    data() {
+        return { error: '', resultados: [] }
+    },
+    methods: {
+        async onFiles(e) {
+            this.error = ''
+            const files = Array.from(e.target.files || [])
+            for (const file of files) {
+                // Reutiliza las validaciones de UtilStyle
+                const extOk = this.$utilstyle.validateFileExtension(file, ['png', 'jpg', 'jpeg'])
+                if (extOk !== true) { this.error = extOk; continue }
+                const sizeOk = this.$utilstyle.validateFileSize(file, 10)
+                if (sizeOk !== true) { this.error = sizeOk; continue }
+                try {
+                    const res = await this.$utilstyle.compressToWebp(file, 0.8, 1920)
+                    this.resultados.push(res)
+                } catch (err) {
+                    this.error = err.message
+                }
+            }
+        }
+    }
+}
+</script>
+```
+> ℹ️ La librería expone **solo los métodos** de compresión en `UtilStyle`; no incluye un componente visual. Si necesitas una UI lista (selector + comparación de tamaños + descarga), puedes construirla sobre estos métodos como en el ejemplo anterior.
+------
+## Ejemplo de uso completo
+```vue
+<template>
+    <div class="p-6 space-y-4 max-w-md">
+        <InputTextStyle
+            v-model="form.nombre"
+            label="Nombre completo"
+            placeholder="Ej: Juan Pérez"
+            :required="true"
+            :validate="validaciones.nombre"
+        />
+        <InputNumberStyle
+            v-model="form.monto"
+            label="Monto"
+            numeric="10,2"
+            min="0"
+            :validate="validaciones.monto"
+        />
+        <InputPasswordStyle
+            v-model="form.password"
+            label="Contraseña"
+            :required="true"
+            :validate="validaciones.password"
+        />
+        <SelectStyle
+            v-model="form.pais"
+            label="País"
+            :list="paises"
+            return-value="value"
+            :validate="validaciones.pais"
+        />
+        <InputDateStyle
+            v-model="form.fecha"
+            label="Fecha"
+            :validate="validaciones.fecha"
+        />
+        <InputDateTimeStyle
+            v-model="form.fechaHora"
+            label="Fecha y hora"
+            :is24h="true"
+            :validate="validaciones.fechaHora"
+        />
+        <InputTimeStyle
+            v-model="form.hora"
+            label="Hora"
+            :is24h="true"
+        />
+        <InputCheckStyle
+            v-model="form.acepta"
+            label="Acepto los términos"
+            :required="true"
+        />
+        <ButtonStyle
+            class="w-full px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600"
+            @click="enviar"
+        >
+            Enviar
+        </ButtonStyle>
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import {
+    InputTextStyle, InputNumberStyle, InputPasswordStyle,
+    SelectStyle, InputDateStyle, InputDateTimeStyle, InputTimeStyle,
+    InputCheckStyle, ButtonStyle
+} from '@luis-angel-martin-dzul/input-styles'
+const form = ref({
+    nombre: '', monto: '', password: '',
+    pais: null, fecha: '', fechaHora: '', hora: '', acepta: false
+})
+const validaciones = ref({
+    nombre: null, monto: null, password: null,
+    pais: null, fecha: null, fechaHora: null
+})
+const paises = [
+    { value: 1, text: 'México' },
+    { value: 2, text: 'España' },
+]
+function enviar() {
+    validaciones.value.nombre = form.value.nombre.length > 0
+    // ... resto de validaciones
+}
+</script>
+```