/* ====== FullCalendar – Mambo look ====== */
:root {
	--brand: #7c5cff; /* morado principal */
	--brand-2: #9b7bff; /* morado claro */
	--fc-danger: #ef4444; /* rojo no disponible */
	--fc-warn: #f59e0b; /* naranja alta demanda */
	--fc-grid: #eef2f7; /* líneas rejilla */
	--fc-text: #0f172a; /* texto oscuro sobre fondo blanco */
}

/* Contenedor */
#calendar {
	background-color: rgba(0, 0, 0, .12);
	border-radius: 18px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
	padding: .25rem;
	position: relative;
}

/* Borde de la rejilla y headers más sutiles */
.fc-theme-standard .fc-scrollgrid, .fc-theme-standard td,
	.fc-theme-standard th {
	border-color: var(--fc-grid);
}

/* Cabecera: título y botones tipo “pill” */
.fc .fc-toolbar-title {
	font-weight: 800;
	letter-spacing: .2px;
	background: linear-gradient(90deg, var(--primary), #23c6d4);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.fc .fc-button {
	border: none;
	border-radius: 999px;
	box-shadow: 0 10px 20px rgba(124, 92, 255, .25);
	transition: transform .15s ease, box-shadow .15s ease, background .15s
		ease;
}

.fc .fc-button-primary {
	background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.fc .fc-button-primary:disabled {
	/* botón “Hoy” cuando está desactivado */
	opacity: .65;
}

.fc .fc-button:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 14px 26px rgba(124, 92, 255, .35);
}

/* Números de semana (“Sm40”…): chips discretos */
.fc .fc-daygrid .fc-week-number {
	color: #94a3b8;
	font-size: .72rem;
	background: #f1f5f9;
	border-radius: .4rem;
	padding: .1rem .3rem;
	margin: .25rem;
}

/* Número del día más visible */
.fc .fc-daygrid-day-number {
	font-weight: 700;
	color: #334155;
}

/* ====== Background events (colorear días completos) ====== */
/* No mostrar texto dentro del bloque de background (lo tendrás en title/tooltip si quieres) */
.fc .fc-bg-event, .fc .fc-non-business {
	opacity: .28 !important; /* intensidad del color */
	border-radius: 12px;
}

.fc .fc-bg-event .fc-event-title, .fc .fc-bg-event .fc-event-title-container
	{
	display: none !important;
}

.bg-unavailable .fc-bg-event, .fc-event.bg-unavailable {
	background-color: var(--fc-danger) !important;
}

/* .bg-high .fc-bg-event, .fc-event.bg-high { */
/* 	background-color: var(--fc-warn) !important; */
/* } */

/* Hover de la celda para mejor feedback */
.fc .fc-daygrid-day-frame:hover {
	background: #fafafa;
}

/* Tooltips nativos: cursor de ayuda */
.fc .fc-bg-event {
	cursor: help;
}

/* Rejilla más “limpia” visualmente en pantallas grandes */
@media ( min-width : 992px) {
	.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
		margin-top: .2rem;
	}
}

/* Responsive: en móviles oculta números de semana para ganar espacio */
@media ( max-width : 575.98px) {
	.fc .fc-daygrid .fc-week-number {
		display: none;
	}
	.fc .fc-toolbar-title {
		font-size: 1rem;
	}
	.fc .fc-button {
		padding: .35rem .7rem;
	}
}

/* Fondo y texto del encabezado de columnas (todas las vistas) */
.fc .fc-col-header th {
	background: #efe7ff; /* morado claro */
	color: #2b1e6b; /* texto */
}

/* Bordes más suaves y esquinas redondeadas del header (opcional) */
.fc-theme-standard .fc-col-header th {
	border-color: #e8ecf3;
}

.fc .fc-col-header th:first-child {
	border-top-left-radius: 12px;
}

.fc .fc-col-header th:last-child {
	border-top-right-radius: 12px;
}

/* ===== Precios como eventos en foreground ===== */
.fc .fc-event.fc-price-tag {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: none; /* NO bloquea click/drag/selection */
}

.fc .fc-price-label {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center; /* centrado vertical */
	justify-content: center; /* centrado horizontal */
	color: rgba(255, 255, 255, .7);
}

