# Design Doc — Hub de Autogestión WooCommerce (Coordenadas.co) **Fecha:** 2026-09-01 **Estado:** Aprobado (diseño validado en sesión de brainstorming) **Cliente objetivo:** Negocio con tienda en línea WordPress + WooCommerce **Autor de referencia:** Coordenadas.co (agencia) --- ## 1. Propósito Entregable single-file HTML (`hub-woo.html`) que permite a un cliente **no tech savvy** autogestionar el 100% de su tienda WooCommerce sin depender de la agencia. El objetivo es que la agencia **deje de recibir llamadas por tareas básicas** (subir productos, cambiar precios, ver pedidos, hacer cupones, editar contenido) y que, cuando el cliente sí necesite ayuda, la agencia pueda localizar y compartir la sección exacta del hub con un enlace directo. ## 2. Decisiones acordadas | Decisión | Valor | |---|---| | Formato | HTML single-file autocontenido (`hub-woo.html`) | | Marca | Coordenadas.co — design system: verde `#20C162`, amarillo `#FCCC09`, azul `#01C7FE`, naranja `#FF4200`, tipografía Baloo 2 (display) + Inter (body) | | Tema | Toggle dark/light, default dark, persistente en localStorage | | Idioma | Bilingüe ES/EN con toggle en vivo, sin recarga | | Acceso | URL pública simple, sin login, no indexada | | Credenciales | Solo URL de login + usuario; **sin contraseña** (guía de recuperación) | | Alcance | 11 secciones de tareas + FAQ + Glosario (ver sección 4) | | Videos | Embeds de YouTube en inglés (mismos videos para ES y EN), mapeados por `tutorial-id` en `CONFIG.videos` | | Widgets | Buscador por tarea, checklists (localStorage), barra de progreso + logros, modo pasos rápidos, contenido plegable, glosario con tooltips | | Tutoriales | Pasos numerados + mockups SVG ilustrativos del panel con resaltado | | Videos | Embeds propios + YouTube, con fallback a pasos escritos | | Para la agencia | Botón "Copiar enlace directo" por tutorial + botón flotante "Necesito ayuda" con contexto adjunto | | Enfoque | **A**: single-file con bloque `CONFIG` editable + data embebida + engine vanilla JS | ## 3. Arquitectura del archivo ``` hub-woo.html ├── : CSS completo (variables dark/light, responsive, animaciones) ├── : shell HTML (header, sidebar, main, footer, botón flotante) ├──