# Mockups E250-C0097 — notas por variante

Mockups estáticos (HTML + DaisyUI por CDN, tema `e250`) para validar la superficie visual del change **antes** de promover a `to-do/`. NO son código de producción. Reproducen el shell real del panel (`PanelView.vue`): sidebar de 60 (w-60) con avatar-letra "C" + marca + subtítulo, grupos de navegación "Operación"/"Desarrollo", email + "Salir" abajo, header de 56px con breadcrumb.

## Archivos y qué superficie cubre cada uno

| Archivo | Superficies | Spec |
|---|---|---|
| `v1-entry-screens.html` | (a) selector org→workspace del operador · (b) selector global de plataforma · (d) pantalla "sin acceso" | PAN-12, PAN-16, PAN-18 |
| `v2-panel-branding-and-staff-mode.html` | (e) cabecera con branding por dato — caso "El Cardón" (org "El Cardón S.L.") y caso "Teide Stargazing" (org "Volcano Teide") · (c) banda modo staff sobre Reservas | PAN-14, PAN-17 |
| `v3a-inpanel-action-usermenu.html` | (f) acción "acceder a otro espacio como plataforma" — **placement A (alternativa documentada): menú de usuario arriba-derecha** | PAN-16 (b) |
| `v3b-inpanel-action-navgroup.html` | (f) acción "acceder a otro espacio como plataforma" — **placement B (RECOMENDADO): grupo "Plataforma" en el sidebar** | PAN-16 (b) |

Nota: no se mockea el operador de 1 workspace (entrada directa sin selector, comportamiento idéntico al actual — sin superficie nueva).

## Set aprobable

Tras la iteración de review, el set aprobable es **v1 + v2 + v3b**. `v3a` queda como **alternativa documentada** del placement de la acción in-panel (superficie f): la recomendación converge en **v3b** (grupo "Plataforma" en el sidebar). Se mantiene v3a para que el humano compare, pero no forma parte del set recomendado.

## Cambios aplicados en la iteración de review

- **Fix 1 (subtítulo por dato, PAN-14).** El subtítulo del sidebar ya no es el literal fijo "Panel de reservas": deriva del dato igual que la cabecera. Reparto aplicado: **cabecera = nombre del workspace, subtítulo = nombre de la organization**. Caso El Cardón → workspace "El Cardón" / org "El Cardón S.L."; caso ajeno en v2 → workspace "Teide Stargazing" / org "Volcano Teide" (par distinto a propósito, para evidenciar que ambas líneas salen del dato). Aplicado en `v2`, `v3a` y `v3b` para que el shell sea consistente. El mapeo exacto del subtítulo (nombre de organization vs. tagline propio del workspace) queda como **confirm humano** anotado inline en los mockups.
- **Fix 2 (avatares neutralizados).** Los avatares de iniciales de las filas de los selectores en `v1` (tanto el selector del operador como el global) pasan de colores por-tema por fila a un **único color neutro** (`bg-base-200 text-base-content/60`): ya no leen como color-branding por-workspace (fuera de alcance en fase B "solo texto"). El avatar-letra "C" de la cabecera (marca del producto, no por-workspace) se mantiene en `primary`.

## Eje explorado en la superficie (f) — dónde vive la acción in-panel

Dos placements alternativos para que el humano elija. Ambos: exclusivos de `platform_admin`, nunca visibles para un operador normal; ambos abren el selector global (superficie b).

- **A — menú de usuario (arriba-derecha del header).** Introduce un menú de usuario nuevo (hoy no existe; email+logout viven al pie del sidebar). Agrupa acciones de identidad/cuenta; la acción de soporte cae natural ahí. Coste: es una pieza de layout nueva en el header.
- **B — grupo "Plataforma" en el sidebar.** Reutiliza el patrón de grupos ya existente (Operación/Desarrollo) y el patrón de visibilidad por rol ya en uso (el ítem "Usuarios" sólo lo ven owner/admin vía `auth.canManageUsers`). Cero piezas de layout nuevas; más descubrible. Coste: mezcla una acción (abrir selector) entre ítems que son navegación.

Convergido: se recomienda **B** (`v3b`) — encaja mejor con el shell actual (menor superficie nueva, patrón de rol ya probado). **A** (`v3a`) queda como alternativa documentada por si se prevé añadir más acciones de cuenta al header.

## Decisiones visuales para validar en review

1. **Color de la banda modo staff (c).** Elegido `secondary` (verde oscuro de marca `#02703c`): claramente distinto del panel propio sin leerse como "error/peligro". Alternativa a considerar: `warning` (naranja `#ee7600`), más alarmante — útil si se quiere enfatizar "estás tocando datos de un cliente ajeno". El texto es "Estás viendo {workspace} como plataforma" (literal de PAN-17), con acción "Salir del espacio".
2. **Banda + auto-salto PAN-16.** La banda aplica igual cuando el platform-admin entra directo al único workspace del sistema (sin pasar por selector): es "workspace ajeno" aunque no haya habido selección. El mockup v2 vale para ambos caminos.
3. **Iniciales de workspace/organization (ya neutralizadas — Fix 2).** Los selectores usan avatares con iniciales en un **único color neutro** (`bg-base-200`), no color por-tema por fila: son un adorno de lista para escaneabilidad, no color-branding por-workspace (fuera de alcance en fase B "solo texto"). Si aun así se prefiere una lista **sin avatares** (todavía más fiel al "solo texto"), decidirlo en review.
4. **Selector global — búsqueda + scroll.** Barra de búsqueda fija arriba (filtra al escribir), lista con `max-h` y scroll; 6 espacios de ejemplo con contador al pie ("6 espacios · desplázate para ver más") para evidenciar que escala a muchos clientes.
5. **Subtítulo de marca por dato (e) — resuelto (Fix 1), con un confirm pendiente.** Ambas líneas del sidebar derivan del dato: cabecera = nombre del workspace, subtítulo = nombre de la organization (ya no hay literal fijo "Panel de reservas"). El **título de la pestaña del navegador** (tercera pieza de PAN-14) no es visible en un mockup estático de un iframe/página; se implementará por dato en el trabajo TDD. Confirm humano pendiente: si el subtítulo debe ser el nombre de la organization (como está) o un tagline propio del workspace.