/* Si el slot además está coloreado por disponibilidad, usa texto claro */
.fc .fc-event.fc-price-tag.bg-unavailable .fc-price-label, .fc .fc-event.fc-price-tag.bg-high .fc-price-label
	{
	color: rgba(255, 255, 255, .96);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* Mostrar "RESERVADO" en slots UNAVAILABLE (timeGrid) */
.fc .fc-bg-event.slot-UNAVAILABLE {
	position: relative;
}

.fc .fc-bg-event.slot-UNAVAILABLE::after {
	content: "RESERVADO";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: .85rem;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	pointer-events: none;
}

/* Etiqueta de texto dentro de la celda (mes) */
.fc .fc-daygrid-day .fc-day-label {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: none; /* no bloquea clicks */
}

/* En días con fondo rojo/naranja, texto claro */
.fc .fc-day-label.bg-unavailable .fc-day-label__inner, .fc .fc-day-label.bg-high .fc-day-label__inner
	{
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.fc .fc-price-label {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	opacity: .9;
	pointer-events: none;
}

.fc .fc-daygrid-day .fc-day-label {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: none;
}

.fc .fc-day-label__inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-weight: 700;
	font-size: .8rem;
	text-align: left;
	padding: 2px;
	/* 	color: #1f2937; */
	color: #e7a33a; text-wrap : auto;
	overflow: hidden;
	text-wrap: auto;
}

.fc .fc-day-label.bg-unavailable .fc-day-label__inner, .fc .fc-day-label.bg-high .fc-day-label__inner
	{
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Etiqueta “RESERVADO”: ocupar toda la altura del slot y centrar */
.fc .fc-reserved-tag {
	/* 	background: transparent !important; */
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: none !important;
}

.fc .fc-reserved-label {
	height: 100%;
	display: flex;
	align-items: center; /* centrado vertical */
	justify-content: stretch;
	font-weight: 800;
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	overflow: hidden;
}

/* Forzar color de los background events por estado (evita que otros estilos los tapen) */
.fc .slot-UNAVAILABLE {
	background-color: #ef4444 !important;
	opacity: .35 !important;
}

.fc .slot-HIGH_DEMAND {
	background-color: #f59e0b !important;
	opacity: .35 !important;
}

/* (opcional) bordes suaves del bloque de fondo */
.fc .fc-bg-event {
	border-radius: 8px;
}

/* En pantallas estrechas, apila siempre (opcional) */
@media ( max-width : 640px) {
	.fc .fc-col-header-cell-cushion {
		flex-direction: column;
		line-height: 1.05;
	}
}

/* ===== Cabecera semana: “lun 13” ===== */
.fc .fc-col-header-cell-cushion {
	white-space: normal !important;
	padding: .6rem 0;
	font-weight: 700;
	color: #475569;
	display: inline-flex;
	gap: .35rem;
	align-items: center;
	justify-content: center;
}

.fc .hdr-w {
	font-weight: 700;
	color: #475569;
	text-transform: none;
}

.fc .hdr-d {
	font-weight: 900;
	color: #2b1e6b;
}

/* ===== Hover de franja horaria en timeGrid ===== */
/* La tabla “bg” está encima; por eso aplicamos el hover a ambas capas */
.fc .fc-timegrid-bg .fc-timegrid-slot:hover, .fc .fc-timegrid-slots .fc-timegrid-slot:hover,
	.fc .fc-bg-event:hover {
	background: rgba(124, 92, 255, .18) !important;
	/* usa tu --brand si quieres */
	transition: background .12s ease;
}

.fc-fly-btn {
	position: absolute;
	z-index: 1000;
	white-space: nowrap;
	pointer-events: auto; /* clickable */
	box-shadow: 0 10px 10px rgba(0, 0, 0, .18);
	transform: translateY(-4px); /* leve separación del highlight */
}

.fc-next-button, .fc-prev-button, .fc-today-button,
	.fc-dayGridMonth-button, .fc-timeGridWeek-button {
	padding: .2rem 1rem !important;
	border-radius: 5px;
	margin: 0 !important;
}