Frontend - Integración de Stripe y reestructuración de URLs

✨ Nuevas funcionalidades

• Integración de pagos con Stripe: Ahora los usuarios pueden suscribirse a los planes Individual ($149 MXN/mes) y Business ($250 MXN/mes) directamente desde la página de planes.
• Nuevo módulo js/shared/pagos.js que maneja la creación de sesiones de checkout y cancelación de suscripciones.
• Botones en /planes/ que redirigen a Stripe Checkout y se actualizan dinámicamente según el plan del usuario.

• Manejo de retorno de Stripe con mensajes de éxito/error.

• Reestructuración de URLs amigables: Todas las páginas ahora se sirven desde carpetas con index.html, eliminando las extensiones .html de las URLs.

• /generador/ en lugar de /generador-mensajes.html
• /planes/, /perfil/, /privacidad/, /versiones/
• Todos los enlaces internos actualizados a rutas absolutas (ej. href="/generador/").
• Referencias a CSS/JS cambiadas a rutas absolutas (/styles.css, /js/...).

🔧 Mejoras en UI/UX

• Página de planes mejorada: Ahora muestra el plan actual del usuario y permite cambiar de plan o cancelar la suscripción.
• Menú de usuario: Se añadió opción para cancelar suscripción directamente desde el menú desplegable.
• Mensajes post-pago: Al regresar de Stripe, se muestra un modal de confirmación o error según el resultado.

🧠 Nuevos módulos y archivos

• js/shared/pagos.js: Lógica de integración con Stripe (cargar Stripe.js, crear sesión, cancelar).
• Se actualizaron todos los HTML para usar la nueva estructura de carpetas.

🔧 Cambios en el backend (relacionados)

• Se crearon los endpoints /api/stripe/crear-sesion, /api/stripe/cancelar y el webhook correspondiente (ver changelog del backend).

🐛 Correcciones

• Se solucionó el error "api.get is not a function" añadiendo métodos genéricos en api.js.
• Se ajustó la verificación de acceso para que funcione con la nueva estructura de URLs.

📚 Documentación

• Se actualizó el README general con la nueva estructura y la integración de Stripe.

Corrección en acceso al generador

🐛 Corregido

• Error "api.get is not a function": Se añadieron métodos genéricos GET, POST, PUT, DELETE en api.js para que las funciones de verificación de acceso (access.js) puedan consumir correctamente los endpoints.
• Importación en access.js: Se verificó que la importación de api sea la correcta.

🔧 Mejora

• Unificación de métodos de API: Ahora todos los módulos pueden usar api.get(), api.post(), etc., simplificando el código y evitando duplicación.

Correcciones finales y mejora en mensaje de bienvenida

🐛 Corrección en herramienta de descuento implícito

• Se eliminó el bloqueo por autenticación que impedía mostrar el mensaje por defecto. Ahora la herramienta funciona para todos los usuarios, generando el mensaje con la plantilla predeterminada.
• Se verificó que la plantilla por defecto esté correctamente definida en plantillas.js.

🎨 Mejora en mensaje de bienvenida

• Se eliminó el banner promocional independiente y se integró el llamado a la acción directamente en la tarjeta de bienvenida del index.
• Los enlaces "inicia sesión" y "regístrate gratis" abren los modales correspondientes, mejorando la experiencia de usuario.

🧹 Limpieza de código

• Se eliminó el bloque HTML #login-cta y toda su lógica asociada en JavaScript, simplificando el mantenimiento.

🔧 Ajustes menores

• Se aseguró que la función descuentoImplicito en generadores.js no dependa de la autenticación y use correctamente la plantilla por defecto.

Últimas correcciones de usabilidad

🎨 Mejoras visuales

• Tooltip de límites: Se amplió el ancho mínimo a 350px y máximo a 450px para que la información se muestre más desahogada. Ahora se ajusta dinámicamente al contenido.
• CTA visible siempre: El mensaje de registro ahora aparece correctamente cuando la página se carga sin sesión, y desaparece al iniciar sesión.

🔓 Ajustes en restricciones

• Herramienta de descuento implícito: Se ha desbloqueado para usuarios no autenticados. Ahora cualquier visitante puede usarla, pero la personalización de plantillas sigue restringida.
• Botón de personalización: Si un usuario no autenticado hace clic en "Personaliza tu plantilla", se abre el modal de inicio de sesión en lugar de mostrar el área de plantillas.

🐛 Correcciones

• Evento de personalización: Se corrigió la lógica para que los usuarios autenticados puedan seguir usando la funcionalidad normalmente.

Correcciones en restricciones y UI

🐛 Bloqueo de personalización para no autenticados

• Botón "Personaliza tu plantilla": Ahora los usuarios no autenticados que intenten desplegar el área de personalización verán un modal invitándolos a iniciar sesión, en lugar de mostrar el área de plantillas. Esto evita que puedan acceder a los botones de guardar/cargar/eliminar.
• Herramientas premium: Se mantiene el bloqueo correcto para las calculadoras de intereses y descuento implícito, así como para el generador de mensajes.

🎨 Mejora en tooltip de límites

• Posición del tooltip: El tooltip que muestra los límites ahora se desplaza correctamente con el header al hacer scroll. Se ha reposicionado como elemento absoluto dentro del menú de usuario, asegurando que siempre aparezca justo debajo del ícono.
• Cierre mejorado: El tooltip se cierra al hacer clic fuera de él, pero permanece visible mientras se navega si no se interactúa.

🔧 Ajustes menores

• Se agregó verificación de autenticación en el evento de los botones de personalización en eventos.js.
• Se actualizó limits.js para que el tooltip se inserte dentro del .user-menu y herede su posicionamiento.

Frontend - Restricciones y mejoras de acceso

🔒 Nuevas restricciones para usuarios no autenticados

• Generador de mensajes: Bloqueado para usuarios sin sesión. Al intentar acceder a generador-mensajes.html, se verifica el acceso mediante el nuevo sistema de permisos y se redirige al inicio con un mensaje claro.
• Calculadoras premium: Las herramientas de "Calculadora de intereses" y "% de descuento implícito" ahora requieren inicio de sesión. Si un usuario no autenticado intenta usarlas, aparece un modal invitando a registrarse.
• Personalización de plantillas: Las funciones de guardar, cargar y eliminar plantillas personalizadas en todas las herramientas del index están restringidas a usuarios registrados.

🎨 Mejoras en UI/UX

• Banner promocional dinámico: En la página principal, los usuarios no autenticados ven un atractivo llamado a la acción (CTA) con gradiente verde, invitando a registrarse para desbloquear todas las herramientas.
• Ver contraseña en modales: Los modales de login y registro ahora incluyen un ícono de ojo 👁️ que permite mostrar/ocultar la contraseña, mejorando la experiencia de usuario.
• Mensajes de error contextuales: Se implementaron modales explicativos para cada función restringida, con texto específico según la herramienta.

📉 Ajuste de límites visuales

• Notas: El contador ahora refleja el nuevo límite de 5 notas (antes 10).
• Plantillas del generador: Límite reducido a 3 (antes 10).
• Configuraciones: Límite reducido a 2 (antes 5).
• Plantillas por herramienta (index): Límite reducido a 3 (antes 5).

🧠 Nuevos módulos

• js/shared/access.js: Módulo centralizado para verificar permisos de acceso a herramientas. Incluye funciones como checkAccess(), requireGeneratorAccess() y showLoginPrompt().
• Integración con el backend: Consume el nuevo endpoint /api/access/check para validar permisos en tiempo real.

🔧 Mejoras técnicas

• Verificación en tiempo real: El generador ahora verifica acceso antes de inicializar cualquier funcionalidad, evitando que usuarios no autenticados vean parcialmente la interfaz.
• Cache de permisos: Las comprobaciones de acceso se cachean durante 5 minutos para reducir llamadas a la API.
• Redirección inteligente: Si un usuario no autenticado intenta acceder al generador, se muestra un mensaje y se redirige al index después de 2 segundos.

🐛 Correcciones

• Consistencia en validaciones: Se unificó la lógica de verificación de autenticación en todos los módulos que interactúan con la API.
• Manejo de errores: Mejor captura de errores de red en las comprobaciones de acceso.

✨ Nuevas funcionalidades

• Página de perfil de usuario (perfil.html):
• Muestra información de la cuenta (email, plan, fecha de registro).
• Estadísticas de uso: número de notas, plantillas guardadas, configuraciones, etc.
• Botones para cambiar contraseña, migrar datos manualmente y ver límites.

• Integración con el menú de usuario (accesible desde el avatar en el header).

• Menú de usuario mejorado:

• Ahora incluye enlace directo a la página de Planes (planes.html).
• Se restauró el botón de migración manual (⬆️ Migrar datos) para que los usuarios puedan subir sus datos locales en cualquier momento.

• Diseño más limpio con animaciones y cierre al hacer clic fuera.

• Modales rediseñados (modal.js):

