shell del consultorio · v1.0 · ago 2026
Propuesta · producto

El mueble donde se pasan ocho horas.

El login del consultorio ya entra por la noche. El shell, en cambio, sigue siendo claro por dentro y oscuro en el móvil — y la secretaria trabaja con una barra superior hecha a mano que no tiene búsqueda, ni breadcrumb, ni su campana (está literalmente oculta con un hidden). Esta pieza pone el mueble en su sitio: el sidebar sobre noche con aurora quieta y las citas de hoy al alcance, un topbar único con contenido por rol, Medi flotante con el isotipo abajo a la derecha, la iconografía revisada ítem por ítem, y la matriz de lo que se destraba de paso.

App
consultorio · doctor + secretaria
Decisión
Sellada · 2026-08-05
Aurora
Quieta · sin drift
Deuda saneada
7 ítems
01Dos roles, tres barras, un lenguaje a medias
auditado en apps/consultorio

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>.

La incoherencia de temperatura

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.

Lo que la puerta ya decidió

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.

La dosis, explicada

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.

02El sidebar, sobre noche
elegida · A + acceso rápido a citas

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.

elegidaA · el contrato afinado + el acceso rápido a citas · aurora quieta

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.

03Medi, flotante — y con el isotipo
el móvil ya lo hacía así

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.

El límite de esta propuesta

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.

la coreografíael panel nace del propio botón · 640ms · spring
1 · en reposo
2 · abriendo
Medi
3 · abierto
Medi · tu asistente

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.

panel abiertoanclado a su esquina · noche con la lámina de la casa

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.

04Un topbar, contenido por rol
muere el header hecho a mano

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.

doctorizquierda común · derecha: chat · campana · usuario (Medi es flotante)
secretariamisma izquierda · derecha: filtro de doctores · actuando como · chat · campana (recuperada) · usuario

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.

05Los iconos, ítem por ítem
lucide · trazo 1.6–1.7

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.

InicioHome · se queda
AgendaCalendarCheck · se queda
Mis pacientesUsers · se queda
ChatMessageCircle · se queda
Mi perfilUser · se queda
Centros de saludBuilding2 · se queda
HorariosClock · se queda
Mis plantillasLayoutTemplate → FileText
RecordatoriosBell · se queda
Código QRQrCode · se queda
PagosCreditCard → Banknote
Datos de pagoLandmark → CreditCard
EquipoUsersRound · se queda
Mis doctoresStethoscope · se queda

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.

06El móvil, ya coherente
la barra oscura deja de ser la excepción

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.

07Lo que se destraba de paso
mismo PR del shell

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 hoyDecisiónDó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
Nada breaking

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.

Sellado

Sidebar A + citas de hoy · topbar único · Medi flotante con el isotipo (solo el disparador; su interior es de medi-eve) · tres iconos cambian.

La ley

Aurora quieta en el mueble · el único movimiento es el halo de Medi · la matriz de saneo entra.

Siguiente paso

design-ship publica y arma el proyecto → goal-phases lo vuelve ejecutable.