/* ==========================================================================
   Maqueta «Un día en la bodega, pantalla a pantalla» · todo bajo .mq-
   Recrea el aspecto de la aplicación de bodega (fondo crema, cabecera blanca,
   pestañas, tarjetas de depósito, cuaderno amarillo) dentro del tema, sin
   pisar su CSS ni al revés. Fuente del sistema, como la aplicación.
   ========================================================================== */

.mq {
	--mq-fondo: #f5f2ee;
	--mq-tinta: #2b2522;
	--mq-suave: #6b615b;
	--mq-borde: #e0d9d1;
	--mq-acento: #7a1f2b;
	--mq-blanco: #fff;
	font-family: "Segoe UI", system-ui, sans-serif;
	color: var(--mq-tinta);
}

.mq [hidden] {
	display: none !important;
}

/* Aviso de ejemplo encima del recorrido, con la letra del tema. */
.mq-aviso {
	max-width: 70ch;
	margin: 0 0 0.9rem;
	padding: 0.75rem 1rem;
	border: 1px solid #cfd8d4;
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #f3f5f4);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast, #14181a);
}

.mq-aviso strong {
	font-weight: 600;
}

/* --- Barra de pasos ------------------------------------------------------ */
.mq-pasos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.mq-pasos button {
	font: inherit;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid #e6e9e8;
	border-radius: 999px;
	background: var(--mq-blanco);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.mq-pasos button[aria-selected="true"] {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--mq-blanco);
}

/* --- Rótulos Antes / Ahora ------------------------------------------------ */
.mq-rotulos h3 {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
}

.mq-antes-ahora {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-bottom: 0.8rem;
}

.mq-antes-ahora p {
	margin: 0;
	padding: 0.6rem 0.8rem;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
}

.mq-antes-ahora .mq-antes {
	background: var(--wp--preset--color--surface);
}

.mq-antes-ahora .mq-ahora {
	background: #e3f3ec;
	color: #0a6048;
}

.mq-antes-ahora b {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mq-detalle {
	margin: 0.8rem 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
}

.mq-detalle b {
	color: #0a6048;
}

/* --- La ventana de la aplicación ----------------------------------------- */
.mq-ventana {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--mq-borde);
	border-radius: 12px;
	background: var(--mq-fondo);
}

.mq-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 0.8rem;
	padding: 0.6rem 0.9rem;
	background: var(--mq-blanco);
	border-bottom: 1px solid var(--mq-borde);
	font-size: 0.85rem;
	font-weight: 700;
}

/* El grupo y sus bodegas, como el nombre de la bodega en la aplicación. */
.mq-bodega-sel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.5rem;
}

.mq-bodegas {
	display: inline-flex;
	gap: 0.25rem;
}

.mq-bodega {
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--mq-borde);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--mq-suave);
}

.mq-bodega.mq-activa {
	border-color: var(--mq-acento);
	background: var(--mq-acento);
	color: var(--mq-blanco);
}

.mq-reloj {
	font-size: 0.75rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--mq-suave);
}

.mq-chapa {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: #eef0ef;
	color: #555;
	font-size: 0.7rem;
	font-weight: 600;
}

.mq-chapa-aviso {
	background: #fdf3e0;
	color: #8a5a00;
}

.mq-chapa-tarde {
	background: #fbe5e5;
	color: #a32323;
}

.mq-pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.4rem 0.6rem;
	background: var(--mq-blanco);
	border-bottom: 1px solid var(--mq-borde);
}

.mq-pestana {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--mq-borde);
	border-radius: 8px;
	background: var(--mq-blanco);
	color: var(--mq-suave);
	font-size: 0.78rem;
}

.mq-pestana.mq-activa {
	background: var(--mq-acento);
	border-color: var(--mq-acento);
	color: var(--mq-blanco);
	font-weight: 600;
}

.mq-cuerpo {
	padding: 0.8rem;
	padding-bottom: 3.2rem; /* sitio para el botón flotante */
}

