/**
 * Estilos del calculador de metro cuadrado.
 * Principio de diseño: NO se fuerzan fuentes ni colores de texto fijos,
 * se heredan del tema activo ("inherit" / "currentColor") para que el
 * bloque se vea nativo en cualquier plantilla de WordPress. Solo el
 * color de acento y el radio de bordes son configurables.
 */
.wcm2-calculator {
	--wcm2-primary: #2271b1;
	--wcm2-text: inherit;
	--wcm2-radius: 6px;

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--wcm2-radius);
	background: rgba(0, 0, 0, 0.02);
	font-family: inherit;
	color: var(--wcm2-text);
}

.wcm2-calculator * {
	box-sizing: border-box;
}

.wcm2-heading {
	margin: 0 0 0.75em;
	font-size: 1em;
	font-weight: 600;
	color: var(--wcm2-text);
}

.wcm2-price-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	margin: 0 0 1em;
	padding: 0.45em 0.9em;
	border-radius: calc(var(--wcm2-radius) * 0.8);
	background: rgba(0, 0, 0, 0.06);
	background: color-mix(in srgb, var(--wcm2-primary) 12%, transparent);
	font-size: 0.95em;
	font-weight: 600;
}

.wcm2-price-badge .wcm2-price-per-unit-value {
	font-size: 1.15em;
	font-weight: 800;
	color: var(--wcm2-primary);
}

.wcm2-toggle-direct {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0.75em;
	font-size: 0.9em;
	cursor: pointer;
}

.wcm2-fields-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0.5em;
	max-width: 100%;
	margin-bottom: 0.5em;
}

/* Los envoltorios de "ancho/alto" y "m² directo" no generan su propia
   caja: sus campos se integran como items directos de .wcm2-fields-row,
   así todo queda alineado en la misma fila. El JS solo alterna
   style.display entre '' (vuelve a este 'contents') y 'none'. */
.wcm2-row-dimensions,
.wcm2-row-direct {
	display: contents;
}

.wcm2-field {
	display: flex;
	flex: 0.85 1 0;
	min-width: 0;
	max-width: 100%;
	flex-direction: column;
	gap: 0.25em;
}

