Los dos shells (doctor y secretaria) beben de las mismas primitivas compartidas, pero uno las usa
y el otro las esquiva. El resultado: tres alturas de barra conviviendo —52px del doctor con
blur, 56px de la secretaria hecha a mano, 72px del móvil—, y una asimetría que no responde al rol
sino al accidente: la secretaria no tiene breadcrumb ni búsqueda ⌘K aunque navega las mismas
entidades. Su campana existe, se calcula, y está tapada con un <div hidden>.
Claro arriba, noche abajo
El sidebar de escritorio es blanco (activo brand-50, rail brand-500) pero la barra de pestañas
del móvil ya es brand-950 oscura en ambos roles. Hoy la app es clara de día y oscura
en el bolsillo. Poner el sidebar en noche no rompe nada: reconcilia.
El médico entra por la noche
El login invertido (proyecto Aurora Auth) pone al profesional a entrar sobre noche con aurora petroleo. Si al cruzar la puerta el mueble se vuelve blanco, la casa cambia de idioma en el umbral. La aurora del shell es la misma firma, sin movimiento.
El login puede ser espectacular: se mira diez segundos. El shell se usa ocho horas. Por eso la aurora del sidebar es quieta — un glow petroleo tenue y uno menta apenas insinuado, sin drift, sin pulso. Marca en la periferia, cero competencia con el trabajo.
La ley del mueble: noche con aurora quieta (un glow petroleo tenue arriba, uno menta apenas insinuado abajo, sin drift), activo con rail menta de 3px, iconos grises que solo se tiñen al activarse, badge de chat en menta, beta en outline mudo, sentence case. El logo se queda arriba y «Crear» al pie como pill menta — la anatomía de hoy, afinada. Rutas, grupos, ítems e i18n keys se conservan tal cual: el trabajo es de forma.
Lo que cambia frente a hoy: la noche con aurora quieta, el activo con rail menta, «Crear» como pill menta (muere el círculo embebido del pie) — y dos movimientos nuevos: el acceso rápido a las citas de hoy sube justo debajo de la navegación principal (donde el ojo cae primero, no perdido al fondo), y Medi sale del topbar a su botón flotante. El topbar queda para navegar: migas, búsqueda, chat, campana y usuario.
Medi vivía como una pastilla más en el topbar, compitiendo con el chat y la campana por la esquina
más disputada de la pantalla. Ahora es lo que siempre debió ser: un botón flotante abajo a la
derecha con el isotipo de Amedi en menta sobre noche. No es un capricho de forma — el
móvil ya tenía su Medi flotante en esa misma esquina; el escritorio simplemente deja de ser
la excepción. El atajo ⌘J sigue vivo y aparece al pasar el cursor.
Aquí solo cambia el disparador: el botón flotante, su isotipo, el anclaje del panel y la
animación de apertura. El interior de Medi no se toca — la conversación, los mensajes, las
herramientas y su comportamiento tienen su propia pieza (medi-eve) y se deciden allí.
Lo que se ve dentro del panel en las maquetas de abajo es relleno ilustrativo, no una
propuesta de contenido.
Qué hace la animación: el panel nace del botón — arranca como el mismo
círculo de 52px en la esquina, se estira hacia arriba y a la izquierda mientras el radio pasa de
redondo a lámina (50% → 26 → 20), con un spring corto que rebasa apenas el destino. 640ms; al cerrar,
el camino inverso en 420ms. En reposo, un halo menta late cada 3.6s — el único movimiento del
shell. Con prefers-reduced-motion el panel simplemente aparece y el halo se apaga.
Lo que esta pieza decide del panel es su marco: dónde ancla (a su esquina, sin
tapar el sidebar ni empujar el contenido como el dockeado de hoy), de dónde nace (del botón) y cómo
crece en móvil (hoja completa desde el mismo sitio). El contenido de adentro —la conversación, los
chips, las herramientas— es de medi-eve: lo dibujado acá es relleno para mostrar el
marco, no una propuesta de interfaz de Medi.
Misma barra para los dos roles —52px, blur, sticky— con la izquierda idéntica: colapsar,
breadcrumb y búsqueda ⌘K. La secretaria gana lo que le faltaba (navegación por migas, buscador) y
recupera su campana, hoy tapada con un hidden en escritorio pese a estar visible
en el móvil. La derecha es lo único que cambia: la secretaria suma su filtro de doctores y el chip de
"Actuando como", que hoy vive suelto en su header propio. Medi ya no vive aquí — es flotante.
El chip "Actuando como" aparece en lugar del filtro cuando la secretaria trabaja con un solo doctor (hoy ya se auto-oculta en multi+Todos): Actuando como Dra. Rojas. Con esto los tres altos de barra se vuelven uno — 52px en escritorio para ambos roles; el móvil conserva sus 72px porque ahí la barra carga logo, notificaciones y el chip.
La mayoría acierta. Tres no dicen lo que el ítem hace, y se cambian: un banco para "Datos de pago" confunde con "Pagos" (que ya es una tarjeta), una plantilla de layout para "Mis plantillas" habla de rejillas y no de documentos clínicos. Regla del sistema: trazo 1.6–1.7, tamaño 14px en el sidebar y 15px en el topbar, gris que solo se tiñe de menta al activarse.
Las tres celdas resaltadas en menta son las que cambian. El detalle: «Pagos» pasa a Banknote (el dinero que entra) y «Datos de pago» hereda CreditCard (el instrumento) — hoy están al revés y el banco de Landmark parecía una sucursal. «Mis plantillas» pasa a FileText: son textos clínicos, no rejillas. Lo demás se queda: acierta.
La barra de pestañas ya era noche — ahora el escritorio la acompaña. Se le da indicador de menta arriba del activo (en vez del punto secondary-500 huérfano) y se centraliza el estilo en la primitiva compartida, que hoy se duplica como string de clases en los dos shells.
La auditoría encontró siete cosas rotas, inalcanzables o mal colocadas que viven exactamente en los archivos que esta propuesta ya toca. Arreglarlas ahora cuesta casi nada; dejarlas es decidir que sigan rotas.
| Qué está roto hoy | Decisión | Dónde |
|---|---|---|
La campana de la secretaria está oculta con <div hidden> en escritorio |
Se destapa. El hook ya corre y en móvil sí se ve; no hay razón de producto para esconderla. | secretary-desktop-shell.tsx |
«Ayuda» del drawer móvil de la secretaria no hace nada (() => undefined) |
Se cablea al mismo diálogo de soporte que ya usa en escritorio. | secretary-mobile-shell.tsx |
| «Código QR» está en ambos sidebars pero falta en los drawers móviles | Entra al drawer en los dos roles — hoy es inalcanzable desde el teléfono. | doctor/secretary-navigation.config.ts |
| El doctor dice «Citas» en el sidebar y «Agenda» en su tab móvil | Un solo nombre: «Agenda», como ya lo dice la secretaria en ambos sitios. | i18n · doctorHome.nav.appointments |
/doctor/publications tiene i18n y breadcrumb pero ningún ítem de navegación |
Decidir con producto: entra a «Gestión» o se retira la ruta. No puede quedar huérfana. | doctor-navigation.config.ts |
| Medi ocupa la esquina más disputada del topbar y su panel empuja el contenido | Sale a botón flotante con el isotipo (como ya hacía el móvil); el panel ancla a su esquina y deja de empujar. Solo el disparador y el marco — el interior es de medi-eve. |
doctor-topbar-content.tsx · MediTopbarButton |
| El estilo oscuro de la TabBar se duplica como string de clases en los dos shells | Sube a la primitiva compartida como variante — un solo sitio para los dos roles. | packages/ui · MobileTabBar |
Rutas, grupos, ítems, i18n keys y el colapso a iconos se conservan. El trabajo es de forma (noche + densidad + botones a la doctrina), de contenido de barra (la secretaria adopta la compartida) y de saneo. La secretaria hereda la decisión en el mismo PR: la sala de espera no puede hablar el lenguaje viejo mientras la agenda estrena el nuevo.
El mueble más usado del consultorio, del lado de la noche.
El médico entra por la noche en el login y su mueble sigue siendo noche — con la aurora quieta, que firma sin distraer. El topbar deja de depender del rol que te tocó, los iconos dicen lo que hacen, y seis cosas rotas dejan de estarlo.
Sidebar A + citas de hoy · topbar único · Medi flotante con el isotipo (solo el disparador; su interior es de medi-eve) · tres iconos cambian.
Aurora quieta en el mueble · el único movimiento es el halo de Medi · la matriz de saneo entra.
design-ship publica y arma el proyecto → goal-phases lo vuelve ejecutable.