.mq-cerebro-boton {
	position: absolute;
	right: 0.8rem;
	bottom: 0.8rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background: var(--mq-acento);
	color: var(--mq-blanco);
	font-size: 0.72rem;
	font-weight: 700;
}

/* --- Tarjetas de depósito (como en la aplicación) ------------------------ */
.mq-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr));
	gap: 0.5rem;
}

.mq-rejilla-corta {
	grid-template-columns: repeat(2, minmax(7.2rem, 1fr));
}

.mq-dep {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0.35rem 0.5rem 0.4rem;
	border: 1px solid var(--mq-borde);
	border-top: 4px solid var(--mq-vino, #cfc6bb);
	border-radius: 8px;
	background: var(--mq-blanco);
	font-size: 0.7rem;
}

.mq-dep.mq-vacio {
	opacity: 0.5;
}

.mq-dep-cab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px 4px;
}

.mq-dep-nombre {
	font-size: 0.8rem;
	font-weight: 700;
}

/* La añada, en su color (como la etiqueta de la tarjeta en la aplicación). */
.mq-dep-anada {
	padding: 0 0.25rem;
	border-radius: 4px;
	background: var(--mq-vino, #f2ede6);
	font-size: 0.66rem;
	font-weight: 700;
	color: var(--mq-anada-texto, var(--mq-suave));
}

.mq-dep-estado {
	padding: 0 4px;
	border-radius: 4px;
	background: #f2f2f2;
	color: #a85300; /* 4,8:1 sobre #f2f2f2 (el naranja de la app, #fa7d00, daba 2,4:1) */
	font-size: 0.62rem;
	font-weight: 800;
	white-space: nowrap;
}

.mq-dep-litros {
	font-size: 0.78rem;
	font-weight: 600;
}

.mq-llenado {
	display: block;
	height: 5px;
	overflow: hidden;
	border-radius: 99px;
	background: #eee7de;
}

.mq-llenado i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--mq-vino, #cfc6bb);
}

.mq-dep-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 14px;
}

.mq-so2 {
	font-size: 0.66rem;
	color: var(--mq-suave);
}

.mq-dias {
	display: inline-block;
	padding: 0.05rem 0.45rem;
	border-radius: 99px;
	font-size: 0.64rem;
	font-weight: 700;
}

.mq-dias-ok {
	background: #e8f3e8;
	color: #1f6b2d;
}

.mq-dias-aviso {
	background: #fdf3e0;
	color: #8a5a00;
}

.mq-dias-tarde {
	background: #fbe5e5;
	color: #a32323;
}

/* --- Tablas: el cuaderno (cabecera amarilla, SO₂L verde), el cierre ------ */
.mq-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
}

.mq-tabla th {
	padding: 0.25rem 0.35rem;
	background: #fc0;
	color: #382f2d;
	text-align: left;
	font-weight: 700;
}

.mq-tabla td {
	padding: 0.25rem 0.35rem;
	border-bottom: 1px solid #eee;
	background: var(--mq-blanco);
	font-weight: 600;
}

.mq-tabla td.mq-so2l {
	background: #d8ff8b;
}

.mq-tabla tr.mq-total td {
	font-weight: 800;
	border-top: 2px solid var(--mq-tinta);
}

.mq-diferencia-ok {
	color: #1f6b2d;
}

.mq-diferencia-mal {
	color: #a32323;
}

.mq-pie-tabla {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: var(--mq-suave);
}

/* --- Dos columnas, ficha, formulario ------------------------------------- */
.mq-dos {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 0.8rem;
}

.mq-ficha {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--mq-borde);
	border-radius: 10px;
	background: var(--mq-blanco);
	font-size: 0.75rem;
}

.mq-ficha h4,
.mq-cuerpo h4 {
	margin: 0.6rem 0 0.2rem;
	font-size: 0.75rem;
}

.mq-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	align-content: start;
	font-size: 0.72rem;
}

.mq-form label {
	display: block;
	color: var(--mq-suave);
}

.mq-campo {
	display: inline-block;
	margin-top: 2px;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--mq-borde);
	border-radius: 6px;
	background: var(--mq-blanco);
	color: var(--mq-tinta);
}