• Todos los modales (login, registro, confirmación, mensaje, cambio de contraseña) ahora tienen un botón "X" para cerrar.
• Se eliminó el cierre involuntario al hacer clic fuera del modal (ya no se cierran por error).
• Soporte para cerrar con la tecla ESC en todos los modales.
• Diseño consistente con header, cuerpo y footer separados.

🔧 Mejoras

• Script de cache busting: Se creó update_html_versions.py para automatizar la actualización de referencias a CSS y JS en todos los archivos HTML. Soporta dos modos:
• Versión fija (ej. ?v=4.8.0).
• Hash automático del contenido (ej. ?h=abc12345).
• Incluye modo dry-run y opción de extensiones personalizables.
• Validación de contraseña reforzada: Ahora en el registro y cambio de contraseña se exige al menos 8 caracteres, una mayúscula, un número y un símbolo.
• Manejo de caché: Se añadió el parámetro ?v=4.8.0 a todas las referencias de CSS/JS en los HTML para forzar la actualización en el navegador y evitar problemas de versiones antiguas.

🐛 Correcciones

• Doble migración al iniciar sesión: Se unificó la lógica en migration-handler.js y se eliminó el código duplicado en los archivos main.js del index y del generador. Ahora solo se pregunta una vez por sesión.
• Cierre accidental de modales: Resuelto eliminando el evento de clic en el fondo del modal.
• Consistencia en estilos: Se ajustaron los modales para que todos tengan el mismo aspecto y comportamiento.

📚 Documentación

• Se actualizó API.md con el nuevo endpoint de cambio de contraseña.
• Se añadieron comentarios en modal.js, ui.js y migration-handler.js para facilitar el mantenimiento.
• Se creó este archivo de cambios.

✨ Nuevas funcionalidades

• Perfil de usuario mejorado:
• Ahora el header muestra un avatar con la inicial del email del usuario.
• Menú desplegable con opciones: "Mi perfil", "Cambiar contraseña", "Límites" y "Cerrar sesión".

• Diseño más limpio y profesional, con animaciones suaves.

• Cambio de contraseña:

• Los usuarios autenticados pueden cambiar su contraseña desde un modal accesible en el menú desplegable.

• Se requiere la contraseña actual y la nueva con confirmación.

• Registro más seguro:

• Validación de contraseña en tiempo real: mínimo 8 caracteres, al menos una mayúscula, un número y un símbolo.
• Campo de confirmación de contraseña para evitar errores.
• Mensajes de error claros y específicos.

🔧 Mejoras

• Corrección de doble migración: Se unificó la lógica de migración en un solo manejador, evitando que aparezca dos veces el mensaje al iniciar sesión.
• Optimización de llamadas a API: Se añadió caché de 1 minuto para los límites, reduciendo peticiones innecesarias.
• Mejora en la experiencia de migración: Ahora se muestra un spinner mientras se procesan los datos.

🐛 Correcciones

• Error 500 en migración: Se solucionó la discrepancia de nombres de campos entre localStorage y la API (ahora se mapean correctamente).
• Doble pregunta de migración: Resuelto mediante la creación de un flag persistente por sesión.

🧠 Detalles técnicos

• Se creó el módulo js/shared/migration-handler.js para centralizar la lógica de migración post-login.
• Se añadió el endpoint POST /api/user/change-password en el backend (requiere autenticación).
• Se actualizaron las validaciones de registro tanto en frontend como en backend.

Corrección en migración de datos

🐛 Corregido

• Error 500 al migrar datos: Se solucionó la discrepancia entre los nombres de campos en localStorage (español) y los esperados por la API (inglés). Ahora migracion.js transforma correctamente las plantillas del generador, configuraciones y plantillas del index antes de enviarlas.
• Mapeo de campos:
• nombre → name
• plantilla → main_template
• plantillaPrincipal → main_template
• plantillasAdicionales → additional_templates (conservando nombre y texto)
• texto → template (en plantillas del index)

🔧 Mejorado

• Se agregaron comentarios en migracion.js para futuras referencias.
• La migración ahora debería funcionar sin errores 500.

Documentación y planes

✨ Añadido

• Página de planes y precios (planes.html): Muestra los tres planes (Gratuito, Individual, Business) con sus características y precios. Incluye botones de acción (placeholder para Mercado Pago y contacto).
• Enlace a "Planes" en el footer de todas las páginas.

🔧 Actualizado

• Página de privacidad (privacidad.html): Se actualizó para reflejar la existencia del backend, autenticación, almacenamiento en la nube y API. Se añadió información sobre derechos de los usuarios y seguridad.
• Footer: Se agregó enlace a "API Docs" en todas las páginas.

🧠 Próximos pasos

• Integración real con Mercado Pago para procesar pagos.
• Creación de página api.html con documentación detallada de la API (o redirección a Swagger).

Frontend - Mejoras finales y pulido

✨ Añadido

• Spinner de carga en migración: Ahora se muestra una animación mientras se procesan los datos, mejorando la experiencia de usuario.
• Cache de límites: Los límites se almacenan en caché por 1 minuto, reduciendo llamadas innecesarias a la API.
• Mensaje de bienvenida personalizado: Al iniciar sesión, se muestra un toast con el nombre del usuario y un mensaje según su plan.
• Animaciones CSS: Se añadieron transiciones suaves y animaciones para modales y tooltips.

🔧 Mejorado

• Manejo de errores en API: Mensajes más específicos según el tipo de error (403, 409, 500).
• Feedback visual: Toasts con duración configurable para mensajes importantes.
• Rendimiento: Optimización de llamadas a API con caché y prevención de peticiones duplicadas.

🧹 Limpieza

• Código duplicado: Se eliminó el bloque de migración manual en index/main.js que causaba logs confusos.
• Importaciones no utilizadas: Se removieron referencias a funciones inexistentes.

🐛 Corregido

• Migración duplicada: Ahora la migración solo se ofrece desde ui.js después de login/register, no desde múltiples lugares.
• Errores de red: Mejor manejo de casos donde la API no responde.

📚 Documentación

• Se actualizaron los comentarios en todos los módulos principales.
• Se añadió documentación sobre el sistema de caché de límites.

Corrección en migración automática

🐛 Corregido

• Se reemplazó el placeholder de migración en los listeners de autenticación de index/main.js y main.js (generador) por la llamada real a iniciarMigracion(). Ahora, al iniciar sesión, se ejecuta el flujo completo de migración con modales y reporte de resultados.
• Se añadieron las importaciones necesarias de migracion.js en ambos archivos.

🔧 Mejora

• La migración ahora solo se ofrece si hay datos locales detectados mediante hayDatosLocales(), evitando mostrar el modal innecesariamente.

Corrección en migración

🐛 Corregido

• Se eliminó la importación innecesaria de mostrarModalProgress en migracion.js, ya que esta función no existe en modal.js y no se utiliza en el código. Esto resuelve posibles errores de referencia.

Frontend - Migración de datos locales

✨ Añadido

• Sistema de migración de datos: Cuando un usuario se registra o inicia sesión, se detectan automáticamente los datos locales y se ofrece migrarlos a la nube.
• Notas
• Plantillas favoritas del generador
• Configuraciones completas
• Plantillas personalizadas del index (todas las herramientas)
• Atajos de teclado

• Tema preferido

• Interfaz de migración:

• Modal de confirmación con resumen de datos encontrados.
• Reporte detallado de resultados después de la migración.

• Opción para limpiar localStorage después de migrar.

• Botón de migración manual: En el header, junto al indicador de límites, hay un botón (⬆️) para iniciar migración en cualquier momento.

🔧 Cambiado

• ui.js: Se integró la llamada a migración después de login/register exitoso.
• auth.js: Se mejoró la notificación de cambios para que los componentes se actualicen después de migrar.

🧠 Detalles técnicos

• La migración envía todos los datos al endpoint /api/migrate en un solo request.
• El backend procesa los datos respetando límites del plan y fusionando con datos existentes.
• Se implementó migracion.js con funciones para recolectar, mostrar resumen y ejecutar migración.

🎨 UI/UX

• Los modales de migración siguen el diseño CobraBien (colores, tipografía).
• Mensajes claros que informan al usuario qué está sucediendo.
• Opción de limpiar datos locales para evitar duplicados futuros.

Correcciones en límites UI

🐛 Corregido

• Error mostrarResumenLimites is not defined: Se añadió la función faltante en limits.js y se importó correctamente en ui.js. Ahora el indicador de límites (📊) funciona correctamente al hacer clic.

✨ Mejorado

• Tooltip de límites: Se implementó un tooltip informativo que muestra el consumo actual de todos los recursos:
• Notas
• Plantillas del generador
• Configuraciones del generador
• Plantillas por herramienta del index
• Indicadores visuales: Los valores cambian de color según la cercanía al límite (amarillo cerca, rojo al alcanzar).
• Botón de upgrade: Para usuarios free, el tooltip incluye un botón para mejorar el plan.

🔧 Cambiado

