/*Sección inicial*/
.seccionuno {
	font-family: 'Montserrat', Arial;
	padding: 0;

	.ventajas-imagen {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		/* En vertical, bloque normal: un flex en columna calcula mal la altura de la maqueta (container query) */
		@media screen and (orientation: portrait) {
			display: block;
		}
		/* Rejilla industrial suave de fondo */
		background:
			linear-gradient(90deg, #f4f4f3 0%, #f4f4f3 45%, rgba(244, 244, 243, 0.6) 100%),
			repeating-linear-gradient(0deg, transparent 0 39px, #e2e2e0 39px 40px),
			repeating-linear-gradient(90deg, transparent 0 39px, #e2e2e0 39px 40px);

		.ventajas {
			@media screen and (orientation: portrait) {
				padding: 4em 1.5em 2em;
			}

			/* PC */
			@media screen and (orientation: landscape) {
				padding: 5em 2% 5em 8%;
			}

			min-width: min(100%, 22em);

			@media screen and (orientation: landscape) {
				flex: 0 1 40%;
			}
		}

		.imagen {
			display: flex;

			@media screen and (orientation: landscape) {
				flex: 1 1 55%;
			}
			justify-content: center;
			min-width: min(100%, 22em);

			@media screen and (orientation: portrait) {
				padding: 3em 1em 9em;
			}

			@media screen and (orientation: landscape) {
				padding: 5em 5% 10em 3em;
			}
		}

		.logo_seccion1 {
			width: 7em;
		}

		h1 {
			font-size: 2.75em;
			line-height: 125%;
		}

		.ventajas p,
		.ventajas ul {
			font-weight: 500;
			font-size: 1.3em;
		}

		.ventajas ul {
			list-style-type: none;
			padding-left: 0;

			li {
				padding-left: 2em;
				margin-top: 0.5em;

				background-image: url('../assets/img/icons/guion.svg');
				background-size: 1.3em 0.85em;
				background-repeat: no-repeat;
				background-position-y: 0.35em;
			}
		}
	}

	/* Franja con las tres fases del proceso */
	.proceso-franja {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		color: white;

		@media screen and (max-width: 767px) {
			grid-template-columns: 1fr;
		}

		> a {
			display: flex;
			gap: 1em;
			align-items: center;
			padding: 1.5em 2em;
			color: inherit;
			text-decoration: none;
			position: relative;

			&:hover {
				text-decoration: none;
				filter: brightness(1.1);
			}

			span.num {
				font-size: 2.5em;
				font-weight: 700;
				line-height: 1;
			}

			b {
				display: block;
				font-size: 1.15em;
			}

			small {
				font-family: 'Roboto', Arial;
				font-size: 0.95em;
				opacity: 0.85;
			}
		}

		.bgRojo {
			background-color: #c3253c;
		}

		.bgGris {
			background-color: #4A4A4A;
		}

		.bgNegro {
			background-color: black;
		}
	}
}

/* Maqueta del panel BI + terminal de operario (datos ficticios) */
.escena {
	--rojo: #c3253c;
	--verde: #2e9d5b;
	--ambar: #e0a100;
	--oscuro: #1c1c1c;

	position: relative;
	width: 100%;
	max-width: 62em;
	container-type: inline-size;
	font-family: 'Roboto', Arial;
	/* La maqueta escala con la pantalla, como si fuera una imagen */
	font-size: clamp(8.5px, 0.95vw, 15px);

	@media screen and (orientation: portrait) {
		font-size: clamp(8.5px, 2.3vw, 14px);
	}

	svg {
		display: block;
	}

	/* Anillos de progreso (OEE y terminal) */
	.fondo {
		fill: none;
		stroke: #eee;
		stroke-width: 7;
	}

	.valor {
		fill: none;
		stroke: var(--rojo);
		stroke-width: 7;
		stroke-linecap: round;
		transition: stroke-dasharray 0.6s;
	}
}

/* Chip flotante del sensor */
.chip-sensor {
	position: absolute;
	top: -2.2em;
	left: 14em;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.8em;
	background: white;
	border-radius: 3em;
	padding: 0.6em 1.4em 0.6em 0.7em;
	box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.18);
	font-size: 1.05em;
	color: #808080;
	animation: flotar 5s ease-in-out infinite;

	svg {
		width: 2.6em;
		height: 2.6em;
		padding: 0.45em;
		border-radius: 50%;
		background: var(--rojo);
		stroke: white;
		fill: none;
		stroke-width: 2.4;
		stroke-linecap: round;
		box-shadow: 0 0 0 0 rgba(195, 37, 60, 0.5);
		animation: onda 2s ease-out infinite;

		.acento {
			stroke: white;
			fill: white;
		}
	}

	b {
		display: block;
		color: black;
		font-family: 'Montserrat', Arial;
	}
}

.panel-bi {
	width: 100%;
	background: #f6f6f5;
	border-radius: 1em;
	border: 0.55em solid var(--oscuro);
	box-shadow: -2em 2.5em 4em rgba(0, 0, 0, 0.22);
	overflow: hidden;

	.barra {
		display: flex;
		align-items: center;
		gap: 2em;
		/* Mismo color que el fondo opaco del logo negativo */
		background: #141414;
		color: #b5b5b5;
		padding: 0.7em 1.4em 0.9em;

		img {
			height: 2.4em;
			width: auto;
		}

		nav {
			display: flex;
			gap: 0.4em;
			flex: 1;

			span {
				padding: 0.4em 0.9em;
				border-radius: 0.4em;
			}

			.activa {
				background: rgba(255, 255, 255, 0.1);
				color: white;
				box-shadow: inset 0 -0.2em 0 var(--rojo);
			}
		}

		.vivo {
			display: flex;
			align-items: center;
			gap: 0.6ch;
			white-space: nowrap;

			&::before {
				content: '';
				width: 0.65em;
				height: 0.65em;
				border-radius: 50%;
				background: var(--verde);
				animation: latido 1.6s ease-in-out infinite;
			}
		}
	}

	.cuerpo {
		padding: 1.2em;
		display: grid;
		gap: 1em;
	}

	/* Fila de indicadores */
	.kpis {
		display: grid;
		grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
		gap: 0.8em;

		> div {
			background: white;
			border-radius: 0.6em;
			padding: 0.8em 1em;
			box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.06);
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		span {
			display: block;
			color: #808080;
			font-size: 0.9em;
		}

		b {
			display: block;
			font-family: 'Montserrat', Arial;
			font-size: 1.9em;
			line-height: 1.15;
		}

		small {
			display: block;
			font-size: 0.8em;
			color: #808080;
		}

		.sube {
			color: var(--verde);
		}

		/* Barra de progreso de cada indicador */
		i {
			display: block;
			height: 0.35em;
			border-radius: 1em;
			margin-top: 0.5em;
			background: linear-gradient(90deg, #4A4A4A var(--v), #e6e6e6 var(--v));
		}

		.piezas i {
			background: linear-gradient(90deg, var(--rojo) var(--v), #e6e6e6 var(--v));
		}

		.oee {
			flex-direction: row;
			align-items: center;
			gap: 0.8em;

			svg {
				width: 4.4em;
				height: 4.4em;
				flex-shrink: 0;
			}

			b {
				font-size: 2.2em;
			}
		}
	}

	/* Gráficas */
	.graficas {
		display: grid;
		grid-template-columns: 1.7fr 1fr;
		gap: 0.8em;
	}

	.tarjeta-graf {
		background: white;
		border-radius: 0.6em;
		padding: 0.9em 1em;
		box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.06);

		h6 {
			font-family: 'Montserrat', Arial;
			font-size: 1em;
			color: #333;
			margin-bottom: 0.6em;
			display: flex;
			justify-content: space-between;
			align-items: center;

			span {
				font-family: 'Roboto', Arial;
				font-weight: normal;
				font-size: 0.85em;
				color: #808080;
				display: flex;
				align-items: center;
				gap: 0.4em;
			}
		}

		.ley-real,
		.ley-obj {
			display: inline-block;
			width: 0.9em;
			height: 0.9em;
			border-radius: 0.2em;
			background: #4A4A4A;
		}

		.ley-obj {
			height: 0;
			border-top: 0.15em dashed var(--rojo);
			border-radius: 0;
			margin-left: 0.6em;
		}
	}

	.barras {
		width: 100%;
		height: auto;

		.rejilla path {
			stroke: #eee;
			stroke-width: 1;
		}

		.eje text {
			font-size: 8px;
			fill: #9a9a9a;
			text-anchor: end;
		}

		.horas text {
			text-anchor: middle;
		}

		.real rect {
			fill: #4A4A4A;
		}

		.real .bajo {
			fill: var(--rojo);
		}

		.real .actual {
			fill: #9a9a9a;
			transition: y 0.6s, height 0.6s;
		}

		.objetivo {
			stroke: var(--rojo);
			stroke-width: 1.4;
			stroke-dasharray: 5 4;
		}
	}

	.pareto ul {
		list-style: none;
		padding: 0;
		display: grid;
		gap: 0.65em;

		li {
			display: grid;
			grid-template-columns: 8.5em 1fr 2em;
			align-items: center;
			gap: 0.6em;
			font-size: 0.9em;
			color: #4A4A4A;
		}

		i {
			height: 0.9em;
			border-radius: 0.2em;
			background: linear-gradient(90deg, var(--rojo) var(--v), transparent var(--v));
		}

		li:not(:first-child) i {
			background: linear-gradient(90deg, #4A4A4A var(--v), transparent var(--v));
		}

		b {
			text-align: right;
		}
	}

	/* Tabla de líneas */
	.lineas {
		background: white;
		border-radius: 0.6em;
		box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.06);
		padding: 0.3em 1em;

		> div {
			display: grid;
			grid-template-columns: 0.9fr 1.1fr 1fr 1.6fr 1fr;
			align-items: center;
			gap: 0.8em;
			padding: 0.55em 0;
			border-bottom: 1px solid #f0f0f0;
			font-size: 0.95em;
			color: #4A4A4A;

			&:last-child {
				border-bottom: none;
			}
		}

		.cab {
			font-size: 0.8em;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: #9a9a9a;
		}

		.avance {
			display: flex;
			align-items: center;
			gap: 0.6em;

			i {
				flex: 1;
				height: 0.5em;
				border-radius: 1em;
				background: linear-gradient(90deg, #4A4A4A var(--v), #e6e6e6 var(--v));
			}

			em {
				font-style: normal;
				width: 2.6em;
				text-align: right;
			}
		}

		.ritmo svg {
			width: 100%;
			height: 1.4em;

			path {
				fill: none;
				stroke: var(--verde);
				stroke-width: 1.5;
				stroke-linejoin: round;
			}

			.caida {
				stroke: var(--rojo);
			}

			.aviso {
				stroke: var(--ambar);
			}
		}

		.estado {
			justify-self: start;
			padding: 0.2em 0.7em;
			border-radius: 1em;
			font-size: 0.85em;
			font-weight: 500;
			white-space: nowrap;
		}

		.marcha {
			background: #e3f3ea;
			color: #1f7a45;
		}

		.paro {
			background: #f9e1e4;
			color: var(--rojo);
		}

		.aviso {
			background: #fbf0d4;
			color: #8a6400;
		}
	}
}

/* Terminal de operario superpuesto */
.terminal {
	position: absolute;
	right: -2.5em;
	bottom: -8em;
	width: 12.5em;
	z-index: 2;
	background: var(--oscuro);
	border-radius: 1.2em;
	padding: 0.6em;
	box-shadow: -1em 1.5em 3em rgba(0, 0, 0, 0.3);
	animation: flotar 6s ease-in-out infinite reverse;

	@media screen and (orientation: portrait) {
		right: 1em;
	}

	.pantalla {
		background: white;
		border-radius: 0.7em;
		padding: 0.9em;
		display: flex;
		flex-direction: column;
		gap: 0.2em;
	}

	.t-cab {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.85em;
		color: #808080;
		margin-bottom: 0.4em;
	}

	.nfc {
		display: flex;
		align-items: center;
		gap: 0.3em;
		color: #1f7a45;
		font-weight: 500;

		svg {
			width: 1.3em;
			height: 1.3em;
			fill: none;
			stroke: currentColor;
			stroke-width: 3;
			stroke-linecap: round;
		}
	}

	.t-of {
		font-family: 'Montserrat', Arial;
		font-size: 1.4em;
	}

	.t-fase {
		color: #808080;
		font-size: 0.9em;
	}

	.t-progreso {
		position: relative;
		width: 5.6em;
		height: 5.6em;
		margin: 0.4em auto;

		svg {
			width: 100%;
			height: 100%;
		}

		> span {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #808080;
			font-size: 0.85em;

			b {
				font-family: 'Montserrat', Arial;
				font-size: 1.9em;
				color: black;
				line-height: 1;
			}
		}
	}

	.t-boton {
		background: var(--rojo);
		color: white;
		text-align: center;
		border-radius: 0.4em;
		padding: 0.6em;
		font-weight: 500;
		font-size: 0.9em;
	}
}

/* Pantallas estrechas: la maqueta se reorganiza */
@container (width < 44em) {
	.panel-bi {
		.barra nav {
			display: none;
		}

		/* Más compacta: OEE y piezas arriba, el resto debajo; sin el pareto */
		.kpis {
			grid-template-columns: repeat(6, 1fr);

			> div {
				grid-column: span 2;
			}

			.oee,
			.piezas {
				grid-column: span 3;
			}

			.piezas {
				order: -1;
			}

			.oee svg {
				width: 3.6em;
				height: 3.6em;
			}

			.oee b {
				font-size: 1.9em;
			}
		}

		.graficas {
			grid-template-columns: 1fr;
		}

		.pareto {
			display: none;
		}

		.lineas > div {
			grid-template-columns: 1fr 1.1fr 1.4fr 0.9fr;

			> :nth-child(3) {
				display: none;
			}
		}
	}

	.chip-sensor {
		left: auto;
		right: 1em;
	}

	.terminal {
		position: relative;
		left: auto;
		bottom: auto;
		width: 17em;
		margin: -3em 0 0 auto;
	}
}

@keyframes latido {
	50% {
		opacity: 0.3;
	}
}

@keyframes flotar {
	50% {
		transform: translateY(-0.5em);
	}
}

@keyframes onda {
	70% {
		box-shadow: 0 0 0 0.8em rgba(195, 37, 60, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(195, 37, 60, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.escena *,
	.chip-sensor,
	.terminal {
		animation: none !important;
		transition: none !important;
	}
}