/**
 * Maktub Booking - tarjetas y asistente de reserva.
 */

.maktub-cards {
	--maktub-clay: #b18a72;
	--maktub-clay-dark: #9a745d;
	--maktub-teal: #2f7d8a;
	--maktub-ink: #2b2b2b;
	--maktub-muted: #6f6f6f;
	--maktub-line: #e6e0da;
	--maktub-panel: #f7f5f2;
	--maktub-columns: 3;

	display: grid;
	grid-template-columns: repeat(var(--maktub-columns), minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 900px) {
	.maktub-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.maktub-cards {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* Con una tarjeta por fila, el panel puede aprovechar más ancho. */
	.maktub-card__panel {
		left: 10px;
		right: 10px;
		bottom: 10px;
		padding: 14px 15px;
	}
}

/**
 * Ancho completo en móvil.
 *
 * El margen lateral que se ve en móvil no lo pone el plugin: viene del padding
 * global del tema y, con Elementor, del contenedor del widget. Esta clase saca
 * la rejilla de ese contenedor para ocupar el ancho de la pantalla. Solo aplica
 * en móvil: en escritorio, 100vw contaría la barra de scroll y provocaría
 * desplazamiento horizontal.
 */
@media (max-width: 780px) {
	.maktub-cards.is-full-bleed {
		/**
		 * Solo márgenes negativos, sin `width: 100vw`.
		 *
		 * Declarar ambos suma los dos efectos y desborda: el desbordamiento
		 * ensancha el viewport de layout en móvil, eso agranda `vw`, y el margen
		 * vuelve a crecer. Sin `width`, el ancho lo resuelve el propio flujo a
		 * partir de los márgenes, que es exactamente lo que se busca.
		 *
		 * El `!important` no es capricho: los temas de bloques ponen
		 * `margin-inline: auto !important` a los hijos de `.is-layout-constrained`,
		 * y sin esto el margen negativo se pierde.
		 */
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
	}
}

/* --- Tarjeta --- */

.maktub-card {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font: inherit;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;

	/**
	 * La tarjeta es un <button>, y muchos temas le ponen `white-space: nowrap`:
	 * la descripción se quedaba en una línea y se cortaba a media palabra. Se
	 * fuerza aquí en vez de confiar en la herencia.
	 */
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.maktub-card:hover,
.maktub-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

.maktub-card:focus-visible {
	outline: 3px solid var(--maktub-teal);
	outline-offset: 3px;
}

.maktub-card__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 18px;
	background: var(--maktub-panel);
}

.maktub-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.maktub-card:hover .maktub-card__media img {
	transform: scale(1.04);
}

.maktub-card__panel {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: block;
	padding: 16px 18px;
	border-radius: 10px;
	background: rgba(250, 249, 247, .96);
	backdrop-filter: blur(3px);
}

.maktub-card__title {
	display: block;
	margin-bottom: 4px;
	color: var(--maktub-teal);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: normal;
	overflow-wrap: break-word;
}

.maktub-card__text {
	display: block;
	color: var(--maktub-ink);
	font-size: .92rem;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: break-word;
	text-overflow: clip;
}

/* --- Modal --- */

/**
 * Paleta del asistente.
 *
 * Todo el color del modal sale de estas variables. El widget de Elementor las
 * reescribe con `.maktub-modal.maktub-modal { ... }`: la doble clase le da más
 * especificidad que esta regla, así que gana sin depender del orden de carga.
 */
.maktub-modal {
	--maktub-clay: #b18a72;
	--maktub-clay-dark: #9a745d;
	--maktub-clay-soft: #c9a58e;
	--maktub-teal: #2f7d8a;
	--maktub-ink: #2b2b2b;
	--maktub-muted: #6f6f6f;
	--maktub-line: #e6e0da;
	--maktub-panel: #f7f5f2;

	/* Superficies */
	--maktub-backdrop: rgba(30, 24, 20, .55);
	--maktub-surface: #fff;
	--maktub-radius: 14px;

	/* Barra de pasos */
	--maktub-sidebar-bg: var(--maktub-clay);
	--maktub-sidebar-text: #fff;
	--maktub-sidebar-active: rgba(255, 255, 255, .18);
	--maktub-sidebar-border: rgba(255, 255, 255, .25);
	--maktub-check-bg: #12707a;
	--maktub-step-radius: 8px;
	/* Paso actual en la barra de progreso de móvil. */
	--maktub-step-current: #4a5f66;

	/* Opciones: clases, modalidades y horas */
	--maktub-option-bg: #fff;
	--maktub-option-border: var(--maktub-line);
	--maktub-option-hover: var(--maktub-clay);
	--maktub-option-selected-bg: var(--maktub-panel);
	--maktub-option-selected-border: var(--maktub-clay);
	--maktub-option-radius: 10px;
	--maktub-price: var(--maktub-clay-dark);
	--maktub-account-hover-bg: #36808038;
	--maktub-account-hover-text: #368080;
	--maktub-account-active-text: #fff;
	--maktub-account-radius: var(--maktub-option-radius);

	/* Calendario */
	--maktub-day-bg: #fff;
	--maktub-day-hover-bg: var(--maktub-day-bg);
	--maktub-day-hover-border: var(--maktub-option-hover);
	--maktub-day-hover-text: var(--maktub-ink);
	--maktub-day-selected-bg: var(--maktub-clay);
	--maktub-day-selected-text: #fff;
	--maktub-day-disabled: #c9c4bf;
	--maktub-day-radius: 8px;
	--maktub-nav-radius: 8px;

	/* Franja seleccionada */
	--maktub-slot-bg: #fdfcfa;
	--maktub-slot-border: var(--maktub-option-border);
	--maktub-slot-text: var(--maktub-ink);
	--maktub-slot-hover-bg: var(--maktub-slot-bg);
	--maktub-slot-hover-border: var(--maktub-option-hover);
	--maktub-slot-hover-text: var(--maktub-slot-text);
	--maktub-slot-selected-bg: var(--maktub-clay);
	--maktub-slot-selected-border: var(--maktub-slot-selected-bg);
	--maktub-slot-selected-text: #fff;
	--maktub-slot-radius: 8px;
	--maktub-date-heading: var(--maktub-ink);
	--maktub-quorum-bg: #f3e6d8;
	--maktub-quorum-text: #8a5a2b;
	--maktub-quorum-radius: 999px;

	/* Formularios y resumen */
	--maktub-field-radius: 8px;
	--maktub-summary-radius: 10px;
	--maktub-summary-pay-text: #fff;
	--maktub-note-radius: 0px;

	/* Botón principal */
	--maktub-button-bg: var(--maktub-clay);
	--maktub-button-hover: var(--maktub-clay-dark);
	--maktub-button-text: #fff;
	--maktub-button-disabled: var(--maktub-clay-soft);
	--maktub-button-radius: 6px;

	/* Avisos */
	--maktub-error: #a3352b;
	--maktub-note-bg: var(--maktub-panel);
	--maktub-note-border: var(--maktub-clay);

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}

.maktub-modal[hidden] {
	display: none !important;
}

/**
 * Casi todo lo pulsable del asistente es un <button>, y hay temas que les ponen
 * `white-space: nowrap`. Sin esto, las descripciones de las opciones se quedan
 * en una línea y se cortan.
 */
.maktub-modal.maktub-modal button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font-family: inherit;
	font-style: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Una hora partida en dos líneas es ilegible: ahí sí interesa el nowrap. */
.maktub-modal .maktub-slot__time,
.maktub-modal .maktub-day,
.maktub-modal .maktub-mode__price,
.maktub-modal .maktub-service__price {
	white-space: nowrap;
}

.maktub-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--maktub-backdrop);
}

