/**
 * Appointment wizard.
 * A native <dialog>: the browser owns focus trapping, Escape and the backdrop.
 */

.siker-wizard__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 50px;
	padding: var(--control-pad-y) var(--control-pad-x);
	cursor: pointer;
	border: 1px solid var(--ink-900);
	border-radius: var(--radius-control);
	background: var(--ink-900);
	color: var(--paper);
	font: var(--type-button);
	font-family: var(--font-display);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	transition:
		var(--transition-control),
		transform var(--dur-instant) var(--ease-standard);
}

.siker-wizard__open:hover {
	background: var(--ink-700);
	border-color: var(--ink-700);
}

.siker-wizard__open:active {
	transform: translateY(1px);
}

.siker-wizard__open--on-dark {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink-900);
}

.siker-wizard__open--on-dark:hover {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--ink-900);
}

.siker-wizard__open--outline {
	background: transparent;
	color: var(--ink-900);
}

.siker-wizard__open--outline:hover {
	background: var(--ink-900);
	color: var(--paper);
}

.siker-wizard__open--full {
	width: 100%;
	min-height: 60px;
}

/* --- Dialog --------------------------------------------------------------- */

.siker-wizard__dialog {
	width: min(980px, calc(100vw - 2 * var(--space-4)));
	max-width: none;
	max-height: 94vh;
	padding: 0;
	border: 0;
	background: var(--surface-page);
	color: var(--text-body);
	overflow: visible;
}

.siker-wizard__dialog::backdrop {
	background: rgb(10 10 10 / 72%);
}

.siker-wizard__panel {
	display: grid;
	grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
	max-height: 94vh;
	overflow-y: auto;
}

.siker-wizard [hidden] {
	display: none !important;
}

/* --- Rail ----------------------------------------------------------------- */

.siker-wizard__rail {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-8);
	background: var(--surface-inverse);
	color: var(--paper);
}

.siker-wizard__brand {
	margin: 0;
	font: 800 18px / 0.9 var(--font-display);
	letter-spacing: 0.24em;
	padding-right: 0.24em;
	text-transform: uppercase;
}

.siker-wizard__property {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: calc(var(--space-8) * -1 + var(--space-6));
}

.siker-wizard__district {
	font: var(--type-eyebrow);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

.siker-wizard__title {
	font: var(--type-h4);
	font-family: var(--font-display);
	color: var(--paper);
}

.siker-wizard__price {
	font: var(--type-price);
	font-family: var(--font-display);
	color: var(--paper);
}

.siker-wizard__summary {
	font: var(--type-caption);
	color: var(--ink-400);
}

.siker-wizard__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.siker-wizard__step {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font: var(--type-body-sm);
	font-family: var(--font-display);
	color: var(--ink-500);
}

.siker-wizard__step.is-now,
.siker-wizard__step.is-past {
	color: var(--paper);
}

.siker-wizard__step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 1px solid var(--border-on-dark);
	font: 600 10px / 1 var(--font-display);
	letter-spacing: 0.06em;
}

.siker-wizard__step.is-now .siker-wizard__step-n {
	border-color: var(--paper);
}

.siker-wizard__step.is-past .siker-wizard__step-n {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink-900);
}

.siker-wizard__privacy {
	margin: auto 0 0;
	font: var(--type-caption);
	color: var(--ink-400);
}

/* --- Panel ---------------------------------------------------------------- */

.siker-wizard__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-height: 460px;
	padding: var(--space-8);
}

.siker-wizard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.siker-wizard__counter {
	font: var(--type-eyebrow);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.siker-wizard__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	margin: -8px -12px 0 0;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--ink-900);
}

.siker-wizard__progress {
	height: 2px;
	background: var(--border-hairline);
}

.siker-wizard__progress-bar {
	display: block;
	height: 2px;
	width: 0;
	background: var(--ink-900);
	transition: width var(--dur-base) var(--ease-standard);
}

.siker-wizard__fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.siker-wizard__question {
	margin: 0;
	font: var(--type-h2);
	font-family: var(--font-display);
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--text-strong);
}

.siker-wizard__question:focus {
	outline: none;
}

.siker-wizard__help {
	margin: 0;
	font: var(--type-body-sm);
	color: var(--text-muted);
}

/* Una pregunta que no es obligatoria lo dice al lado, no con un asterisco:
   el asterisco lo entiende quien ya rellenó mil formularios. */
.siker-wizard__optional {
	margin-left: var(--space-3);
	font: var(--type-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	vertical-align: middle;
}

.siker-wizard__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

/* Una pregunta sin opciones se responde escribiendo. */
.siker-wizard__write {
	margin-top: var(--space-3);
}

/* Mismos valores que un campo del sistema de diseño: es el mismo control. */
.siker-wizard__write textarea {
	width: 100%;
	padding: 12px var(--space-4);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input);
	background: var(--paper);
	font: var(--type-body);
	color: var(--text-strong);
	resize: vertical;
}

.siker-wizard__write textarea:focus {
	border-color: var(--ink-900);
	outline: none;
}

.siker-wizard__fieldset.has-error .siker-wizard__write::after {
	content: attr(data-error);
	display: block;
	margin-top: var(--space-2);
	font: var(--type-caption);
	color: var(--status-danger);
}

.siker-wizard__fieldset.has-error .siker-wizard__write textarea {
	border-color: var(--status-danger);
}

.siker-wizard__option {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: var(--tap-min);
	padding: 12px var(--space-4);
	cursor: pointer;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-input);
	font: var(--type-body);
	color: var(--text-strong);
	transition: var(--transition-control);
}

.siker-wizard__option input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

