/**
 * PSB-PORTAL-MEDIDAS-ROW-002 — fila horizontal: icono · largo × ancho (homogénea).
 */

body.psb-pres-portal-shell {
	--psb-medidas-input-height: 44px;
	--psb-medidas-icon-width: 48px;
	--psb-medidas-x-width: 2.85rem;
	--psb-medidas-x-size: 2.05rem;
	--psb-medidas-field-max: 180px;
}

/* —— Fila canónica: icono + largo + × + ancho (+ cobertura opcional) —— */
body.psb-pres-portal-shell .psb-pres-medidas-canonical__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.35rem 0.55rem;
	width: 100%;
	min-width: 0;
}

body.psb-pres-portal-shell .psb-pres-medidas-canonical__field {
	flex: 1 1 0;
	min-width: 88px;
	max-width: var(--psb-medidas-field-max);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

body.psb-pres-portal-shell .psb-pres-medidas-canonical__field--extra {
	flex: 0 1 120px;
	max-width: 140px;
	min-width: 88px;
}

body.psb-pres-portal-shell .psb-pres-medidas-canonical__field .psb-pres-fp-medidas-field__label {
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: #57534e;
	line-height: 1.3;
}

body.psb-pres-portal-shell .psb-pres-medidas-canonical__field .psb-pres-fp-medidas-field__input {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: var(--psb-medidas-input-height);
	box-sizing: border-box;
}

/* Icono / diagrama: centrado con la fila de inputs (no debajo) */
body.psb-pres-portal-shell .psb-pres-medidas-canonical__diagram {
	flex: 0 0 var(--psb-medidas-icon-width);
	width: var(--psb-medidas-icon-width);
	height: var(--psb-medidas-input-height);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	opacity: 0.42;
	align-self: flex-end;
}

body.psb-pres-portal-shell .psb-pres-medidas-canonical__diagram .psb-pres-form2026-medidas-diagram {
	margin: 0;
	line-height: 0;
}

body.psb-pres-portal-shell .psb-pres-medidas-canonical__diagram .psb-pres-form2026-medidas-diagram__svg {
	display: block;
	width: 42px;
	height: auto;
	max-width: 100%;
}

/* Separador ×: grande, con peso y centrado en la altura del input */
body.psb-pres-portal-shell .psb-pres-medidas-canonical__x,
body.psb-pres-portal-shell .psb-pres-fp-medidas-row > .psb-pres-fp-medidas-x {
	flex: 0 0 var(--psb-medidas-x-width);
	width: var(--psb-medidas-x-width);
	height: var(--psb-medidas-input-height);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	font-size: var(--psb-medidas-x-size);
	font-weight: 700;
	line-height: 1;
	color: #292524;
	user-select: none;
	align-self: flex-end;
}

body.psb-pres-portal-shell .psb-pres-medidas-canonical__hint {
	margin: 0.5rem 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #78716c;
}

/* —— Filas legacy (dl) homologadas al mismo patrón —— */
body.psb-pres-portal-shell .psb-pres-fp-medidas-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.35rem 0.55rem;
	width: 100%;
	min-width: 0;
}

body.psb-pres-portal-shell .psb-pres-fp-medidas-row .psb-pres-fp-medidas-field {
	flex: 1 1 0;
	min-width: 88px;
	max-width: var(--psb-medidas-field-max);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

body.psb-pres-portal-shell .psb-pres-fp-medidas-row .psb-pres-fp-medidas-field__input {
	min-height: var(--psb-medidas-input-height);
	width: 100%;
	box-sizing: border-box;
}

/* Anular grid / offsets de tandas anteriores en la fila compacta */
body.psb-pres-portal-shell .psb-pres-medidas-canonical__row--diagram,
body.psb-pres-portal-shell .psb-pres-medidas-canonical__row--diagram.psb-pres-medidas-canonical__row--extra {
	grid-template-columns: none;
}

body.psb-pres-portal-shell .psb-pres-medidas-canonical--embedded .psb-pres-medidas-canonical__row {
	width: 100%;
	min-width: 0;
}

@media (max-width: 520px) {
	body.psb-pres-portal-shell {
		--psb-medidas-x-size: 1.75rem;
		--psb-medidas-x-width: 2.35rem;
		--psb-medidas-icon-width: 40px;
	}

	body.psb-pres-portal-shell .psb-pres-medidas-canonical__field,
	body.psb-pres-portal-shell .psb-pres-fp-medidas-row .psb-pres-fp-medidas-field {
		max-width: none;
	}

	body.psb-pres-portal-shell .psb-pres-medidas-canonical__field--extra {
		flex: 1 1 100%;
		max-width: 160px;
	}

	body.psb-pres-portal-shell .psb-pres-medidas-canonical__diagram .psb-pres-form2026-medidas-diagram__svg {
		width: 34px;
	}
}