/**
 * Calendario: el color dice si la fecha es imposible o si hay salida.
 *
 * La distinción que importa al cliente no es el motivo técnico, es si puede
 * hacer algo al respecto:
 *
 *   ROJO   la fecha no se puede reservar, punto. Está bloqueada por el negocio
 *          o ya reservada por otra persona. No hay nada que ajustar.
 *
 *   ÁMBAR  la fecha en sí está libre; no vale por la combinación elegida. Basta
 *          con cambiar la recogida o ajustar la duración para poder reservarla.
 */

/* ── Celdas ─────────────────────────────────────────────────────────────── */

.ui-datepicker td[data-idt-severity] {
	position: relative;
	cursor: not-allowed;
}

/* El icono va arriba a la derecha para no tapar el número del día. */
.ui-datepicker td[data-idt-severity]::after {
	position: absolute;
	top: 1px;
	right: 3px;
	font-size: 9px;
	line-height: 1;
	font-weight: 700;
	pointer-events: none;
	opacity: 0.9;
}

/* ── Rojo: imposible, no hay nada que hacer ─────────────────────────────── */

.ui-datepicker td[data-idt-severity="fixed"],
.ui-datepicker td[data-idt-severity="fixed"] span {
	background: #fde2e4 !important;
	color: #a4133c !important;
}

.ui-datepicker td[data-idt-reason="blocked"] span {
	text-decoration: line-through;
}

.ui-datepicker td[data-idt-reason="blocked"]::after {
	content: '✕';
	color: #a4133c;
}

.ui-datepicker td[data-idt-reason="soldout"]::after {
	content: '●';
	color: #a4133c;
}

/* ── Ámbar: hay salida cambiando fechas ─────────────────────────────────── */

.ui-datepicker td[data-idt-severity="option"],
.ui-datepicker td[data-idt-severity="option"] span {
	background: #fef3c7 !important;
	color: #92400e !important;
}

.ui-datepicker td[data-idt-reason="crosses"]::after {
	content: '⇢';
	color: #b45309;
}

/*
 * Duración: el vehículo está libre, pero no para ESA duración.
 *
 * Tres colores, y cada uno es una noticia distinta:
 *
 *   rojo   imposible. El vehículo no está ese día: cerrado o ya reservado.
 *          No hay nada que el cliente pueda hacer con esa fecha.
 *   ámbar  el día está libre, pero el trayecto hasta él cruza un periodo
 *          cerrado. Hay que mover la recogida o acortar.
 *   azul   el día está libre y el camino también; sólo falla la duración.
 *          Es el caso más fácil de arreglar y el que menos alarma merece.
 *
 * Se probó a juntar azul y ámbar en un solo color y se descartó: el cliente
 * distingue mejor «cambia la duración» de «esas fechas cruzan un cierre» si el
 * color no las mezcla.
 *
 * El selector repite [data-idt-severity] para ganar en especificidad a la regla
 * de la categoría 'option', que también pinta estas celdas.
 */
.ui-datepicker td[data-idt-reason="duration"][data-idt-severity],
.ui-datepicker td[data-idt-reason="duration"][data-idt-severity] span {
	background: #dbeafe !important;
	color: #1d4ed8 !important;
}

.ui-datepicker td[data-idt-reason="duration"]::after {
	content: '–';
	color: #1d4ed8;
}

/* ── Neutro: fechas pasadas o anteriores a la recogida ──────────────────── */

/*
 * Ni rojo ni azul: son casos triviales. Una fecha ya pasada, o anterior a la
 * recogida, no es un conflicto que el cliente deba resolver, así que no debe
 * llamar la atención. Antes caían en el cajón de 'duración' y se les anunciaba
 * un mínimo de días que no venía a cuento.
 */
.ui-datepicker td[data-idt-severity="past"],
.ui-datepicker td[data-idt-severity="past"] span {
	background: transparent !important;
	color: #b6bec9 !important;
}

.ui-datepicker td[data-idt-severity="past"]::after {
	content: none;
}

/* ── Día de recogida: el inicio de la reserva ───────────────────────────── */

/*
 * En el calendario de devolución, el día de recogida no es "un día más que no
 * puedes elegir": es el punto de partida. Marcarlo con un círculo le da al
 * cliente una referencia visual para contar los días desde ahí, en vez de
 * confundirlo con las fechas descartadas de su alrededor.
 */
.ui-datepicker td[data-idt-severity="pickup"],
.ui-datepicker td[data-idt-severity="pickup"] span {
	background: transparent !important;
	color: #0f9d76 !important;
	font-weight: 700;
}

.ui-datepicker td[data-idt-severity="pickup"] span {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
	box-sizing: border-box;
	border: 2px solid #0f9d76;
	border-radius: 50%;
	line-height: 1;
}

.ui-datepicker td[data-idt-severity="pickup"]::after {
	content: none;
}

/* ── Tooltip propio ─────────────────────────────────────────────────────── */

