/**
 * Formulario de reserva — Siam Thai Massage
 * ---------------------------------------------------------------------
 * Los colores NO se escriben a mano: se toman de las variables que el
 * tema Astra publica en la página (--ast-global-color-N). El segundo
 * valor de cada var() es el respaldo, con los colores actuales del
 * centro, por si algún día se cambia de tema y esas variables dejan de
 * existir.
 *
 * Gracias a eso, si se retoca la paleta desde el personalizador de
 * WordPress, el formulario cambia con ella sin tocar este archivo.
 *
 *   --ast-global-color-0  →  #ecd6c5  acento (botones, títulos)
 *   --ast-global-color-3  →  texto sobre fondo oscuro
 *   --ast-global-color-4  →  #24140c  superficie (tarjetas)
 *   --ast-global-color-5  →  #170c05  fondo
 *   --ast-global-color-8  →  #d2b8a3  acento secundario
 */

.stm-form {
	--stm-accent: var(--ast-global-color-0, #ecd6c5);
	--stm-accent-soft: var(--ast-global-color-8, #d2b8a3);
	--stm-surface: var(--ast-global-color-4, #24140c);
	--stm-bg: var(--ast-global-color-5, #170c05);
	--stm-text: var(--ast-global-color-3, rgba(252, 252, 252, 0.8));

	/* Los títulos van en blanco, como en el resto de la web: sobre este
	   fondo tan oscuro contrastan mucho mejor que el tono arena, que se
	   reserva para acentos (precios, botones, selección activa). */
	--stm-heading: var(--ast-global-color-2, #fffefe);

	/* Borde y estados derivados del acento, para que sigan cuadrando
	   aunque cambie la paleta. */
	--stm-border: color-mix(in srgb, var(--stm-accent) 22%, transparent);
	--stm-border-strong: color-mix(in srgb, var(--stm-accent) 45%, transparent);
	--stm-hover: color-mix(in srgb, var(--stm-accent) 10%, transparent);

	--stm-radius: 4px;
	--stm-gap: 14px;

	color: var(--stm-text);
	background: var(--stm-bg);
	padding: clamp(20px, 4vw, 40px);
	border-radius: var(--stm-radius);
	max-width: 780px;
	margin-inline: auto;
	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.65;
}

/* Los navegadores sin color-mix se quedarían sin bordes; se les da un
   valor plano equivalente. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.stm-form {
		--stm-border: rgba(236, 214, 197, 0.22);
		--stm-border-strong: rgba(236, 214, 197, 0.45);
		--stm-hover: rgba(236, 214, 197, 0.1);
	}
}

.stm-form *,
.stm-form *::before,
.stm-form *::after {
	box-sizing: border-box;
}

.is-hidden {
	display: none !important;
}

/* --- Cabecera del asistente ---------------------------------------- */

.stm-head {
	margin-bottom: 26px;
}

.stm-progress__bar {
	height: 3px;
	background: var(--stm-border);
	border-radius: 2px;
	overflow: hidden;
}

.stm-progress__bar span {
	display: block;
	height: 100%;
	width: 20%;
	background: var(--stm-accent);
	border-radius: 2px;
	transition: width 0.3s ease;
}

.stm-progress__label {
	margin: 8px 0 0;
	font-family: Manrope, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.55;
}

/* Rastro de lo ya elegido. Cada pieza vuelve a su paso al pulsarla. */
.stm-trail {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.stm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--stm-surface);
	border: 1px solid var(--stm-border);
	border-radius: 999px;
	color: var(--stm-text);
	padding: 5px 13px;
	font-family: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.stm-chip:hover {
	border-color: var(--stm-accent);
	color: var(--stm-accent);
}

.stm-chip:focus-visible {
	outline: 2px solid var(--stm-accent);
	outline-offset: 2px;
}

.stm-chip__edit {
	font-size: 0.75rem;
	opacity: 0.55;
}

.stm-chip:hover .stm-chip__edit {
	opacity: 1;
}

/* Texto solo para lectores de pantalla. El tema suele traer esta clase,
   pero no se puede dar por hecho. */
.stm-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --- Pasos --------------------------------------------------------- */

.stm-step {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Al enfocar el título de un paso tras avanzar, el navegador dibuja su
   contorno; aquí no aporta nada porque el paso entero acaba de cambiar. */
.stm-step__title:focus {
	outline: none;
}

.stm-step__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.15rem, 2.4vw, 1.4rem);
	color: var(--stm-heading);
	margin-bottom: 18px;
	padding: 0;
}

.stm-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--stm-accent);
	color: var(--stm-surface);
	font-family: Manrope, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	flex-shrink: 0;
}

/* --- Opciones (tratamiento, personas, duración) --------------------- */

.stm-options {
	display: grid;
	gap: var(--stm-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.stm-options--pair {
		grid-template-columns: repeat(2, 1fr);
	}

	.stm-options--durations {
		grid-template-columns: repeat(3, 1fr);
	}
}

.stm-option {
	display: block;
	cursor: pointer;
}

/* El radio real se oculta a la vista pero sigue existiendo para el
   teclado y los lectores de pantalla: por eso no se usa display:none. */
.stm-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.stm-option__box {
	display: block;
	background: var(--stm-surface);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius);
	padding: 16px 18px;
	height: 100%;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.stm-option:hover .stm-option__box {
	border-color: var(--stm-border-strong);
	background: var(--stm-hover);
}

.stm-option input:checked + .stm-option__box {
	border-color: var(--stm-accent);
	background: var(--stm-hover);
}

.stm-option input:focus-visible + .stm-option__box {
	outline: 2px solid var(--stm-accent);
	outline-offset: 2px;
}

/* Tarjeta con foto: la imagen a la izquierda y el texto al lado. En
   móvil se apilan, porque a 375px una foto lateral deja el texto en una
   columna demasiado estrecha. */
.stm-option--photo .stm-option__box {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0;
	overflow: hidden;
}

.stm-option__photo {
	display: block;
	flex-shrink: 0;
}

.stm-option__photo img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.stm-option__text {
	display: block;
	padding: 0 18px 16px;
}

@media (min-width: 620px) {
	.stm-option--photo .stm-option__box {
		flex-direction: row;
		gap: 0;
	}

	.stm-option__photo {
		width: 160px;
	}

	.stm-option__photo img {
		height: 100%;
		min-height: 130px;
	}

	.stm-option__text {
		padding: 16px 18px;
	}
}

/* La opción marcada resalta su foto: sin esto, con la imagen ocupando
   media tarjeta, el cambio de borde pasa desapercibido. */
.stm-option__photo img {
	opacity: 0.72;
	transition: opacity 0.18s ease;
}

.stm-option:hover .stm-option__photo img,
.stm-option input:checked + .stm-option__box .stm-option__photo img {
	opacity: 1;
}

/* Icono de siluetas del paso "para cuántas personas". */
.stm-option__icon {
	display: block;
	color: var(--stm-accent-soft);
	margin-bottom: 10px;
	opacity: 0.7;
	transition: opacity 0.18s ease, color 0.18s ease;
}

.stm-option input:checked + .stm-option__box .stm-option__icon {
	color: var(--stm-accent);
	opacity: 1;
}

.stm-option__name {
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.05rem;
	color: var(--stm-heading);
	margin-bottom: 4px;
}

.stm-option__meta,
.stm-option__desc {
	display: block;
	font-size: 0.88rem;
	opacity: 0.75;
}

.stm-option__desc {
	margin-top: 6px;
	line-height: 1.5;
}

.stm-option__price {
	display: block;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	color: var(--stm-accent-soft);
	margin-top: 8px;
}

/* Llamada a la acción dentro de la tarjeta.
   En el móvil no existe el estado "hover", así que una lista de
   tarjetas se lee como información y no como opciones que se pueden
   tocar. Este texto con su flecha lo deja claro sin necesidad de
   puntero. */
.stm-option__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--stm-accent);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: gap 0.18s ease;
}

.stm-option__cta::after {
	content: "→";
	font-size: 0.9rem;
	line-height: 1;
}

.stm-option:hover .stm-option__cta {
	gap: 10px;
}

/* Una vez elegida, la tarjeta ya no invita a elegir: confirma. */
.stm-option input:checked + .stm-option__box .stm-option__cta::after {
	content: "✓";
}

.stm-option input:checked + .stm-option__box .stm-option__cta {
	border-bottom-color: transparent;
}

/* Botón para saltar al primer día con horas libres. */
.stm-jump {
	display: inline-block;
	/* El texto lleva el nombre completo del día ("miércoles 2 de
	   septiembre"), que en un móvil estrecho puede no caber en una
	   línea. Se deja que envuelva -ahora tiene todo el ancho del bloque,
	   así que parte por palabras y se lee bien- en vez de forzar una
	   sola línea, que desbordaría la pantalla. */
	max-width: 100%;
	margin-top: 14px;
	background: none;
	border: 1px solid var(--stm-accent);
	border-radius: var(--stm-radius);
	color: var(--stm-accent);
	font-family: Manrope, sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 11px 18px;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.stm-jump:hover {
	background: var(--stm-accent);
	color: var(--stm-surface);
}

.stm-jump:focus-visible {
	outline: 2px solid var(--stm-accent);
	outline-offset: 2px;
}

/* --- Campos -------------------------------------------------------- */

.stm-fields {
	display: grid;
	gap: var(--stm-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.stm-fields {
		grid-template-columns: repeat(2, 1fr);
	}

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

.stm-field {
	display: block;
}

.stm-field__label {
	display: block;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	margin-bottom: 6px;
	text-transform: uppercase;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	opacity: 0.85;
}

.stm-field__hint {
	display: block;
	font-size: 0.8rem;
	opacity: 0.6;
	margin-top: 5px;
}

/*
 * Aviso del dominio del correo. Ámbar y no rojo a propósito: no es un
 * error que impida seguir, es una duda que conviene mirar.
 */
.stm-field__warn {
	display: block;
	font-size: 0.82rem;
	color: #e8c07d;
	margin-top: 6px;
}

.stm-field__fix {
	background: none;
	border: 0;
	border-bottom: 1px dashed currentColor;
	color: inherit;
	font: inherit;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

/* Enlace a la ficha de la cita en la pantalla final. */
.stm-done__manage {
	margin: 18px 0 8px;
}

.stm-req {
	color: var(--stm-accent);
}

.stm-input {
	width: 100%;
	background: var(--stm-surface);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius);
	color: var(--stm-text);
	padding: 11px 14px;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.18s ease;
}

.stm-input:hover {
	border-color: var(--stm-border-strong);
}

.stm-input:focus {
	outline: none;
	border-color: var(--stm-accent);
	box-shadow: 0 0 0 3px var(--stm-hover);
}

.stm-input[aria-invalid="true"] {
	border-color: #e07a5f;
}

/* El icono del selector de fecha es negro por defecto y se pierde
   sobre fondo oscuro. */
.stm-input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.6;
	cursor: pointer;
}

.stm-input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

/* --- Horas disponibles --------------------------------------------- */

.stm-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 10px;
	margin-top: 18px;
}

/* Cuando no hay horas que mostrar, el contenedor deja de ser rejilla.
   Sus columnas miden 88px -la anchura justa para "10:30"-, así que un
   mensaje o un botón metidos ahí dentro se parten letra a letra. */
.stm-slots--empty {
	display: block;
	background: var(--stm-surface);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius);
	padding: 20px;
	text-align: center;
}

.stm-slots--empty .stm-loading {
	margin: 0;
	opacity: 0.85;
	font-size: 0.95rem;
}

.stm-slot {
	position: relative;
}

.stm-slot input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.stm-slot__box {
	display: block;
	text-align: center;
	padding: 11px 6px;
	background: var(--stm-surface);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius);
	font-family: Manrope, sans-serif;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.stm-slot:hover .stm-slot__box {
	border-color: var(--stm-border-strong);
}

.stm-slot input:checked + .stm-slot__box {
	background: var(--stm-accent);
	border-color: var(--stm-accent);
	color: var(--stm-surface);
}

.stm-slot input:focus-visible + .stm-slot__box {
	outline: 2px solid var(--stm-accent);
	outline-offset: 2px;
}

/* --- Avisos y estados ---------------------------------------------- */

.stm-note,
.stm-loading {
	font-size: 0.88rem;
	opacity: 0.7;
	margin: 12px 0 0;
}

.stm-error {
	background: rgba(224, 122, 95, 0.12);
	border-left: 3px solid #e07a5f;
	color: #f3b8a6;
	padding: 12px 16px;
	margin: 20px 0 0;
	border-radius: 0 var(--stm-radius) var(--stm-radius) 0;
	font-size: 0.92rem;
}

.stm-form__empty {
	text-align: center;
	opacity: 0.8;
}

/* Campo trampa para robots: fuera de la vista pero sin display:none,
   que algunos robots detectan. */
.stm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Consentimiento ------------------------------------------------- */

/* El consentimiento va en letra pequeña: es un texto legal que hay que
   ofrecer y poder leer, pero no es lo que el cliente necesita entender
   para completar la reserva. */
/*
 * El texto legal va a 14 px fijos y no en rem, porque un rem depende
 * del tamaño de raíz del tema. Y se repite en el <span> de dentro, con
 * la clase raíz delante: Astra trae reglas propias para el texto de
 * los formularios que ganaban por especificidad y dejaban la línea del
 * tamaño que le parecía.
 */
.stm-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 20px;
	line-height: 1.5;
	opacity: 0.75;
	cursor: pointer;
}

