/* Los robots de los oficios: la identidad del panel. Su cara (x-crew-face) y el anfitrión de cada
   pantalla, delante de su título con su frase debajo (PageHost). */
.vc-crew-face { flex: none; border-radius: 50%; background: var(--vc-soft, var(--ui-soft)); }
.vc-crew-face.is-idle { display: block; width: 32px; height: 32px; border: 2px dashed var(--vc-line); background: none; }
.vc-crew-pair { display: flex; margin-bottom: .5rem; }
.vc-crew-pair .vc-crew-face + .vc-crew-face { margin-left: -.6rem; box-shadow: 0 0 0 3px var(--vc-paper); }

.fi-header > div:has(> .vc-page-host-face) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: center; }
.fi-header > div:has(> .vc-page-host-face) > :not(.vc-page-host-face) { grid-column: 2; }
.fi-header > div:has(> .vc-page-host-face) > .fi-breadcrumbs { grid-column: 1 / -1; }
.vc-page-host-face { grid-column: 1; grid-row: span 3; align-self: center; }
.vc-page-host-line { margin-top: .15rem; font-size: .9rem; color: var(--vc-muted); }
.vc-page-host-line strong { color: var(--vc-ink); }
@media (max-width: 640px) { .vc-page-host-face { width: 40px; height: 40px; } }

/* El acceso: el equipo en fila, solapado, y la bienvenida de Lola. En el de la plataforma no está la hoja del taller
   (wizard.css, que define --vc-*): valen los colores comunes --ui-* de platform.css. */
.vc-crew-welcome { display: grid; justify-items: center; gap: .6rem; margin-bottom: .5rem; text-align: center; }
.vc-crew-row { display: flex; justify-content: center; }
.vc-crew-row .vc-crew-face { box-shadow: 0 0 0 3px var(--vc-paper, var(--ui-paper, #fff)); }
.vc-crew-row .vc-crew-face + .vc-crew-face { margin-left: -.7rem; }
.vc-crew-welcome p { font-size: .9rem; color: var(--vc-muted, var(--ui-muted)); }
.vc-crew-welcome strong { color: var(--vc-ink, var(--ui-ink)); }
@media (max-width: 400px) { .vc-crew-row .vc-crew-face { width: 34px; height: 34px; } }