.maktub-modal__dialog {
	position: relative;
	display: flex;
	width: min(1000px, 100%);
	max-height: min(760px, 92vh);
	border-radius: var(--maktub-radius);
	background: var(--maktub-surface);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
	overflow: hidden;
}

/* Barra lateral de pasos */

.maktub-modal__steps {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0 0 300px;
	padding: 26px 22px;
	background: var(--maktub-sidebar-bg);
	color: var(--maktub-sidebar-text);
	transition: flex-basis .3s ease, padding .3s ease;
}

.maktub-modal__dialog.is-collapsed .maktub-modal__steps {
	flex-basis: 76px;
	padding: 26px 14px;
}

.maktub-modal__dialog.is-collapsed .maktub-step__text,
.maktub-modal__dialog.is-collapsed .maktub-collapse__label {
	display: none;
}

.maktub-modal__dialog.is-collapsed .maktub-collapse__icon {
	transform: rotate(180deg);
}

.maktub-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.maktub-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 14px;
	border-radius: var(--maktub-step-radius);
	margin-bottom: 4px;
	font-size: .95rem;
	transition: background .2s ease;
}

.maktub-step.is-active {
	background: var(--maktub-sidebar-active);
}

.maktub-step.is-done {
	cursor: pointer;
}

.maktub-step__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	height: 20px;
	opacity: .9;
}

.maktub-step__text {
	flex: 1 1 auto;
	min-width: 0;
}

.maktub-step__label {
	display: block;
	font-weight: 500;
}

.maktub-step__value {
	display: block;
	margin-top: 3px;
	font-size: .82rem;
	opacity: .85;
	overflow-wrap: anywhere;
}

.maktub-step__mark {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--maktub-sidebar-border);
	display: grid;
	place-items: center;
	font-size: .7rem;
	line-height: 1;
}

.maktub-step.is-done .maktub-step__mark {
	background: var(--maktub-check-bg);
	border-color: var(--maktub-check-bg);
}