.stm-form .stm-check,
.stm-form .stm-check span,
.stm-form .stm-check a {
	font-size: 14px;
}

/* Sin aceptar, la fila entera se marca: una casilla con aria-invalid
   no se distingue de una sin marcar. */
.stm-check.is-invalid {
	opacity: 1;
	color: #f3b8a6;
	border-left: 2px solid #e07a5f;
	padding-left: 12px;
	margin-left: -14px;
}

.stm-check.is-invalid input {
	outline: 2px solid #e07a5f;
	outline-offset: 2px;
}

.stm-check input {
	margin-top: 4px;
	accent-color: var(--stm-accent);
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	cursor: pointer;
}

.stm-check a {
	color: var(--stm-accent);
	text-decoration: underline;
}

/* --- Resumen -------------------------------------------------------- */

.stm-summary {
	background: var(--stm-surface);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius);
	padding: 20px 22px;
	margin-top: 28px;
}

.stm-summary__title {
	font-family: "Playfair Display", Georgia, serif;
	color: var(--stm-heading);
	font-size: 1.1rem;
	margin: 0 0 14px;
}

.stm-summary__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 7px 16px;
	margin: 0;
	font-size: 0.92rem;
}

.stm-summary__list dt {
	opacity: 0.6;
}

.stm-summary__list dd {
	margin: 0;
	text-align: right;
}

