/*
 * Malvón – Cinta de estado
 * Todos los valores salen de las variables --mlv-*. Para cambiar colores o tipografía
 * desde el tema, redefiní estas variables en :root (por ejemplo en extras.css).
 */
:root {
	--mlv-cinta-abierta: #008080;
	--mlv-cinta-ultimas: #d6764b;
	--mlv-cinta-completo: #2e211b;
	--mlv-cinta-proximamente: #8a6a57;
	--mlv-cinta-online: #00abab;
	--mlv-cinta-texto: #ffffff;

	--mlv-cinta-fuente: "Cinzel", serif;
	--mlv-cinta-peso: 700;
	--mlv-cinta-tam-fuente: 0.9rem;
	--mlv-cinta-espaciado: 0.11em;
	--mlv-cinta-interlinea: 1.2;

	--mlv-cinta-pad-y: 0.55em;
	--mlv-cinta-pad-x: 1em;
	--mlv-cinta-sombra: 0 2px 4px rgb(0 0 0 / 35%);
	--mlv-cinta-z: 5;

	/* Cinta diagonal: tamaño de la esquina y proporciones de la banda */
	--mlv-cinta-diagonal: 170px;
	--mlv-cinta-diag-centro: 0.388;
	--mlv-cinta-diag-grosor: 0.265;
	--mlv-cinta-diag-fuente: 0.0765;
}

/* El widget flota sobre la tarjeta (el contenedor padre de Elementor es position: relative). */
.elementor .elementor-widget-malvon_cinta_estado {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--mlv-cinta-z);
	margin: 0;
	pointer-events: none;
}

.mlv-cinta {
	--mlv-cinta-color: var(--mlv-cinta-abierta);

	color: var(--mlv-cinta-texto);
	font-family: var(--mlv-cinta-fuente);
	font-weight: var(--mlv-cinta-peso);
	font-size: var(--mlv-cinta-tam-fuente);
	letter-spacing: var(--mlv-cinta-espaciado);
	line-height: var(--mlv-cinta-interlinea);
	text-transform: uppercase;
}

.mlv-cinta--abierta { --mlv-cinta-color: var(--mlv-cinta-abierta); }
.mlv-cinta--ultimas { --mlv-cinta-color: var(--mlv-cinta-ultimas); }
.mlv-cinta--completo { --mlv-cinta-color: var(--mlv-cinta-completo); }
.mlv-cinta--proximamente { --mlv-cinta-color: var(--mlv-cinta-proximamente); }
.mlv-cinta--online { --mlv-cinta-color: var(--mlv-cinta-online); }

/* ---------- Horizontal ---------- */
.mlv-cinta--horizontal {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: var(--mlv-cinta-pad-y) var(--mlv-cinta-pad-x);
	background: var(--mlv-cinta-color);
	text-align: center;
}

/* ---------- Diagonal ---------- */
.mlv-cinta--diagonal {
	position: relative;
	width: var(--mlv-cinta-diagonal);
	height: var(--mlv-cinta-diagonal);
	overflow: hidden;
	font-size: calc(var(--mlv-cinta-diagonal) * var(--mlv-cinta-diag-fuente));
	line-height: 1.15;
}

.mlv-cinta--diagonal .mlv-cinta__banda {
	position: absolute;
	top: calc(var(--mlv-cinta-diagonal) * var(--mlv-cinta-diag-centro));
	left: calc(var(--mlv-cinta-diagonal) * var(--mlv-cinta-diag-centro));
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--mlv-cinta-diagonal) * 2);
	height: calc(var(--mlv-cinta-diagonal) * var(--mlv-cinta-diag-grosor));
	background: var(--mlv-cinta-color);
	box-shadow: var(--mlv-cinta-sombra);
	text-align: center;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.mlv-cinta--diagonal.mlv-cinta--derecha {
	margin-left: auto;
}

.mlv-cinta--diagonal.mlv-cinta--derecha .mlv-cinta__banda {
	left: calc(var(--mlv-cinta-diagonal) * (1 - var(--mlv-cinta-diag-centro)));
	transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- Diagonal en escritorio, horizontal en móvil (opcional) ---------- */
.mlv-cinta--solo-movil {
	display: none;
}

@media (max-width: 767px) {
	.mlv-cinta-grupo--movil-h .mlv-cinta--diagonal {
		display: none;
	}

	.mlv-cinta-grupo--movil-h .mlv-cinta--solo-movil {
		display: block;
	}
}

/* En el editor la cinta se puede seleccionar con un clic. */
.elementor-editor-active .mlv-cinta--horizontal,
.elementor-editor-active .mlv-cinta__banda {
	pointer-events: auto;
}