• limits.js: Se añadieron las funciones mostrarResumenLimites() y mostrarTooltipLimites().
• ui.js: Se importó la función y se mejoró el manejo de eventos para evitar duplicados.
• Estilos CSS: Se añadieron estilos para el tooltip de límites.

🧠 Detalles técnicos

• El tooltip se cierra automáticamente al hacer clic fuera de él.
• Los límites se refrescan al iniciar sesión y después de cada operación de guardado.

Frontend - Límites visibles en UI

✨ Añadido

• Sistema de límites en tiempo real: El frontend ahora consulta el endpoint /api/user/limits para mostrar el consumo actual de cada recurso.
• Contador de notas visible en el panel de notas.
• Verificación de límites antes de guardar plantillas (index y generador).

• Verificación de límites antes de guardar configuraciones.

• Modal de upgrade: Cuando un usuario alcanza un límite, se muestra un modal con información de los planes disponibles y enlace a la página de precios.

• Indicador de límites en header: Ícono 📊 que muestra un resumen rápido de todos los límites al hacer clic.

• Actualización automática: Los contadores se actualizan después de cada operación de guardado y cuando cambia el plan del usuario.

🔧 Cambiado

• notas.js: Se añadió contador visual y verificación de límites antes de crear notas.
• plantillasUsuario.js: Verificación de límites por herramienta antes de guardar.
• plantillas.js (generador): Verificación de límites para plantillas favoritas.
• configuraciones.js: Verificación de límites para configuraciones completas.
• ui.js: Se añadió indicador de límites en el header para usuarios autenticados.

🎨 UI/UX

• Los contadores cambian de color según la cercanía al límite (amarillo cerca, rojo al alcanzar).
• Tooltip informativo al pasar el cursor sobre los límites.
• Mensajes claros que invitan a mejorar el plan.

📚 Documentación

• Se añadió limits.js con funciones para manejar límites de forma centralizada.
• Comentarios explicativos en cada verificación de límite.

Correcciones en el generador

🐛 Corregido

• Imports de utils.js: Se corrigieron las rutas de importación en steps.js, variables.js, file.js y resultados.js para que apunten correctamente a ./shared/utils.js, resolviendo errores 404.
• Exportación de funciones de recarga: En plantillas.js y configuraciones.js se exportaron las funciones cargarListaPlantillas y cargarListaConfiguraciones respectivamente, permitiendo que main.js las llame al cambiar la autenticación.
• Manejo de errores en imports dinámicos: Se añadió catch a los imports para evitar que errores de carga interrumpan la ejecución.

🔧 Mejora

• Sincronización en tiempo real: Al iniciar/cerrar sesión, las listas de plantillas y configuraciones se actualizan inmediatamente sin necesidad de recargar la página.

Frontend - Adaptación del generador

✨ Añadido

• Sincronización de plantillas favoritas del generador: El módulo plantillas.js ahora utiliza la API cuando el usuario está autenticado, y localStorage cuando no.
• Guardar, cargar y eliminar plantillas favoritas se sincroniza con la nube.
• Límite de 10 plantillas en plan free (validado por backend).

• Actualización automática al cambiar de sesión sin recargar página.

• Sincronización de configuraciones completas: El módulo configuraciones.js ahora usa la API para guardar configuraciones (variables + plantillas).

• Límite de 5 configuraciones en plan free.

• Restauración completa de variables y plantillas al cargar una configuración.

• Sistema de recarga automática: Al iniciar o cerrar sesión, las listas de plantillas y configuraciones se actualizan inmediatamente.

🔧 Cambiado

• plantillas.js: Se reescribió completamente para soportar modo dual (localStorage/API).
• configuraciones.js: Adaptado para usar la API y mantener compatibilidad con localStorage.
• main.js (generador): Se añadió listener de autenticación para recargar datos.

🐛 Corregido

• Pérdida de estado al cambiar de sesión: Ahora las listas reflejan correctamente los datos del usuario autenticado o los locales.
• Duplicación de plantillas: Se verifica existencia por nombre antes de crear nuevas.

🧠 Detalles técnicos

• Se utilizó el mismo patrón de onAuthChange implementado en fases anteriores.
• Las funciones de carga de listas son ahora asíncronas y manejan errores de API.

Frontend - Mejoras en tiempo real

✨ Añadido

• Sincronización automática al cambiar autenticación: Cuando el usuario inicia o cierra sesión, todos los componentes se actualizan inmediatamente sin necesidad de recargar la página.
• Sistema de notificaciones (onAuthChange) implementado en auth.js.
• Las notas se recargan automáticamente al detectar cambio de sesión.

• Las plantillas personalizadas de todas las herramientas del index se recargan simultáneamente.

• Registro de componentes para recarga selectiva: Se implementó un sistema que guarda referencias a los selects de plantillas para poder actualizarlos sin afectar el resto de la UI.

• Experiencia de usuario mejorada:

• Al hacer login, las notas y plantillas de la nube aparecen inmediatamente.
• Al hacer logout, vuelven a aparecer los datos locales guardados previamente.
• Ya no es necesario recargar la página manualmente para ver los cambios.

🔧 Cambiado

• plantillasUsuario.js: Se reestructuró completamente para soportar actualizaciones en tiempo real:
• Se añadió recargarTodasLasPlantillas() para actualizar todas las herramientas.
• Se utiliza un Map para mantener referencias a los selects de cada herramienta.

• Todas las funciones ahora son asíncronas y manejan correctamente la alternancia entre localStorage y API.

• notas.js: Se verificó y mejoró el listener de autenticación para recargar notas inmediatamente.

• auth.js: Se aseguró que notifyAuthChange() se llame después de login, register y logout.

• ui.js: Se modificó handleLogout() para que ya no recargue la página, permitiendo la transición suave a modo local.

🐛 Corregido

• Problema de sincronización post-login: Anteriormente, al iniciar sesión, las notas y plantillas locales seguían visibles hasta recargar la página. Ahora se actualizan automáticamente.
• Pérdida de datos locales al cerrar sesión: Al hacer logout, los datos locales que estaban guardados previamente ahora se restauran correctamente.
• Múltiples llamadas a API: Se optimizaron las recargas para evitar peticiones innecesarias cuando no hay cambios.

🧠 Detalles técnicos

• Se implementó el patrón Observer para la autenticación, permitiendo que múltiples componentes reaccionen a cambios de estado.
• Las referencias a elementos del DOM se mantienen en memoria para actualizaciones rápidas sin re-renderizados completos.
• Se añadió logging para facilitar la depuración (visible en consola solo en desarrollo).

Frontend

• Adaptación de plantillas del index: El sistema de plantillas personalizadas de cada herramienta ahora utiliza la API cuando el usuario está autenticado.
• Guardar, cargar y eliminar plantillas se sincroniza con la nube.
• Los límites por plan se aplican (5 por herramienta en plan free).
• Si no hay sesión, sigue usando localStorage como antes.
• Mejora en la experiencia de usuario: Al cargar una plantilla, el mensaje se regenera automáticamente.
• Integración con el módulo de autenticación: Las funciones detectan el estado de login y actúan en consecuencia.

Correcciones

• Se ajustaron las rutas de importación en varios módulos para resolver errores 404.
• Se añadió manejo de errores en las operaciones con API para mostrar mensajes amigables.

🚀 Integración con backend y sistema de autenticación

A partir de esta versión, CobraBien se conecta a su propio backend, permitiendo a los usuarios registrarse, iniciar sesión y sincronizar sus datos en la nube.

🔧 Adaptaciones en el frontend

• Sistema de autenticación: Se implementaron módulos para registro, login y manejo de sesión con JWT. El header ahora muestra el email y plan del usuario autenticado, con opciones de perfil y cierre de sesión.
• Cliente API: Se creó api.js para centralizar las llamadas a los endpoints, con manejo automático de tokens y errores.
• Notas rápidas híbridas: El panel de notas funciona en modo local (sin sesión) o en modo nube (con sesión), sincronizando automáticamente al cambiar el estado de autenticación.
• Actualización en tiempo real: Al iniciar o cerrar sesión, la interfaz se actualiza sin necesidad de recargar la página, gracias a un sistema de notificaciones.

📚 Documentación

• Se actualizó la documentación para desarrolladores y se añadieron comentarios en el código.

🐛 Correcciones

• Se solucionó la sincronización de notas después de login/registro.
• Se mejoró el manejo de errores en peticiones API, mostrando mensajes amigables.
• Se eliminó el error initAuth is not defined en la carga inicial.

✨ Añadido

• Logo dinámico según modo oscuro: Ahora el logo cambia de imagen (logo_sinfondo.png para modo claro, logo-dark.png para modo oscuro) mediante JavaScript, eliminando el uso de filtros CSS que afectaban la calidad visual.

🔧 Cambiado

