/* ============================================================
   OrchardCore.Forms - layout con CSS Grid
   El contenedor define 12 columnas; cada widget ocupa N columnas
   según su widget-size-*. Dos size-50 (6 col c/u) caben en una fila.
   ============================================================ */

.form-form .flow {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
	align-items: start;
}

.form-form .widget {
	box-sizing: border-box;
	min-width: 0; /* evita que el contenido fuerce overflow de la celda */
}

.form-form .widget-body {
	width: 100%;
}

/* --- Tamaños: span sobre 12 columnas --- */
.form-form .widget-size-100 {
	grid-column: span 12;
}

.form-form .widget-size-75 {
	grid-column: span 9;
}

.form-form .widget-size-50 {
	grid-column: span 6;
}

.form-form .widget-size-33 {
	grid-column: span 4;
}

.form-form .widget-size-25 {
	grid-column: span 3;
}

/* Sin clase de tamaño: ocupa toda la fila por defecto */
.form-form .widget:not([class*="widget-size-"]) {
	grid-column: span 12;
}

/* --- Alineación horizontal del contenido dentro del widget --- */
.form-form .widget-align-start .widget-body {
	display: flex;
	justify-content: flex-start;
}

.form-form .widget-align-center .widget-body {
	display: flex;
	justify-content: center;
}

.form-form .widget-align-end .widget-body {
	display: flex;
	justify-content: flex-end;
}

.form-form .widget-align-justify .widget-body {
	display: block;
}
/* justify = ancho completo, comportamiento por defecto */

/* --- Responsive: en móvil todo a ancho completo --- */
@media (max-width: 576px) {
	.form-form .widget[class*="widget-size-"],
	.form-form .widget:not([class*="widget-size-"]) {
		grid-column: span 12;
	}
}

/* --- Espaciado y campos --- */
.form-form .form-label {
	display: block;
	margin-bottom: 0.25rem;
}

.form-form .form-control {
	width: 100%;
}