.maktub-collapse {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-top: 20px;
	padding: 13px 30px;
	border: 0;
	border-radius: var(--maktub-button-radius);
	background: var(--maktub-button-bg);
	color: var(--maktub-button-text);
	font: inherit;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.maktub-collapse:hover,
.maktub-collapse:focus,
.maktub-collapse:active {
	outline: none;
	background: var(--maktub-button-hover);
	color: var(--maktub-button-text);
}

.maktub-modal__dialog.is-collapsed .maktub-collapse {
	justify-content: center;
}

.maktub-collapse__icon {
	transition: transform .3s ease;
}

/* Panel principal */

.maktub-modal__main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.maktub-modal__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 26px;
	border-bottom: 1px solid var(--maktub-line);
}

.maktub-modal__title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--maktub-ink);
}

.maktub-back,
.maktub-close {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: var(--maktub-nav-radius);
	border: 1px solid var(--maktub-option-border);
	background: var(--maktub-surface);
	color: var(--maktub-price);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.maktub-back svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.maktub-close {
	border-color: transparent;
	color: var(--maktub-ink);
	font-size: 1.5rem;
}

.maktub-back:hover,
.maktub-close:hover {
	background: var(--maktub-panel);
}

.maktub-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 24px 26px;
}

.maktub-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 16px 26px;
	border-top: 1px solid var(--maktub-option-border);
}

.maktub-error {
	flex: 1 1 auto;
	margin: 0;
	color: var(--maktub-error);
	font-size: .9rem;
}

.maktub-error[hidden] {
	display: none;
}

.maktub-continue {
	padding: 13px 30px;
	border: 0;
	border-radius: var(--maktub-button-radius);
	background: var(--maktub-button-bg);
	color: var(--maktub-button-text);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background .2s ease;
}

.maktub-continue:hover:not(:disabled) {
	background: var(--maktub-button-hover);
}

.maktub-continue:disabled {
	background: var(--maktub-button-disabled);
	cursor: not-allowed;
}

/* Mis bonos, en el área de cliente */

.maktub-passes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin: 0 0 32px;
}

.maktub-passes__intro {
	margin: -4px 0 18px;
	color: var(--maktub-muted, #6f6f6f);
}

.maktub-pass {
	padding: 18px;
	border: 1px solid var(--maktub-line, #e6e0da);
	border-left: 4px solid var(--maktub-clay, #b18a72);
	border-radius: 8px;
	background: var(--maktub-slot-bg, #fdfcfa);
}

.maktub-pass__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 10px;
}

.maktub-pass__head span {
	color: var(--maktub-muted, #6f6f6f);
	font-size: .85rem;
}

.maktub-pass__count {
	margin: 0 0 4px;
	font-size: .92rem;
}

.maktub-pass__count strong {
	font-size: 1.7rem;
	line-height: 1;
	color: var(--maktub-clay-dark, #9a745d);
}

.maktub-pass__usage {
	margin: 0 0 8px;
	color: var(--maktub-muted, #6f6f6f);
	font-size: .82rem;
}

.maktub-pass__expiry,
.maktub-pass__status {
	margin: 0 0 14px;
	color: var(--maktub-muted, #6f6f6f);
	font-size: .82rem;
}

.maktub-pass__status {
	font-weight: 600;
}

.maktub-pass__book {
	width: 100%;
}

/* Paso: modalidad de compra */

.maktub-modes {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}

.maktub-mode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	padding: 16px 18px;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-option-radius);
	background: var(--maktub-option-bg);
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: border-color .2s ease, background .2s ease;
}

.maktub-mode:hover {
	border-color: var(--maktub-option-hover);
	background: var(--maktub-option-hover-bg, var(--maktub-option-bg));
}

.maktub-mode.is-selected {
	border-color: var(--maktub-option-selected-border);
	background: var(--maktub-option-selected-bg);
}

.maktub-mode__body {
	flex: 1 1 auto;
	min-width: 0;
}

.maktub-mode__name {
	display: block;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--maktub-ink);
}

.maktub-mode__desc {
	display: block;
	margin-top: 3px;
	color: var(--maktub-muted);
	font-size: .86rem;
	line-height: 1.4;
}

.maktub-mode__price {
	flex: 0 0 auto;
	color: var(--maktub-price);
	font-size: 1.1rem;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.maktub-mode__unit {
	display: block;
	margin-top: 3px;
	color: var(--maktub-muted);
	font-size: .78rem;
	font-weight: 400;
}

.maktub-intro {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--maktub-ink);
}

.maktub-help {
	margin: 0;
	color: var(--maktub-muted);
	font-size: .9rem;
}

/* Paso: servicios */

.maktub-search {
	position: relative;
	margin-bottom: 18px;
}

.maktub-search input {
	width: 100%;
	padding: 13px 16px 13px 42px;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-field-radius);
	font-size: .95rem;
	box-sizing: border-box;
}

.maktub-search::before {
	content: "⌕";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--maktub-muted);
	font-size: 1.2rem;
}

.maktub-service {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px;
	margin-bottom: 12px;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-option-radius);
	background: var(--maktub-option-bg);
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: border-color .2s ease, background .2s ease;
}

.maktub-service:hover {
	border-color: var(--maktub-option-hover);
	background: var(--maktub-option-hover-bg, var(--maktub-option-bg));
}

.maktub-service.is-selected {
	border-color: var(--maktub-option-selected-border);
	background: var(--maktub-option-selected-bg);
}

.maktub-service__image {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	object-fit: cover;
}

.maktub-service__body {
	flex: 1 1 auto;
	min-width: 0;
}

.maktub-service__name {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--maktub-ink);
}

