update-base-config 0.1.0

package/templates/skills/tailwind/docs/SKILL_TAILWIND_CUSTOM.md

@@ -0,0 +1,776 @@
+# SKILL - Tailwind CSS Custom Configuration (tw-blue & tw-green)
+
+## 📌 Problema Identificado
+
+Cuando se solicita crear maquetas, existe un conflicto entre:
+
+- **Documentación de Tailwind v3** (valores por defecto)
+- **Configuración Custom del Proyecto** (presets personalizados: `tw-blue`, `tw-green`)
+
+Copilot y otros asistentes tienden a usar la documentación estándar de Tailwind v3 sin considerar los presets personalizados del proyecto.
+
+---
+
+## 🎯 Solución: Presets Personalizados
+
+### ¿Qué son los Presets?
+
+Los presets son configuraciones de colores, espaciados y otros valores que **extienden** la configuración base de Tailwind. En este proyecto usamos:
+
+- **`tw-blue`**: Preset principal con la paleta de colores del Banco de Chile (azul corporativo)
+- **`tw-green`**: Preset secundario para variantes de diseño
+
+### Configuración Actual
+
+**Archivo: `tailwind.config.js`**
+
+```javascript
+import twBlue from "tw-blue";
+
+export default {
+	content: [
+		"./index.html",
+		"./src/**/*.{html,vue,js}",
+		"./node_modules/@exdbch/components-lib/dist/bch-components-lib.js",
+	],
+	presets: [twBlue], // ← Aquí se aplica el preset personalizado
+	safelist: [
+		{
+			pattern: /bg-+/, // Incluye todos los bg de colores disponibles
+		},
+		"rounded-bl-[44px]",
+		"rounded-br-[44px]",
+	],
+};
+```
+
+---
+
+## 🎨 Colores Disponibles (tw-blue)
+
+### Paleta de Colores Principal
+
+Estos colores están definidos en el preset `tw-blue` y están **automáticamente disponibles** en todas las clases Tailwind:
+
+| Token           | Uso                                | Ejemplo                                  |
+| --------------- | ---------------------------------- | ---------------------------------------- |
+| `brand`         | Color principal (azul corporativo) | `bg-brand`, `text-brand`, `border-brand` |
+| `brand-light`   | Versión clara del brand            | `from-brand-light`, `text-brand-light`   |
+| `brand-dark`    | Versión oscura del brand           | `bg-brand-dark`, `via-brand-dark`        |
+| `brand-lighter` | Versión aún más clara              | `bg-brand-lighter`                       |
+| `primary`       | Color primario (gradientes)        | `to-primary`, `bg-primary`               |
+| `primary-light` | Variante clara del primario        | `from-primary-light`                     |
+| `secondary`     | Color secundario                   | `bg-secondary`                           |
+| `accent`        | Color de acento                    | `text-accent`                            |
+
+### Variantes Disponibles
+
+Todos los colores soportan:
+
+- Opacidad: `bg-brand/80`, `text-brand/50`
+- Estados: `hover:bg-brand`, `focus:border-brand`
+- Breakpoints: `md:bg-brand`, `lg:text-brand`
+
+---
+
+## 📐 Tipografía (Font System)
+
+### Tamaños de Fuente (fontSize)
+
+El preset define una escala de fuentes personalizada con **aliases numéricos** (1-8) y sus equivalentes semánticos:
+
+| Clase Tailwind | Alias Numérico | Tamaño | Line Height | Uso                 |
+| -------------- | -------------- | ------ | ----------- | ------------------- |
+| `text-xs`      | `text-1`       | 12px   | 24px        | Textos muy pequeños |
+| `text-sm`      | `text-2`       | 14px   | 24px        | Textos secundarios  |
+| `text-base`    | `text-3`       | 16px   | 24px        | Texto base/párrafos |
+| `text-lg`      | `text-4`       | 20px   | 24px        | Subtítulos          |
+| `text-xl`      | `text-5`       | 24px   | 32px        | Títulos H3          |
+| `text-2xl`     | `text-6`       | 26px   | 32px        | Títulos H2          |
+| `text-3xl`     | `text-7`       | 32px   | 40px        | Títulos H1          |
+| `text-4xl`     | `text-8`       | 40px   | 48px        | Héroes / Destacados |
+
+**Ejemplos:**
+
+```vue
+<!-- Puedes usar alias semántico o numérico -->
+<h1 class="text-3xl font-bold">Título Principal</h1>
+<h1 class="text-7 font-bold">Título Principal (equivalente)</h1>
+
+<p class="text-base">Texto de párrafo</p>
+<p class="text-3">Texto de párrafo (equivalente)</p>
+```
+
+### Font Family
+
+El preset usa **Nunito Sans** como fuente principal:
+
+```vue
+<!-- Ya está aplicada por defecto -->
+<p class="font-sans">Texto con Nunito Sans</p>
+```
+
+### Font Weight
+
+| Clase            | Peso | Uso                     |
+| ---------------- | ---- | ----------------------- |
+| `font-light`     | 300  | Textos ligeros          |
+| `font-normal`    | 400  | Texto normal            |
+| `font-medium`    | 500  | Texto medianamente bold |
+| `font-semibold`  | 600  | Subtítulos              |
+| `font-bold`      | 700  | Títulos, énfasis        |
+| `font-extrabold` | 800  | Títulos muy destacados  |
+
+### Line Height
+
+| Clase            | Valor | Uso                     |
+| ---------------- | ----- | ----------------------- |
+| `leading-normal` | 1.5   | Default                 |
+| `leading-tight`  | 1.25  | Títulos compactos       |
+| `leading-1`      | 16px  | Line height fijo (16px) |
+| `leading-2`      | 24px  | Line height fijo (24px) |
+| `leading-3`      | 32px  | Line height fijo (32px) |
+| `leading-4`      | 40px  | Line height fijo (40px) |
+| `leading-5`      | 48px  | Line height fijo (48px) |
+
+### Letter Spacing
+
+| Clase             | Valor | Uso                     |
+| ----------------- | ----- | ----------------------- |
+| `tracking-normal` | 0     | Default                 |
+| `tracking-wide`   | 0.4px | Texto espaciado         |
+| `tracking-wider`  | 1px   | Más espaciado           |
+| `tracking-widest` | 3px   | Muy espaciado (títulos) |
+
+---
+
+## 📏 Espaciado (Spacing)
+
+**IMPORTANTE**: El preset usa una escala de espaciado **diferente** a Tailwind estándar.
+
+### Escala de Spacing (1-7)
+
+| Clase                 | Valor | Uso                     |
+| --------------------- | ----- | ----------------------- |
+| `p-1`, `m-1`, `gap-1` | 4px   | Espaciado mínimo        |
+| `p-2`, `m-2`, `gap-2` | 8px   | Espaciado pequeño       |
+| `p-3`, `m-3`, `gap-3` | 12px  | Espaciado medio-pequeño |
+| `p-4`, `m-4`, `gap-4` | 16px  | Espaciado medio         |
+| `p-5`, `m-5`, `gap-5` | 24px  | Espaciado grande        |
+| `p-6`, `m-6`, `gap-6` | 32px  | Espaciado muy grande    |
+| `p-7`, `m-7`, `gap-7` | 40px  | Espaciado extra grande  |
+
+**❗ Diferencias con Tailwind estándar:**
+
+| Tailwind Estándar | tw-blue Preset | Diferencia   |
+| ----------------- | -------------- | ------------ |
+| `p-1` = 4px       | `p-1` = 4px    | ✅ Igual     |
+| `p-2` = 8px       | `p-2` = 8px    | ✅ Igual     |
+| `p-3` = 12px      | `p-3` = 12px   | ✅ Igual     |
+| `p-4` = 16px      | `p-4` = 16px   | ✅ Igual     |
+| `p-5` = 20px      | `p-5` = 24px   | ❌ DIFERENTE |
+| `p-6` = 24px      | `p-6` = 32px   | ❌ DIFERENTE |
+| `p-7` = 28px      | `p-7` = 40px   | ❌ DIFERENTE |
+
+**Ejemplos:**
+
+```vue
+<!-- Padding -->
+<div class="p-5">Padding de 24px</div>
+<div class="px-4 py-2">Padding horizontal 16px, vertical 8px</div>
+
+<!-- Margin -->
+<h1 class="mb-5">Margen inferior de 24px</h1>
+<div class="mx-auto mt-6">Centrado con margen top 32px</div>
+
+<!-- Gap (Flexbox/Grid) -->
+<div class="flex gap-3">Gap de 12px entre elementos</div>
+<div class="grid gap-5">Gap de 24px en grid</div>
+```
+
+---
+
+## 📱 Breakpoints (Screens)
+
+El preset usa breakpoints **Modyo 9** (diferentes a Modyo 8):
+
+| Breakpoint | Tamaño | Uso                     |
+| ---------- | ------ | ----------------------- |
+| `sm:`      | 640px  | Teléfonos horizontales  |
+| `md:`      | 768px  | Tablets                 |
+| `lg:`      | 1024px | Desktop pequeño         |
+| `xl:`      | 1280px | Desktop grande          |
+| `2xl:`     | 1536px | Pantallas extra grandes |
+
+**Ejemplos:**
+
+```vue
+<!-- Texto responsivo -->
+<h1 class="text-5 md:text-6 lg:text-7">
+  Título que crece en pantallas grandes
+</h1>
+
+<!-- Layout responsivo -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>
+
+<!-- Colores responsivos -->
+<div class="bg-brand md:bg-brand-light lg:bg-primary">
+  Fondo que cambia según pantalla
+</div>
+```
+
+---
+
+## 📦 Container
+
+El container está configurado con:
+
+- **Center**: Centrado automáticamente
+- **Padding**: 15px lateral
+
+```vue
+<div class="container">
+  <!-- Contenido centrado con padding lateral de 15px -->
+</div>
+
+<!-- En pantallas sm-md (640px-768px), max-width es 90% -->
+```
+
+---
+
+## 🎨 Bordes (Borders)
+
+### Border Width
+
+| Clase      | Valor | Uso                   |
+| ---------- | ----- | --------------------- |
+| `border-0` | 0     | Sin borde             |
+| `border`   | 1px   | Borde default         |
+| `border-1` | 1px   | Borde 1px (explícito) |
+| `border-2` | 2px   | Borde 2px             |
+
+### Border Radius
+
+| Clase          | Valor  | Uso                    |
+| -------------- | ------ | ---------------------- |
+| `rounded-0`    | 0      | Sin bordes redondeados |
+| `rounded-1`    | 4px    | Redondeado pequeño     |
+| `rounded-sm`   | 4px    | Alias de rounded-1     |
+| `rounded-2`    | 8px    | Redondeado medio       |
+| `rounded`      | 8px    | Default                |
+| `rounded-md`   | 8px    | Alias de rounded-2     |
+| `rounded-3`    | 16px   | Redondeado grande      |
+| `rounded-lg`   | 16px   | Alias de rounded-3     |
+| `rounded-full` | 9999px | Completamente redondo  |
+
+**Ejemplos:**
+
+```vue
+<!-- Cards -->
+<div class="border border-brand-light rounded-2 p-4">
+  Card con borde de 1px y radio de 8px
+</div>
+
+<!-- Botones -->
+<button class="rounded-full px-6 py-2 bg-brand">
+  Botón con bordes completamente redondeados
+</button>
+
+<!-- Border específico -->
+<div class="border-2 border-primary rounded-3">
+  Borde grueso (2px) con radio de 16px
+</div>
+```
+
+---
+
+## 🌑 Sombras (Box Shadow)
+
+El preset define sombras personalizadas:
+
+| Clase             | Uso                              |
+| ----------------- | -------------------------------- |
+| `shadow-sm`       | Sombra pequeña (controles)       |
+| `shadow`          | Sombra default                   |
+| `shadow-md`       | Sombra media                     |
+| `shadow-lg`       | Sombra grande                    |
+| `shadow-xl`       | Sombra extra grande              |
+| `shadow-controls` | Sombra específica para controles |
+| `shadow-neutral`  | Sombra neutral                   |
+| `shadow-min`      | Sombra mínima                    |
+| `shadow-tiny`     | Sombra diminuta                  |
+
+**Ejemplos:**
+
+```vue
+<!-- Cards -->
+<div class="bg-white rounded-2 shadow-md p-5">
+  Card con sombra media
+</div>
+
+<!-- Botones elevados -->
+<button class="bg-brand text-white px-4 py-2 rounded shadow-controls">
+  Botón con sombra de control
+</button>
+
+<!-- Modales -->
+<div class="bg-white rounded-3 shadow-xl p-6">
+  Modal con sombra grande
+</div>
+```
+
+---
+
+## 🎬 Animaciones
+
+El preset incluye **múltiples animaciones predefinidas** basadas en animate.css:
+
+### Animaciones Disponibles
+
+| Clase                 | Descripción                     | Duración |
+| --------------------- | ------------------------------- | -------- |
+| `animate-fadeIn`      | Aparición gradual               | 1s       |
+| `animate-fadeOut`     | Desaparición gradual            | 1s       |
+| `animate-fadeInUp`    | Aparición desde abajo           | 1s       |
+| `animate-fadeInDown`  | Aparición desde arriba          | 1s       |
+| `animate-fadeInLeft`  | Aparición desde izquierda       | 1s       |
+| `animate-fadeInRight` | Aparición desde derecha         | 1s       |
+| `animate-heartBeat`   | Latido de corazón               | 1s       |
+| `animate-wiggle`      | Movimiento de vaivén            | 1s       |
+| `animate-bounce`      | Rebote (Tailwind estándar)      | 1s       |
+| `animate-pulse`       | Pulsación de opacidad           | 2s       |
+| `animate-spin`        | Rotación continua               | 1s       |
+| `animate-swing`       | Columpio                        | 1s       |
+| `animate-wobble`      | Tambaleo                        | 1s       |
+| `animate-rubberBand`  | Estiramiento elástico           | 1s       |
+| `animate-flash`       | Parpadeo                        | 1s       |
+| `animate-jello`       | Gelatina                        | 1s       |
+| `animate-skeleton`    | Pulsación para skeleton loaders | 2s       |
+
+**Ejemplos:**
+
+```vue
+<!-- Loading -->
+<div class="animate-pulse bg-gray-lighter h-4 w-full rounded"></div>
+
+<!-- Icono de carga -->
+<i class="animate-spin icos-loading"></i>
+
+<!-- Entrada de elemento -->
+<div class="animate-fadeInUp">
+  Contenido que aparece desde abajo
+</div>
+
+<!-- Botón con efecto -->
+<button class="bg-brand text-white px-4 py-2 hover:animate-heartBeat">
+  ¡Click aquí!
+</button>
+
+<!-- Skeleton loader -->
+<div class="animate-skeleton bg-gray-lighter h-20 rounded"></div>
+```
+
+---
+
+## ⏱️ Transiciones
+
+### Transition Duration
+
+El preset extiende las duraciones de transición:
+
+| Clase           | Valor  | Uso                   |
+| --------------- | ------ | --------------------- |
+| `duration-50`   | 50ms   | Muy rápida            |
+| `duration-100`  | 100ms  | Rápida                |
+| `duration-200`  | 200ms  | Normal                |
+| `duration-300`  | 300ms  | Media                 |
+| `duration-500`  | 500ms  | Lenta                 |
+| `duration-700`  | 700ms  | Muy lenta             |
+| `duration-1000` | 1000ms | Extra lenta (default) |
+| `duration-2000` | 2000ms | Súper lenta           |
+| `duration-3000` | 3000ms | Ultra lenta           |
+
+### Transition Timing Function
+
+| Clase                        | Curva                                | Uso                       |
+| ---------------------------- | ------------------------------------ | ------------------------- |
+| `ease-linear`                | linear                               | Velocidad constante       |
+| `ease-in`                    | cubic-bezier(0, 0, 0.3, 1)           | Acelera al inicio         |
+| `ease-out`                   | cubic-bezier(0.4, 0.14, 1, 1)        | Desacelera al final       |
+| `ease-in-out`                | cubic-bezier(0.4, 0.14, 0.3, 1)      | Acelera y desacelera      |
+| `ease-standard`              | cubic-bezier(0.2, 0, 0, 1) (default) | Estándar Material Design  |
+| `ease-emphasized`            | cubic-bezier(0.2, 0, 0, 1)           | Énfasis                   |
+| `ease-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1.0)    | Desaceleración enfatizada |
+
+**Ejemplos:**
+
+```vue
+<!-- Botón con transición -->
+<button class="bg-brand hover:bg-brand-dark transition-all duration-300 ease-out">
+  Botón con transición suave
+</button>
+
+<!-- Card con hover effect -->
+<div class="bg-white shadow-md hover:shadow-xl transition-shadow duration-500">
+  Card con efecto de sombra
+</div>
+
+<!-- Menú desplegable -->
+<div class="opacity-0 hover:opacity-100 transition-opacity duration-700 ease-in-out">
+  Menú que aparece gradualmente
+</div>
+
+<!-- Transform con transición -->
+<div class="scale-100 hover:scale-110 transition-transform duration-300 ease-emphasized">
+  Elemento que crece al hover
+</div>
+```
+
+---
+
+## ✨ Ejemplos de Uso Correcto
+
+### 1. **Gradientes (Lo más común en diseños)**
+
+```vue
+<!-- ❌ INCORRECTO - Usa colores por defecto de Tailwind -->
+<h1 class="bg-gradient-to-r from-blue-500 to-blue-700">Título</h1>
+
+<!-- ✅ CORRECTO - Usa colores del preset tw-blue -->
+<h1 class="text-transparent bg-clip-text bg-gradient-to-r from-brand-light to-primary">
+  Charlas Mesa de Dinero
+</h1>
+
+<div class="bg-gradient-to-tl from-brand-dark via-brand to-brand/80">
+  Contenedor especial
+</div>
+
+<button class="bg-gradient-to-t from-primary to-primary-light">
+  CTA Button
+</button>
+```
+
+### 2. **Fondos Sólidos**
+
+```vue
+<!-- ❌ INCORRECTO -->
+<div class="bg-blue-600">Contenido</div>
+
+<!-- ✅ CORRECTO -->
+<div class="bg-brand">Contenido</div>
+<header class="bg-brand-dark">Encabezado</header>
+```
+
+### 3. **Bordes y Textos**
+
+```vue
+<!-- ❌ INCORRECTO -->
+<div class="border-blue-400 text-blue-500">Elemento</div>
+
+<!-- ✅ CORRECTO -->
+<div class="border-brand text-brand-light">Elemento</div>
+```
+
+### 4. **Combinaciones Responsivas**
+
+```vue
+<div class="bg-brand md:bg-brand-light lg:bg-primary">
+  Fondo adaptativo
+</div>
+
+<!-- Con opacidad -->
+<div class="bg-brand/80 hover:bg-brand/100 transition-all">
+  Botón interactivo
+</div>
+```
+
+---
+
+## 🔧 ¿Qué hacer cuando necesitas un valor NO disponible en tw-blue?
+
+### Opción 1: Valores Arbitrarios (Recomendado)
+
+Si necesitas un valor que **no existe** en los presets, usa **valores arbitrarios** de Tailwind:
+
+```vue
+<!-- Color específico no en preset -->
+<div class="bg-[#FF5733]">Fondo custom</div>
+
+<!-- Tamaño específico -->
+<button class="py-[14px] px-7">Botón con padding custom</button>
+
+<!-- Padding específico -->
+<div class="rounded-bl-[44px] rounded-br-[44px]">
+  Esquinas redondeadas custom
+</div>
+
+<!-- Width específica -->
+<span class="w-[157px] h-[4px]">Línea separadora custom</span>
+```
+
+**Ventaja**: Es explícito y no contamina la configuración.
+
+### Opción 2: Extender el Preset (Menos común)
+
+Si necesitas agregar colores permanentes, modifica `tailwind.config.js`:
+
+```javascript
+import twBlue from 'tw-blue';
+
+export default {
+  content: [...],
+  presets: [twBlue],
+  theme: {
+    extend: {
+      colors: {
+        'custom-red': '#FF5733',
+        'custom-purple': '#9B59B6',
+      },
+    },
+  },
+};
+```
+
+---
+
+## 📋 Checklist para Crear Maquetas
+
+Cuando crees un nuevo componente o página, sigue esta lista:
+
+- [ ] **Verificar colores disponibles**: ¿Uso `brand`, `brand-light`, `primary`?
+- [ ] **Preferir preset**: Antes de arbitrarios, intenta usar colores del preset
+- [ ] **Gradientes**: Combina colores del preset: `from-brand-light to-primary`
+- [ ] **Opacidad**: Usa la sintaxis `color/opacity`: `bg-brand/80`
+- [ ] **Responsivos**: Aplica breakpoints: `md:bg-brand lg:bg-primary`
+- [ ] **Valores custom**: Solo si realmente no existen en el preset → `bg-[#FF5733]`
+- [ ] **Safelist**: Valores arbitrarios comunes ya están en safelist (ej: `rounded-bl-[44px]`)
+
+---
+
+## 🚀 Ejemplos Reales del Proyecto
+
+### Header/Hero con Gradiente
+
+```vue
+<h1 class="text-transparent bg-clip-text bg-gradient-to-r from-brand-light to-primary">
+  {{ title }}
+</h1>
+
+<!-- Línea decorativa -->
+<div class="w-3/6 h-1 bg-gradient-to-r from-brand-light via-brand-light to-primary"></div>
+```
+
+### Card con Fondo Degradado
+
+```vue
+<div class="flex flex-col gap-4 p-5 text-center rounded-3 bg-gradient-to-tl from-brand-dark via-brand to-brand/80">
+  <span class="text-white">Contenido destacado</span>
+</div>
+```
+
+### Tabla Header
+
+```vue
+<h2 class="py-5 text-white bg-brand px-5">
+  Título de Tabla
+</h2>
+```
+
+### Botón CTA
+
+```vue
+<button
+	class="py-[14px] px-7 rounded-full text-white bg-gradient-to-t from-primary to-primary-light hover:bg-primary-light transition-all"
+>
+  Más información
+</button>
+```
+
+---
+
+## 🎓 Instrucciones para Copilot/IA
+
+Cuando se solicite crear una maqueta o componente:
+
+> **⚠️ IMPORTANTE**: Este proyecto usa **Tailwind CSS v3 CON PRESETS PERSONALIZADOS** (`tw-blue`).
+>
+> **Variables customizadas del preset:**
+>
+> ### Colores
+>
+> - `brand`, `brand-light`, `brand-dark`, `brand-lighter`
+> - `primary`, `primary-light`
+> - `secondary`, `accent`
+> - `gray`, `gray-light`, `gray-dark`, `gray-lighter`, `gray-background`
+> - `success`, `warning`, `error` (con sus variantes)
+>
+> ### Tipografía
+>
+> - **Tamaños**: `text-1` a `text-8` (12px a 40px) o `text-xs` a `text-4xl`
+> - **Font**: `font-sans` (Nunito Sans)
+> - **Weights**: `font-light` (300) a `font-extrabold` (800)
+>
+> ### Espaciado
+>
+> - **Escala**: `1` a `7` = 4px a 40px (NO usar valores mayores a 7)
+> - Ejemplos: `p-5` = 24px, `gap-3` = 12px, `m-6` = 32px
+>
+> ### Breakpoints
+>
+> - `sm:` 640px | `md:` 768px | `lg:` 1024px | `xl:` 1280px | `2xl:` 1536px
+>
+> ### Bordes
+>
+> - **Width**: `border` (1px), `border-2` (2px)
+> - **Radius**: `rounded-1/sm` (4px), `rounded-2/md` (8px), `rounded-3/lg` (16px), `rounded-full`
+>
+> ### Sombras
+>
+> - `shadow-sm`, `shadow-controls`, `shadow-neutral`, `shadow-min`, `shadow-md`, `shadow-lg`, `shadow-xl`
+>
+> ### Animaciones
+>
+> - `animate-fadeIn`, `animate-fadeInUp`, `animate-pulse`, `animate-heartBeat`, `animate-skeleton`, etc.
+>
+> ### Transiciones
+>
+> - **Duraciones**: `duration-50` a `duration-3000` (50ms a 3s)
+> - **Easing**: `ease-standard`, `ease-emphasized`, `ease-in-out`, etc.
+>
+> **Instrucciones clave**:
+>
+> 1. **Colores**: Usar SIEMPRE los del preset (NO `blue-500`, `gray-700`)
+> 2. **Tipografía**: Preferir `text-1` a `text-8` sobre valores arbitrarios
+> 3. **Espaciado**: SOLO usar escala 1-7 (valores como `p-8`, `m-10` NO existen)
+> 4. **Breakpoints**: Usar los customizados (md = 768px, NO 770px)
+> 5. **Gradientes**: Combinar colores del preset: `from-brand-light to-primary`
+> 6. **Animaciones**: Usar las predefinidas cuando sea posible
+> 7. **Valores arbitrarios**: Solo si NO existe equivalente en preset
+> 8. Verificar ejemplos en `src/pages/Charlas/Charlas.vue` o `src/pages/ValeVista/sections/BeneficiosSlider.vue`
+
+---
+
+## 📚 Archivos de Referencia
+
+- **Configuración**: [`tailwind.config.js`](tailwind.config.js)
+- **Ejemplos de uso**:
+    - [`src/pages/Charlas/Charlas.vue`](src/pages/Charlas/Charlas.vue) - Gradientes y colores brand
+    - [`src/pages/ValeVista/sections/BeneficiosSlider.vue`](src/pages/ValeVista/sections/BeneficiosSlider.vue) - Botones con gradientes
+    - [`src/pages/TasasTarifasComisiones/components/BchBanner.vue`](src/pages/TasasTarifasComisiones/components/BchBanner.vue) - Banners con brand
+
+---
+
+## ❓ Preguntas Frecuentes
+
+### P: ¿Por qué no puedo usar `bg-blue-500`?
+
+**R**: Porque el proyecto usa un preset personalizado (`tw-blue`) que define su propia paleta. Los colores estándar de Tailwind están ocultos por el preset.
+
+### P: ¿Puedo agregar nuevos colores al preset?
+
+**R**: Técnicamente sí (extendiendo `theme.extend.colors`), pero primero verifica si existe en el preset. Para valores puntuales, usa arbitrarios.
+
+### P: ¿Qué diferencia hay entre `brand` y `primary`?
+
+**R**: Son colores diferentes en el preset. `brand` es el azul corporativo (más oscuro), `primary` es otra variante. Úsalos según el diseño.
+
+### P: ¿Los valores arbitrarios se compilan en el CSS final?
+
+**R**: Sí, pero solo si se usan. Tailwind los genera dinámicamente. Algunos como `rounded-bl-[44px]` están en `safelist` para asegurar su inclusión.
+
+### P: ¿Por qué `p-8` o `m-10` no funcionan?
+
+**R**: El preset define una escala de espaciado customizada que **solo va de 1 a 7** (4px a 40px). Para valores mayores, usa arbitrarios: `p-[48px]` o `m-[80px]`.
+
+### P: ¿Puedo usar `text-5xl` o `text-9xl`?
+
+**R**: No. El preset define tamaños de fuente solo hasta `text-4xl` (o `text-8`). Para tamaños mayores, usa valores arbitrarios: `text-[48px]`.
+
+### P: ¿`text-3` y `text-base` son lo mismo?
+
+**R**: Sí. El preset define **aliases numéricos** (1-8) que corresponden a los semánticos (xs, sm, base, lg, xl, 2xl, 3xl, 4xl). Puedes usar cualquiera.
+
+### P: ¿Por qué `duration-400` no existe?
+
+**R**: El preset define duraciones específicas. Si necesitas 400ms, usa: `duration-[400ms]`. Las duraciones disponibles son: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 700, 800, 900, 1000, 2000, 3000.
+
+### P: ¿Cómo sé si debo usar `animate-fadeIn` o `transition-opacity`?
+
+**R**:
+
+- **`animate-fadeIn`**: Animación automática de 1s que se ejecuta al cargar/mostrar el elemento.
+- **`transition-opacity`**: Transición suave controlada por estados (hover, focus, etc.). Requiere cambiar la opacidad manualmente.
+
+### P: ¿El preset cambia los breakpoints? Antes usaba md:770px
+
+**R**: Sí. El proyecto migró de **Modyo 8** a **Modyo 9**. Los breakpoints ahora son estándar de Tailwind v3:
+
+- **Antes (Modyo 8)**: md: 770px, lg: 992px
+- **Ahora (Modyo 9)**: md: 768px, lg: 1024px (los del preset tw-blue)
+
+---
+
+## ✅ Resumen de Variables del Preset
+
+| Categoría        | Situación                                | Acción                                                       |
+| ---------------- | ---------------------------------------- | ------------------------------------------------------------ |
+| **Colores**      | Necesito un color corporativo            | Usa `brand`, `brand-light`, `brand-dark`, `primary`          |
+|                  | Necesito un gradiente                    | Combina: `from-brand-light to-primary`                       |
+|                  | Necesito un color NO disponible          | Usa arbitrario: `bg-[#FF5733]`                               |
+| **Tipografía**   | Necesito un tamaño de fuente             | Usa `text-1` a `text-8` (o `text-xs` a `text-4xl`)           |
+|                  | Necesito un tamaño > 40px                | Usa arbitrario: `text-[48px]`                                |
+|                  | Necesito cambiar peso de fuente          | Usa `font-light` (300) a `font-extrabold` (800)              |
+| **Espaciado**    | Necesito padding/margin/gap              | Usa escala 1-7: `p-5` (24px), `gap-3` (12px)                 |
+|                  | Necesito spacing > 40px                  | Usa arbitrario: `p-[48px]`, `m-[80px]`                       |
+|                  | ¿Cuánto es `p-5`?                        | 24px (NO 20px como en Tailwind estándar)                     |
+| **Responsive**   | Necesito adaptar diseño a pantallas      | Usa: `sm:` 640px, `md:` 768px, `lg:` 1024px, `xl:` 1280px    |
+|                  | ¿md es 768px o 770px?                    | **768px** (Modyo 9) - el preset usa Tailwind v3 estándar     |
+| **Bordes**       | Necesito bordes redondeados              | Usa `rounded-1` (4px), `rounded-2` (8px), `rounded-3` (16px) |
+|                  | Necesito bordes completamente redondos   | Usa `rounded-full`                                           |
+|                  | Necesito grosor de borde                 | Usa `border` (1px) o `border-2` (2px)                        |
+| **Sombras**      | Necesito sombra en card/botón            | Usa `shadow-md`, `shadow-controls`, `shadow-neutral`         |
+|                  | Necesito sombra grande para modal        | Usa `shadow-xl`                                              |
+| **Animaciones**  | Necesito entrada gradual de elemento     | Usa `animate-fadeIn`, `animate-fadeInUp`                     |
+|                  | Necesito skeleton loader                 | Usa `animate-skeleton` o `animate-pulse`                     |
+|                  | Necesito spinner de carga                | Usa `animate-spin`                                           |
+| **Transiciones** | Necesito transición en hover/focus       | Usa `transition-all duration-300 ease-out`                   |
+|                  | Necesito transición lenta                | Usa `duration-1000`, `duration-2000`, `duration-3000`        |
+|                  | Necesito curva de aceleración específica | Usa `ease-standard`, `ease-emphasized`, `ease-in-out`        |
+| **General**      | Dudo si existe en preset                 | Revisa documentación o usa arbitrario: `[valor]`             |
+|                  | Quiero ver ejemplos reales               | Revisa `src/pages/Charlas/` o `src/pages/ValeVista/`         |
+
+---
+
+## 🎯 Quick Reference
+
+```vue
+<!-- Colores -->
+<div class="bg-brand text-white">Color corporativo</div>
+<h1 class="text-transparent bg-clip-text bg-gradient-to-r from-brand-light to-primary">Gradiente</h1>
+
+<!-- Tipografía -->
+<h1 class="text-7 font-bold">Título grande (32px)</h1>
+<p class="text-3 font-normal leading-2">Párrafo (16px, line-height 24px)</p>
+
+<!-- Espaciado -->
+<div class="p-5 m-3 gap-4">Padding 24px, margin 12px, gap 16px</div>
+
+<!-- Responsive -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">Layout adaptativo</div>
+
+<!-- Bordes y sombras -->
+<div class="rounded-2 border border-brand-light shadow-md">Card estilizada</div>
+
+<!-- Animaciones -->
+<div class="animate-fadeInUp">Entrada desde abajo</div>
+<div class="animate-skeleton h-20 rounded">Skeleton loader</div>
+
+<!-- Transiciones -->
+<button class="bg-brand hover:bg-brand-dark transition-all duration-300 ease-out">
+  Botón con transición suave
+</button>
+```