/*
 * No se usa el atributo 'title' a propósito: md_script.js engancha mousemove
 * sobre las celdas y convierte el title en un <span> visible DENTRO de la celda
 * —mecanismo pensado para las etiquetas de precio—, lo que alteraba el alto de
 * la rejilla. Con un atributo propio ese código no se dispara.
 */
.ui-datepicker td[data-idt-tip] {
	position: relative;
}

.ui-datepicker td[data-idt-tip]:hover::before {
	content: attr(data-idt-tip);
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 100002;
	max-width: 190px;
	width: max-content;
	padding: 5px 8px;
	border-radius: 6px;
	background: #243b53;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	pointer-events: none;
}

/* En táctil no hay hover y el tooltip estorbaría: manda el mensaje al pulsar. */
@media (hover: none) {
	.ui-datepicker td[data-idt-tip]:hover::before {
		content: none;
	}
}

/* ── Mensaje ────────────────────────────────────────────────────────────── */

.idt-cal-msg {
	position: absolute;
	z-index: 100001;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 12px;
	border-left: 4px solid currentColor;
	background: #fff;
	box-shadow: 0 12px 34px rgba(16, 24, 40, 0.2);
	opacity: 1;
	transition: opacity 0.3s ease;
}

.idt-cal-msg.is-leaving {
	opacity: 0;
}

.idt-cal-msg__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.idt-cal-msg__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.idt-cal-msg__title {
	font-size: 13px;
	line-height: 1.3;
}

.idt-cal-msg__text {
	font-size: 12.5px;
	line-height: 1.5;
	color: #47525d;
}

.idt-cal-msg--sev-fixed {
	color: #a4133c;
	background: #fff5f6;
}

.idt-cal-msg--sev-fixed .idt-cal-msg__icon {
	background: #a4133c;
}

.idt-cal-msg--sev-option {
	color: #92400e;
	background: #fffbeb;
}

/* El mensaje de duración acompaña al azul de sus celdas. */
.idt-cal-msg--duration {
	color: #1d4ed8;
	background: #eff6ff;
}

/*
 * El selector repite la clase para ganar a la regla de la categoría 'option',
 * que pinta el icono en ámbar y va después en la hoja. Sin eso, el mensaje
 * salía azul con un icono naranja: dos colores para una misma noticia.
 */
.idt-cal-msg.idt-cal-msg--duration .idt-cal-msg__icon {
	background: #1d4ed8;
}

/*
 * Callejón sin salida: la recogida elegida no admite ninguna devolución. Es el
 * aviso más importante de todos, porque sin él el cliente recorre meses enteros
 * sin una sola fecha seleccionable, así que se destaca más y dura más.
 */
.idt-cal-msg--deadend {
	border-left-width: 5px;
	box-shadow: 0 14px 40px rgba(146, 64, 14, 0.28);
}

.idt-cal-msg--deadend .idt-cal-msg__title {
	font-size: 14px;
}

.idt-cal-msg--sev-option .idt-cal-msg__icon {
	background: #b45309;
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */

/*
 * En un móvil el calendario ocupa casi toda la pantalla, así que un mensaje
 * anclado justo debajo caía fuera de la vista y no se veía nunca. Aquí se fija
 * abajo, por encima de todo, que es donde el usuario sí lo va a leer.
 */
@media (max-width: 782px) {
	.idt-cal-msg {
		position: fixed;
		top: auto !important;
		left: 10px !important;
		right: 10px;
		bottom: 10px;
		width: auto !important;
		max-width: none;
		padding: 14px 16px;
		box-shadow: 0 -6px 28px rgba(16, 24, 40, 0.24);
	}

	.idt-cal-msg__title {
		font-size: 14px;
	}

	.idt-cal-msg__text {
		font-size: 13px;
	}

	/* Los iconos de 9px no se ven en pantalla pequeña. */
	.ui-datepicker td[data-idt-severity]::after {
		font-size: 8px;
		top: 0;
		right: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.idt-cal-msg {
		transition: none;
	}
}

/* ── Sin disponibilidad en las fechas elegidas ───────────────────────────── */

/*
 * El aviso que sale bajo el formulario cuando el vehículo está cogido esas
 * fechas. Antes era una línea suelta con el fondo rosa del tema y el texto
 * "¡No hay artículos disponibles!", que se lee como una avería. Ahora dice qué
 * fechas son las ocupadas y qué hacer, y se viste como el resto de avisos del
 * módulo: ámbar de "esto hay que cambiarlo", no rojo de "algo ha fallado".
 */
.rbfw_nia_notice.idt-nostock {
	display: block;
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px solid #f0e3c4;
	border-left: 4px solid #d98324;
	border-radius: 12px;
	background: #fffcf5;
	color: #5f4a24;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.idt-nostock__title {
	display: block;
	color: #7a5312;
	font-weight: 700;
}

.idt-nostock__hint {
	display: block;
	margin-top: 4px;
	font-size: 13px;
}

.idt-nostock__hint:empty {
	display: none;
}