AppShell

Toda pantalla del prototipo vive dentro de uno de tres esqueletos (reglas/05 §05.1): Principal (rail + tarjeta de contenido + coach a la derecha, colapsable), Foco (sin rail: ✕ para salir, título y progreso, pie con acciones) y Acceso (login y registro). Elegir el esqueleto es la primera decisión de cada pantalla; después solo se llena su slot Content.

• Principal → AppShellPrincipal (Rail + TopBar + slot + CoachPanel). Inicio, Aprender, Practicar, Evaluarme, Mi avance.
• Foco → AppShellFoco (barra de foco + slot + pie). Pasos de Aprender, Reforzar, evaluaciones y todo el flujo de la simulación: Antes de empezar, Preparando, apertura, conversación, calificando.
• Acceso → AppShellAcceso (layout centrado C en el alcance; split B construido para que el cliente elija).

• Rail con ícono y palabra, sin barra inferior; exactamente un ítem activo (§05.2, P19–P21).
• Barra superior mínima: título o breadcrumbs en segundo nivel, acción contextual y botón del coach cuando el panel está colapsado (§05.3). Sin selector de idioma ni notificaciones.
• Ancho de lectura 780 centrado en el contenido de sección (§05.4): excepción declarada en código, candidato Size/content-max.
• Coach: en 1280 y 1024 empuja el contenido (360 / 324); en 768 se superpone con velo (§05.5). No hay coach en evaluaciones ni en la simulación (§05.6).

• /design-system/componentes/app-shell-principal (coach abierto y colapsado; cambia el ancho para ver empujar o superponer)
• /design-system/componentes/app-shell-foco (viewport, con la conversación) y /design-system/componentes/app-shell-foco/auto
• /design-system/componentes/app-shell-acceso (centrado) y /design-system/componentes/app-shell-acceso/split

• El velo de 768: en Figma es negro al 40 % sin blur; el código usa la utilidad scrim (con blur) porque la regla lo llama así. Por confirmar.
• Los íconos del rail en reposo usan el modo «mid» de Icon tone; en Figma el trazo va a icon/tone sin modo explícito. Por confirmar.