/**
 * Plano de la sala compartida (micelium-plano.js). Lo usan la ficha y el «Mapa de mesas» del admin.
 * Los colores salen de variables para que cada página los ajuste; los de por defecto son los de la web.
 */
.mp-plano {
	--mp-azul: #024B94;
	--mp-azul-vivo: #0054CA;
	--mp-azul-suave: #EAF1F9;
	--mp-negro: #2A2829;
	--mp-suelo: #F7F7F7;
	--mp-ocupado: #E6E3DF;
	--mp-ocupado-t: #ABA69F;
	--mp-ui: "Rajdhani", "Arial Narrow", sans-serif;
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
.mp-plano .mp-suelo { fill: var(--mp-suelo); }
.mp-plano .mp-pared { fill: none; stroke: var(--mp-negro); stroke-width: 10; }
.mp-plano .mp-ventana { fill: #CFE6F6; }
.mp-plano .mp-azul { fill: var(--mp-azul); }
.mp-plano .mp-liston { fill: #DCC39B; }
.mp-plano .mp-madera { fill: #E8D6B8; }
.mp-plano .mp-mesa { fill: #fff; stroke: #DEDAD4; stroke-width: 1.5; }
.mp-plano .mp-pilar { fill: #E9E6E1; }
.mp-plano .mp-hueco { fill: var(--mp-suelo); }
.mp-plano .mp-hoja { stroke: var(--mp-negro); stroke-width: 3; }
.mp-plano .mp-arco { fill: none; stroke: #C2BCB3; stroke-width: 1.5; stroke-dasharray: 4 5; }
.mp-plano .mp-rotulo { font: 600 20px var(--mp-ui); letter-spacing: .18em; text-transform: uppercase; fill: #A8A39C; }
.mp-plano .mp-logo { font: 700 20px var(--mp-ui); letter-spacing: .26em; fill: var(--mp-azul); }

.mp-plano .mp-puesto { cursor: pointer; outline: none; }
.mp-plano .mp-puesto .mp-toque { fill: transparent; }
.mp-plano .mp-puesto .mp-halo { fill: var(--mp-azul); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mp-plano .mp-puesto .mp-anillo { fill: none; stroke: var(--mp-azul-vivo); stroke-width: 3; opacity: 0; }
.mp-plano .mp-puesto:focus-visible .mp-anillo { opacity: 1; }
.mp-plano .mp-puesto .mp-punto { fill: #fff; stroke: var(--mp-azul); stroke-width: 3; transition: fill .2s, stroke .2s; }
.mp-plano .mp-puesto .mp-num { font: 700 30px var(--mp-ui); fill: var(--mp-azul); text-anchor: middle; pointer-events: none; }
.mp-plano.mp-vertical .mp-puesto .mp-num { font-size: 27px; }
.mp-plano .mp-puesto .mp-nombre { font: 600 19px var(--mp-ui); letter-spacing: .02em; fill: var(--mp-negro); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; pointer-events: none; }

/* Libre: blanco con borde azul */
.mp-plano .mp-puesto.is-libre:hover .mp-punto { fill: var(--mp-azul-suave); }
/* Ocupado (en la ficha): gris, no se puede elegir */
.mp-plano .mp-puesto.is-ocupado { cursor: not-allowed; }
.mp-plano .mp-puesto.is-ocupado .mp-punto { fill: var(--mp-ocupado); stroke: none; }
.mp-plano .mp-puesto.is-ocupado .mp-num { fill: var(--mp-ocupado-t); }
/* Elegido (en la ficha) u ocupado por una reserva (en el mapa del admin): azul lleno */
.mp-plano .mp-puesto.is-elegido .mp-punto,
.mp-plano .mp-puesto.is-reserva .mp-punto { fill: var(--mp-azul); }
.mp-plano .mp-puesto.is-elegido .mp-num,
.mp-plano .mp-puesto.is-reserva .mp-num { fill: #fff; }
.mp-plano .mp-puesto.is-elegido .mp-halo { animation: mp-halo 2.4s ease-out infinite; }
/* Bloqueo manual en una mesa (admin) */
.mp-plano .mp-puesto.is-bloqueo .mp-punto { fill: #FBE9E9; stroke: #D63638; }
.mp-plano .mp-puesto.is-bloqueo .mp-num { fill: #B32D2E; }
/* Seleccionado en el mapa del admin */
.mp-plano .mp-puesto.is-marcado .mp-anillo { opacity: 1; stroke: #F0B849; stroke-width: 5; }
/* Mientras se consulta */
.mp-plano.is-cargando .mp-puesto { cursor: progress; }
.mp-plano.is-cargando .mp-puesto .mp-punto { fill: var(--mp-suelo); stroke: #DEDAD4; animation: mp-pulso 1.2s ease-in-out infinite; }
.mp-plano.is-cargando .mp-puesto .mp-num { fill: #C4C0BA; }

/* Monitor alquilado en la mesa del puesto elegido (ficha, extra «Monitor 27″») */
.mp-plano .mp-monitor,
.mp-plano .mp-monitor-chapa { pointer-events: none; transform-box: fill-box; transform-origin: center; }
.mp-plano .mp-monitor-luz { opacity: .8; animation: mp-monitor-brillo 3.2s ease-in-out infinite; }
.mp-plano .mp-monitor-luz-1 { stop-color: #4F9BFF; stop-opacity: .5; }
.mp-plano .mp-monitor-luz-2 { stop-color: #4F9BFF; stop-opacity: 0; }
.mp-plano .mp-monitor-teclado { fill: #fff; stroke: #B9B3AA; stroke-width: 1.5; }
.mp-plano .mp-monitor-teclas { stroke: #CFCAC2; stroke-width: 2; stroke-dasharray: 3 1.6; }
.mp-plano .mp-monitor-raton { fill: #fff; stroke: #B9B3AA; stroke-width: 1.5; }
.mp-plano .mp-monitor-pie { fill: #9A958E; }
.mp-plano .mp-monitor-marco { fill: var(--mp-negro); }
.mp-plano .mp-monitor-cara { fill: #7DB8FF; }
.mp-plano .mp-monitor-chapa circle { fill: #fff; stroke: var(--mp-azul); stroke-width: 2.5; }
.mp-plano .mp-monitor-chapa rect { fill: var(--mp-azul-suave); stroke: var(--mp-azul); stroke-width: 2; }
.mp-plano .mp-monitor-chapa path { fill: none; stroke: var(--mp-azul); stroke-width: 2; stroke-linecap: round; }
/* La primera vez que sale: el monitor se posa en la mesa, la pantalla parpadea al encenderse,
   llega la luz y salta la chapa */
.mp-plano .mp-monitor.is-nuevo { animation: mp-monitor-entra .55s cubic-bezier(.2, 1.5, .45, 1) both; }
.mp-plano .mp-monitor.is-nuevo .mp-monitor-cara { animation: mp-monitor-enciende .6s .35s steps(1, end) both; }
.mp-plano .mp-monitor.is-nuevo .mp-monitor-luz { animation: mp-monitor-luz .7s .55s ease-out both, mp-monitor-brillo 3.2s 1.25s ease-in-out infinite; }
.mp-plano .mp-monitor-chapa.is-nuevo { animation: mp-monitor-entra .5s .5s cubic-bezier(.2, 1.6, .45, 1) both; }

@keyframes mp-halo { from { transform: scale(.8); opacity: .22; } to { transform: scale(1.35); opacity: 0; } }
@keyframes mp-pulso { 50% { opacity: .55; } }
@keyframes mp-monitor-entra { from { transform: scale(.4); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes mp-monitor-enciende { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .25; } 60%, 100% { opacity: 1; } }
@keyframes mp-monitor-luz { from { opacity: 0; } to { opacity: .8; } }
@keyframes mp-monitor-brillo { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.mp-plano * { transition: none !important; animation: none !important; }
}