.mq-form .mq-campo {
	display: block;
}

.mq-boton {
	display: inline-block;
	padding: 0.35rem 0.8rem;
	border-radius: 6px;
	background: var(--mq-acento);
	color: var(--mq-blanco);
	font-size: 0.75rem;
	font-weight: 600;
}

.mq-boton-sec {
	border: 1px solid var(--mq-borde);
	background: var(--mq-blanco);
	color: var(--mq-tinta);
}

.mq-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

/* --- Vendimia: la foto, la flecha, el semáforo --------------------------- */
.mq-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	border-radius: 8px;
	background: #ddd;
	color: #555;
	font-size: 0.75rem;
}

.mq-flecha {
	padding: 0.3rem 0;
	text-align: center;
	color: var(--wp--preset--color--primary);
	font-size: 1.2rem;
	font-weight: 700;
}

.mq-suma {
	display: inline-block;
	margin: 0.5rem 0 0;
	padding: 0.3rem 0.5rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 700;
}

.mq-suma-ok {
	background: #e8f3e8;
	color: #1f6b2d;
}

.mq-suma-mal {
	background: #fbe5e5;
	color: #a32323;
}

/* --- Listas (historial, calendario) -------------------------------------- */
.mq-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
}

.mq-lista li {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid #eee;
}

.mq-lista li > span:last-child {
	flex-shrink: 0;
	white-space: nowrap; /* «26.500 L» no se parte en dos líneas */
}

/* --- El cerebro: pregunta, respuesta, fuentes ---------------------------- */
.mq-chat {
	display: grid;
	gap: 0.5rem;
	font-size: 0.75rem;
}

.mq-pregunta {
	max-width: 80%;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--mq-borde);
	border-radius: 10px;
	background: var(--mq-blanco);
}

.mq-respuesta {
	padding: 0.5rem 0.7rem;
	border-radius: 10px;
	background: #e3f3ec;
}

.mq-fuentes {
	margin-top: 0.4rem;
	padding-left: 0.6rem;
	border-left: 3px solid var(--wp--preset--color--primary);
	color: #0a6048;
	font-size: 0.7rem;
}

/* --- Navegación y pie ---------------------------------------------------- */
.mq-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: 1rem;
}

.mq-nav button {
	font: inherit;
	font-family: var(--wp--preset--font-family--sans);
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	background: var(--mq-blanco);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.mq-nav .mq-siguiente {
	background: var(--wp--preset--color--primary);
	color: var(--mq-blanco);
}

.mq-nav button[disabled] {
	opacity: 0.4;
	cursor: default;
}

.mq-contador {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

.mq-pie-recorrido {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

/* --- El «después» aparece con un pequeño fundido -------------------------- */
.mq-cambiado .mq-estado-despues {
	animation: mq-aparece 0.6s ease;
}

@keyframes mq-aparece {

	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mq * {
		animation: none !important;
		transition: none !important;
	}
}

/* --- Sin JavaScript: el primer momento entero y rótulos de otros --- */
.mq:not(.mq-js) .mq-pasos,
.mq:not(.mq-js) .mq-nav,
.mq:not(.mq-js) .mq-paso:not(:first-of-type) .mq-ventana,
.mq:not(.mq-js) .mq-paso:not(:first-of-type) .mq-detalle {
	display: none;
}

.mq:not(.mq-js) .mq-paso {
	margin-bottom: 1.5rem;
}

/* --- Móvil: la rejilla refluye a tres por fila, como la aplicación -------- */
@media (max-width: 700px) {

	.mq-cuerpo {
		padding-bottom: 3.6rem; /* el botón flotante no pisa la última fila de tarjetas */
	}

	.mq-dos {
		grid-template-columns: 1fr;
	}

	.mq-antes-ahora {
		grid-template-columns: 1fr;
	}

	.mq-rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mq-tabla {
		display: block;
		overflow-x: auto;
	}

	.mq-pregunta {
		max-width: 100%;
	}
}