/*
 * mcp-movimiento.css — v0.20.0 (D10.2)
 *
 * La capa de movimiento de toda la app: sombras, levantado al pasar el puntero, hundido al tocar,
 * y el llamado de atención de "Mis boletos".
 *
 * Va en un archivo aparte a propósito. Todo lo que se mueve en la app está aquí y en ningún otro
 * sitio, así que se puede revisar de una pieza, discutir de una pieza y —si algún día molesta—
 * apagar quitando una línea del encolado, sin tocar el diseño.
 *
 * ── LAS CUATRO REGLAS QUE SE RESPETAN AQUÍ ──────────────────────────────────────────────────
 *
 * 1. EL HOVER SE PROTEGE. En una pantalla táctil no existe "pasar el puntero": lo que hace el
 *    navegador es dejar el estado de hover PEGADO después de tocar, así que la tarjeta se queda
 *    levantada hasta que se toca otra cosa. Por eso cada regla de hover vive dentro de
 *    `@media (hover: hover) and (pointer: fine)`. En el teléfono manda `:active`, que sí existe.
 *
 * 2. NADA SE MUEVE SI LA PERSONA PIDIÓ QUE NO. `prefers-reduced-motion: reduce` no es un gusto:
 *    lo activa quien se marea con el movimiento. Al final del archivo se apaga todo. Ojo: el
 *    latido de los boletos NO se apaga sin más, se cambia por un anillo fijo, porque lo que
 *    comunica —"aquí hay algo"— se debe seguir comunicando sin moverse.
 *
 * 3. NO SE PARPADEA. Un elemento que destella es un riesgo real para quien tiene epilepsia
 *    fotosensible (WCAG 2.3.1 pone el límite en 3 destellos por segundo). El latido de abajo dura
 *    2,4 segundos por ciclo —unos 0,4 por segundo, siete veces por debajo del límite— y es una
 *    sombra que crece, no un encendido y apagado.
 *
 * 4. EL LATIDO TERMINA. Corre TRES veces y se detiene (WCAG 2.2.2 pide poder parar lo que se
 *    mueve más de cinco segundos). Además solo aparece cuando de verdad hay boletos que ver: un
 *    elemento que late siempre deja de verse a la semana. El movimiento avisa PORQUE no es
 *    constante.
 *
 * @package MultiCines_PWA
 */

:root {
	/* Rápido para lo que se toca, algo más lento para lo que se mira. */
	--mcp-mov-rapido: 120ms;
	--mcp-mov-normal: 200ms;
	/* Sale rápido y frena al final: se siente como algo con peso, no como una interpolación. */
	--mcp-mov-curva: cubic-bezier(.2, .7, .3, 1);

	/* Las sombras se declaran como tokens para que el tema oscuro pueda pisarlas. */
	--mcp-sombra-1: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
	--mcp-sombra-2: 0 2px 4px rgba(0, 0, 0, .12), 0 6px 14px -6px rgba(0, 0, 0, .18);
	--mcp-sombra-3: 0 3px 6px rgba(0, 0, 0, .14), 0 12px 26px -10px rgba(0, 0, 0, .28);
}

/*
 * En oscuro una sombra negra no se ve: el fondo ya es casi negro. Se sube la opacidad y se agrega
 * una línea clarísima arriba del elemento, que es lo que de verdad lo despega del fondo.
 */