.maktub-service__meta {
	display: block;
	margin-top: 4px;
	color: var(--maktub-muted);
	font-size: .85rem;
}

.maktub-service__price {
	flex: 0 0 auto;
	color: var(--maktub-price);
	font-size: 1.05rem;
	font-weight: 600;
	white-space: nowrap;
}

/**
 * Texto de la opción elegida.
 *
 * `--maktub-option-selected-text` no se declara por defecto a propósito: sin
 * ella, cada elemento conserva su color de siempre gracias al fallback. En
 * cuanto se define (desde Elementor), todo el bloque pasa a ese color, que es
 * lo que hace falta cuando se elige un fondo oscuro o saturado.
 */
.maktub-service.is-selected .maktub-service__name,
.maktub-mode.is-selected .maktub-mode__name {
	color: var(--maktub-option-selected-text, var(--maktub-ink));
}

.maktub-service.is-selected .maktub-service__meta,
.maktub-mode.is-selected .maktub-mode__desc,
.maktub-mode.is-selected .maktub-mode__unit {
	color: var(--maktub-option-selected-text, var(--maktub-muted));
}

.maktub-service.is-selected .maktub-service__price,
.maktub-mode.is-selected .maktub-mode__price {
	color: var(--maktub-option-selected-text, var(--maktub-price));
}

/* Sobre un fondo de color, el texto secundario se separa por opacidad. */
.maktub-service.is-selected .maktub-service__meta,
.maktub-mode.is-selected .maktub-mode__desc,
.maktub-mode.is-selected .maktub-mode__unit {
	opacity: .8;
}

/* Paso: calendario */

.maktub-calendar__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.maktub-calendar__month {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--maktub-ink);
}

.maktub-calendar__nav button {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-nav-radius);
	background: var(--maktub-day-bg);
	color: var(--maktub-price);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.maktub-calendar__nav button svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.maktub-calendar__nav button:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.maktub-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

.maktub-grid__head {
	padding: 6px 0;
	color: var(--maktub-muted);
	font-size: .82rem;
	font-weight: 600;
	text-align: center;
}

.maktub-day {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-day-radius);
	background: var(--maktub-day-bg);
	color: var(--maktub-ink);
	font: inherit;
	font-size: .95rem;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.maktub-day:hover:not(:disabled):not(.is-selected),
.maktub-day:focus-visible:not(:disabled):not(.is-selected) {
	border-color: var(--maktub-day-hover-border);
	background: var(--maktub-day-hover-bg);
	color: var(--maktub-day-hover-text);
}

.maktub-day:disabled {
	border-color: transparent;
	background: transparent;
	color: var(--maktub-day-disabled);
	cursor: not-allowed;
}

.maktub-day.is-selected {
	background: var(--maktub-day-selected-bg);
	border-color: var(--maktub-day-selected-bg);
	color: var(--maktub-day-selected-text);
}

.maktub-day.is-empty {
	border: 0;
	background: none;
	cursor: default;
}

/* Paso: horas */

.maktub-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 12px;
	margin-top: 22px;
}

.maktub-slot {
	padding: 14px 16px;
	border: 1px solid var(--maktub-slot-border);
	border-radius: var(--maktub-slot-radius);
	background: var(--maktub-slot-bg);
	color: var(--maktub-slot-text);
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: border-color .2s ease, background .2s ease;
}

.maktub-slot:hover {
	border-color: var(--maktub-slot-hover-border);
	background: var(--maktub-slot-hover-bg);
	color: var(--maktub-slot-hover-text);
}

.maktub-slot.is-selected {
	background: var(--maktub-slot-selected-bg);
	border-color: var(--maktub-slot-selected-border);
	color: var(--maktub-slot-selected-text);
}

.maktub-slot__time {
	display: block;
	font-size: 1rem;
	font-weight: 600;
}

.maktub-slot__meta {
	display: block;
	margin-top: 5px;
	font-size: .82rem;
	opacity: .8;
}

.maktub-slot__quorum {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 8px;
	border-radius: var(--maktub-quorum-radius);
	background: var(--maktub-quorum-bg);
	color: var(--maktub-quorum-text);
	font-size: .75rem;
}

