html {
	overflow: auto;
}

:root {
	/*VARIABLES GLOBALES*/
	--modal-anim-duration: 0.2s;
}

/* Oculta la hora / "Todo el día" */
.fc-event .fc-event-time {
	display: none;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
	.fc .fc-daygrid-day-number {
		font-size: 0.8rem;
	}

	.fc .fc-toolbar-title {
		font-size: 1rem;
		text-transform: capitalize;
	}

	.fc .fc-daygrid-day-frame {
		min-height: 60px;
	}
}


/* ====== TOP ====== */
.animate-top-in {
	animation: animateTopIn var(--modal-anim-duration) ease-out forwards;
}

@keyframes animateTopIn {
	from {
		transform: translateY(-50px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.animate-top-out {
	animation: animateTopOut var(--modal-anim-duration) ease-in forwards;
}

@keyframes animateTopOut {
	from {
		transform: translateY(0);
		opacity: 1;
	}

	to {
		transform: translateY(-50px);
		opacity: 0;
	}
}

/* ====== LEFT ====== */
.animate-left-in {
	animation: animateLeftIn var(--modal-anim-duration) ease-out forwards;
}

@keyframes animateLeftIn {
	from {
		transform: translateX(-50px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.animate-left-out {
	animation: animateLeftOut var(--modal-anim-duration) ease-in forwards;
}

@keyframes animateLeftOut {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(-50px);
		opacity: 0;
	}
}

/* ====== RIGHT ====== */
.animate-right-in {
	animation: animateRightIn var(--modal-anim-duration) ease-out forwards;
}

@keyframes animateRightIn {
	from {
		transform: translateX(50px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.animate-right-out {
	animation: animateRightOut var(--modal-anim-duration) ease-in forwards;
}

@keyframes animateRightOut {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(50px);
		opacity: 0;
	}
}

/* ====== BOTTOM ====== */
.animate-bottom-in {
	animation: animateBottomIn var(--modal-anim-duration) ease-out forwards;
}

@keyframes animateBottomIn {
	from {
		transform: translateY(50px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.animate-bottom-out {
	animation: animateBottomOut var(--modal-anim-duration) ease-in forwards;
}

@keyframes animateBottomOut {
	from {
		transform: translateY(0);
		opacity: 1;
	}

	to {
		transform: translateY(50px);
		opacity: 0;
	}
}

.animate-top {
  animation: animateTop 0.2s ease-out;
}

@keyframes animateTop {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}