La página que estás leyendo es el componente
El carril de la izquierda, la barra superior traslúcida y esta cabecera son el cascarón completo. Reduce el ancho de la ventana para ver los tres puntos de quiebre: el carril colapsa a 68px por debajo de 1024px y pasa a tira horizontal por debajo de 760px.
Anatomía
- .shell
- rejilla de dos columnas:
var(--rail)yminmax(0, 1fr) - aside.sidebar
- pegajoso, 100vh, el único plano oscuro; deriva sus colores locales
--rail-*del contrato - header.topbar
- 57px,
--veilconbackdrop-filter: saturate(160%) blur(8px) - .page
- ancho máximo 1400px, relleno 22 / 24 / 72px
- .pagehead__desc
- medida limitada a 68 ch
- .actionbar
- pegajosa abajo, sangra a los márgenes de página con margen negativo
.row-2-1 · columna principal
Contenido de trabajo: tabla, compositor, formulario largo.
Las filas se declaran; nunca
auto-fill con hijos que abarcan columnas..row-2-1 · panel lateral
Metadatos, detalles del registro, avisos contextuales.
.row4
Fila de KPI
.row4
→ 2 columnas ≤1180px
.row4
→ 1 columna ≤760px
.row4
separación fija de 16px
Barra superior: título, migaja y acciones
El título es el h1 de la pantalla. La migaja
(.crumb) añade contexto corto, no una ruta completa.
A la derecha van las acciones de la pantalla, con un solo relleno entre todas ellas:
arriba, «Guardar» es el sólido e «Imprimir» es el botón normal.