/* MH Motor de Reservas — v1.6.1 · Autor: Antonio García Carreño */
.mhbk {
	--mhbk-tab: #eef0f3;
	--mhbk-ink: #23201d;
	--mhbk-muted: #6f6a64;
	--mhbk-line: #e4e1dc;
	position: relative;
	max-width: 1060px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--mhbk-ink);
	line-height: 1.3;
	box-sizing: border-box;
	z-index: 20;               /* las ventanas quedan por encima del contenido que sigue (p. ej. el pie) */
	container-type: inline-size;  /* el diseño se adapta al ancho del hueco donde se coloque */
	container-name: mhbk;
}
.mhbk.mhbk-popopen { z-index: 9999; }
.mhbk *, .mhbk *::before, .mhbk *::after { box-sizing: border-box; }
.mhbk button { font: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; -webkit-appearance: none; appearance: none; }

/* ---------- Pestañas ---------- */
.mhbk .mhbk-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.mhbk .mhbk-tab {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
	min-width: 0; margin: 0; padding: 12px 18px 16px; border: 0; border-radius: 12px 12px 0 0;
	background: var(--mhbk-tab); color: var(--mhbk-ink); text-align: left; cursor: pointer; transition: background .15s;
}
.mhbk .mhbk-tab b { font-size: .98em; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.mhbk .mhbk-tab small { max-width: 100%; font-size: .8em; color: var(--mhbk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhbk .mhbk-tab:hover { background: #fff; color: var(--mhbk-ink); }
.mhbk .mhbk-tab.is-on { background: #fff; }
.mhbk .mhbk-tab.is-on::after { content: ""; position: absolute; left: 18px; bottom: 7px; width: 22px; height: 3px; border-radius: 3px; background: var(--mh-accent, #a6191b); }
.mhbk .mhbk-tab:focus-visible { outline: 2px solid var(--mh-accent, #a6191b); outline-offset: -2px; }
.mhbk .mhbk-tab-eventos b::before { content: "★ "; color: #7b5bb5; }

/* ---------- Barra ---------- */
.mhbk .mhbk-panel { position: relative; }
.mhbk .mhbk-bar {
	position: relative; display: flex; align-items: center; gap: 8px;
	background: #fff; border-radius: 0 0 14px 14px; padding: 12px 12px 12px 8px;
	box-shadow: 0 8px 30px rgba(30, 20, 10, .16);
}
.mhbk .mhbk-field { position: relative; flex: 1 1 0; min-width: 160px; }
.mhbk .mhbk-f-date { position: static; }
.mhbk .mhbk-trigger {
	display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%;
	margin: 0; padding: 10px 18px; border: 0; border-radius: 10px; background: transparent; color: var(--mhbk-ink);
	text-align: left; cursor: pointer;
}
.mhbk .mhbk-trigger:hover, .mhbk .mhbk-trigger[aria-expanded="true"] { background: #f5f4f2; color: var(--mhbk-ink); }
.mhbk .mhbk-trigger small { font-size: .8em; color: var(--mhbk-muted); }
.mhbk .mhbk-trigger .mhbk-val { font-size: 1.05em; font-weight: 600; color: #8b857e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mhbk .mhbk-trigger .mhbk-val.is-set { color: var(--mhbk-ink); }
.mhbk .mhbk-sep { width: 1px; align-self: stretch; margin: 8px 0; background: var(--mhbk-line); }
.mhbk .mhbk-buy { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.mhbk .mhbk-btn {
	margin: 0; padding: 15px 30px; border: 0; border-radius: 10px; cursor: pointer;
	background: var(--mh-accent, #a6191b); color: #fff; font-weight: 700; font-size: 1.02em; white-space: nowrap;
	transition: filter .15s, transform .08s;
}
.mhbk .mhbk-btn:hover { filter: brightness(1.1); background: var(--mh-accent, #a6191b); color: #fff; }
.mhbk .mhbk-btn:active { transform: translateY(1px); }
.mhbk .mhbk-btn:disabled { opacity: .7; cursor: wait; }
.mhbk .mhbk-total { font-size: .82em; font-weight: 600; color: var(--mhbk-ink); min-height: 1em; }

.mhbk .mhbk-msg:not(.is-on) { display: none; }
.mhbk .mhbk-msg { margin: 10px 4px 0; padding: 10px 14px; border-radius: 10px; background: #fff3f2; color: #8a1712; border-left: 4px solid var(--mh-accent, #a6191b); font-weight: 600; font-size: .92em; }

.mhbk .mhbk-empty {
	display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
	background: #fff; border-radius: 0 0 14px 14px; padding: 26px 20px; box-shadow: 0 8px 30px rgba(30, 20, 10, .16);
}
.mhbk .mhbk-empty[hidden] { display: none; }
.mhbk .mhbk-empty b { font-size: 1.05em; }
.mhbk .mhbk-empty span { color: var(--mhbk-muted); font-size: .92em; }

/* ---------- Ventanas desplegables ---------- */
.mhbk .mhbk-pop {
	position: absolute; z-index: 30; top: calc(100% + 10px); left: 0;
	background: #fff; border-radius: 14px; box-shadow: 0 14px 44px rgba(30, 20, 10, .24); padding: 14px;
}
.mhbk .mhbk-pop[hidden] { display: none; }
.mhbk .mhbk-pop-vis { width: 440px; max-width: calc(100vw - 32px); }
.mhbk .mhbk-pop-date { width: min(860px, 100%); }
.mhbk .mhbk-pophead { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.mhbk .mhbk-pophead b { font-size: 1em; }
.mhbk .mhbk-x { margin: 0; padding: 0; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f2f1ef; color: var(--mhbk-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.mhbk .mhbk-x:hover { background: #e7e5e1; color: var(--mhbk-ink); }

.mhbk .mhbk-list { max-height: 60vh; overflow: auto; }
.mhbk .mhbk-gtitle { margin: 10px 4px 4px; font-size: .9em; color: #6d4aa8; }
.mhbk .mhbk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #f0eeeb; }
.mhbk .mhbk-row:last-child { border-bottom: 0; }
.mhbk .mhbk-row.has-qty .mhbk-name { font-weight: 600; }
.mhbk .mhbk-name { font-size: .95em; min-width: 0; }
.mhbk .mhbk-name b { font-weight: 600; }
.mhbk .mhbk-name em { display: block; font-style: normal; font-size: .84em; color: var(--mhbk-muted); }
.mhbk .mhbk-name small { display: block; margin-top: 2px; color: var(--mhbk-ink); font-weight: 700; }
.mhbk .mhbk-name small s { color: #a29c95; font-weight: 500; margin-right: 2px; }
.mhbk .mhbk-step { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mhbk .mhbk-step button {
	margin: 0; padding: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
	border: 1.5px solid var(--mh-accent, #a6191b); background: #fff; color: var(--mh-accent, #a6191b); font-size: 18px; font-weight: 700; line-height: 1;
}
.mhbk .mhbk-step button:hover:not(:disabled) { background: var(--mh-accent, #a6191b); color: #fff; }
.mhbk .mhbk-step button:disabled { opacity: .3; cursor: default; }
.mhbk .mhbk-step output { min-width: 22px; text-align: center; font-weight: 700; }
.mhbk .mhbk-note { margin: 8px 4px; color: var(--mhbk-muted); font-size: .9em; }
.mhbk .mhbk-popfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0eeeb; }
.mhbk .mhbk-sum { font-weight: 700; }
.mhbk .mhbk-apply { margin: 0; padding: 9px 20px; border: 0; border-radius: 99px; background: var(--mh-sel, #4f0c0e); color: #fff; font-weight: 600; cursor: pointer; }
.mhbk .mhbk-apply:hover { filter: brightness(1.15); background: var(--mh-sel, #4f0c0e); color: #fff; }

/* Calendario dentro del motor */
.mhbk .mhbk-cal { max-width: none; border: 0; padding: 4px 6px 6px; background: transparent; }
.mhbk .mhbk-cal .mhcal-title { display: none; }
.mhbk .mhbk-cal .mhcal-summary { display: none; }
.mhbk .mhbk-cal .mhcal-head { margin-bottom: 8px; }
.mhbk .mhbk-cal .mhcal-closed .mhcal-p { display: none; }
.mhbk .mhbk-cal .mhcal-grid .mhcal-cell { min-height: 54px; }

/* ---------- Hueco estrecho (columna de contenido, barra lateral, tablet) ---------- */
@container mhbk (max-width: 780px) {
	.mhbk .mhbk-bar { flex-wrap: wrap; row-gap: 6px; }
	.mhbk .mhbk-field { flex: 1 1 40%; }
	.mhbk .mhbk-f-vis { position: static; }
	.mhbk .mhbk-pop-vis { left: auto; right: 0; width: min(440px, 100%); }
	.mhbk .mhbk-buy { flex: 1 1 100%; align-items: stretch; }
	.mhbk .mhbk-btn { width: 100%; }
	.mhbk .mhbk-total { text-align: center; }
	.mhbk .mhbk-tab { padding: 10px 12px 15px; }
	.mhbk .mhbk-tab.is-on::after { left: 12px; }
}
@container mhbk (max-width: 540px) {
	.mhbk .mhbk-tabs { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
	.mhbk .mhbk-tab { border-radius: 12px; }
	.mhbk .mhbk-bar, .mhbk .mhbk-empty { border-radius: 14px; margin-top: 6px; }
	.mhbk .mhbk-bar { flex-direction: column; align-items: stretch; gap: 0; padding: 8px; }
	.mhbk .mhbk-field { flex: 1 1 auto; min-width: 0; }
	.mhbk .mhbk-sep { width: auto; height: 1px; margin: 2px 10px; align-self: auto; }
	.mhbk .mhbk-buy { margin-top: 8px; }
}

.mhbk .mhbk-backdrop { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
	.mhbk .mhbk-btn { padding: 14px 20px; }
}

/* ---------- Móvil: barra apilada y ventanas como hoja inferior ---------- */
@media (max-width: 720px) {
	.mhbk .mhbk-field, .mhbk .mhbk-f-date { position: static; }
	.mhbk .mhbk-trigger { padding: 12px 14px; }
	.mhbk .mhbk-btn { padding: 16px; }
	.mhbk .mhbk-pop, .mhbk .mhbk-pop-vis, .mhbk .mhbk-pop-date {
		position: fixed; z-index: 100000; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
		max-height: 88vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
		box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
	}
	.mhbk .mhbk-list { max-height: none; }
	.mhbk .mhbk-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 99999; background: rgba(20, 14, 10, .45); }
	.mhbk .mhbk-cal { padding: 0; }
}
@media (max-width: 720px) {
	.mhbk.mhbk-popopen { z-index: 100000; }
}
.mhbk .mhbk-trigger:focus { outline: none; box-shadow: none; }
.mhbk .mhbk-trigger:focus-visible { outline: 2px solid var(--mh-accent, #a6191b); outline-offset: -2px; }

/* ---------- 1.1 · Fecha primero, visitantes agrupados y tarifa ---------- */
.mhbk .mhbk-n { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-right: 6px; border-radius: 50%; background: var(--mh-accent, #a6191b); color: #fff; font-style: normal; font-size: .78em; font-weight: 700; vertical-align: 1px; }
.mhbk .mhbk-f-vis.is-wait .mhbk-n { background: #cfcac4; }
.mhbk .mhbk-f-vis.is-wait .mhbk-val { font-weight: 500; font-size: .95em; }
.mhbk .mhbk-vhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; padding: 9px 12px; border-radius: 10px; background: #f6f4f1; font-size: .86em; color: var(--mhbk-muted); }
.mhbk .mhbk-vhead[hidden] { display: none; }
.mhbk .mhbk-vhead b { color: var(--mhbk-ink); }
.mhbk .mhbk-vhead > span { flex: 1 1 220px; }
.mhbk .mhbk-season { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 99px; font-style: normal; font-weight: 600; font-size: .92em; color: var(--mhbk-ink); background: #eee; white-space: nowrap; }
.mhbk .mhbk-season.s-alta { background: var(--mh-alta-bg, #fbe1df); }
.mhbk .mhbk-season.s-media { background: var(--mh-media-bg, #fdf0d5); }
.mhbk .mhbk-season.s-baja { background: var(--mh-baja-bg, #dff1e4); }
.mhbk .mhbk-chg { margin: 0; padding: 0; border: 0; background: none; color: var(--mh-accent, #a6191b); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mhbk .mhbk-chg:hover { background: none; color: var(--mh-accent, #a6191b); filter: brightness(.85); }
.mhbk .mhbk-badge { display: inline-block; padding: 1px 7px; border-radius: 99px; background: #e8f4ea; color: #1f6b35; font-style: normal; font-size: .76em; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.mhbk .mhbk-disc { margin: 4px 0 2px; border: 1px solid var(--mhbk-line); border-radius: 12px; padding: 0 10px; }
.mhbk .mhbk-disc > summary { display: flex; align-items: center; gap: 8px; padding: 11px 0; cursor: pointer; list-style: none; font-size: .9em; font-weight: 600; }
.mhbk .mhbk-disc > summary::-webkit-details-marker { display: none; }
.mhbk .mhbk-disc > summary span { flex: 1 1 auto; }
.mhbk .mhbk-disc > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .15s; }
.mhbk .mhbk-disc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.mhbk .mhbk-disctext { margin: -4px 0 4px; font-size: .82em; color: var(--mhbk-muted); }
.mhbk .mhbk-disc .mhbk-row:last-child { border-bottom: 0; }
.mhbk .mhbk-free { margin-top: 6px; font-size: .82em; }
.mhbk .mhbk-fares { display: grid; gap: 8px; margin-top: 12px; }
.mhbk .mhbk-fare {
	display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 14px; text-align: left; cursor: pointer;
	border: 1.5px solid var(--mhbk-line); border-radius: 12px; background: #fff; color: var(--mhbk-ink); transition: border-color .15s, background .15s;
}
.mhbk .mhbk-fare:hover { border-color: #c9c3bc; background: #fff; color: var(--mhbk-ink); }
.mhbk .mhbk-fare.is-on { border-color: var(--mh-accent, #a6191b); background: #fff8f7; }
.mhbk .mhbk-radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #bdb6ae; }
.mhbk .mhbk-fare.is-on .mhbk-radio { border: 5px solid var(--mh-accent, #a6191b); }
.mhbk .mhbk-fbody { flex: 1 1 auto; min-width: 0; }
.mhbk .mhbk-fbody b { font-size: .95em; }
.mhbk .mhbk-fbody small, .mhbk .mhbk-famt small { display: block; margin-top: 2px; font-size: .8em; color: var(--mhbk-muted); }
.mhbk .mhbk-famt { flex: 0 0 auto; text-align: right; }
.mhbk .mhbk-famt b { font-size: 1.02em; }
.mhbk .mhbk-sum small { display: block; font-weight: 500; color: var(--mhbk-muted); }
.mhbk .mhbk-fare:focus-visible, .mhbk .mhbk-disc > summary:focus-visible { outline: 2px solid var(--mh-accent, #a6191b); outline-offset: 2px; }
.mhbk .mhbk-vexp { display: block; margin-bottom: 2px; font-size: 1.08em; color: var(--mhbk-ink); }

/* 1.3 · Textos del panel siempre alineados a la izquierda (aunque el tema centre el texto). */
.mhbk .mhbk-pop-vis, .mhbk .mhbk-pop-vis .mhbk-name, .mhbk .mhbk-pop-vis .mhbk-name *, .mhbk .mhbk-vhead, .mhbk .mhbk-vhead *,
.mhbk .mhbk-disc > summary, .mhbk .mhbk-disc > summary *, .mhbk .mhbk-disctext, .mhbk .mhbk-note, .mhbk .mhbk-gtitle,
.mhbk .mhbk-fbody, .mhbk .mhbk-fbody *, .mhbk .mhbk-sum, .mhbk .mhbk-pophead b { text-align: left !important; }
.mhbk .mhbk-name { flex: 1 1 auto; }
.mhbk .mhbk-famt, .mhbk .mhbk-famt * { text-align: right !important; }