.wcm2-field label {
	font-size: 0.75em;
	opacity: 0.85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcm2-field-area {
	flex: 0.85 1 0;
}

.wcm2-field-units {
	flex: 0.55 1 0;
}

.wcm2-field-price {
	flex: 1.7 1 0;
}

.wcm2-result-box {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: 0.4em 0.35em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: calc(var(--wcm2-radius) * 0.6);
	background: rgba(0, 0, 0, 0.03);
	font-size: 0.9em;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcm2-result-box strong {
	font-weight: 800;
}

.wcm2-price-box {
	border-color: rgba(0, 0, 0, 0.2);
	border-color: color-mix(in srgb, var(--wcm2-primary) 35%, rgba(0, 0, 0, 0.12));
}

/* El precio nunca debe pasar a una segunda línea: se le da más espacio
   en la fila (ver .wcm2-field-price) y, si aun así el número es muy
   largo, la letra se reduce automáticamente. overflow queda en
   "hidden" (no "visible") como red de seguridad: así, en el peor caso
   extremo, el texto se recorta dentro de su propia caja en vez de
   desbordar y romper la retícula de la página. */
.wcm2-price-box {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.wcm2-price-box strong {
	font-size: clamp( 0.65em, 3vw, 1em );
}

.wcm2-input {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: 0.45em 0.4em;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: calc(var(--wcm2-radius) * 0.6);
	font-family: inherit;
	font-size: 0.95em;
	color: inherit;
	background: #fff;
}

.wcm2-input:focus {
	outline: none;
	border-color: var(--wcm2-primary);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.wcm2-price-value,
.wcm2-area-value {
	color: var(--wcm2-primary);
}

.wcm2-error-message {
	color: #c0392b;
	font-size: 0.85em;
	margin-top: 0.5em;
}

.wcm2-status-message {
	color: var(--wcm2-primary);
	font-size: 0.85em;
	margin-top: 0.5em;
}

.wcm2-calculator .wcm2-input.wcm2-invalid {
	border-color: #c0392b;
}

.wcm2-add-size-btn {
	display: inline-block;
	margin: 0.75em 0 0;
	padding: 0.5em 1em;
	border: 1px dashed var(--wcm2-primary);
	border-radius: calc(var(--wcm2-radius) * 0.7);
	background: transparent;
	color: var(--wcm2-primary);
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
}

.wcm2-add-size-btn:hover,
.wcm2-add-size-btn:focus {
	background: rgba(0, 0, 0, 0.04);
}

.wcm2-queue {
	margin-top: 1em;
	padding: 0.75em 1em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--wcm2-radius);
	background: rgba(0, 0, 0, 0.02);
}

.wcm2-queue-title {
	margin: 0 0 0.5em;
	font-weight: 600;
	font-size: 0.9em;
}

.wcm2-queue-list {
	list-style: none;
	margin: 0 0 0.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.wcm2-queue-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.4em 0.6em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: calc(var(--wcm2-radius) * 0.6);
	background: #fff;
	font-size: 0.9em;
}

.wcm2-queue-item-desc {
	flex: 1 1 auto;
	min-width: 0;
}

.wcm2-queue-item-price {
	font-weight: 700;
	color: var(--wcm2-primary);
	white-space: nowrap;
}

.wcm2-queue-item-remove {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	color: #c0392b;
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.2em 0.3em;
}

.wcm2-queue-total-row {
	margin: 0;
	padding-top: 0.5em;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
	font-size: 0.95em;
}

.wcm2-queue-total-value {
	color: var(--wcm2-primary);
	font-weight: 800;
}

/* Nivel intermedio: la fila sigue en una sola línea (Ancho, Alto,
   Unidades, Área, Precio), pero con paddings, espacios y letra aún más
   chicos, para columnas de producto angostas que todavía no ameritan
   apilar los campos en columna (eso ocurre recién bajo 600px). Esto
   evita que el bloque se desborde en anchos "intermedios" (por
   ejemplo, sidebars o temas con columnas de producto más angostas). */
@media (max-width: 900px) and (min-width: 601px) {
	.wcm2-fields-row {
		gap: 0.3em;
	}

	.wcm2-field label {
		font-size: 0.68em;
	}

	.wcm2-input {
		padding: 0.4em 0.3em;
		font-size: 0.85em;
	}

	.wcm2-result-box {
		padding: 0.35em 0.25em;
		font-size: 0.78em;
	}

	.wcm2-price-box strong {
		font-size: clamp( 0.6em, 2.6vw, 0.9em );
	}
}

@media (max-width: 600px) {
	.wcm2-calculator {
		padding: 0.85em 1em;
		margin: 0 0 1.25em;
	}

	.wcm2-heading {
		font-size: 0.95em;
	}

	.wcm2-price-badge {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		box-sizing: border-box;
		font-size: 0.9em;
		padding: 0.5em 0.75em;
	}

	.wcm2-fields-row {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 0.75em;
		margin-bottom: 0.6em;
	}

	.wcm2-field,
	.wcm2-field-area,
	.wcm2-field-units,
	.wcm2-field-price {
		width: 100%;
		flex: 1 1 100%;
		min-width: 0;
	}

	.wcm2-input {
		width: 100%;
		font-size: 16px; /* evita el zoom automático de iOS al enfocar */
		padding: 0.6em 0.7em;
	}

	.wcm2-result-box {
		width: 100%;
		white-space: normal;
	}

	.wcm2-add-size-btn {
		width: 100%;
		text-align: center;
	}

	.wcm2-queue-item {
		flex-direction: column;
		align-items: stretch;
	}
}