/* Dónde Jugar Listings — Toast notifications.
 * Class-based, token-driven. Loaded as the `djl-toast` style handle. */

/* Walter, 19-Sep-2026: antes vivía en la esquina inferior derecha -- ahora
 * al centro de la pantalla (mismo lugar que ya usaba la variante --modal de
 * abajo), para que no pase inadvertido. */
.djl-toast-wrap {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	max-width: min(22rem, calc(100vw - 2rem));
	pointer-events: none;
}

/* Walter, 29-Ago-2026 (2da ronda): "los mensajes... deben aparecer al
 * centro del modal pero encima del formulario". toast.js reinserta el wrap
 * dentro del <dialog> abierto y agrega esta clase. Ya no necesita repetir
 * el centrado (la base de arriba ya centra siempre) -- solo cambia el ancho
 * para verse bien sobre un <dialog>. */
.djl-toast-wrap--modal {
	width: min(26rem, calc(100% - 2.5rem));
	max-width: min(26rem, calc(100% - 2.5rem));
}

.djl-toast {
	pointer-events: auto;
	cursor: pointer;
	padding: 0.85rem 1.1rem;
	border-radius: 8px;
	/* Walter, 19-Sep-2026: fondo blanco sobre fondo blanco no se percibía --
	 * ahora fondo oscuro fijo + texto claro, sin depender de --djl-card. */
	background: #2C3E50;
	color: #ffffff;
	border-left: 4px solid #1a2a3a;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	font-size: 0.95rem;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Trigger the enter transition on the next frame -- slide up + fade in. */
.djl-toast {
	animation: djl-toast-in 0.3s ease forwards;
}

@keyframes djl-toast-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.djl-toast--success {
	border-left-color: var(--djl-line, #FF9800);
}

.djl-toast--error {
	border-left-color: #E74C3C;
}

/* Slide down + fade out al cerrarse (dismiss() en toast.js agrega esta
 * clase y quita el nodo del DOM 300ms despues -- misma duración que la
 * transition de arriba, para que no se corte a medias). */
.djl-toast.is-leaving {
	opacity: 0;
	transform: translateY(2.5rem);
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.djl-toast,
	.djl-toast.is-leaving {
		animation: none;
		transition: opacity 0.2s ease;
		transform: none;
		opacity: 1;
	}
}