.siker-wizard__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 1px solid var(--border-hairline);
	font: 600 11px / 1 var(--font-display);
	letter-spacing: 0.06em;
	color: var(--text-muted);
	transition: var(--transition-control);
}

.siker-wizard__option:has(input:checked) {
	border-color: var(--ink-900);
	background: var(--surface-alt);
}

.siker-wizard__option:has(input:checked) .siker-wizard__letter {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--paper);
}

.siker-wizard__option:has(input:focus-visible) {
	outline: 2px solid var(--ink-900);
	outline-offset: 2px;
}

/* Nothing chosen yet: the message belongs beside the question, not in an alert. */
.siker-wizard__fieldset.has-error .siker-wizard__options::after {
	content: attr(data-error);
	font: var(--type-caption);
	color: var(--status-danger);
}

.siker-wizard__fieldset.has-error .siker-wizard__option {
	border-color: var(--status-danger);
}

/* Los datos de contacto, en una lámina de papel cálido con su hairline — el
   mismo tratamiento que el bloque de cita de la ficha. Sueltos sobre el blanco
   parecían flotar y no se leían como un grupo. */
.siker-wizard__fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding: var(--space-6);
	background: var(--surface-alt);
	border: 1px solid var(--border-hairline);
}

/* --- El diálogo se pinta sobre papel, viva donde viva en el DOM -----------
 *
 * Un `<dialog>` es hijo del sitio donde está su botón, y en la ficha ese sitio
 * es el panel negro del hero. Heredaba `.siker-ground-inverse` entero: campos
 * de fondo transparente con texto blanco y borde al 22% de blanco —invisibles
 * sobre el papel del diálogo, se escribía a ciegas— y el titular «Coordinemos
 * tu visita» en blanco sobre blanco.
 *
 * No se arregla campo a campo: el panel declara sus propios colores y deshace
 * la herencia de una vez. La especificidad lleva `.siker-wizard` delante para
 * ganar sin depender del orden en que se carguen las hojas.
 */
.siker-wizard .siker-wizard__body {
	color: var(--text-body);
}

.siker-wizard .siker-wizard__body :where(h1, h2, h3, h4, h5) {
	color: var(--ink-900);
}

.siker-wizard .siker-wizard__body :where(a:not(.wp-element-button)) {
	color: var(--ink-900);
}

.siker-wizard .siker-wizard__body .siker-eyebrow,
.siker-wizard .siker-wizard__body .siker-field__label {
	color: var(--text-eyebrow);
}

.siker-wizard .siker-wizard__body .siker-wizard__help,
.siker-wizard .siker-wizard__body .siker-wizard__time {
	color: var(--text-muted);
}

.siker-wizard .siker-wizard__body .siker-field input,
.siker-wizard .siker-wizard__body .siker-field select,
.siker-wizard .siker-wizard__body .siker-field textarea,
.siker-wizard .siker-wizard__body .siker-wizard__write textarea {
	/* Borde completo, no hairline: sobre el papel cálido del grupo un hairline
	   se diluye y el campo vuelve a no verse. */
	background: var(--paper);
	color: var(--text-strong);
	border-color: var(--border-strong);
}

.siker-wizard .siker-wizard__body .siker-field input:focus,
.siker-wizard .siker-wizard__body .siker-field select:focus,
.siker-wizard .siker-wizard__body .siker-field textarea:focus {
	border-color: var(--ink-900);
	outline: 2px solid var(--bronze-700);
	outline-offset: 2px;
}

.siker-wizard__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.siker-wizard__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* --- Navigation ----------------------------------------------------------- */

.siker-wizard__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: auto;
}

.siker-wizard__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: 13px 0;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--ink-900);
	font: var(--type-button);
	font-family: var(--font-display);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	transition: var(--transition-control);
}

.siker-wizard__back:hover {
	color: var(--bronze-700);
}

.siker-wizard__time {
	font: var(--type-caption);
	color: var(--text-muted);
}

.siker-wizard__next {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 50px;
	margin-inline-start: auto;
	padding: var(--control-pad-y) var(--control-pad-x);
	cursor: pointer;
	border: 1px solid var(--ink-900);
	background: var(--ink-900);
	color: var(--paper);
	font: var(--type-button);
	font-family: var(--font-display);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	transition: var(--transition-control);
}

.siker-wizard__next:hover {
	background: var(--ink-700);
	border-color: var(--ink-700);
}

/* --- Confirmation --------------------------------------------------------- */

.siker-wizard__done {
	justify-content: center;
	gap: var(--space-4);
	color: var(--status-success);
}

.siker-wizard__wa {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: var(--space-2);
	min-height: 50px;
	padding-inline: var(--control-pad-x);
	background: var(--whatsapp);
	color: var(--ink-900);
	font: var(--type-button);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	transition: var(--transition-control);
}

.siker-wizard__wa:hover {
	background: var(--whatsapp-hover);
	color: var(--ink-900);
}

@media (max-width: 760px) {
	.siker-wizard__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.siker-wizard__rail {
		gap: var(--space-6);
		padding: var(--space-6);
	}

	.siker-wizard__body {
		min-height: 0;
		padding: var(--space-6);
	}
}

/* --- Cita deshabilitada ---------------------------------------------------
   El botón sigue a la vista: decir «aquí no se agenda» es información, y
   quitarlo sin más deja al visitante buscando algo que no está. */

.siker-wizard__open:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.siker-wizard__open:disabled:hover {
	/* Sin respuesta al hover: un botón apagado no promete nada. */
	background: inherit;
	color: inherit;
}

.siker-wizard__off-note {
	max-width: 42ch;
	margin: var(--space-3) 0 0;
	font: var(--type-body-sm);
	color: var(--text-muted);
}

.siker-ground-inverse .siker-wizard__off-note {
	color: var(--ink-300);
}