.maktub-slot.is-selected .maktub-slot__quorum {
	background: rgba(255, 255, 255, .25);
	color: var(--maktub-slot-selected-text);
}

.maktub-date-heading {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--maktub-date-heading);
}

/* Paso: datos */

.maktub-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.maktub-field--full {
	grid-column: 1 / -1;
}

.maktub-field label {
	display: block;
	margin-bottom: 7px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--maktub-ink);
}

.maktub-field .maktub-required {
	color: var(--maktub-error);
}

.maktub-field input,
.maktub-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-field-radius);
	font-size: .95rem;
	font-family: inherit;
	box-sizing: border-box;
}

.maktub-field input:focus,
.maktub-field textarea:focus {
	outline: 2px solid var(--maktub-option-hover);
	outline-offset: -1px;
}

.maktub-field input.has-error {
	border-color: var(--maktub-error);
}

/* Paso: cuenta */

.maktub-account {
	max-width: 620px;
}

.maktub-account__tabs {
	display: flex;
	gap: 10px;
	margin: 24px 0 20px;
}

.maktub-account__tabs button {
	padding: 11px 18px;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-account-radius);
	background: var(--maktub-option-bg);
	color: var(--maktub-ink);
	font: inherit;
	cursor: pointer;
}

.maktub-account__tabs button:hover:not(.is-active),
.maktub-account__tabs button:focus-visible:not(.is-active) {
	border-color: var(--maktub-account-hover-text);
	background: var(--maktub-account-hover-bg);
	color: var(--maktub-account-hover-text);
}

.maktub-account__tabs button.is-active {
	border-color: var(--maktub-option-selected-border);
	background: var(--maktub-option-selected-bg);
	color: var(--maktub-account-active-text);
}

.maktub-account__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.maktub-account__form small {
	display: block;
	margin-top: 6px;
	color: var(--maktub-muted);
	font-size: .8rem;
}

.maktub-account__form input[readonly] {
	background: var(--maktub-panel);
	color: var(--maktub-muted);
}

.maktub-account__error {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--maktub-error);
	font-size: .9rem;
}

@media (max-width: 640px) {
	.maktub-fields,
	.maktub-account__form {
		grid-template-columns: 1fr;
	}

	.maktub-account__tabs {
		flex-direction: column;
	}
}

/* Paso: resumen y pago */

.maktub-summary {
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-summary-radius);
	overflow: hidden;
}

.maktub-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--maktub-line);
	font-size: .95rem;
}

.maktub-summary__row:last-child {
	border-bottom: 0;
}

.maktub-summary__row dt {
	margin: 0;
	color: var(--maktub-muted);
}

.maktub-summary__row dd {
	margin: 0;
	font-weight: 600;
	color: var(--maktub-ink);
	text-align: right;
}

.maktub-summary__row--pay {
	background: var(--maktub-option-selected-bg);
}

.maktub-summary__row--pay dd {
	font-size: 1.25rem;
	color: var(--maktub-summary-pay-text);
}

.maktub-summary__row--pay dt {
	color: var(--maktub-summary-pay-text);
}

.maktub-coupon {
	margin-top: 18px;
}

.maktub-coupon > label {
	display: block;
	margin-bottom: 7px;
	color: var(--maktub-ink);
	font-size: .92rem;
	font-weight: 500;
}

.maktub-coupon__row {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.maktub-coupon__row input {
	min-width: 0;
	flex: 1 1 auto;
	padding: 12px 14px;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-field-radius);
	background: var(--maktub-surface);
	color: var(--maktub-ink);
	font: inherit;
}

.maktub-coupon__row input:focus {
	outline: 2px solid var(--maktub-option-hover);
	outline-offset: -1px;
}

.maktub-coupon__row button {
	flex: 0 0 auto;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--maktub-button-radius);
	background: var(--maktub-button-bg);
	color: var(--maktub-button-text);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.maktub-coupon__row button:hover:not(:disabled),
.maktub-coupon__row button:focus:not(:disabled) {
	background: var(--maktub-button-hover);
}

.maktub-coupon__row button:disabled {
	background: var(--maktub-button-disabled);
	cursor: wait;
}

.maktub-coupon__message {
	margin: 8px 0 0;
	font-size: .85rem;
}

.maktub-coupon__message.is-success {
	color: var(--maktub-date-heading);
}

.maktub-coupon__message.is-error {
	color: var(--maktub-error);
}

.maktub-note {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-left: 3px solid var(--maktub-note-border);
	border-radius: var(--maktub-note-radius);
	background: var(--maktub-note-bg);
	color: var(--maktub-ink);
	font-size: .88rem;
	line-height: 1.5;
}

.maktub-empty {
	padding: 40px 20px;
	color: var(--maktub-muted);
	text-align: center;
}

.maktub-loading {
	padding: 40px 20px;
	color: var(--maktub-muted);
	text-align: center;
}