• Reorganización de módulos JavaScript: Se creó la carpeta js/shared/ para albergar código común entre las páginas (index, generador, privacidad, versiones). Los siguientes módulos se unificaron y movieron a shared:
• theme.js: manejo del modo oscuro.
• utils.js: funciones auxiliares (formato de moneda, validación, toast, etc.).
• modal.js: modales personalizados (prompt, confirm, mensaje).
• notas.js: panel de notas rápidas (unificado para index y generador).
• sugerencia.js: botón de sugerencia por WhatsApp.
• Actualización de importaciones en todos los módulos del index y del generador para que apunten a shared.
• Simplificación de páginas secundarias: privacidad.html y versiones.html ahora utilizan un módulo ligero main-paginas.js que solo inicializa tema y sugerencia, eliminando la dependencia del antiguo script.js.

🐛 Corregido

• Visibilidad del menú flotante: Se restauró el CSS anterior que garantizaba la correcta visualización del menú y las tarjetas en páginas de privacidad y versiones. Se descartó temporalmente la refactorización del CSS para mantener la estabilidad.
• Estilos en páginas de privacidad y versiones: Las clases .version-card y otros estilos ahora se aplican correctamente al revertir a la versión previa de styles.css.

🧹 Limpieza

• Se eliminó el archivo script.js (obsoleto) y se reemplazó por módulos específicos.
• Se eliminaron duplicados de utils.js y notas.js en las carpetas de index y raíz.

🔧 Cambiado

• Refactorización completa del archivo styles.css: Se reorganizó y limpió el código CSS para mejorar la mantenibilidad y legibilidad. Se eliminaron reglas duplicadas y se agruparon estilos relacionados.
• Simplificación visual en la página principal (index.html): Se aplicaron los mismos principios de diseño limpio del generador: tarjetas de herramientas con áreas de personalización colapsables, uso de badges en la bienvenida, y etiquetas de variables (variable-tags) en lugar de listas de texto.
• Unificación de estilos de modales y botones: Se aseguró que todos los modales y botones compartan los mismos estilos en ambas páginas (index y generador), logrando una experiencia visual coherente.

✨ Añadido

• Nuevas clases CSS: .collapsible, .variable-tags, .badge, .info-icon, entre otras, para soportar las mejoras visuales y de usabilidad.
• Soporte para el sistema de guardado de plantillas en el index: Los estilos ahora incluyen los selectores y botones necesarios para la funcionalidad de guardar/cargar/eliminar plantillas en cada herramienta.

🧹 Limpieza

• Eliminación de código CSS obsoleto: Se removieron reglas que ya no se utilizaban y se consolidaron estilos duplicados (por ejemplo, definiciones de .btn-sm y .modal).
• Mejora en la organización por secciones: Se comentaron y agruparon las reglas por funcionalidad (header, herramientas, modales, notas, etc.) para facilitar futuras modificaciones.

✨ Añadido

• Guardado de plantillas personalizadas en el index: Cada herramienta (descuento, porcentaje, monto, confirmación, recordatorio, descuento implícito e intereses) ahora permite guardar, cargar y eliminar plantillas personalizadas, utilizando modales con diseño CobraBien (similar al generador de mensajes). Los controles se encuentran dentro del área de personalización.

🔧 Cambiado

• Modularización del sistema de plantillas: Se creó el módulo js/index/plantillasUsuario.js que centraliza la lógica de persistencia (localStorage) y eventos para todas las herramientas.
• Unificación de criterios de nombres: Todos los identificadores de la herramienta de descuento implícito usan guiones (descuento-implicito-*) para mantener coherencia con el resto del sistema.
• Mejora en la experiencia de usuario: Al cargar una plantilla guardada, se regenera automáticamente el mensaje de la herramienta.

🐛 Corregido

• Funcionamiento del botón de personalización en la herramienta de descuento implícito: Se corrigió la discrepancia entre el atributo data-herramienta y el ID del contenedor de plantilla.
• Inicialización del sistema de guardado: Ahora los selectores y botones de cada herramienta se identifican correctamente gracias al uso consistente de nombres con guiones.

✨ Añadido

• Nueva herramienta: Calculadora de porcentaje de descuento implícito
  Permite calcular el porcentaje de descuento que representa una oferta de pago.
  Inputs: Saldo total y monto ofrecido.
  Variables disponibles: {{saldo}}, {{ofrecido}}, {{descuento}}.
  Incluye plantilla personalizable y generación de mensaje.

• Nueva herramienta: Calculadora de intereses moratorios
  Calcula intereses por días de atraso con tasa mensual.
  Inputs: Saldo, tasa mensual (%), días de atraso.
  Variables disponibles: {{saldo}}, {{tasa}}, {{dias}}, {{interes}}, {{total}}.
  Incluye opción de redondeo hacia arriba y plantilla personalizable.

• Actualización del menú flotante y resumen rápido
  Se añadieron los íconos 📉 (% descuento) y 📈 (intereses) al menú inferior y al resumen de herramientas, con sus respectivos tooltips explicativos.

🔧 Cambiado

• Reorganización del grid de herramientas: Las nuevas tarjetas se insertaron después del generador de mensajes, reemplazando la tarjeta "Próximamente" para dar espacio a funcionalidades concretas.
• Extensión de módulos JS: Se actualizaron plantillas.js, generadores.js, limpiadores.js y menu.js para soportar las nuevas herramientas, manteniendo la arquitectura modular existente.

🐛 Corregido

• Inicialización de la calculadora de descuento implícito: Se corrigió un error que impedía su correcto funcionamiento cuando los elementos aún no estaban presentes en el DOM (ahora se verifica su existencia antes de ejecutarse).

✨ Añadido

• Explicación rápida en la página principal: Se agregó un botón en la tarjeta de bienvenida que abre un modal con información general de las herramientas disponibles, mejorando la orientación para nuevos usuarios.
• Modales personalizados en el panel de notas: Al eliminar una nota, ahora se utiliza el modal de confirmación con diseño CobraBien en lugar del confirm nativo, logrando coherencia visual con el generador de mensajes.

🔧 Cambiado

• Corrección del menú flotante: El ítem de notas ahora abre correctamente el panel de notas desde el menú inferior y desde el resumen rápido, solucionando el problema de llamada a window.renderizarNotas inexistente.
• Modularización de la explicación rápida: Se creó el módulo js/index/explicacion.js para centralizar la lógica del modal, siguiendo la arquitectura del proyecto.

🐛 Corregido

• Apertura del panel de notas: Ahora responde correctamente al hacer clic en el icono de notas del menú flotante y en el elemento "Notas" del resumen rápido.
• Estilo y comportamiento de los modales: Se aseguró que todos los modales en la página principal tengan el mismo diseño y cierren correctamente al hacer clic fuera de ellos.

✨ Añadido

• Modales personalizados en gestión de configuraciones: Al guardar o eliminar una configuración completa, ahora se utilizan los mismos modales con diseño CobraBien que en otras partes de la aplicación, reemplazando los prompt y confirm nativos. Esto mejora la coherencia visual y la experiencia de usuario.

✨ Añadido

• Modal de video tutorial: Se agregó un botón "🎥 Ver video tutorial" junto a la explicación rápida, que abre un modal con un reproductor de video (placeholder para YouTube/TikTok) para guiar a los usuarios.
• Nota explicativa sobre correo/teléfono: En el paso 1, debajo del campo de variable de correo, se incluyó un recuadro informativo que aclara que puede ser correo o número telefónico, y que al marcar "Es teléfono" se habilita el botón de WhatsApp en los resultados.

🔧 Cambiado

• Modularización de modales de interfaz: Se creó el módulo js/modalesUI.js para centralizar la lógica de apertura/cierre de los modales de ayuda, video y consejos. El script inline del HTML fue eliminado, mejorando la mantenibilidad y siguiendo la arquitectura modular del proyecto.
• Mejora en la experiencia de usuario: Los modales ahora se cierran correctamente con el botón "Cerrar" o haciendo clic fuera del contenido, gracias a la corrección en la asignación de eventos.

🐛 Corregido

• Ningún error reportado; son mejoras funcionales basadas en feedback.

✨ Añadido

• Modales de ayuda y consejos: Se reemplazó el panel de explicación rápida por un modal más limpio, y los consejos anti-spam ahora se muestran en un modal independiente, reduciendo la saturación visual.
• Secciones colapsables: Las opciones secundarias (configuraciones guardadas, gestión de plantillas favoritas) se agrupan dentro de elementos <details> para mantener la interfaz despejada.
• Indicador de información contextual: Se añadió un icono ℹ️ con tooltip nativo junto al título del paso 1 para explicar la normalización de columnas.

🔧 Cambiado

• Simplificación de textos: Se redujeron las descripciones largas en los pasos 1, 2 y 3, moviendo explicaciones detalladas a modales y tooltips.
• Presentación de variables disponibles: El contenedor ahora utiliza la clase .variable-tags para mostrar las variables como etiquetas compactas (requiere adaptación del JS, pero la funcionalidad existente sigue siendo compatible).
• Estilo del botón "Guardar configuración completa": Se destacó visualmente con color verde para facilitar su identificación.

🐛 Corregido

• Cierre de modales: Se solucionó el problema que impedía cerrar los modales de ayuda y consejos al hacer clic en el botón "Cerrar" o fuera del contenido. Ahora los eventos se asignan correctamente tras la carga del DOM.