.stm-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--stm-border);
	font-family: Manrope, sans-serif;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

.stm-summary__total strong {
	font-size: 1.5rem;
	color: var(--stm-accent);
	letter-spacing: 0;
}

.stm-summary__note {
	margin: 10px 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
	text-align: right;
}

/* --- Aviso de pendiente y botón ------------------------------------- */

/* Este aviso sí es información que el cliente necesita antes de pulsar:
   que la cita no queda cerrada hasta confirmar por correo. Va con más
   cuerpo y menos transparencia que el texto legal. */
.stm-pending-note {
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.95;
	margin: 20px 0 0;
	padding-left: 14px;
	border-left: 2px solid var(--stm-accent);
}

/* --- Barra de navegación del asistente ------------------------------ */

.stm-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
}

/* "Atrás" es secundario: no debe competir con la acción principal. */
.stm-back {
	background: none;
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius);
	color: var(--stm-text);
	font-family: Manrope, sans-serif;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 14px 20px;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
	flex-shrink: 0;
}

.stm-back:hover {
	border-color: var(--stm-accent);
	color: var(--stm-accent);
}

.stm-back:focus-visible {
	outline: 2px solid var(--stm-accent);
	outline-offset: 2px;
}

/* En los pasos intermedios "Atrás" queda solo: se deja a la izquierda
   en lugar de estirarlo, que parecería la acción principal. */