/**
 * Aislamiento frente al Kit global de Elementor y los estilos del tema.
 *
 * Elementor puede cargar sus reglas globales después de esta hoja. La doble
 * clase del modal da a estos selectores suficiente especificidad para que el
 * asistente mantenga su diseño aunque el kit se elimine, se regenere o cambie.
 * Los controles del widget siguen funcionando porque solo reescriben las
 * variables `--maktub-*` consumidas por estas declaraciones.
 */
.maktub-modal.maktub-modal,
.maktub-modal.maktub-modal * {
	box-sizing: border-box;
}

.maktub-modal.maktub-modal h1,
.maktub-modal.maktub-modal h2,
.maktub-modal.maktub-modal h3,
.maktub-modal.maktub-modal h4,
.maktub-modal.maktub-modal p,
.maktub-modal.maktub-modal dl,
.maktub-modal.maktub-modal dt,
.maktub-modal.maktub-modal dd,
.maktub-modal.maktub-modal label {
	font-family: inherit;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
}

.maktub-modal.maktub-modal .maktub-modal__title {
	margin: 0;
	color: var(--maktub-ink);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.25;
}

.maktub-modal.maktub-modal .maktub-modal__dialog {
	border: 0;
	border-radius: var(--maktub-radius);
	background: var(--maktub-surface);
}

.maktub-modal.maktub-modal .maktub-modal__header {
	border-bottom: 1px solid var(--maktub-line);
	background: var(--maktub-surface);
}

.maktub-modal.maktub-modal .maktub-modal__body,
.maktub-modal.maktub-modal .maktub-modal__footer {
	background: var(--maktub-surface);
}

.maktub-modal.maktub-modal .maktub-modal__footer {
	border-top: 1px solid var(--maktub-option-border);
}

.maktub-modal.maktub-modal .maktub-back,
.maktub-modal.maktub-modal .maktub-close {
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	padding: 0;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-nav-radius);
	background: var(--maktub-surface);
	color: var(--maktub-price);
	line-height: 1;
}

.maktub-modal.maktub-modal .maktub-close {
	border-color: transparent;
	color: var(--maktub-ink);
}

.maktub-modal.maktub-modal .maktub-back:hover,
.maktub-modal.maktub-modal .maktub-back:focus-visible,
.maktub-modal.maktub-modal .maktub-close:hover,
.maktub-modal.maktub-modal .maktub-close:focus-visible {
	background: var(--maktub-panel);
	color: var(--maktub-ink);
}

.maktub-modal.maktub-modal .maktub-mode,
.maktub-modal.maktub-modal .maktub-service {
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-option-radius);
	background: var(--maktub-option-bg);
	color: var(--maktub-ink);
}

.maktub-modal.maktub-modal .maktub-step {
	border-radius: var(--maktub-step-radius);
}

.maktub-modal.maktub-modal .maktub-mode:hover,
.maktub-modal.maktub-modal .maktub-service:hover {
	border-color: var(--maktub-option-hover);
	background: var(--maktub-option-hover-bg, var(--maktub-option-bg));
}

.maktub-modal.maktub-modal .maktub-mode.is-selected,
.maktub-modal.maktub-modal .maktub-service.is-selected {
	border-color: var(--maktub-option-selected-border);
	background: var(--maktub-option-selected-bg);
}

.maktub-modal.maktub-modal .maktub-calendar__nav button,
.maktub-modal.maktub-modal .maktub-day {
	padding: 0;
	border: 1px solid var(--maktub-option-border);
	background: var(--maktub-day-bg);
	color: var(--maktub-ink);
}

.maktub-modal.maktub-modal .maktub-day,
.maktub-modal.maktub-modal .maktub-day:hover,
.maktub-modal.maktub-modal .maktub-day:focus,
.maktub-modal.maktub-modal .maktub-day:focus-visible,
.maktub-modal.maktub-modal .maktub-day:active,
.maktub-modal.maktub-modal .maktub-day.is-selected {
	border-radius: var(--maktub-day-radius);
}

.maktub-modal.maktub-modal .maktub-calendar__nav button {
	border-radius: var(--maktub-nav-radius);
	color: var(--maktub-price);
}

.maktub-modal.maktub-modal .maktub-day:hover:not(:disabled):not(.is-selected),
.maktub-modal.maktub-modal .maktub-day:focus-visible:not(:disabled):not(.is-selected) {
	border-color: var(--maktub-day-hover-border);
	background: var(--maktub-day-hover-bg);
	color: var(--maktub-day-hover-text);
}

.maktub-modal.maktub-modal .maktub-day:disabled,
.maktub-modal.maktub-modal .maktub-day.is-empty {
	border-color: transparent;
	background: transparent;
}

.maktub-modal.maktub-modal .maktub-day:disabled {
	color: var(--maktub-day-disabled);
}

