@layer components {
	/* El contenedor es el que se fija a la pantalla */
	.toast-container {
		position: fixed;
		top: 1rem;
		right: 1rem; /* O inset-inline-end: 1rem para RTL */
		z-index: 9999;

		display: flex;
		flex-direction: column; /* Apila uno debajo de otro */
		gap: 0.75rem; /* Espacio entre toasts */

		pointer-events: none; /* Esto permite que los clicks pasen a través del contenedor, pero no a través de los toasts */
	}

	.toast {
		/* Reactivamos los clicks en el toast */
		pointer-events: auto;

		/* Diseño interno */
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: start;
		gap: 0.75rem;
		width: 360px;
		max-width: calc(100vw - 2rem);

		background: white;
		padding: 1rem;
		border-radius: 0.75rem;
		border-inline-start: 4px solid var(--theme);
		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
		animation: toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1), toast-out 0.4s cubic-bezier(0.16, 1, 0.3, 1) 5s forwards;

		will-change: transform, opacity; /* Optimización de rendimiento para animaciones */
	}

	/* --- El resto de estilos internos (icon, text) igual que antes --- */
	.toast-icon {
		color: var(--theme);
		display: grid;
		place-items: center;

		svg {
			width: 1.5rem;
			height: 1.5rem;
		}
	}

	.toast-content {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
	.toast-title {
		font-weight: 600;
		font-size: 0.95rem;
		color: #1f2937;
	}
	.toast-message {
		font-size: 0.875rem;
		color: #4b5563;
		margin: 0;
	}

	.toast-close {
		border: none;
		background: transparent;
		cursor: pointer;
		color: #9ca3af;
		&:hover {
			color: #111;
		}
	}

	.toast-progress {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 3px;
		background: var(--theme);
		width: 100%;
		transform-origin: left;
		animation: progress-bar 5s linear forwards;
		border-bottom-left-radius: 0.75rem; /* Ajuste para bordes redondeados */
	}

	/* --- Keyframes --- */
	@keyframes toast-in {
		from {
			opacity: 0;
			transform: translateX(100%);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes toast-out {
		from {
			opacity: 1;
			transform: translateX(0);
		}
		to {
			opacity: 0;
			transform: translateX(100%);
		}
	}

	@keyframes progress-bar {
		to {
			transform: scaleX(0);
		}
	}
}