/* Modal de fotos de una embarcación. Lo comparten el formulario de reserva y el
   calendario público de tour. Escenario de proporción fija para que el modal no
   dé saltos de alto entre foto y foto, y `contain` sobre carbón para que una foto
   vertical salga con bandas en vez de recortada.

   Todo prefijado con .choko-galeria-modal: en un post vive dentro de
   .entry-content y el tema le gana a una regla de una sola clase. */
.choko-galeria-modal {
	--choko-blue: #007aba;
	--choko-ink: #333333;
	--choko-muted: #6b7683;
	--choko-line: #d9dee5;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.choko-galeria-modal,
.choko-galeria-modal *,
.choko-galeria-modal *::before,
.choko-galeria-modal *::after { box-sizing: border-box; }
/* Sin esto el display:flex de arriba le gana al atributo hidden. */
.choko-galeria-modal[hidden],
.choko-galeria-modal [hidden] { display: none !important; }
.choko-galeria-modal button:hover { box-shadow: none; }

.choko-galeria-modal .choko-galeria-fondo { position: absolute; inset: 0; background: rgba(15, 20, 26, .72); }

.choko-galeria-modal .choko-galeria-caja {
	position: relative;
	width: 100%;
	max-width: 1000px;
	max-height: 92vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.choko-galeria-modal .choko-galeria-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--choko-line); }
.choko-galeria-modal .choko-galeria-cabecera h2 { margin: 0; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--choko-ink); }
.choko-galeria-modal .choko-galeria-cerrar { margin: 0; padding: 0 2px; border: 0; background: none; color: var(--choko-muted); font-size: 24px; line-height: 1; cursor: pointer; }

/* 16/10 fijo para que el modal no dé saltos de alto entre foto y foto. El tope
   en vh es para que, a 1000px de ancho, el escenario (625px) más la cabecera y
   el pie quepan en una pantalla de portátil sin que la caja tenga que hacer
   scroll por dentro. Sigue siendo un alto constante, así que no hay saltos. */
.choko-galeria-modal .choko-galeria-escenario { position: relative; aspect-ratio: 16 / 10; max-height: calc(92vh - 124px); display: flex; align-items: center; justify-content: center; background: #20262e; }
/* Borde, radio y relleno a cero: dentro de un post el tema se los pone a toda img. */
.choko-galeria-modal .choko-galeria-escenario img { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; display: block; }

.choko-galeria-modal .choko-galeria-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--choko-blue);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.choko-galeria-modal .choko-galeria-prev { left: 10px; }
.choko-galeria-modal .choko-galeria-sig { right: 10px; }

.choko-galeria-modal .choko-galeria-pie { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid #eef1f4; }
/* scroll-behavior lo usa galeriaPinta() al traer la miniatura activa a la vista. */
.choko-galeria-modal .choko-galeria-miniaturas { display: flex; gap: 6px; overflow-x: auto; flex: 1; scroll-behavior: smooth; }
.choko-galeria-modal .choko-galeria-miniaturas img {
	flex: 0 0 auto;
	width: 58px;
	height: 40px;
	margin: 0;
	object-fit: cover;
	border-radius: 3px;
	border: 2px solid transparent;
	opacity: .8;
	cursor: pointer;
	transition: opacity .12s ease;
}
/* La activa se distingue por el borde; la opacidad plena solo la refuerza. Al
   pasar el ratón se ilumina igual, sin competir con el borde. */
.choko-galeria-modal .choko-galeria-miniaturas img.is-activa { border-color: var(--choko-blue); opacity: 1; }
@media (hover: hover) {
	.choko-galeria-modal .choko-galeria-miniaturas img:hover { opacity: 1; }
}
.choko-galeria-modal .choko-galeria-contador { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--choko-muted); }

/* Con el modal abierto, la página de detrás no se desplaza. */
body.choko-galeria-abierta { overflow: hidden; }

@media (max-width: 600px) {
	.choko-galeria-modal { padding: 0; }
	.choko-galeria-modal .choko-galeria-caja { max-width: none; max-height: 100vh; border-radius: 0; }
}