✨ Añadido

• Guardar configuración completa: Ahora puedes guardar la configuración del paso 1 (variables) junto con todas las plantillas del paso 2 en un solo archivo de configuración. Se ha añadido un botón "💾 Guardar configuración completa" en el paso 2 y un selector con botones "Cargar" y "Eliminar" en el paso 1. Al cargar una configuración, se restauran las variables y plantillas, y se avanza automáticamente al paso 2 para revisarlas.
• Sistema de modales personalizados: Se han reemplazado los alert, confirm y prompt nativos por modales con el diseño de CobraBien, mejorando la experiencia visual y la coherencia de la interfaz. Los modales incluyen animaciones suaves y son totalmente responsivos.
• Mejora visual en botones: Los botones ahora tienen gradientes, sombras y efectos hover más modernos, manteniendo la paleta de colores de la aplicación.

🔧 Cambiado

• Panel de explicación rápida: Se ha limitado su altura máxima y se ha añadido scroll interno para que el botón "Entendido" sea siempre visible, incluso en pantallas pequeñas.
• Selector de plantillas: Se ha separado la selección de la carga: ahora primero se selecciona la plantilla en el dropdown y luego se hace clic en el botón "Cargar" para aplicarla, siguiendo la misma lógica que el selector de configuraciones. Esto elimina la ambigüedad y mejora la usabilidad.

🐛 Corregido

• Eliminación de plantillas guardadas: Se solucionó el problema que impedía eliminar plantillas correctamente. Ahora el botón "Eliminar" funciona de forma fiable, tomando la plantilla seleccionada en el dropdown y mostrando un modal de confirmación antes de borrarla.
• Persistencia del selector de plantillas: Después de guardar o cargar una plantilla, el dropdown mantiene el nombre seleccionado, facilitando futuras operaciones.

✨ Añadido

• Eliminación de plantillas guardadas: En el paso 2 del generador, ahora puedes eliminar plantillas favoritas con un botón "🗑️ Eliminar" junto al selector. Las plantillas se borran permanentemente de tu navegador.
• Configuración de atajos de teclado en el paso 4: Un nuevo botón "⚙️ Configurar atajos" abre un modal donde puedes asignar teclas personalizadas para:
• Navegar entre filas (anterior/siguiente).
• Copiar el correo, el mensaje principal y la primera plantilla adicional.
• Los atajos se guardan en localStorage y persisten entre sesiones.
• Área de mensaje principal redimensionable: En el paso 4, el mensaje principal ahora se muestra en un <textarea readonly> con capacidad de ajustar su altura verticalmente, mejorando la visibilidad y el acceso a los botones de navegación y copiado.

🔧 Cambiado

• Mejora visual en el paso 4: Se optimizó el espacio y se aplicaron estilos más limpios al área de mensajes para una mejor experiencia de usuario.

🐛 Corregido

• Ningún error reportado; son mejoras funcionales basadas en feedback.

🐛 Corregido

• Botón flotante de notas en el index: Se solucionó definitivamente el problema de apertura del panel. La causa era que en la refactorización del index no se asignaban correctamente los eventos a los botones de notas (flotante y del menú). Se reemplazó el módulo de notas por la versión funcional del generador, que utiliza event delegation para garantizar que ambos botones respondan correctamente.

🔧 Cambiado

• Unificación del sistema de notas: Ahora tanto la página principal (index.html) como el generador de mensajes (generador-mensajes.html) utilizan la misma lógica de notas, lo que asegura consistencia y facilita el mantenimiento futuro. El código se ha adaptado para que el botón flotante y el del menú flotante abran el panel sin conflictos.

✨ Mejora

• Robustez en la asignación de eventos: Se implementó event delegation para capturar clics en los botones de apertura, evitando problemas de inicialización y asegurando que siempre funcionen, incluso si el DOM se modifica dinámicamente.

🔧 Refactorización mayor del código JavaScript del index

• Modularización completa de script.js: El archivo, que había crecido a más de 800 líneas, se ha dividido en módulos más pequeños y organizados dentro de la carpeta js/index/. Esto mejora la mantenibilidad, legibilidad y escalabilidad del código.

Nueva estructura de módulos:

✨ Mejoras derivadas

• Separación de responsabilidades: Cada módulo tiene una función clara, facilitando futuras ampliaciones (nuevas herramientas, mejoras en notas, etc.).
• Código más legible y mantenible: Los desarrolladores pueden localizar rápidamente el código relacionado con una funcionalidad específica.
• Preparación para futuras características: La estructura modular permite añadir nuevas herramientas sin afectar el resto del sistema.

🐛 Corregido

• Ningún error funcional; se mantiene el comportamiento exacto de la versión anterior.

✨ Añadido

• Botón "Personaliza tu plantilla" en las herramientas 1-5 (descuento, % inicial, monto inicial, confirmación, recordatorio). Ahora el área de personalización de plantillas está oculta inicialmente y se despliega al hacer clic en el botón, reduciendo la carga visual y haciendo la interfaz más limpia.
• Indicador visual interactivo: El botón cambia su texto entre "✏️ Personaliza tu plantilla" y "🔽 Ocultar plantilla" según el estado del panel, mejorando la claridad para el usuario.

🔧 Cambiado

• Reorganización de la interfaz: Las herramientas principales ahora muestran solo los campos esenciales y el botón de personalización, manteniendo la misma funcionalidad pero con un diseño más despejado.
• Código actualizado en script.js para manejar el toggle de las plantillas, asegurando que el resto de funcionalidades (generar, copiar, limpiar, restaurar) sigan operando sin cambios.

🐛 Corregido

• Ningún error reportado; es una mejora de experiencia de usuario basada en feedback para reducir la complejidad visual.

✨ Añadido

• Indicador de progreso en el generador de mensajes (paso 4): Ahora se muestra un contador "Procesadas: X / Y" junto a la información de la fila actual. Cada vez que el usuario avanza con el botón "Siguiente", la fila actual se marca como procesada y el contador se incrementa. Esto permite llevar un control visual de cuántos registros se han revisado.
• Persistencia del contador: El array de filas procesadas se guarda en sessionStorage, por lo que al recargar la página se restaura el estado.

🔧 Cambiado

