/* ===========================================================================
   LAYOUT DEL PANEL
   =========================================================================== */

.armazon{
	display: grid;
	grid-template-columns: var(--lateral-ancho) minmax(0, 1fr);
	min-height: 100vh;
	transition: grid-template-columns var(--transicion-lenta);
}
.armazon.esta-plegado{ grid-template-columns: var(--lateral-plegado) minmax(0, 1fr); }

.contenido{
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100vh;
}

.lienzo{
	flex: 1 1 auto;
	padding: var(--respiro) calc(var(--respiro) + 4px) 48px;
	min-width: 0;
}

/* --- Encabezado de la vista. --- */
.vista-cabeza{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: var(--respiro);
}
.vista-cabeza .migaja{
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 7px;
	font-size: 12px;
	color: var(--texto-tenue);
}
.vista-cabeza .migaja span:not(:last-child)::after{ content: "/"; margin-left: 7px; opacity:.5; }
.vista-cabeza h1{ margin-bottom: 6px; }
.vista-cabeza p{ font-size: 13.5px; max-width: 72ch; }
.vista-acciones{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }

.seccion{ margin-bottom: var(--respiro); }
.seccion:last-child{ margin-bottom: 0; }

.seccion-cabeza{
	display:flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

/* El cajón móvil se oscurece con este velo. Vive fuera del armazón y siempre
   fijo, para que nunca ocupe una celda de la rejilla. */
.velo{
	position: fixed;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.velo.esta-abierto{ pointer-events: auto; }