/* ============================================================
   Visita guiada — 0.99.606
   Estas reglas vivían en public.css / public-portal.css, y el
   dashboard NO encola public.css a propósito por pesar ~286 KB.
   El script del tour sí se cargaba, así que el recuadro se pintaba
   sin estilos y salía deformado. Ahora es hoja propia que viaja
   junto al script del tour.
   ============================================================ */
/* Motor de tours genérico (alias de .ppsa-dash-tour* — el JS aplica ambas clases). */
.ppsa-guided-tour-help {
	position: fixed;
	left: calc(16px + env(safe-area-inset-left, 0px));
	bottom: var(--ppsa-fab-layer-0);
	z-index: 100150;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(124, 58, 237, 0.35);
	background: #fff;
	color: #7c3aed;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(2, 6, 23, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ppsa-guided-tour-help:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(2, 6, 23, 0.25);
}
body:has(.ppsa-support-contact-fab) .ppsa-dash-tour-help,
body:has(.ppsa-member-guide) .ppsa-dash-tour-help,
body:has(.ppsa-support-contact-fab) .ppsa-guided-tour-help,
body:has(.ppsa-member-guide) .ppsa-guided-tour-help {
	bottom: var(--ppsa-fab-layer-2);
}
body.ppsa-guided-tour-open {
	overflow: hidden;
}

/* ---- Panel de la visita guiada ----
   Estas clases las crea ppsa-guided-tour.js pero NO estaban definidas en
   ninguna hoja del plugin: solo existía el botón de ayuda. Por eso el tour
   salía como texto suelto sin formato. Se diseñan aquí por primera vez. */
.ppsa-guided-tour {
	position: fixed;
	inset: 0;
	z-index: 100200;
	pointer-events: none;
}

.ppsa-guided-tour[hidden] {
	display: none !important;
}

/* Foco recortado sobre el elemento que se está explicando. La sombra enorme
   oscurece todo menos el hueco, sin necesidad de una capa aparte. */
