/* Flujo de alta verificada de SISI Citas. */

.sisi-onboarding {
	--sisi-accent: #4F46E5;
	--sisi-error: #b3261e;
	--sisi-border: #d6d6e0;
	max-width: 34rem;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.5;
}

.sisi-onboarding__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.sisi-onboarding__steps li {
	color: #6b6b7b;
}

.sisi-onboarding__steps li.is-current {
	color: var(--sisi-accent);
	font-weight: 600;
}

.sisi-onboarding__steps li.is-done::before {
	content: "✓ ";
	color: var(--sisi-accent);
}

.sisi-onboarding__plan {
	margin: 0 0 1rem;
	padding: 0.625rem 0.875rem;
	background: rgba(79, 70, 229, 0.08);
	border-radius: 0.5rem;
}

.sisi-onboarding__message {
	margin: 0 0 1rem;
	padding: 0.75rem 0.875rem;
	border-radius: 0.5rem;
	background: rgba(79, 70, 229, 0.08);
}

.sisi-onboarding__message.is-error {
	background: rgba(179, 38, 30, 0.08);
	color: var(--sisi-error);
}

.sisi-onboarding__panel {
	margin: 0;
	padding: 0;
	border: 0;
}

.sisi-onboarding__panel legend {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1rem;
	padding: 0;
}

.sisi-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0 0 1rem;
}

.sisi-field label {
	font-weight: 500;
}

.sisi-field input,
.sisi-field select {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sisi-border);
	border-radius: 0.5rem;
	font: inherit;
	width: 100%;
}

.sisi-field input:focus-visible,
.sisi-field select:focus-visible,
.sisi-btn:focus-visible {
	outline: 2px solid var(--sisi-accent);
	outline-offset: 2px;
}

.sisi-field--check label {
	flex-direction: row;
	font-weight: 400;
}

.sisi-field__hint {
	font-size: 0.8125rem;
	color: #6b6b7b;
}

.sisi-field__error {
	font-size: 0.8125rem;
	color: var(--sisi-error);
	min-height: 1em;
}

.sisi-onboarding__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sisi-onboarding__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.25rem 0;
}

.sisi-btn {
	padding: 0.6875rem 1.25rem;
	border: 1px solid var(--sisi-accent);
	border-radius: 0.5rem;
	background: var(--sisi-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sisi-btn--ghost {
	background: transparent;
	color: var(--sisi-accent);
}

.sisi-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.sisi-onboarding__success {
	padding: 1rem;
	border-radius: 0.5rem;
	background: rgba(22, 128, 92, 0.1);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.sisi-onboarding * {
		transition: none !important;
		animation: none !important;
	}
}

/* Activación del plan y estado del aprovisionamiento. */

.sisi-activation {
	--sisi-accent: #4F46E5;
	--sisi-error: #b3261e;
	max-width: 34rem;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.5;
}

.sisi-activation__notice {
	margin: 0 0 1rem;
	padding: 0.75rem 0.875rem;
	border-radius: 0.5rem;
	background: rgba(79, 70, 229, 0.08);
}

.sisi-activation__notice.is-error {
	background: rgba(179, 38, 30, 0.08);
	color: var(--sisi-error);
}

.sisi-activation__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.25rem 0;
}

.sisi-activation a.sisi-btn {
	display: inline-block;
	text-decoration: none;
}

/* Continuación hacia «Mi espacio» desde la confirmación de pedido. */

.sisi-space-cta {
	--sisi-accent: #4F46E5;
	max-width: 34rem;
	margin: 2rem auto;
	padding: 1.25rem;
	border: 1px solid rgba(79, 70, 229, 0.25);
	border-radius: 0.75rem;
	background: rgba(79, 70, 229, 0.06);
	font-size: 1rem;
	line-height: 1.5;
}

.sisi-space-cta__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.sisi-space-cta__text {
	margin: 0 0 1rem;
}

.sisi-space-cta__actions {
	margin: 0;
}

.sisi-space-cta a.sisi-btn {
	display: inline-block;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Estados de enlace de los botones.
 *
 * El tema aplica `a:hover { color: var(--bde-links-color-hover) }` (#4338CA).
 * Sobre el fondo del boton (#4F46E5) eso deja el texto en 1.26:1, es decir,
 * practicamente ilegible. Aqui se defiende el color en todos los estados de
 * enlace. La respuesta visual al puntero se da oscureciendo el fondo, nunca
 * con opacity sobre el boton entero.
 * -------------------------------------------------------------------------- */

.sisi-btn,
.sisi-btn:link,
.sisi-btn:visited,
.sisi-btn:hover,
.sisi-btn:focus,
.sisi-btn:focus-visible,
.sisi-btn:active {
	color: #fff;
	text-decoration: none;
}

.sisi-btn:hover,
.sisi-btn:focus-visible {
	background: var(--sisi-accent-strong, #3F35B5);
	border-color: var(--sisi-accent-strong, #3F35B5);
}

/* El boton fantasma no tiene fondo propio: conserva el color de acento en
   todos los estados y responde con un fondo tenue. */
.sisi-btn--ghost,
.sisi-btn--ghost:link,
.sisi-btn--ghost:visited,
.sisi-btn--ghost:hover,
.sisi-btn--ghost:focus,
.sisi-btn--ghost:focus-visible,
.sisi-btn--ghost:active {
	color: var(--sisi-accent);
	background: transparent;
}

.sisi-btn--ghost:hover,
.sisi-btn--ghost:focus-visible {
	background: rgba(79, 70, 229, 0.1);
}

/* Foco visible tambien sobre el propio boton: halo claro pegado al borde y
   contorno oscuro por fuera, perceptible sobre cualquier fondo del sitio. */
.sisi-btn:focus-visible {
	outline: 3px solid #111827;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* Un boton deshabilitado no reacciona al puntero. */
.sisi-btn[disabled]:hover,
.sisi-btn[disabled]:focus-visible {
	background: var(--sisi-accent);
	border-color: var(--sisi-accent);
}

/* Botones de plan en la tienda y en la ficha de producto (0.2.3).
 *
 * Aqui no hay contenedor .sisi-onboarding que aporte las variables, asi que el
 * propio boton las declara. Se repiten los estados uno a uno con la misma
 * especificidad que usa WooCommerce para sus botones, de modo que el texto
 * sigue siendo blanco tambien en hover, visited y focus. */

.sisi-plan-cta {
	margin: 1rem 0;
}

.woocommerce a.sisi-btn,
.woocommerce a.sisi-btn:link,
.woocommerce a.sisi-btn:visited,
.woocommerce a.sisi-btn:hover,
.woocommerce a.sisi-btn:focus,
.woocommerce a.sisi-btn:focus-visible,
.woocommerce a.sisi-btn:active {
	--sisi-accent: #4F46E5;
	--sisi-accent-strong: #3F35B5;
	display: inline-block;
	background: var(--sisi-accent);
	border: 1px solid var(--sisi-accent);
	border-radius: 0.5rem;
	padding: 0.6875rem 1.25rem;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce a.sisi-btn:hover,
.woocommerce a.sisi-btn:focus-visible {
	background: var(--sisi-accent-strong);
	border-color: var(--sisi-accent-strong);
}

.woocommerce a.sisi-btn:focus-visible {
	outline: 3px solid #111827;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}