.mcp-tema-oscuro {
	--mcp-sombra-1: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
	--mcp-sombra-2: 0 3px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
	--mcp-sombra-3: 0 6px 18px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ── 1. Botones ─────────────────────────────────────────────────────────────────────────────
 *
 * Los tres estados de siempre: reposo con una sombra que lo despega del fondo, levantado al
 * pasar el puntero, hundido al tocar. El hundido es el que más importa y el único que se siente
 * en el teléfono: confirma que el toque entró, antes de que la pantalla siguiente cargue.
 */
.mcp-boton {
	box-shadow: var(--mcp-sombra-1);
	transition:
		transform var(--mcp-mov-rapido) var(--mcp-mov-curva),
		box-shadow var(--mcp-mov-normal) var(--mcp-mov-curva),
		background-color var(--mcp-mov-normal) var(--mcp-mov-curva),
		border-color var(--mcp-mov-normal) var(--mcp-mov-curva);
}
/* Los botones de solo texto no son objetos: no llevan sombra ni se levantan. */
.mcp-boton--texto {
	box-shadow: none;
}

.mcp-boton:active {
	transform: translateY(1px);
	box-shadow: var(--mcp-sombra-1);
}
.mcp-boton--texto:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* Deshabilitado o cargando no se mueve: movimiento sin efecto es una promesa falsa. */
.mcp-boton[disabled],
.mcp-boton[aria-disabled="true"],
.mcp-boton.is-cargando {
	transform: none !important;
	box-shadow: var(--mcp-sombra-1);
}

@media (hover: hover) and (pointer: fine) {
	.mcp-boton:hover:not([disabled]):not([aria-disabled="true"]):not(.is-cargando) {
		transform: translateY(-1px);
		box-shadow: var(--mcp-sombra-2);
	}
	.mcp-boton--texto:hover {
		transform: none;
		box-shadow: none;
	}
}

/* ── 2. Tarjetas de la cartelera ────────────────────────────────────────────────────────────
 *
 * La tarjeta se levanta y el afiche se acerca un poco. El acercamiento es del 3 %: lo justo para
 * que se note que la tarjeta responde, sin que el afiche se recorte de forma visible.
 *
 * Se usa `:hover` sobre la tarjeta y no `:has()` sobre el enlace: `:has()` no existe en Safari 15
 * y este proyecto ya lo evitó una vez por eso mismo (ver mcp-componentes.css, v0.2.6).
 *
 * `:focus-within` va junto al hover, y esto importa: quien recorre la cartelera con el teclado
 * tiene que ver la misma respuesta que quien usa el ratón. Si solo respondiera al puntero, la
 * mitad de la mejora no existiría para media parte de la gente.
 */
.mcp-pelicula {
	transition:
		transform var(--mcp-mov-normal) var(--mcp-mov-curva),
		box-shadow var(--mcp-mov-normal) var(--mcp-mov-curva);
}
.mcp-pelicula .mcp-imagen-img {
	transition: transform 320ms var(--mcp-mov-curva);
}
.mcp-pelicula:active {
	transform: translateY(0) scale(.995);
}
.mcp-pelicula:focus-within {
	box-shadow: var(--mcp-sombra-2);
}

@media (hover: hover) and (pointer: fine) {
	.mcp-pelicula:hover {
		transform: translateY(-3px);
		box-shadow: var(--mcp-sombra-3);
	}
	.mcp-pelicula:hover .mcp-imagen-img {
		transform: scale(1.03);
	}
}

/* ── 3. Filas y superficies que se tocan ────────────────────────────────────────────────────── */

.mcp-perfil-fila,
.mcp-historial-enlace,
.mcp-perfil-red,
.mcp-perfil-lapiz {
	transition:
		background-color var(--mcp-mov-normal) var(--mcp-mov-curva),
		border-color var(--mcp-mov-normal) var(--mcp-mov-curva),
		transform var(--mcp-mov-rapido) var(--mcp-mov-curva);
}
.mcp-perfil-fila:active,
.mcp-historial-enlace:active,
.mcp-perfil-red:active,
.mcp-perfil-lapiz:active {
	transform: scale(.98);
}
.mcp-historial-enlace {
	box-shadow: var(--mcp-sombra-1);
	transition:
		transform var(--mcp-mov-normal) var(--mcp-mov-curva),
		box-shadow var(--mcp-mov-normal) var(--mcp-mov-curva),
		border-color var(--mcp-mov-normal) var(--mcp-mov-curva);
}

@media (hover: hover) and (pointer: fine) {
	.mcp-perfil-fila:hover,
	.mcp-perfil-lapiz:hover {
		background-color: var(--mcp-superficie-elevada);
	}
	.mcp-perfil-red:hover {
		background-color: var(--mcp-superficie-elevada);
		border-color: var(--mcp-primario-texto);
	}
	.mcp-historial-enlace:hover {
		transform: translateY(-2px);
		box-shadow: var(--mcp-sombra-2);
		border-color: var(--mcp-primario-texto);
	}
}

/* ── 4. "Mis boletos": el llamado de atención ───────────────────────────────────────────────
 *
 * Jefatura lo pidió como "un brillo o un parpadeo que llame a revisarlo". Es un ANILLO que crece
 * y se desvanece, no un destello, por lo dicho arriba: un destello es un riesgo médico y además
 * se lee como un error del sistema, no como una invitación.
 *
 * Corre tres veces y se queda quieto. Y solo existe cuando hay funciones próximas: la clase
 * `es-llamando` la pone el servidor únicamente en ese caso (ver MCP_Pantalla_Cuenta).
 */
.mcp-perfil-boletos {
	box-shadow: var(--mcp-sombra-2);
	transition:
		transform var(--mcp-mov-rapido) var(--mcp-mov-curva),
		box-shadow var(--mcp-mov-normal) var(--mcp-mov-curva);
}
.mcp-perfil-boletos:active {
	transform: translateY(1px) scale(.995);
}

@media (hover: hover) and (pointer: fine) {
	.mcp-perfil-boletos:hover {
		transform: translateY(-2px);
		box-shadow: var(--mcp-sombra-3);
	}
}

@keyframes mcp-latido {
	0%   { box-shadow: var(--mcp-sombra-2), 0 0 0 0 var(--mcp-halo); }
	55%  { box-shadow: var(--mcp-sombra-2), 0 0 0 10px transparent; }
	100% { box-shadow: var(--mcp-sombra-2), 0 0 0 0 transparent; }
}

.mcp-perfil-boletos.es-llamando {
	/* El halo es el naranja de marca, que es el color con el que la app llama la atención. */
	--mcp-halo: rgba(247, 149, 32, .55);
	animation: mcp-latido 2.4s var(--mcp-mov-curva) 3;
}

/* El icono del boleto se inclina una vez al entrar, como un boleto que se saca del sobre. */
@keyframes mcp-boleto-entra {
	0%   { transform: rotate(-12deg) scale(.9); opacity: 0; }
	60%  { transform: rotate(3deg) scale(1.04); opacity: 1; }
	100% { transform: rotate(0) scale(1); opacity: 1; }
}
.mcp-perfil-boletos.es-llamando .mcp-perfil-boletos-icono {
	animation: mcp-boleto-entra 520ms var(--mcp-mov-curva) 1;
}

/* ── 5. Pestañas de abajo ───────────────────────────────────────────────────────────────────── */

.mcp-tabbar-item {
	transition:
		background-color var(--mcp-mov-normal) var(--mcp-mov-curva),
		color var(--mcp-mov-normal) var(--mcp-mov-curva),
		transform var(--mcp-mov-rapido) var(--mcp-mov-curva);
}
.mcp-tabbar-item:active { transform: scale(.96); }

/* ── 6. Cuando la persona pidió menos movimiento ────────────────────────────────────────────
 *
 * Se apaga TODO lo de arriba. Lo único que se conserva es el mensaje del latido, convertido en un
 * anillo fijo: quitarlo del todo dejaría a esa persona sin la señal de que hay boletos que ver,
 * que es justo lo que la señal existe para decir. Se comunica lo mismo; lo que se quita es el
 * movimiento, no la información.
 */
@media (prefers-reduced-motion: reduce) {
	.mcp-boton,
	.mcp-pelicula,
	.mcp-pelicula .mcp-imagen-img,
	.mcp-perfil-fila,
	.mcp-perfil-red,
	.mcp-perfil-lapiz,
	.mcp-historial-enlace,
	.mcp-perfil-boletos,
	.mcp-tabbar-item {
		transition: none;
	}
	.mcp-boton:active,
	.mcp-boton:hover,
	.mcp-pelicula:active,
	.mcp-pelicula:hover,
	.mcp-pelicula:hover .mcp-imagen-img,
	.mcp-perfil-fila:active,
	.mcp-perfil-red:active,
	.mcp-perfil-lapiz:active,
	.mcp-historial-enlace:hover,
	.mcp-perfil-boletos:active,
	.mcp-perfil-boletos:hover,
	.mcp-tabbar-item:active {
		transform: none;
	}
	.mcp-perfil-boletos.es-llamando,
	.mcp-perfil-boletos.es-llamando .mcp-perfil-boletos-icono {
		animation: none;
	}
	.mcp-perfil-boletos.es-llamando {
		box-shadow: var(--mcp-sombra-2), 0 0 0 3px var(--mcp-halo);
	}
}

/*
 * En modo de alto contraste de Windows el sistema reemplaza los colores y las sombras se pierden.
 * El anillo del latido se vuelve un borde, que ahí sí se ve.
 */
@media (forced-colors: active) {
	.mcp-perfil-boletos.es-llamando {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
}