.ppsa-guided-tour__hole {
	position: absolute;
	border-radius: 12px;
	box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62);
	transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.ppsa-guided-tour__card {
	position: absolute;
	z-index: 1;
	width: min(360px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 1rem 1.15rem 1.05rem;
	background: #ffffff;
	color: #0f172a;
	border-radius: 14px;
	box-shadow: 0 20px 56px rgba(15, 23, 42, 0.34);
	pointer-events: auto;
	box-sizing: border-box;
	animation: ppsaTourIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ppsaTourIn {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.ppsa-guided-tour__card--center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: none;
}

.ppsa-guided-tour__title {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.ppsa-guided-tour__body {
	margin: 0 0 0.85rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: #334155;
}

.ppsa-guided-tour__body p { margin: 0 0 0.5rem; }
.ppsa-guided-tour__body p:last-child { margin-bottom: 0; }

.ppsa-guided-tour__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ppsa-guided-tour__actions button {
	flex: 0 0 auto;
	padding: 0.42rem 0.9rem;
	font-size: 0.82rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.45);
	background: #ffffff;
	color: #334155;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ppsa-guided-tour__actions button:hover,
.ppsa-guided-tour__actions button:focus-visible {
	background: rgba(148, 163, 184, 0.14);
}

/* El botón principal (siguiente / finalizar) es el último del grupo. */
.ppsa-guided-tour__actions button:last-child {
	background: var(--ppsa-primary, #2563eb);
	border-color: transparent;
	color: #ffffff;
}

.ppsa-guided-tour__actions button:last-child:hover,
.ppsa-guided-tour__actions button:last-child:focus-visible {
	transform: translateY(-1px);
	background: var(--ppsa-primary, #2563eb);
}

.ppsa-guided-tour__count {
	font-size: 0.76rem;
	font-weight: 600;
	color: #64748b;
	letter-spacing: 0.02em;
}

.ppsa-guided-tour__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.7rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.ppsa-guided-tour__link {
	font-size: 0.8rem;
	color: var(--ppsa-primary, #2563eb);
	text-decoration: none;
}

.ppsa-guided-tour__link:hover {
	text-decoration: underline;
}

.ppsa-guided-tour__guide {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.78rem;
	color: #64748b;
}

@media (max-width: 600px) {
	/* En móvil el recuadro se ancla abajo: perseguir al elemento en pantallas
	   estrechas dejaba la tarjeta medio fuera del viewport. */
	.ppsa-guided-tour__card,
	.ppsa-guided-tour__card--bottom,
	.ppsa-guided-tour__card--center {
		top: auto !important;
		bottom: 0.75rem !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: calc(100vw - 1.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-guided-tour__card { animation: none; }
	.ppsa-guided-tour__hole { transition: none; }
}

/* ============================================================
   0.99.665 — Visita guiada por capítulos
   ------------------------------------------------------------
   Tokens propios y no heredados a propósito: design-system.css
   solo cubre auth y el chrome del portal, y el dashboard ni
   siquiera encola public.css. Definirlos aquí hace que la hoja
   viaje autocontenida junto al script, que es lo que ya se hace
   con el resto de este archivo.
   ============================================================ */
/*
 * 0.99.666 — se enchufan a los tokens del portal, conservando el valor
 * literal como fallback. En dashboard/builder heredan el sistema y todo
 * se ve de la misma familia; si el tour se monta en una pantalla que no
 * carga design-system.css, sigue pintándose igual que antes.
 */
.ppsa-guided-tour,
.ppsa-guided-tour-help {
	--ppsa-tour-surface: var(--ppsa-ui-surface, #ffffff);
	--ppsa-tour-surface-2: var(--ppsa-ui-surface-2, #f8fafc);
	--ppsa-tour-ink: var(--ppsa-ui-ink, #0f172a);
	--ppsa-tour-ink-soft: var(--ppsa-ui-ink-soft, #475569);
	--ppsa-tour-ink-muted: var(--ppsa-ui-ink-muted, #64748b);
	--ppsa-tour-line: var(--ppsa-ui-line, rgba(148, 163, 184, 0.28));
	--ppsa-tour-accent: var(--ppsa-ui-violet, #7c3aed);
	--ppsa-tour-accent-soft: rgba(124, 58, 237, 0.1);
	--ppsa-tour-done: var(--ppsa-ui-ok, #059669);
	--ppsa-tour-radius: var(--ppsa-ui-r-xl, 18px);
	--ppsa-tour-ease: var(--ppsa-ui-ease, cubic-bezier(0.22, 1, 0.36, 1));
	--ppsa-tour-shadow: var(
		--ppsa-ui-e4,
		0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.14),
			0 32px 64px rgba(15, 23, 42, 0.12)
	);
}

/*
 * Modo oscuro: aplazado a propósito.
 *
 * El tour solo aparece en dashboard y builder, y ambos son claros: el resto
 * del portal tiene los blancos escritos a mano en ~700 KB de CSS. Una tarjeta
 * oscura flotando sobre un panel claro se ve peor que una clara, así que no
 * se activa por `prefers-color-scheme` hasta que el portal entero lo soporte.
 *
 * Cuando llegue ese momento, los tokens ya están enchufados a `--ppsa-ui-*`:
 * bastará con que el sistema cambie y el tour seguirá al resto solo.
 */

/* ---- Tarjeta ---- */
.ppsa-guided-tour__card {
	width: min(384px, calc(100vw - 2rem));
	padding: 1.1rem 1.25rem 1.15rem;
	background: var(--ppsa-tour-surface);
	color: var(--ppsa-tour-ink);
	border: 1px solid var(--ppsa-tour-line);
	border-radius: var(--ppsa-tour-radius);
	box-shadow: var(--ppsa-tour-shadow);
}

.ppsa-guided-tour__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.ppsa-guided-tour__count {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ppsa-tour-ink-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ppsa-guided-tour__chapter {
	margin: 0;
	padding: 0.16rem 0.55rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ppsa-tour-accent);
	background: var(--ppsa-tour-accent-soft);
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55%;
}

/* Avance dentro del capítulo. */
.ppsa-guided-tour__track {
	height: 3px;
	margin: 0 0 0.85rem;
	border-radius: 999px;
	background: var(--ppsa-tour-line);
	overflow: hidden;
}

.ppsa-guided-tour__track span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ppsa-tour-accent);
	transition: width 0.35s var(--ppsa-tour-ease);
}

.ppsa-guided-tour__title {
	margin: 0 0 0.45rem;
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--ppsa-tour-ink);
}

.ppsa-guided-tour__body {
	margin: 0 0 0.85rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ppsa-tour-ink-soft);
}

.ppsa-guided-tour__body ul {
	margin: 0.4rem 0 0;
	padding-left: 1.05rem;
}

.ppsa-guided-tour__body li { margin-bottom: 0.28rem; }
.ppsa-guided-tour__body li:last-child { margin-bottom: 0; }
.ppsa-guided-tour__body strong { color: var(--ppsa-tour-ink); font-weight: 650; }

/* Apunte de «qué pasa cuando…»: se lee como una nota al margen. */
.ppsa-guided-tour__note {
	margin: 0 0 0.9rem;
	padding: 0.55rem 0.7rem 0.55rem 0.75rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--ppsa-tour-ink-soft);
	background: var(--ppsa-tour-surface-2);
	border-left: 3px solid var(--ppsa-tour-accent);
	border-radius: 0 10px 10px 0;
}

.ppsa-guided-tour__links {
	border-top-color: var(--ppsa-tour-line);
}

.ppsa-guided-tour__link {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
	color: var(--ppsa-tour-ink-muted);
}

.ppsa-guided-tour__link:hover {
	color: var(--ppsa-tour-accent);
}

/* ---- Índice de capítulos ---- */
.ppsa-guided-tour__card--hub {
	width: min(430px, calc(100vw - 2rem));
	padding: 1.35rem 1.35rem 1.1rem;
}

.ppsa-tour-hub__eyebrow {
	margin: 0 0 0.2rem;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ppsa-tour-accent);
}

.ppsa-tour-hub__title {
	margin: 0 0 0.35rem;
	font-size: 1.3rem;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ppsa-tour-ink);
}

.ppsa-tour-hub__intro {
	margin: 0 0 0.95rem;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--ppsa-tour-ink-soft);
}

.ppsa-tour-hub__progress { margin-bottom: 0.9rem; }

.ppsa-tour-hub__bar {
	height: 5px;
	border-radius: 999px;
	background: var(--ppsa-tour-line);
	overflow: hidden;
}

.ppsa-tour-hub__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ppsa-tour-accent), #22d3ee);
	transition: width 0.45s var(--ppsa-tour-ease);
}

.ppsa-tour-hub__progress-txt {
	margin: 0.35rem 0 0;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--ppsa-tour-ink-muted);
}

.ppsa-tour-hub__list {
	list-style: none;
	margin: 0 0 0.9rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-height: min(46vh, 340px);
	overflow-y: auto;
	/* Que el scroll no corte el foco visible del último elemento. */
	padding-right: 0.15rem;
}

.ppsa-tour-chapter {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	padding: 0.6rem 0.65rem;
	text-align: left;
	font-family: inherit;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.16s var(--ppsa-tour-ease),
		border-color 0.16s var(--ppsa-tour-ease),
		transform 0.16s var(--ppsa-tour-ease);
}

.ppsa-tour-chapter:hover,
.ppsa-tour-chapter:focus-visible {
	background: var(--ppsa-tour-surface-2);
	border-color: var(--ppsa-tour-line);
	transform: translateX(2px);
}

.ppsa-tour-chapter__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	font-size: 0.9rem;
	color: var(--ppsa-tour-accent);
	background: var(--ppsa-tour-accent-soft);
}

.ppsa-tour-chapter__txt {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.ppsa-tour-chapter__txt strong {
	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1.3;
	color: var(--ppsa-tour-ink);
}

.ppsa-tour-chapter__txt small {
	font-size: 0.76rem;
	line-height: 1.35;
	color: var(--ppsa-tour-ink-muted);
}

.ppsa-tour-chapter__meta {
	flex: 0 0 auto;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ppsa-tour-ink-muted);
	white-space: nowrap;
}

.ppsa-tour-chapter.is-done .ppsa-tour-chapter__icon {
	color: var(--ppsa-tour-done);
	background: rgba(5, 150, 105, 0.12);
}

.ppsa-tour-chapter.is-done .ppsa-tour-chapter__meta {
	color: var(--ppsa-tour-done);
}

.ppsa-tour-hub__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ppsa-tour-line);
}

