/* Calendario público de embarcaciones por tour ([choko_calendario_tour]).
   Vive dentro de .entry-content, así que TODO selector va prefijado con
   .choko-cal-tour: con una sola clase, el tema gana por especificidad (ver
   tour-filtros.css). Los valores copian los de reserva-form.css para que las
   tarjetas se vean hermanas de las del formulario. Todo en px: el tema define
   1rem = 10px. */
.choko-cal-tour {
	--choko-blue: #007aba;
	--choko-blue-dark: #005f96;
	--choko-orange-btn: #f2951b;
	--choko-orange-dark: #db7d0c;
	--choko-ink: #333333;
	--choko-muted: #6b7683;
	--choko-line: #d9dee5;
	--choko-soft: #f7f9fb;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 24px 0;
	padding: 20px;
	background: var(--choko-soft);
	border: 1px solid var(--choko-line);
	border-radius: 8px;
	color: var(--choko-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.choko-cal-tour *,
.choko-cal-tour *::before,
.choko-cal-tour *::after { box-sizing: border-box; }
.choko-cal-tour [hidden] { display: none !important; }
/* El tema pone una sombra gris a todos los botones al pasar el ratón. */
.choko-cal-tour button:hover { box-shadow: none; }

/* Escritorio: barcos a la izquierda (42 %) y calendario a la derecha (58 %).
   El calendario se desplaza con la página: fijo (sticky) quedaba tapado bajo la
   cabecera fija del tema. En el DOM va primero, así que en móvil queda arriba
   solo. */
@media (min-width: 768px) {
	.choko-cal-tour { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: start; }
	.choko-cal-tour .choko-cal-tour-calendario { grid-column: 2; grid-row: 1; }
	.choko-cal-tour .choko-cal-tour-lista { grid-column: 1; grid-row: 1; }
}

/* ---------- Calendario: el datepicker del formulario, en grande ---------- */
.choko-cal-tour .ui-datepicker {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--choko-line);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
	font-family: inherit;
	font-size: 15px;
}
.choko-cal-tour .ui-datepicker .ui-datepicker-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; margin: 0 0 8px; padding: 0; border: 0; background: none; }
.choko-cal-tour .ui-datepicker .ui-datepicker-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--choko-ink); }
.choko-cal-tour .ui-datepicker .ui-datepicker-prev,
.choko-cal-tour .ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 0;
	width: 34px;
	height: 34px;
	overflow: hidden;
	text-indent: -9999px;
	cursor: pointer;
	border: 1px solid var(--choko-line);
	border-radius: 6px;
	background: var(--choko-soft);
}
.choko-cal-tour .ui-datepicker .ui-datepicker-prev { left: 0; }
.choko-cal-tour .ui-datepicker .ui-datepicker-next { right: 0; }
.choko-cal-tour .ui-datepicker .ui-datepicker-prev::after,
.choko-cal-tour .ui-datepicker .ui-datepicker-next::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--choko-blue);
	border-right: 2px solid var(--choko-blue);
	text-indent: 0;
}
.choko-cal-tour .ui-datepicker .ui-datepicker-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.choko-cal-tour .ui-datepicker .ui-datepicker-next::after { transform: translate(-70%, -50%) rotate(45deg); }
/* En el mes actual no se puede ir hacia atrás: la flecha se apaga. */
.choko-cal-tour .ui-datepicker .ui-datepicker-prev.ui-state-disabled { opacity: .35; cursor: default; }
@media (hover: hover) {
	.choko-cal-tour .ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover,
	.choko-cal-tour .ui-datepicker .ui-datepicker-next:hover { border-color: var(--choko-blue); background: #f0f8fc; }
}

.choko-cal-tour .ui-datepicker table { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 4px; table-layout: fixed; background: none; }
/* Selectores largos a propósito: el tema pinta bordes y relleno en las tablas
   del post con `.blog-content .post-body table > tbody > tr > td` (2 clases y
   4 etiquetas); estos pesan 3 clases y le ganan. */
.choko-cal-tour .ui-datepicker .ui-datepicker-calendar thead tr th { padding: 4px 0; border: 0; background: none; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--choko-muted); text-align: center; text-transform: uppercase; vertical-align: middle; }
.choko-cal-tour .ui-datepicker .ui-datepicker-calendar tbody tr td { padding: 0; border: 0; background: none; line-height: 1; vertical-align: middle; }
.choko-cal-tour .ui-datepicker td a,
.choko-cal-tour .ui-datepicker td span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	margin: 0;
	padding: 0;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	color: var(--choko-ink);
}
/* Días con salidas: botones blancos con borde, como las cápsulas del formulario. */
.choko-cal-tour .ui-datepicker td a { border: 1px solid var(--choko-line); background: #fff; font-weight: 600; transition: border-color .12s ease, background-color .12s ease; }
@media (hover: hover) {
	.choko-cal-tour .ui-datepicker td a:hover { border-color: var(--choko-blue); background: #f0f8fc; }
}
/* Con el calendario al 58 % las celdas son anchas: crecen también en alto para
   no quedar como franjas aplastadas. min-width: 0 porque, si no, el min-height
   se traslada al ancho por la proporción y la celda pisa a la de al lado en
   tablet. */
@media (min-width: 768px) {
	.choko-cal-tour .ui-datepicker { padding: 16px; font-size: 16px; }
	.choko-cal-tour .ui-datepicker .ui-datepicker-title { font-size: 18px; }
	.choko-cal-tour .ui-datepicker table { border-spacing: 6px; }
	.choko-cal-tour .ui-datepicker td a,
	.choko-cal-tour .ui-datepicker td span { width: 100%; min-width: 0; height: auto; min-height: 42px; aspect-ratio: 4 / 3; font-size: 16px; }
}
.choko-cal-tour .ui-datepicker td a.ui-state-active { border-color: var(--choko-blue); background: var(--choko-blue); color: #fff; }
/* jQuery UI marca "hoy" con ui-state-highlight; hoy nunca se reserva, así que
   no se le da protagonismo. */
.choko-cal-tour .ui-datepicker td a.ui-state-highlight:not(.ui-state-active) { border-color: var(--choko-line); }

/* Días sin salidas (y hoy y mañana): rayados, como en el formulario. jQuery UI
   pone las clases en el <td>, no en el <span>. */
.choko-cal-tour .ui-datepicker td.ui-state-disabled,
.choko-cal-tour .ui-datepicker td.ui-datepicker-unselectable { cursor: not-allowed; opacity: 1; }
.choko-cal-tour .ui-datepicker td.ui-state-disabled span,
.choko-cal-tour .ui-datepicker td.ui-datepicker-unselectable span {
	color: #c3c9d2;
	background: repeating-linear-gradient(-45deg, #f6f7f9 0 4px, #eef0f3 4px 8px);
}
/* Los huecos de otros meses, vacíos. */
.choko-cal-tour .ui-datepicker td.ui-datepicker-other-month span { background: none; }

/* ---------- Lista de barcos ---------- */
.choko-cal-tour .choko-cal-tour-titulo { margin: 0 0 14px; padding: 0; border: 0; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--choko-ink); }
.choko-cal-tour .choko-cal-tour-titulo::first-letter { text-transform: uppercase; }
.choko-cal-tour .choko-cal-tour-barcos { display: flex; flex-direction: column; gap: 12px; }
/* Sin JS no hay día elegido: se ven todas. Con JS, solo las del día. */
.choko-cal-tour.is-listo .choko-cal-tour-barco:not(.is-visible) { display: none; }

.choko-cal-tour .choko-cal-tour-barco {
	display: grid;
	/* La foto en porcentaje: la columna de barcos es estrecha en tablet. */
	grid-template-columns: minmax(96px, 32%) minmax(0, 1fr);
	overflow: hidden;
	margin: 0;
	background: #fff;
	border: 1px solid var(--choko-line);
	border-radius: 6px;
	transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
/* Elegida: el mismo azul que la tarjeta elegida del formulario. */
.choko-cal-tour .choko-cal-tour-barco.is-selected { border-color: var(--choko-blue); box-shadow: inset 0 0 0 1px var(--choko-blue); background: #f0f7fb; }

.choko-cal-tour .choko-cal-tour-foto { position: relative; min-height: 0; background: #e9edf2; }
.choko-cal-tour .choko-cal-tour-foto-boton {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: zoom-in;
}
.choko-cal-tour .choko-cal-tour-foto-boton img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: cover; transition: transform .25s ease; }
@media (hover: hover) {
	.choko-cal-tour .choko-cal-tour-foto-boton:hover img { transform: scale(1.04); }
}
.choko-cal-tour .choko-cal-tour-foto-boton:focus-visible { outline: 2px solid var(--choko-orange-btn); outline-offset: -2px; }
.choko-cal-tour .choko-cal-tour-fotos-conteo {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(15, 20, 26, .72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	pointer-events: none;
}
/* Sin fotos no hay columna de foto: los datos ocupan todo el ancho. Gana
   también a la regla de móvil por llevar una clase más. */
.choko-cal-tour .choko-cal-tour-barco.choko-cal-tour-barco-sin-foto { grid-template-columns: minmax(0, 1fr); }

/* Datos: los grises de .choko-ruta del formulario, un punto más pequeños
   (13 px el texto y 14 px el precio, frente a 14 y 15 allí). La foto rellena el
   alto de la tarjeta, así que cuanto más compacto el texto, más baja la foto. */
.choko-cal-tour .choko-cal-tour-datos { min-width: 0; padding: 10px 12px; font-size: 13px; line-height: 1.35; color: #898989; }
.choko-cal-tour .choko-cal-tour-datos p { margin: 0; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.choko-cal-tour .choko-cal-tour-nombre strong { color: #555555; }
.choko-cal-tour .choko-cal-tour-datos .choko-cal-tour-combinacion { margin-top: 1px; }
.choko-cal-tour .choko-cal-tour-datos .choko-cal-tour-precio { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--choko-blue-dark); }
.choko-cal-tour .choko-cal-tour-barco.is-selected .choko-cal-tour-precio { color: var(--choko-blue); }

/* La tarjeta entera se elige, como en el formulario. Su radio sigue en el DOM
   (teclado, lector de pantalla) pero no se ve; el foco se marca en la tarjeta. */
.choko-cal-tour .choko-cal-tour-barco { position: relative; cursor: pointer; }
@media (hover: hover) {
	.choko-cal-tour .choko-cal-tour-barco:hover { border-color: var(--choko-blue); }
}
.choko-cal-tour .choko-cal-tour-radio,
.choko-cal-tour .choko-cal-tour-hora input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.choko-cal-tour .choko-cal-tour-barco:has(.choko-cal-tour-radio:focus-visible) { outline: 2px solid var(--choko-orange-btn); outline-offset: 2px; }

/* Horario. «Departure:» va en la misma línea para no gastar una fila. */
.choko-cal-tour .choko-cal-tour-salidas-etiqueta { flex: 0 0 auto; margin: 0 6px 0 0; padding: 0; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; color: var(--choko-muted); }
/* Una salida: solo informativa. */
.choko-cal-tour .choko-cal-tour-datos .choko-cal-tour-salida-info { margin-top: 6px; font-weight: 600; color: var(--choko-ink); }

/* Dos salidas: un interruptor de dos partes unidas, para que se vea que hay
   que escoger una. Pulsar una hora elige también la tarjeta. */
.choko-cal-tour .choko-cal-tour-salidas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
.choko-cal-tour .choko-cal-tour-horas { display: inline-flex; overflow: hidden; border: 1px solid var(--choko-line); border-radius: 4px; background: #fff; }
.choko-cal-tour .choko-cal-tour-hora {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 30px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	color: var(--choko-ink);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}
.choko-cal-tour .choko-cal-tour-hora + .choko-cal-tour-hora { border-left: 1px solid var(--choko-line); }
@media (hover: hover) {
	.choko-cal-tour .choko-cal-tour-hora:hover { background: #f0f8fc; }
}
.choko-cal-tour .choko-cal-tour-hora:has(input:checked) { background: var(--choko-blue); color: #fff; }
.choko-cal-tour .choko-cal-tour-hora:has(input:focus-visible) { outline: 2px solid var(--choko-orange-btn); outline-offset: -2px; }

/* ---------- Botones ---------- */
.choko-cal-tour .choko-cal-tour-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.choko-cal-tour .choko-cal-tour-guardar,
.choko-cal-tour .choko-cal-tour-reservar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	padding: 0 22px;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.choko-cal-tour .choko-cal-tour-guardar { border: 1px solid var(--choko-blue); background: #fff; color: var(--choko-blue); }
@media (hover: hover) {
	.choko-cal-tour .choko-cal-tour-guardar:hover { background: #f0f8fc; }
}
/* «Book now» es la acción principal: el naranja del botón de enviar del formulario. */
.choko-cal-tour .choko-cal-tour-reservar,
.choko-cal-tour .choko-cal-tour-reservar:visited { border: 1px solid var(--choko-orange-btn); background: var(--choko-orange-btn); color: #fff; }
@media (hover: hover) {
	.choko-cal-tour .choko-cal-tour-reservar:hover { border-color: var(--choko-orange-dark); background: var(--choko-orange-dark); color: #fff; box-shadow: 0 2px 10px rgba(242, 149, 27, .35); }
}
.choko-cal-tour .choko-cal-tour-guardar:focus-visible,
.choko-cal-tour .choko-cal-tour-reservar:focus-visible { outline: 2px solid var(--choko-orange-btn); outline-offset: 2px; }

/* Confirmación en verde, como la del formulario de pasajeros. */
.choko-cal-tour .choko-cal-tour-aviso {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #e8f5ee;
	border: 1px solid #b7e0c6;
	border-left: 4px solid #16794c;
	border-radius: 6px;
	color: #16794c;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}
/* Vacío sigue en el DOM (para que el lector de pantalla lo anuncie al llenarse),
   pero sin alto ni hueco. */
.choko-cal-tour .choko-cal-tour-aviso:empty { margin: 0; padding: 0; border: 0; }
.choko-cal-tour .choko-cal-tour-aviso.is-error { background: #fdf0f0; border-color: #f1c4c4; border-left-color: #d64545; color: #b23434; }

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.choko-cal-tour { gap: 18px; padding: 14px; }
}
@media (max-width: 480px) {
	.choko-cal-tour .choko-cal-tour-barco { grid-template-columns: 96px minmax(0, 1fr); }
	.choko-cal-tour .choko-cal-tour-hora { padding: 0 10px; }
	.choko-cal-tour .choko-cal-tour-guardar,
	.choko-cal-tour .choko-cal-tour-reservar { flex: 1 1 100%; }
	.choko-cal-tour .ui-datepicker { padding: 8px; }
	.choko-cal-tour .ui-datepicker table { border-spacing: 3px; }
	.choko-cal-tour .ui-datepicker td a,
	.choko-cal-tour .ui-datepicker td span { height: 38px; font-size: 14px; }
}