/* Painel de regras — trilha Milagre (Figma node 3949-4864) */

.trilha-modal.is-showing-rules .trilha-modal__main-view {
	display: none;
}

.trilha-modal.is-showing-rules .trilha-modal__rules-view {
	display: block;
}

.trilha-modal__rules-view {
	display: none;
}

.trilha-modal__rules-content {
	display: flex;
	flex-direction: column;
}

.trilha-modal__rules-label {
	display: block;
	font-family: var(--font-family-secondary, "DM Sans", sans-serif);
	font-size: var(--font-size-xxxs, 12px);
	font-weight: var(--font-weight-semibold, 600);
	line-height: var(--line-height-nano, 115%);
	letter-spacing: var(--letter-spacing-small, 1px);
	text-transform: uppercase;
	color: var(--rota-pure, var(--color-brand-primary-pure));
	margin-bottom: var(--spacing-sm, 12px);
}

.trilha-modal__rules-heading {
	font-family: var(--font-family-primary, "Bogart", serif);
	font-size: var(--font-size-md, 20px);
	font-weight: var(--font-weight-semibold, 600);
	line-height: var(--line-height-nano, 115%);
	color: var(--color-brand-primary-dark);
	margin: 0 0 var(--spacing-sm, 12px);
	text-transform: none;
}

@media (max-width: 991px) {
	.trilha-modal__rules-heading {
		font-size: var(--font-size-sm, 18px);
	}
}

.trilha-modal__rules-intro {
	font-family: var(--font-family-secondary, "DM Sans", sans-serif);
	font-size: var(--font-size-xs, 16px);
	font-weight: var(--font-weight-regular, 400);
	line-height: var(--line-height-large, 145%);
	color: var(--color-neutral-deep);
	margin: 0 0 var(--spacing-lg, 24px);
}

/* Linhas do modal — interação Milagre */

.trilha-modal__passo-item {
	position: relative;
	overflow: visible;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s ease;
}

.trilha-modal__passo-item--bloqueado[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	right: calc(44px + 8px);
	top: 50%;
	left: auto;
	bottom: auto;
	transform: translateY(-50%);
	width: max-content;
	max-width: 260px;
	padding: 6px 10px;
	border-radius: var(--border-radius-small, 8px);
	background: var(--color-brand-primary-dark, #280060);
	color: var(--color-neutral-white, #fff);
	font-family: var(--font-family-secondary, "DM Sans", sans-serif);
	font-size: var(--font-size-xxs, 12px);
	font-weight: var(--font-weight-regular, 400);
	line-height: 1.3;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 5;
	white-space: normal;
}

/* Trilhas padrão: só hover, sem clique */
.trilha-modal__passo-item--bloqueado:not(.trilha-modal__passo-item--milagre):hover::after {
	opacity: 1;
	visibility: visible;
}

/* Milagre: hover e teclado */
.trilha-modal__passo-item--milagre:hover::after,
.trilha-modal__passo-item--milagre:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

.trilha-modal__passo-item--acessivel {
	cursor: pointer;
}

.trilha-modal__passo-item--acessivel:hover,
.trilha-modal__passo-item--acessivel:focus-visible {
	background-color: var(--rota-soft, var(--color-brand-secondary-soft));
}

.trilha-modal__passo-item--bloqueado {
	cursor: default;
}

.trilha-modal__passo-item--bloqueado:not(.trilha-modal__passo-item--milagre):hover {
	background-color: var(--rota-soft, var(--color-brand-secondary-soft));
}

.trilha-modal__passo-item--milagre {
	cursor: pointer;
}

.trilha-modal__passo-item--milagre:focus-visible {
	outline: 2px solid var(--rota-pure, var(--color-brand-primary-pure));
	outline-offset: 2px;
}

.trilha-modal__passo-item--bloqueado:not(.trilha-modal__passo-item--milagre):hover,
.trilha-modal__passo-item--milagre:hover,
.trilha-modal__passo-item--milagre:focus-visible {
	z-index: 2;
}

.trilha-modal__btn-lock {
	width: 44px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--border-radius-pill, 1000px);
	background-color: var(--rota-soft, #EEebF4);
	color: var(--rota-dark, var(--color-brand-primary-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	padding: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}