.stm-nav .stm-submit {
	margin-top: 0;
	flex: 1;
}

.stm-submit {
	display: block;
	width: 100%;
	margin-top: 22px;
	padding: 15px 24px;
	background: var(--stm-accent);
	color: var(--stm-surface);
	border: 0;
	border-radius: var(--stm-radius);
	font-family: Manrope, sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: opacity 0.18s ease, transform 0.06s ease;
}

/*
 * El hover no baja la opacidad: el botón es beige sobre fondo oscuro, y
 * desvanecerlo le quitaba contraste justo cuando el cursor está encima.
 * Se oscurece el fondo un paso (al acento secundario) y el texto se
 * queda en el marrón de la superficie, a plena intensidad.
 */
.stm-submit:hover:not(:disabled) {
	background: var(--stm-accent-soft);
	color: var(--stm-surface);
}

.stm-submit:active:not(:disabled) {
	transform: translateY(1px);
}

.stm-submit:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.stm-submit:focus-visible {
	outline: 2px solid var(--stm-accent);
	outline-offset: 3px;
}

/* --- Pantalla final ------------------------------------------------- */

.stm-done {
	text-align: center;
	padding: 24px 8px;
}

.stm-done__icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 20px;
	border-radius: 50%;
	border: 2px solid var(--stm-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stm-accent);
	font-size: 1.7rem;
}

.stm-done__title {
	font-family: "Playfair Display", Georgia, serif;
	color: var(--stm-heading);
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	margin: 0 0 14px;
}

.stm-done__lead {
	font-size: 1.02rem;
	margin: 0 auto 18px;
	max-width: 46ch;
}

.stm-done__mail {
	color: var(--stm-accent);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.stm-done__box {
	background: var(--stm-surface);
	border: 1px solid var(--stm-border);
	border-radius: var(--stm-radius);
	padding: 18px 20px;
	margin: 22px auto 0;
	max-width: 46ch;
	text-align: left;
	font-size: 0.9rem;
}

.stm-done__box dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0;
}

