# Alineación visual del portal de prestadores con MyCode Fecha: 2026-07-29 ## Objetivo Alinear visualmente todo el portal de prestadores con el diseño público de MyCode sin modificar autenticación, sesiones, rutas, contratos del API, validaciones ni comportamiento de formularios. El resultado debe corregir las seis áreas de la evaluación visual: | Área | Resultado esperado | |---|---| | Tipografía | Plus Jakarta Sans para interfaz y Bricolage Grotesque para títulos | | Botones | Sistema MyCode de píldoras, sombras y variantes productivas | | Colores | Tokens compartidos; azul primario y coral accent | | Tarjetas | Jerarquía expresiva y consistente con MyCode | | Logo y azul | Identidad MyCode conservada | | Responsive | Navegación y espacios optimizados por breakpoint | ## Alcance El rediseño cubre: - login; - registro; - verificación de correo; - recuperación y restablecimiento de contraseña; - segundo factor; - resumen privado; - perfil comercial; - sucursales y ubicación; - servicios, especialidades, características, horarios y contactos; - medios, verificaciones y revisión. Se permiten cambios de markup Blade para mejorar jerarquía, navegación, iconografía y accesibilidad. Deben conservarse todos los campos, nombres, identificadores, atributos `data-*` y puntos de enlace que usa JavaScript. ## Dirección visual aprobada La dirección seleccionada es **MyCode productivo**. Reutiliza la identidad de la portada sin trasladar literalmente su densidad promocional a formularios y flujos de administración. ### Tipografía - cuerpo, formularios y navegación: Plus Jakarta Sans; - títulos y cifras destacadas: Bricolage Grotesque; - pesos y escalas equivalentes a la portada pública. Las fuentes se cargarán mediante los mismos enlaces usados por la portada. ### Color - azul MyCode: navegación, acciones primarias, foco y enlaces; - coral: progreso, llamados de atención y detalles de marca; - rojo peligro: errores y acciones destructivas; - verde: estados completados o verificados; - superficies claras, líneas y sombras derivadas de tokens compartidos. El coral no se usará como sustituto del rojo de error. ### Botones y controles - acción primaria: píldora azul con sombra contenida; - acción secundaria: píldora delineada; - acción destructiva: variante roja diferenciada; - inputs, selects y textareas: radios y estados de foco MyCode; - controles densos conservarán tamaños prácticos y objetivos táctiles de al menos 44 píxeles. ### Tarjetas Las tarjetas usarán bordes suaves, radios amplios, sombra ligera, iconos y jerarquía clara. Los formularios seguirán siendo funcionales y compactos; no se convertirán en composiciones promocionales. ## Navegación aprobada ### Escritorio El portal privado tendrá una barra lateral persistente con: - Resumen; - Perfil; - Sucursales; - Revisión. El área principal conservará un ancho legible y mostrará encabezado, progreso, estado y contenido de la etapa activa. ### Móvil La barra lateral se transformará en una barra inferior persistente con las mismas cuatro áreas. Debe: - respetar `safe-area-inset-bottom`; - mantener visible la etapa activa; - reservar espacio inferior en el contenido; - usar icono y texto; - conservar objetivos táctiles accesibles. Las pantallas públicas de cuenta no mostrarán esta navegación. ## Tokens compartidos Se creará `public/css/mycode-design-tokens.css` como fuente visual compartida por la portada y el portal. Contendrá: - familias tipográficas; - paleta azul y coral; - colores de texto, superficies y líneas; - radios; - sombras; - transiciones. Los tokens duplicados se retirarán de los estilos específicos cuando hayan sido reemplazados por la fuente compartida. La portada debe conservar su apariencia actual. ## Organización de estilos El archivo actual `public/css/provider/portal.css` tiene 141 líneas y no puede absorber el rediseño sin superar el objetivo arquitectónico. Se reemplazará por archivos enfocados bajo `public/css/provider/portal/`: - `01-base.css`: cuerpo, marca y utilidades; - `02-account.css`: login y flujos públicos de cuenta; - `03-shell.css`: topbar, sidebar, barra móvil y layout privado; - `04-components.css`: tarjetas, progreso, badges y feedback; - `05-forms.css`: formularios y controles; - `06-responsive.css`: breakpoints, safe areas y movimiento reducido. Cada archivo tendrá una responsabilidad y permanecerá bajo 150 líneas. ## Markup y accesibilidad Los partials `provider/partials/account.blade.php` y `provider/partials/app-shell.blade.php` incorporarán contenedores e iconos de Material Symbols Rounded. Los demás partials solo cambiarán cuando sea necesario para aplicar jerarquía semántica o clases visuales. Requisitos: - navegación identificable mediante `nav` y etiqueta accesible; - `aria-current` conservado; - iconos decorativos con `aria-hidden`; - foco visible; - mensajes de error y estado legibles; - soporte para `prefers-reduced-motion`; - contraste suficiente entre texto, superficie y acciones. ## Comportamiento y datos No se modificará: - `resources/js/provider/*` ni su bundle salvo que una prueba demuestre que el nuevo markup requiere un selector equivalente; - controladores, ViewModels, middleware o sesiones; - rutas web y bridge; - nombres de campos y payloads; - Google Maps ni la forma en que se carga su clave; - estados del prestador o reglas del API. La API seguirá siendo la autoridad. El rediseño solo cambia presentación. ## Estados y errores Los estados existentes de carga, validación, error, suspensión, completitud y verificación conservarán su comportamiento. Visualmente usarán: - azul para información y acciones disponibles; - coral para atención no destructiva; - rojo para error o eliminación; - verde para completitud o verificación. ## Pruebas El trabajo seguirá TDD. Las pruebas feature verificarán: - carga de fuentes y tokens compartidos; - inclusión de los estilos atomizados; - navegación lateral y barra inferior sobre el mismo conjunto de enlaces; - iconos y etiquetas accesibles; - preservación de atributos `data-*`, formularios y rutas; - ausencia de secretos o cambios funcionales. La validación final incluirá: ```bash php artisan architecture:audit --strict php artisan test ``` Además se hará revisión visual real en login, resumen, perfil, sucursales y revisión, tanto en escritorio como en móvil. ## Fuera de alcance - cambios en `api_mycode`; - directorio público de prestadores; - nuevos campos o pasos del registro; - cambios en login clásico o 2FA; - nuevas acciones administrativas; - rediseño general de páginas ajenas a Prestadores; - uso de los recursos gráficos pendientes del árbol de trabajo. ## Versión El hook de versión se evaluará al finalizar. Como este cambio rediseña todo el portal, el incremento propuesto es de `1.3.0` a `1.4.0`.