• Eliminado el botón "Copiar todo" del paso 4, ya que no aportaba utilidad práctica según el feedback recibido.
• Reordenados los botones de acción en el paso 4: ahora aparecen en el orden "Copiar correo", "Copiar mensaje principal", seguido de los botones para cada plantilla adicional (en el mismo orden en que fueron creadas).
• Mejorado el estilo del contador de fila actual (#contador-fila) para que sea más visible (fondo verde, texto blanco, bordes redondeados).

🐛 Corregido

• Ningún error reportado; son mejoras funcionales basadas en feedback de usuarios.

🔧 Cambiado

• Refactorización completa del generador de mensajes: El código JavaScript, que antes era un único archivo de más de 900 líneas, se ha dividido en módulos más pequeños y organizados dentro de la carpeta js/. Esto facilita el mantenimiento, la legibilidad y futuras extensiones.
• Módulos creados: main.js, state.js, ui.js, steps.js, variables.js, plantillas.js, file.js, resultados.js, notas.js, utils.js.
• Se implementó una arquitectura basada en módulos ES6, con importaciones/exportaciones claras.
• Limpieza de estilos CSS: Se eliminaron bloques de código duplicados al final del archivo styles.css, mejorando la organización y reduciendo el peso del archivo.

✨ Añadido

• Actualización del HTML para cargar el nuevo punto de entrada js/main.js con type="module", garantizando la compatibilidad con la nueva estructura modular.

🐛 Corregido

• Problemas de dependencia: Se resolvieron errores de referencia a state en ui.js y se ajustaron las importaciones para que todos los módulos funcionen correctamente.
• Eventos y navegación: Se verificó que la funcionalidad completa del generador (carga de archivos, plantillas, resultados, notas, etc.) se mantiene intacta tras la refactorización.

✨ Mejoras en la página de inicio (index.html)

• Mensaje de bienvenida simplificado: Se redujo el texto para ser más directo, destacando que CobraBien es un "todo en uno" y enumerando las herramientas clave (calculadoras, scripts, generador de mensajes, notas rápidas).
• Lista de herramientas centrada: La lista ahora se muestra centrada horizontalmente pero con los ítems alineados a la izquierda para una mejor legibilidad.
• Enlaces a "Novedades" y "Privacidad": Se movieron al final del mensaje de bienvenida con un tamaño de fuente más discreto, evitando distracciones.

🔧 Cambios en el código

• Centralización del botón de sugerencia: Se eliminó el script inline del index.html y se movió la lógica al archivo script.js, dentro del primer IIFE, para mantener todos los eventos en un solo lugar y facilitar el mantenimiento futuro.

🐛 Correcciones

• No se reportaron errores; es una mejora de usabilidad y organización del código.

✨ Mejoras visuales

• Paso 2: Las plantillas adicionales ahora se muestran como tarjetas con mejor espaciado, campo de nombre integrado y textarea más grande (5 filas).
• Paso 4: Las plantillas generadas se presentan en tarjetas compactas con scroll interno para textos largos, reduciendo el espacio vertical entre mensajes.
• Nuevo botón "Copiar todo" que copia todos los mensajes concatenados (principal y adicionales) de una sola vez.

🔧 Cambiado

• Ajustados los estilos CSS con nuevas clases .plantilla-adicional-card, .plantilla-resultado-card y .btn-copiar-todo.
• Mejorada la legibilidad general de la interfaz.

✨ Añadido

• Múltiples plantillas (N plantillas): Ahora en el paso 2 puedes agregar tantas plantillas adicionales como necesites, cada una con un nombre opcional. Ideal para tener asunto, resumen, SMS, etc.
• Botón “➕ Añadir otra plantilla” para agregar nuevas plantillas.
• En el paso 4 se muestran todas las plantillas generadas con su nombre y un botón para copiar cada una individualmente.
• Las plantillas favoritas ahora guardan también las adicionales.

🔧 Cambiado

• Eliminada la funcionalidad de “segunda plantilla” (ahora se cubre con las adicionales).
• Mejorada la función mostrarFilaActual para mostrar dinámicamente todas las plantillas.
• Actualizada la persistencia en sessionStorage para incluir plantillasAdicionales.

🐛 Corregido

• Ningún error reportado; es una mejora funcional.

Añadido

• Soporte explícito para SMS en textos y consejos.
• Nueva opción "Segunda plantilla" (renombrada desde "resumen").
• Botón para abrir en WhatsApp directamente desde el paso 4 (requiere marcar "Es teléfono" en paso 1).
• Selector de formato por variable (Moneda, Porcentaje, Fecha) en paso 1.
• Panel de estadísticas rápidas en paso 4 (total filas, destinatarios válidos, longitud media).
• Guardar y cargar plantillas favoritas en localStorage (paso 2).

Cambiado

• Renombradas variables internas: plantillaResumen → segundaPlantilla, habilitar-resumen → habilitar-segunda-plantilla.
• Mejorada la función aplicarPlantilla para escapar caracteres especiales en nombres de variable.
• Actualizada la versión en el título del HTML a 3.0.0.

Corregido

• Error al usar expresiones regulares con variables que contienen caracteres especiales.
• Persistencia de formatos en sessionStorage.
• Al reiniciar, se limpian correctamente todas las configuraciones.

✨ Añadido

• Sistema de notas rápidas en el generador de mensajes: Ahora el generador también cuenta con el mismo panel de notas que el index, con funcionalidades de colores, búsqueda y edición inline. Las notas se almacenan localmente en el navegador.

🔧 Cambiado

• Corrección del ID del botón de notas en el generador: Se ajustó el ID de notas-flotante a notas-toggle en el HTML (o se adaptó el script) para que el evento de apertura funcione correctamente.
• Eliminación de botones de exportar/importar: Se retiraron los botones de exportación e importación de notas del panel, ya que no eran intuitivos para el usuario promedio.

🐛 Corregido

• El botón de notas en el generador no abría el panel debido a una discrepancia entre el ID del botón y el utilizado en el script. Ahora funciona correctamente.

🧠 Detalles técnicos

• Se reutilizó el mismo bloque de código de notas del index en generador.js, asegurando la compatibilidad con la estructura HTML.
• Las notas del generador pueden compartir almacenamiento con el index o ser independientes según la clave STORAGE_KEY utilizada.

✨ Añadido

• Enlace a la página de privacidad en el mensaje de bienvenida del index, para que los usuarios conozcan cómo se protegen sus datos.
• Enlace a privacidad en el generador de mensajes, justo después de la nota sobre procesamiento local de archivos.
• Mejoras significativas en el sistema de notas rápidas:
• Colores personalizables: Cada nota puede tener un color de fondo (amarillo, verde, azul, rosa) seleccionable al crearla o editarla.
• Búsqueda en notas: Campo de búsqueda que filtra las notas por texto en tiempo real.
• Edición inline: Al hacer clic en el lápiz, la nota se convierte en un área de texto editable sin usar prompt.
• Exportar/Importar notas: Botones para exportar todas las notas a un archivo JSON (respaldo) e importar desde un archivo JSON (restaurar o transferir).

🔧 Cambiado

• Panel de notas: Se rediseñó para incluir:
• Selector de color en cada nota (pequeños círculos de color).
• Campo de búsqueda en la parte superior.
• Botones de exportar/importar en el encabezado.
• Edición inline con textarea y botones "Guardar" y "Cancelar".
• Estilos de notas: Se agregaron clases para los distintos colores y se mejoró la maquetación.

🧠 Detalles técnicos

• Las notas ahora almacenan un campo color (string) además de id, texto y fecha.
• La búsqueda filtra en tiempo real sobre el texto de las notas.
• La edición inline reemplaza el contenido de la nota por un textarea y botones, sin recargar la lista.
• Exportación: JSON.stringify(notas) descargado como archivo .json.
• Importación: lectura de archivo JSON y fusión con notas existentes (previo confirmar).
• Se actualizó localStorage con la nueva estructura.

🔗 Enlaces

• Se agregó en el index: Conoce más sobre cómo protegemos tus datos en nuestra [página de privacidad](privacidad.html).
• En el generador de mensajes: 🔒 Tus archivos nunca se suben a ningún servidor. Todo el procesamiento ocurre en tu navegador. Más información en [privacidad](privacidad.html).

✨ Añadido

• Sistema de notas rápidas mejorado:
• Las notas se guardan automáticamente en localStorage y persisten entre sesiones.
• El panel es redimensionable (arrastrando desde la esquina) y se puede mover libremente arrastrando desde el encabezado.
• Se agregó un botón flotante independiente (📝) en la esquina inferior derecha, fuera del menú flotante, para acceder a las notas.

• En la página de privacidad se informa que las notas se almacenan localmente en el navegador.

• Nuevo correo de contacto: Se actualizó la página de privacidad con el correo institucional eduardo.palencia@cobrabien.org.

🔧 Cambiado

• Resumen rápido ("¿Qué puedes hacer hoy?"):
• Ahora se muestra en 4 columnas en lugar de 7 para reducir la saturación visual.
• Se ajustó el tamaño de los cuadros y se solucionó el desbordamiento de texto (especialmente en "Confirmaciones").

• Cada ítem es ahora clicable y redirige a la herramienta correspondiente mediante su ID (scroll suave).

• Menú flotante:

• Se eliminó el ícono de notas del menú flotante.
• En dispositivos móviles, el menú ahora es horizontal con desplazamiento (scroll) para evitar que se vea demasiado largo.
• Se mantiene el comportamiento de ocultarse al hacer scroll hacia abajo.

🐛 Corregido

• Desbordamiento de texto en los cuadros del resumen rápido (especialmente en "Confirmaciones").
• El panel de notas ya no se cierra involuntariamente al hacer clic fuera (solo con la X o al hacer clic en el botón flotante).

🧠 Detalles técnicos

• Resumen rápido: Se cambió grid-template-columns a repeat(4, 1fr) y se ajustó el font-size y padding para mejorar la legibilidad. Se añadió cursor: pointer y evento click que usa scrollIntoView({ behavior: 'smooth' }).
• Botón de notas: Se creó un botón flotante con posición fija (bottom: 100px; right: 20px;) y se le asignó el evento para alternar el panel.
• Menú móvil: Se agregó overflow-x: auto y flex-wrap: nowrap al menu-list, y se ajustó el padding para que sea desplazable horizontalmente.
• Privacidad: Se añadió un párrafo en la sección "Procesamiento local de tus archivos" indicando que las notas también se guardan localmente, y se actualizó el correo de contacto.

✨ Añadido

• Sistema de notas rápidas accesible desde el menú flotante (📝). Las notas:
• Se guardan automáticamente en localStorage y persisten entre sesiones.
• Se pueden crear, editar y eliminar.
• El panel es redimensionable (arrastrando desde la esquina) y se puede mover libremente arrastrando desde el encabezado.
• Solo se cierra al hacer clic en la X o al volver a hacer clic en el ícono del menú.
• Nuevo ítem "Notas" en la sección "¿Qué puedes hacer hoy?" con su tooltip explicativo.
• Actualización del mensaje de bienvenida en el index:
• Se explicita la misión de CobraBien como "todo en uno para la cobranza".
• Se menciona la visión a futuro (funciones avanzadas, integraciones, modelo freemium).
• Se añade un enlace directo a la página de novedades (versiones.html) para que los usuarios conozcan las últimas actualizaciones.

🔧 Cambiado

• Panel de notas: se eliminó el comportamiento de cierre al hacer clic fuera para mejorar la usabilidad; ahora permanece abierto hasta que el usuario lo cierre explícitamente.
• Estilos del panel de notas: se amplió el tamaño por defecto (350px de ancho, 300px de alto mínimo), se habilitó resize: both y se añadió la funcionalidad de arrastre desde el encabezado.
• Menú flotante: se agregó el ícono de notas y se mantuvo el orden de las herramientas.

🧠 Detalles técnicos

• Se implementó la lógica de arrastre en script.js usando eventos mousedown, mousemove y mouseup, con límites para que el panel no salga de la ventana.
• Las notas se almacenan como un array de objetos con id, texto y fecha (opcional) en localStorage.
• Se añadieron estilos en styles.css para el nuevo panel, incluyendo reglas para el modo oscuro (filtro en el logo y colores consistentes).
• El código de notas se encapsuló en un IIFE para no contaminar el ámbito global.

🐛 Corregido

• En versiones anteriores, el panel de notas se cerraba involuntariamente al hacer clic fuera; ahora se comporta según lo esperado.

✨ Añadido

• Nuevo logo tipográfico: Se reemplazó el logo anterior por una versión tipográfica que incluye "CobraBien" en verde y el eslogan "hecho por cobradores para cobradores" en gris-negro, integrado en una sola imagen.
• Enlace en el logo: El logo ahora es un enlace que redirige a index.html en todas las páginas, mejorando la navegación.
• Adaptación del logo al modo oscuro: Se aplicó un filtro CSS (brightness(0) invert(1)) al logo cuando el modo oscuro está activo, para garantizar su visibilidad (invierte los colores oscuros a claros).

🔧 Cambiado

• Eliminación de texto redundante en el header: Se removió el texto "CobraBien" y el eslogan que estaban duplicados como HTML, ya que ahora forman parte de la imagen del logo.
• Estructura del header simplificada: Se eliminó el contenedor .brand y se ajustó el HTML para que el logo sea el único elemento identificativo en la parte izquierda.

🧹 Limpieza

• Eliminación de script redundante en privacidad.html: Se quitó el bloque de script en el <head> que verificaba las cookies y cargaba Google Analytics manualmente, ya que toda esa lógica está centralizada en cookies.js. Esto evita duplicación y posibles conflictos.

🧠 Detalles técnicos

• Se añadió la clase .logo-link para envolver la imagen y se aplicaron estilos básicos (sin subrayado, opacidad al hover).
• En styles.css se agregó la regla body.dark .logo { filter: brightness(0) invert(1); } para adaptar el logo al tema oscuro.
• Se verificó que todas las páginas (index.html, generador-mensajes.html, privacidad.html, versiones.html) tengan la misma estructura de header y la referencia a cookies.js.

✨ Añadido

• Enlace en el nombre del negocio: En todas las páginas, el texto "CobraBien" en el header ahora es un enlace que redirige a index.html, mejorando la navegación.
• Tooltips informativos en el resumen rápido: En index.html, cada elemento del resumen de herramientas (summary-item) muestra un tooltip con una breve descripción de la herramienta al pasar el cursor.

🔧 Cambiado

• Corrección de esquinas en tarjetas: Se ajustaron los bordes de las tarjetas para que tanto el encabezado como el cuerpo tengan bordes redondeados de forma consistente (ahora todas las esquinas son redondeadas).
• Mejora de responsividad del header: En dispositivos móviles, el header ahora se adapta mejor: altura automática, logo más pequeño, iconos de redes sociales reducidos y mejor espaciado.

🧠 Detalles técnicos

• Se añadieron estilos específicos en styles.css para los tooltips en .summary-item y se mejoraron las media queries para móvil.
• Los cambios en los HTML incluyen la adición de los tooltips en index.html y el enlace en el header de todas las páginas.

🔧 Cambiado

• Refactorización del código de cookies y Google Analytics
• Se extrajo toda la lógica de consentimiento de cookies y carga de GA a un archivo externo cookies.js.
• Se eliminaron los bloques de script repetidos en index.html, generador-mensajes.html, privacidad.html y versiones.html.
• Cada página ahora incluye <script src="cookies.js" defer></script> justo antes de cerrar </body>.
• Esto mejora la mantenibilidad y reduce la duplicación de código.

🧠 Detalles técnicos

• El banner HTML (<div id="cookie-banner">) permanece en cada archivo, pero su comportamiento se controla centralizadamente desde cookies.js.
• Se mantiene el uso de localStorage para recordar la preferencia del usuario.
• La carga de GA sigue siendo dinámica y solo ocurre después de la aceptación.

🔧 Cambiado

• Estilo del enlace "Volver a herramientas" en todas las páginas:
• Se cambió el color de azul (var(--primary-blue)) a verde (var(--primary-green)) para mantener coherencia con la paleta de la página.
• Se ajustó el espaciado: margin-top: 1.5rem; y se añadió un padding y borde redondeado sutil para mejorar la experiencia de clic.
• El hover ahora tiene un fondo verde muy tenue (rgba(0, 180, 120, 0.08)) en lugar de subrayado.
• Este cambio aplica a index.html, generador-mensajes.html, versiones.html y privacidad.html.

✨ Añadido

• Nueva página de privacidad y seguridad (privacidad.html)
• Explica detalladamente que el procesamiento de archivos en el generador de mensajes es 100% local (sin envío a servidores).
• Informa sobre el uso de Google Analytics, con enlace a la política de cookies.
• Incluye secciones sobre derechos del usuario (GDPR) y seguridad del sitio (HTTPS, GitHub Pages).

• Diseño coherente con el resto del sitio (tarjetas, colores, tipografía).

• Banner de consentimiento de cookies

• Aparece en todas las páginas hasta que el usuario acepta.
• Almacena la preferencia en localStorage para no volver a mostrarse.

• El script de Google Analytics ahora se carga dinámicamente solo después de la aceptación, cumpliendo con normativas de privacidad (GDPR).

• Mensaje informativo en el generador de mensajes

• En el paso 3 (subir archivo) se añadió una nota:
  🔒 Tus archivos nunca se suben a ningún servidor. Todo el procesamiento ocurre en tu navegador.

• También se incluyó un tooltip similar en la tarjeta del generador en index.html.

• Enlace a privacidad en el footer

• Se agregó el enlace "Privacidad" junto a "Novedades" en el footer de todas las páginas (index.html, generador-mensajes.html, versiones.html).

🔧 Cambiado

• Refactorización del script de Google Analytics
• Se movió a un bloque condicional para cargar solo si el usuario ha aceptado las cookies.

• Se implementó la variable window['ga-disable-G-XXXXXXXXXX'] para deshabilitar el rastreo en caso de no consentimiento (opcional, en el código se optó por carga dinámica).

• Mejora en la experiencia de usuario

• El banner de cookies es consistente con el tema oscuro/claro (usa variables CSS).
• Se aseguró que el banner no interfiera con el menú flotante (z-index adecuado).

🐛 Corregido

• Problema de carga duplicada de Google Analytics
• Anteriormente, el script se cargaba siempre en el <head>, incluso sin consentimiento. Ahora se carga solo tras la aceptación, evitando posibles infracciones.

🧠 Detalles técnicos

• Implementación del banner: se añadió al final del <body> en todas las páginas, con un script inline que verifica localStorage.getItem('cookiesAccepted'). Si no existe, muestra el banner; al hacer clic en "Aceptar", guarda la preferencia y recarga la página para activar GA.
• Página de privacidad: se creó con la misma estructura de versiones.html, reutilizando clases .version-card para dar formato a las secciones.
• Mensaje local en el generador: se insertó un párrafo con estilo color: var(--primary-green) y un icono de candado para transmitir confianza.

✨ Añadido

• Opción de redondeo hacia arriba en calculadoras
• En las herramientas de descuento, plan con % inicial y plan con monto inicial se agregó un checkbox "Redondear hacia arriba" con la leyenda "para que no falte ni un centavo".
• Al activarlo, los montos finales, anticipos y mensualidades se redondean con Math.ceil() antes de mostrar el resultado y generar el mensaje.
• El estado del checkbox se incluye en la función de limpieza, desmarcándose al reiniciar la herramienta.

🔧 Cambiado

• Mensajes generados ahora reflejan el redondeo
• Las plantillas usan los valores redondeados cuando la opción está activa, asegurando coherencia entre el resultado numérico y el texto generado.
• Mejora en la experiencia de usuario
• Se añadió una nota informativa junto al checkbox para explicar el beneficio del redondeo.

🐛 Corregido

• Ningún error reportado en esta versión; es una mejora funcional.

🧠 Detalles técnicos

• Se añadió el elemento <input type="checkbox"> con IDs específicos (descuento-redondear, porcentaje-redondear, monto-redondear).
• En los objetos generadores, se lee el estado del checkbox con document.getElementById(...)?.checked || false y se aplica Math.ceil() a las variables correspondientes.
• En los limpiadores, se fuerza checked = false para resetear el checkbox al limpiar la herramienta.

✨ Añadido

• Página de versiones (versiones.html)
• Se creó una página independiente que muestra todo el historial de cambios en formato de tarjetas, utilizando las mismas clases CSS que las herramientas para mantener coherencia visual.
• Cada versión se presenta en una tarjeta con título, fecha y lista de cambios agrupados por tipo (añadido, cambiado, corregido).
• Se incluyó un enlace "Volver a herramientas" y un pie de página con redes sociales y créditos.

• Se añadió Google Analytics también en esta página para medir visitas.

• Enlace a novedades en el footer

• En index.html, el footer ahora contiene un enlace "Novedades v2.4" que apunta a versiones.html, permitiendo a los usuarios conocer las actualizaciones fácilmente.

🔧 Cambiado

• Estilos unificados
• Se movieron todos los estilos específicos del generador de mensajes a styles.css para mantener un único archivo de estilos y facilitar el mantenimiento.
• Se agregaron clases .version-card y .versions-list para dar formato a la nueva página.

🐛 Corregido

• Ningún error reportado en esta versión; es una mejora de documentación y estructura.

✨ Añadido

• Persistencia del estado con sessionStorage
• El generador de mensajes ahora guarda automáticamente en sessionStorage el estado completo: variables, plantillas, datos cargados (si el tamaño es menor a 4 MB) y la fila actual.
• Al recargar la página, se restaura el estado y se muestra el paso correspondiente.

• Si el archivo excede 4 MB, se guarda solo la configuración y se muestra un mensaje indicando que debe volver a cargarse el archivo.

• Advertencia al salir/recargar

• Se implementó un evento beforeunload que muestra un mensaje de confirmación si hay datos sin guardar (plantillas modificadas o archivo cargado).

• Navegación rápida en resultados

• En el paso 4, se añadió un campo numérico y un botón "Ir" que permite saltar directamente a cualquier fila del conjunto de datos.
• El campo muestra el número de fila actual y se actualiza al navegar.

🔧 Cambiado

• Optimización de almacenamiento
• Se calcula el tamaño de state.datos con new Blob([JSON.stringify(state.datos)]).size; si supera 4 MB, se omite su almacenamiento en sessionStorage para evitar exceder el límite (aproximadamente 5-10 MB según navegador).

🐛 Corregido

• Error al restaurar datos con caracteres especiales
• Se verificó que JSON.parse y JSON.stringify manejan correctamente UTF-8; no se detectaron problemas adicionales.

✨ Añadido

• Panel de bienvenida interactivo
• En generador-mensajes.html, justo después del enlace de volver, se añadió un botón "¿Primera vez? Explicación rápida".
• Al hacer clic, se despliega un panel con instrucciones paso a paso, ejemplos de uso y un botón "Entendido" para cerrarlo.
• El panel se implementa con clases CSS para animación de aparición/desaparición (max-height, opacity).

🔧 Cambiado

• Unificación de header y footer con index.html
• Se reemplazó el header anterior por la misma estructura usada en index.html (clases header-new, logo-wrapper, brand, social-links, theme-toggle).

• El footer ahora usa la clase footer-new y contiene los mismos enlaces a redes sociales y botón de sugerencias.

• Ajustes de espaciado

• Se aumentó el margen inferior del enlace "Volver a herramientas principales" a 2rem para separarlo mejor del contenido.

✨ Añadido

• Botón de explicación rápida en el generador (versión inicial)
• Misma funcionalidad que en 2.2, pero sin el panel desplegable; era solo un botón que mostraba un alert con instrucciones.
• Rápidamente se reemplazó por la versión mejorada en 2.2, por lo que este cambio es meramente histórico.

🔧 Cambiado

• Separación de estilos
• Todo el CSS que estaba incrustado en generador-mensajes.html se movió al archivo styles.css compartido con index.html.
• Se crearon clases específicas para el wizard (.wizard, .steps, .step, .step-content, etc.) y se añadieron las variables de color --primary-blue y --accent-green en :root para mantener consistencia.

✨ Añadido

• Plantilla de resumen independiente
• En el paso 2 del generador, se añadió un checkbox "¿Definir plantilla de resumen adicional?" que al marcarlo muestra un nuevo campo de texto para escribir una plantilla de resumen.
• En el paso 4, se muestra tanto el mensaje principal como el resumen (si se definió), y se añadió un botón "Copiar resumen" que copia el contenido generado con esa plantilla.

• El estado se amplió con state.plantillaResumen.

• Botón "Copiar resumen"

• Funciona de manera análoga al copiado del mensaje, usando navigator.clipboard.

🔧 Cambiado

• Eliminación del botón "Copiar todos los resúmenes"
• Se consideró poco práctico y se eliminó del paso 4.

✨ Nuevas funcionalidades

• Generador de mensajes desde Excel: Implementación con SheetJS para lectura de archivos Excel/CSV en el cliente. Flujo de 4 pasos (variables, plantilla, carga, resultados) con navegación entre pasos. Vista de resultados fila por fila con botones anterior/siguiente. Formato automático de moneda mexicana. Coincidencia de columnas case-insensitive. Límite de 1000 filas. Botón de reinicio.
• Plantillas personalizables en herramientas 1-5: Cada tarjeta ahora incluye área de texto editable para modificar la plantilla del mensaje. Botón "Restaurar original". Las variables se reemplazan usando expresiones regulares.
• Tooltips explicativos con botón "?": Cada herramienta tiene un botón de ayuda que despliega un tooltip con descripción y variables disponibles.
• Menú flotante de navegación rápida: Barra fija en la parte inferior con iconos para cada herramienta. Scroll suave y ocultamiento automático al hacer scroll.
• Sección de bienvenida del equipo: Tarjeta destacada con mensaje personalizado.
• Enlaces a redes sociales: Iconos de Facebook, Instagram y WhatsApp en header y footer.
• Google Analytics: Script de seguimiento añadido.

🔧 Cambios y mejoras

• Rediseño visual completo (CobraBien 2.0): Nueva paleta de colores (amarillo suave y verde hoja), tipografía Poppins, header rediseñado, footer con enlaces.
• Alineación del grid de herramientas: Cambio a 2 columnas en desktop con tarjetas centradas.
• Modo oscuro adaptado: Ajuste de variables de color y filtro para el logo.
• Manejo de errores y validaciones: Funciones para validar números, evitar negativos y división por cero.
• Normalización de cabeceras en el generador para comparar con variables definidas.

🐛 Correcciones

• Problema de codificación de caracteres especiales resuelto asegurando UTF-8 y usando textContent.
• Tooltips recortados dentro de las tarjetas solucionado con overflow visible y z-index.
• Desalineación de tarjetas en desktop corregida con grid fijo.
• Navegación del menú flotante ahora con scroll suave y prevención de cambio de URL.

Versión inicial

• Lanzamiento con 6 herramientas básicas:
• Calculadora de descuento.
• Plan de pagos con porcentaje inicial.
• Plan de pagos con monto inicial.
• Confirmación de acuerdo.
• Recordatorio de pago.
• Generador de script de llamada.
• Funcionalidades comunes:
• Cálculos en tiempo real al hacer clic en "Generar".
• Formato de pesos mexicanos con toLocaleString('es-MX', { currency: 'MXN' }).
• Botón "Copiar" que usa navigator.clipboard.
• Botón "Limpiar" que restablece los campos y regenera mensajes con valores por defecto.
• Modo oscuro con persistencia en localStorage.
• Patrón de fondo azteca sutil (SVG inline) como marca distintiva.
• Diseño responsive básico con grid de una columna en móviles.

Limitaciones conocidas (en 1.0.0)

• No había validación de campos vacíos (se usaban valores por defecto).
• Las plantillas eran fijas y no personalizables.
• No existía el generador de mensajes masivos.
• La navegación entre herramientas era manual (scroll tradicional).
• Los tooltips no existían; la ayuda era implícita.
• Problemas menores de alineación en algunas resoluciones.
• Sin analytics ni redes sociales.

🎨 Concepción del proyecto - Prototipo

• Idea inicial: Crear un conjunto de herramientas gratuitas para cobradores en México, enfocadas en facilitar la generación de mensajes, cálculos de descuentos, planes de pago, recordatorios y guiones de llamada.
• Objetivo: Ayudar a los cobradores a ser más profesionales y eficientes, con herramientas simples y sin necesidad de registro.
• Primeros bocetos: Se diseñaron las primeras tarjetas de herramientas en una sola página, con cálculos básicos y mensajes predefinidos.
• Tecnologías evaluadas: HTML, CSS, JavaScript puro para mantener la simplicidad y garantizar que funcione sin servidor.
• Características planeadas:
• Calculadora de descuento.
• Plan de pagos con porcentaje inicial.
• Plan de pagos con monto inicial.
• Confirmación de acuerdo.
• Recordatorio de pago.
• Script de llamada.
• Modo oscuro.
• Diseño responsive.

🧪 Primer prototipo funcional

• Se implementó una versión muy básica con campos de entrada y botones que generaban mensajes fijos.
• Se utilizó toLocaleString para formato de moneda.
• Se añadió un botón de copiar con navigator.clipboard.
• Se probó la usabilidad con algunos cobradores y se recibió feedback para mejorar.