/* Calculadora de peso METALLI
   Los colores y la tipografía toman los globales del kit de Elementor
   (kit 8 — "Aquos"); los hex sólo actúan de reserva si el kit no está cargado. */

.mcp {
	--mcp-azul:        var(--e-global-color-primary, #103E89);
	--mcp-amarillo:    var(--e-global-color-dd4880d, #FBCE41);
	--mcp-gris:        var(--e-global-color-6e60f07, #F3F3F3);
	--mcp-gris-oscuro: var(--e-global-color-1c6f001, #E6E6E6);
	--mcp-texto:       var(--e-global-color-f5f322a, #313139);
	--mcp-texto-suave: var(--e-global-color-text, #5B5B5B);
	--mcp-blanco:      var(--e-global-color-af7fdac, #FFFFFF);
	--mcp-fuente:      var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;

	font-family: var(--mcp-fuente);
	color: var(--mcp-texto);
	max-width: 1100px;
	margin: 0 auto;
}

/* Dentro de Elementor manda el ancho del container, no el del componente. */
.mcp--elementor { max-width: none; }

/* Contenedor propio del shortcode: mismo ancho que los containers del kit. */
.mcp-wrap {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* Página con la calculadora servida por la plantilla de Hello Elementor:
   le damos el aire y el título que tienen las páginas armadas con Elementor. */
.mcp-page .site-main { padding-bottom: 70px; }

.mcp-page .page-header {
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 20px 30px;
	text-align: center;
}

.mcp-page .page-header .entry-title {
	font-family: var(--e-global-typography-secondary-font-family, 'Montserrat'), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size, 37px);
	font-weight: var(--e-global-typography-secondary-font-weight, 400);
	letter-spacing: var(--e-global-typography-secondary-letter-spacing, -1px);
	color: var(--e-global-color-primary, #103E89);
	text-transform: uppercase;
	margin: 0;
}

.mcp-page .page-header .entry-title::after {
	content: "";
	display: block;
	width: 70px;
	height: 4px;
	margin: 18px auto 0;
	background: var(--e-global-color-dd4880d, #FBCE41);
}

/* Encabezado propio (widget de Elementor con título/bajada) */
.mcp .mcp__encabezado { margin-bottom: 32px; }

.mcp .mcp__encabezado-titulo {
	font-family: var(--e-global-typography-secondary-font-family, 'Montserrat'), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size, 37px);
	font-weight: var(--e-global-typography-secondary-font-weight, 400);
	color: var(--mcp-azul);
	text-transform: uppercase;
	margin: 0 0 10px;
}

.mcp .mcp__encabezado-bajada {
	font-size: 15px;
	color: var(--mcp-texto-suave);
	margin: 0;
}

.mcp .mcp__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

@media (max-width: 1024px) {
	.mcp .mcp__grid { gap: 32px; }
}

@media (max-width: 767px) {
	.mcp .mcp__grid { grid-template-columns: 1fr; gap: 24px; }
	.mcp-page .page-header { padding: 34px 20px 22px; }
}

.mcp .mcp__titulo {
	font-family: var(--mcp-fuente);
	font-size: 18px;
	font-weight: 600;
	color: var(--mcp-azul);
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.mcp .mcp__titulo + .mcp__titulo,
.mcp .mcp__formas + .mcp__titulo,
.mcp .mcp__materiales + .mcp__titulo {
	margin-top: 28px;
}

/* Cabecera del paso de medidas: título a la izquierda, switch a la derecha */
.mcp .mcp__medidas-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.mcp .mcp__medidas-cabecera .mcp__titulo { margin-bottom: 0; }

.mcp .mcp__unidades {
	display: inline-flex;
	padding: 3px;
	border: 2px solid var(--mcp-gris-oscuro);
	border-radius: 999px;
	background: var(--mcp-gris);
}

.mcp .mcp__unidad {
	font-family: var(--mcp-fuente);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	min-width: 44px;
	padding: 8px 14px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--mcp-texto-suave);
	text-transform: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.mcp .mcp__unidad:hover { color: var(--mcp-azul); }

.mcp .mcp__unidad.is-active {
	background: var(--mcp-azul);
	color: var(--mcp-blanco);
}

.mcp .mcp__unidad:focus-visible {
	outline: 2px solid var(--mcp-amarillo);
	outline-offset: 2px;
}

.mcp .mcp__ayuda {
	font-size: 13px;
	color: var(--mcp-texto-suave);
	margin: 0 0 16px;
}

/* Grupo con una sola opción: el PHP lo manda oculto y hay que ganarle al
   display:flex/grid de más abajo, que si no anula el atributo [hidden]. */
.mcp .mcp__materiales[hidden],
.mcp .mcp__formas[hidden] { display: none; }

/* Materiales */
.mcp .mcp__materiales {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mcp .mcp__material {
	font-family: var(--mcp-fuente);
	font-size: 13px;
	font-weight: 500;
	padding: 10px 16px;
	border: 2px solid var(--mcp-gris-oscuro);
	border-radius: 999px;
	background: var(--mcp-blanco);
	color: var(--mcp-texto);
	cursor: pointer;
	transition: all .15s ease;
}

.mcp .mcp__material:hover { border-color: var(--mcp-azul); }

.mcp .mcp__material:focus-visible,
.mcp .mcp__forma:focus-visible {
	outline: 2px solid var(--mcp-amarillo);
	outline-offset: 2px;
}

.mcp .mcp__material.is-active {
	background: var(--mcp-azul);
	border-color: var(--mcp-azul);
	color: var(--mcp-blanco);
}

/* Formas */
.mcp .mcp__formas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

/* El PHP calcula las columnas según cuántas formas queden, para no dejar
   una tarjeta huérfana en la última fila (4 formas → 2×2). */
.mcp .mcp__formas[data-columnas="1"] { grid-template-columns: 1fr; }
.mcp .mcp__formas[data-columnas="2"] { grid-template-columns: repeat(2, 1fr); }
.mcp .mcp__formas[data-columnas="3"] { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 479px) {
	.mcp .mcp__formas,
	.mcp .mcp__formas[data-columnas] { grid-template-columns: repeat(2, 1fr); }
}

.mcp .mcp__forma {
	font-family: var(--mcp-fuente);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 8px;
	border: 2px solid var(--mcp-gris-oscuro);
	border-radius: 10px;
	background: var(--mcp-blanco);
	cursor: pointer;
	transition: all .15s ease;
}

.mcp .mcp__forma svg {
	width: 40px;
	height: 40px;
	fill: none;
	stroke: var(--mcp-texto);
	stroke-width: 2.5;
	transition: stroke .15s ease;
}

.mcp .mcp__forma span {
	font-size: 12px;
	font-weight: 500;
	color: var(--mcp-texto);
	text-align: center;
	line-height: 1.25;
}

.mcp .mcp__forma:hover { border-color: var(--mcp-azul); }

.mcp .mcp__forma.is-active {
	border-color: var(--mcp-azul);
	background: var(--mcp-azul);
}

.mcp .mcp__forma.is-active svg { stroke: var(--mcp-amarillo); }
.mcp .mcp__forma.is-active span { color: var(--mcp-blanco); }

/* Campos */
.mcp .mcp__campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.mcp .mcp__campo { display: flex; flex-direction: column; gap: 6px; }

.mcp .mcp__campo label {
	font-size: 13px;
	font-weight: 600;
	color: var(--mcp-texto);
}

/* height/box-shadow explícitos: Hello Elementor y WooCommerce estilan
   los input[type=number] y si no los neutralizamos deforman el campo. */
.mcp .mcp__campo input {
	font-family: var(--mcp-fuente);
	font-size: 16px;
	padding: 11px 14px;
	border: 2px solid var(--mcp-gris-oscuro);
	border-radius: 8px;
	background: var(--mcp-gris);
	color: var(--mcp-texto);
	width: 100%;
	height: auto;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Campos de medida fija (espesor de planchuela): mismo aspecto que los
   inputs, con la flecha del desplegable dibujada a mano para que no dependa
   del estilo nativo del navegador. */
.mcp .mcp__campo select {
	font-family: var(--mcp-fuente);
	font-size: 16px;
	padding: 11px 38px 11px 14px;
	border: 2px solid var(--mcp-gris-oscuro);
	border-radius: 8px;
	background-color: var(--mcp-gris);
	color: var(--mcp-texto);
	width: 100%;
	height: auto;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23313139' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

.mcp .mcp__campo select:focus {
	outline: none;
	border-color: var(--mcp-azul);
	background-color: var(--mcp-blanco);
	box-shadow: none;
}

.mcp .mcp__campo input::-webkit-outer-spin-button,
.mcp .mcp__campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mcp .mcp__campo input:focus {
	outline: none;
	border-color: var(--mcp-azul);
	background: var(--mcp-blanco);
	box-shadow: none;
}

.mcp .mcp__campo--cantidad { margin-top: 14px; }

/* Resultado */
.mcp .mcp__resultado {
	margin-top: 24px;
	border: 2px solid var(--mcp-azul);
	border-radius: 10px;
	overflow: hidden;
	background: var(--mcp-blanco);
}

.mcp .mcp__resultado-fila {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--mcp-gris-oscuro);
}

.mcp .mcp__resultado-fila strong { font-weight: 600; font-size: 16px; }

.mcp .mcp__resultado-fila--total {
	background: var(--mcp-azul);
	color: var(--mcp-blanco);
	border-bottom: none;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.mcp .mcp__resultado-fila--total strong {
	color: var(--mcp-amarillo);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
}

.mcp .mcp__nota {
	margin-top: 14px;
	font-size: 12px;
	color: var(--mcp-texto-suave);
	line-height: 1.5;
}