.stm-done__box dt {
	opacity: 0.6;
}

.stm-done__box dd {
	margin: 0;
	text-align: right;
}

.stm-done__hint {
	font-size: 0.85rem;
	opacity: 0.65;
	margin-top: 20px;
}

/* --- Página "Tu cita" ----------------------------------------------- */

.stm-manage {
	text-align: center;
	margin-block: 40px;
}

.stm-manage .stm-done__box {
	text-align: left;
}

.stm-manage__actions {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/* El botón de confirmar es un enlace, no un <button>: se le quita el
   subrayado y se centra el texto para que se vea idéntico al del
   formulario. */
.stm-manage__actions .stm-submit {
	display: inline-block;
	width: auto;
	min-width: 260px;
	margin-top: 0;
	text-align: center;
	text-decoration: none;
}

.stm-manage__actions form {
	margin: 0;
}

/* Cancelar es destructivo: se presenta como acción secundaria para que
   nadie la pulse por inercia buscando el botón principal. */
.stm-cancel {
	background: none;
	border: 0;
	color: var(--stm-text);
	opacity: 0.7;
	font-family: inherit;
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 6px 10px;
}

/* El rosa que había aquí (#e69f8a) no aparecía en ninguna otra parte
   de la paleta. Se usa el acento, que es el color de lo pulsable en
   todo el formulario. */
.stm-cancel:hover {
	opacity: 1;
	color: var(--stm-accent);
}

.stm-cancel:focus-visible {
	outline: 2px solid var(--stm-accent);
	outline-offset: 2px;
}

/* --- Botones frente a los estilos del tema -------------------------- */

/*
 * Astra pinta TODOS los <button> en :hover y :focus con su fondo beige
 * (--ast-global-color-1) y texto claro, con la regla `button:hover`,
 * que pesa más que una sola clase. Nuestras reglas de estado solo
 * cambiaban el color del texto al acento, así que el botón quedaba
 * beige sobre beige. En el móvil se veía siempre: tras tocar un botón
 * el :hover se queda "pegado", y "Atrás" desaparecía al pulsarlo.
 *
 * Aquí se fija fondo, texto y borde de cada botón en todos sus estados,
 * con .stm-form delante para ganar siempre al tema. Un botón nuevo del
 * formulario debe añadirse a este bloque.
 */

/* Botones transparentes: sin fondo en ningún estado. */
.stm-form .stm-back:hover,
.stm-form .stm-back:focus,
.stm-form .stm-back:active,
.stm-form .stm-jump:focus,
.stm-form .stm-jump:active,
.stm-form .stm-cancel:hover,
.stm-form .stm-cancel:focus,
.stm-form .stm-cancel:active,
.stm-form .stm-field__fix:hover,
.stm-form .stm-field__fix:focus,
.stm-form .stm-field__fix:active {
	background: none;
}

.stm-form .stm-back:hover,
.stm-form .stm-back:focus {
	border-color: var(--stm-accent);
	color: var(--stm-accent);
}

.stm-form .stm-jump:focus {
	border-color: var(--stm-accent);
	color: var(--stm-accent);
}

/* "Ir al día X" se rellena al pasar por encima; se mantiene aunque
   además tenga el foco. */
.stm-form .stm-jump:hover {
	background: var(--stm-accent);
	border-color: var(--stm-accent);
	color: var(--stm-surface);
}

.stm-form .stm-cancel:focus {
	color: var(--stm-accent);
}

.stm-form .stm-field__fix:hover,
.stm-form .stm-field__fix:focus {
	color: inherit;
	border-color: currentColor;
}

/* Etiquetas del resumen superior: conservan su fondo de tarjeta. */
.stm-form .stm-chip:hover,
.stm-form .stm-chip:focus,
.stm-form .stm-chip:active {
	background: var(--stm-surface);
}

.stm-form .stm-chip:focus:not(:hover) {
	border-color: var(--stm-border);
	color: var(--stm-text);
}

/* Botón principal: su propio beige y texto oscuro en todos los estados,
   también desactivado (el tema lo repintaba al pasar por encima). */
.stm-form button.stm-submit:focus,
.stm-form button.stm-submit:active,
.stm-form button.stm-submit:disabled {
	background: var(--stm-accent);
	color: var(--stm-surface);
	border: 0;
}

.stm-form button.stm-submit:hover:not(:disabled) {
	background: var(--stm-accent-soft);
	color: var(--stm-surface);
}

/* Respeta a quien pide menos animación en su sistema. */
@media (prefers-reduced-motion: reduce) {
	.stm-form * {
		transition: none !important;
	}
}