.ppsa-tour-hub__pdf {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ppsa-tour-accent);
	text-decoration: none;
}

.ppsa-tour-hub__pdf:hover { text-decoration: underline; }

/* ---- Acceso principal, en la barra superior ----
   El flotante de la esquina no se leía como «visita guiada»: quedaba lejos
   de donde se mira al entrar y un «?» suelto no dice qué hay detrás. Este
   va junto a los botones de compartir, con el texto completo. */
.ppsa-tour-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.42rem 0.9rem;
	font-family: inherit;
	font-size: 0.84rem;
	font-weight: 650;
	line-height: 1.2;
	color: #fff;
	background: linear-gradient(135deg, var(--ppsa-tour-accent, #7c3aed), #6366f1);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
		0 6px 16px rgba(124, 58, 237, 0.28);
	transition: transform 0.15s var(--ppsa-tour-ease, ease),
		box-shadow 0.15s var(--ppsa-tour-ease, ease), filter 0.15s ease;
}

.ppsa-tour-cta:hover,
.ppsa-tour-cta:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08),
		0 10px 24px rgba(124, 58, 237, 0.34);
}

.ppsa-tour-cta__icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	font-size: 0.7rem;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-tour-cta { transition: none; }
	.ppsa-tour-cta:hover { transform: none; }
}

/* ---- Lanzador flotante ---- */
.ppsa-guided-tour-help--labeled {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.5rem 0.95rem 0.5rem 0.55rem;
	border-radius: 999px;
	background: var(--ppsa-tour-surface);
	border: 1px solid var(--ppsa-tour-line);
	color: var(--ppsa-tour-ink);
	font-size: 0.82rem;
	font-weight: 650;
	font-family: inherit;
	box-shadow: var(--ppsa-tour-shadow);
}

.ppsa-guided-tour-help__mark {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, var(--ppsa-tour-accent), #6366f1);
}

.ppsa-guided-tour-help__txt { white-space: nowrap; }

@media (max-width: 600px) {
	/* En móvil el ancho es oro: se queda solo la marca circular. */
	.ppsa-guided-tour-help__txt { display: none; }
	.ppsa-guided-tour-help--labeled { padding: 0.4rem; }
}

/* Cabecera de sección con su botón «Guía» (antes iba en estilos en línea). */
.ppsa-panel-tour-trigger-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-tour-chapter,
	.ppsa-tour-hub__bar span,
	.ppsa-guided-tour__track span {
		transition: none;
	}
	.ppsa-tour-chapter:hover { transform: none; }
}