.maktub-modal.maktub-modal .maktub-day.is-selected {
	border-color: var(--maktub-day-selected-bg);
	background: var(--maktub-day-selected-bg);
	color: var(--maktub-day-selected-text);
}

.maktub-modal.maktub-modal .maktub-slot {
	border: 1px solid var(--maktub-slot-border);
	border-radius: var(--maktub-slot-radius);
	background: var(--maktub-slot-bg);
	color: var(--maktub-slot-text);
}

.maktub-modal.maktub-modal .maktub-slot:hover {
	border-color: var(--maktub-slot-hover-border);
	background: var(--maktub-slot-hover-bg);
	color: var(--maktub-slot-hover-text);
}

.maktub-modal.maktub-modal .maktub-slot.is-selected {
	border-color: var(--maktub-slot-selected-border);
	background: var(--maktub-slot-selected-bg);
	color: var(--maktub-slot-selected-text);
}

.maktub-modal.maktub-modal .maktub-slot__quorum {
	border-radius: var(--maktub-quorum-radius);
}

.maktub-modal.maktub-modal .maktub-field input,
.maktub-modal.maktub-modal .maktub-field textarea,
.maktub-modal.maktub-modal .maktub-search input,
.maktub-modal.maktub-modal .maktub-coupon__row input {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--maktub-option-border);
	border-radius: var(--maktub-field-radius);
	background: var(--maktub-surface);
	color: var(--maktub-ink);
	font-family: inherit;
	font-size: .95rem;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}

.maktub-modal.maktub-modal .maktub-coupon__row button {
	border: 0;
	border-radius: var(--maktub-button-radius);
	background-color: var(--maktub-button-bg);
	color: var(--maktub-button-text);
	text-transform: none;
}

.maktub-modal.maktub-modal .maktub-coupon__row button:hover:not(:disabled),
.maktub-modal.maktub-modal .maktub-coupon__row button:focus:not(:disabled) {
	background-color: var(--maktub-button-hover);
	color: var(--maktub-button-text);
}

.maktub-modal.maktub-modal .maktub-coupon__row button:disabled {
	background-color: var(--maktub-button-disabled);
	color: var(--maktub-button-text);
}

.maktub-modal.maktub-modal .maktub-summary {
	border-radius: var(--maktub-summary-radius);
}

.maktub-modal.maktub-modal .maktub-summary__row--pay,
.maktub-modal.maktub-modal .maktub-summary__row--pay dt,
.maktub-modal.maktub-modal .maktub-summary__row--pay dd {
	color: var(--maktub-summary-pay-text) !important;
}

.maktub-modal.maktub-modal .maktub-account__tabs button,
.maktub-modal.maktub-modal .maktub-account__tabs button:hover,
.maktub-modal.maktub-modal .maktub-account__tabs button:focus,
.maktub-modal.maktub-modal .maktub-account__tabs button:active,
.maktub-modal.maktub-modal .maktub-account__tabs button.is-active {
	border-radius: var(--maktub-account-radius) !important;
}

.maktub-modal.maktub-modal .maktub-account__tabs button:hover:not(.is-active),
.maktub-modal.maktub-modal .maktub-account__tabs button:focus-visible:not(.is-active) {
	border-color: var(--maktub-account-hover-text) !important;
	background-color: var(--maktub-account-hover-bg) !important;
	color: var(--maktub-account-hover-text) !important;
}

.maktub-modal.maktub-modal .maktub-account__tabs button.is-active,
.maktub-modal.maktub-modal .maktub-account__tabs button.is-active:hover,
.maktub-modal.maktub-modal .maktub-account__tabs button.is-active:focus {
	border-color: var(--maktub-option-selected-border) !important;
	background-color: var(--maktub-option-selected-bg) !important;
	color: var(--maktub-account-active-text) !important;
}

.maktub-modal.maktub-modal .maktub-note {
	border-radius: var(--maktub-note-radius);
}

.maktub-modal.maktub-modal .maktub-collapse,
.maktub-modal.maktub-modal .maktub-continue {
	border: 0;
	border-radius: var(--maktub-button-radius) !important;
	background-color: var(--maktub-button-bg) !important;
	color: var(--maktub-button-text) !important;
	padding: 13px 30px !important;
	font-size: 1rem;
	font-weight: 500;
	box-sizing: border-box;
}

.maktub-modal.maktub-modal .maktub-modal__dialog.is-collapsed .maktub-collapse {
	justify-content: center;
}

.maktub-modal.maktub-modal .maktub-collapse:hover,
.maktub-modal.maktub-modal .maktub-collapse:focus,
.maktub-modal.maktub-modal .maktub-collapse:active,
.maktub-modal.maktub-modal .maktub-continue:hover:not(:disabled),
.maktub-modal.maktub-modal .maktub-continue:focus:not(:disabled),
.maktub-modal.maktub-modal .maktub-continue:active:not(:disabled) {
	background-color: var(--maktub-button-hover) !important;
	color: var(--maktub-button-text) !important;
}

.maktub-modal.maktub-modal .maktub-continue:disabled {
	background-color: var(--maktub-button-disabled) !important;
	color: var(--maktub-button-text) !important;
}

.maktub-cards.maktub-cards .maktub-card {
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent;
	color: var(--maktub-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-style: normal;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	box-shadow: none;
	white-space: normal;
}

.maktub-cards.maktub-cards .maktub-card:hover,
.maktub-cards.maktub-cards .maktub-card:focus-visible {
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

/**
 * Móvil: el asistente ocupa toda la pantalla y la barra lateral se convierte en
 * una barra de progreso de segmentos bajo la cabecera.
 *
 * En una pantalla pequeña, un diálogo centrado con márgenes desperdicia espacio
 * justo donde menos sobra, y la lista de pasos se come media pantalla.
 */

@media (max-width: 780px) {
	.maktub-modal {
		padding: 0;
	}

	.maktub-modal.maktub-modal .maktub-modal__dialog {
		flex-direction: column;
		width: 100%;
		max-width: none;
		/* dvh en vez de vh: evita el salto al ocultarse la barra del navegador. */
		height: 100dvh;
		max-height: none;
		border-radius: 0;
	}

	/**
	 * `display: contents` disuelve el contenedor: cabecera, cuerpo y pie pasan a
	 * ser hijos directos del diálogo, y así se puede colar la barra de progreso
	 * entre la cabecera y el contenido sin tocar el orden del HTML.
	 */
	.maktub-modal__main {
		display: contents;
	}

	.maktub-modal.maktub-modal .maktub-modal__header {
		order: 1;
		padding: 14px 18px;
		/* Sin borde propio: la barra de progreso hace de línea inferior. */
		border-bottom: 0;
	}

	.maktub-modal__steps {
		order: 2;
		flex: 0 0 auto;
		padding: 0;
		background: transparent;
		color: inherit;
	}

	.maktub-modal__body {
		order: 3;
		flex: 1 1 auto;
		padding: 20px 18px;
		-webkit-overflow-scrolling: touch;
	}

	.maktub-modal__footer {
		order: 4;
		padding: 14px 18px;
		/* Deja hueco a la barra de gestos de iOS. */
		padding-bottom: calc(14px + env(safe-area-inset-bottom));
	}

	/**
	 * La barra va pegada al borde inferior de la cabecera, no separada debajo:
	 * los segmentos pendientes hacen de línea divisoria y los completados la
	 * van tiñendo de izquierda a derecha.
	 *
	 * El hueco entre segmentos es generoso a propósito: con 2-3 px se leen como
	 * una sola barra partida y se pierde la cuenta de los pasos.
	 */
	.maktub-steps {
		display: flex;
		gap: 8px;
		padding: 0 18px;
	}

	.maktub-step {
		flex: 1 1 0;
		height: 3px;
		padding: 0;
		margin: 0;
		border-radius: 0;
		background: var(--maktub-line);
		transition: background .25s ease;
	}

	.maktub-step.is-done {
		background: var(--maktub-clay);
	}

	/* El paso actual en un tono neutro oscuro: destaca sobre los ya hechos. */
	.maktub-step.is-active {
		background: var(--maktub-step-current);
	}

	/* Dentro de un segmento de 3px no cabe nada más. */
	.maktub-step__icon,
	.maktub-step__text,
	.maktub-step__mark,
	.maktub-collapse {
		display: none;
	}

	.maktub-modal.maktub-modal .maktub-modal__title {
		font-size: 1.15rem;
	}

	/* El botón de continuar a lo ancho: es el único destino del pie. */
	.maktub-modal__footer {
		flex-wrap: wrap;
	}

	.maktub-continue {
		flex: 1 1 100%;
		padding: 15px 20px;
	}

	.maktub-error {
		flex: 1 1 100%;
		margin-bottom: 10px;
	}

	/* Una sola columna: en móvil dos horas por fila quedan ilegibles. */
	.maktub-slots {
		grid-template-columns: 1fr;
	}

	.maktub-mode {
		flex-wrap: wrap;
		gap: 8px;
	}

	.maktub-mode__price {
		text-align: left;
	}
}

@media (max-width: 640px) {
	.maktub-coupon__row {
		flex-direction: column;
	}

	.maktub-coupon__row button {
		width: 100%;
	}
}

/* Pantallas muy estrechas: el calendario necesita todo el ancho posible. */
@media (max-width: 400px) {
	.maktub-modal__body,
	.maktub-modal__header,
	.maktub-modal__footer,
	.maktub-steps {
		padding-left: 12px;
		padding-right: 12px;
	}

	.maktub-grid {
		gap: 5px;
	}

	.maktub-day {
		font-size: .88rem;
	}

	.maktub-service {
		gap: 12px;
		padding: 12px;
	}

	.maktub-service__image {
		width: 48px;
		height: 48px;
	}
}