/* =========================================================
   Trilha Lúdica — tema escuro, estilo "organograma"
   Pensado para páginas com fundo preto/escuro.
   Paleta sóbria (slate + índigo + esmeralda), sem elementos
   infantis (sem emoji, sem bounce, sem cores saturadas demais).
   ========================================================= */

.ttl-trilha {
	--ttl-bg-card:        #17181d;
	--ttl-bg-card-atual:  #1c1a29;
	--ttl-borda:          #2c2d35;
	--ttl-borda-atual:    #6d5ef0;
	--ttl-borda-completo: #1f7a52;
	--ttl-texto:          #f2f2f5;
	--ttl-texto-suave:    #a3a3ad;
	--ttl-texto-fraco:    #6b6b74;
	--ttl-acento:         #8b7bf7;
	--ttl-acento-forte:   #6d5ef0;
	--ttl-sucesso:        #2fbf82;
	--ttl-sucesso-bg:     #12261d;

	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--ttl-texto);
}

.ttl-aviso {
	padding: 16px 18px;
	background: #1c1a29;
	border: 1px solid var(--ttl-acento-forte);
	border-radius: 8px;
	color: var(--ttl-texto);
}

/* ---------- Barra de progresso ---------- */

.ttl-progresso-wrap {
	margin-bottom: 40px;
}

.ttl-progresso-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: 8px;
	color: var(--ttl-texto-suave);
	text-transform: uppercase;
}

.ttl-progresso-barra {
	background: #24252c;
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.ttl-progresso-preenchido {
	background: linear-gradient(90deg, var(--ttl-acento-forte), var(--ttl-sucesso));
	height: 100%;
	border-radius: 999px;
	transition: width .4s ease;
}

/* ---------- Caminho / organograma ---------- */

.ttl-caminho {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ttl-etapa {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 18px;
	padding-bottom: 22px;
}

.ttl-etapa:last-child {
	padding-bottom: 0;
}

/* Marcador circular (nó do organograma) */
.ttl-etapa-marcador {
	grid-column: 1;
	grid-row: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #24252c;
	color: var(--ttl-texto-fraco);
	border: 1px solid var(--ttl-borda);
	z-index: 1;
	align-self: start;
}

.ttl-status-current .ttl-etapa-marcador {
	background: var(--ttl-acento-forte);
	color: #fff;
	border-color: var(--ttl-acento-forte);
}

.ttl-status-completed .ttl-etapa-marcador {
	background: var(--ttl-sucesso-bg);
	color: var(--ttl-sucesso);
	border-color: var(--ttl-borda-completo);
}

/* Linha vertical conectando os nós */
.ttl-etapa-linha {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 1px;
	margin: 0 auto;
	background: var(--ttl-borda);
	height: 100%;
	transform: translateY(40px);
}

.ttl-status-completed .ttl-etapa-linha {
	background: var(--ttl-borda-completo);
}

.ttl-etapa:last-child .ttl-etapa-linha {
	display: none;
}

/* ---------- Card ---------- */

.ttl-card {
	grid-column: 2;
	background: var(--ttl-bg-card);
	border: 1px solid var(--ttl-borda);
	border-radius: 10px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ttl-status-current .ttl-card {
	background: var(--ttl-bg-card-atual);
	border-color: var(--ttl-borda-atual);
}

.ttl-status-completed .ttl-card {
	border-color: var(--ttl-borda-completo);
}

.ttl-status-locked .ttl-card {
	opacity: .55;
}

.ttl-card-cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ttl-etapa-numero {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ttl-texto-fraco);
}

.ttl-etapa-titulo {
	font-size: 16px;
	font-weight: 600;
	color: var(--ttl-texto);
	line-height: 1.35;
}

.ttl-status-locked .ttl-etapa-titulo {
	color: var(--ttl-texto-suave);
}

/* Badges de status — discretos, sem cores berrantes */

.ttl-etapa-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.ttl-badge-completed {
	background: var(--ttl-sucesso-bg);
	color: var(--ttl-sucesso);
	border: 1px solid var(--ttl-borda-completo);
}

.ttl-badge-current {
	background: rgba(109, 94, 240, .12);
	color: var(--ttl-acento);
	border: 1px solid var(--ttl-borda-atual);
}

.ttl-badge-locked {
	background: transparent;
	color: var(--ttl-texto-fraco);
	border: 1px solid var(--ttl-borda);
}

/* ---------- Ações ---------- */

.ttl-botao {
	margin-top: 6px;
	display: inline-block;
	background: var(--ttl-acento-forte);
	color: #fff;
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	width: fit-content;
	transition: background .15s ease;
}

.ttl-botao:hover {
	background: #5a4de0;
	color: #fff;
}

.ttl-link-secundario {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ttl-sucesso);
	text-decoration: none;
	width: fit-content;
}

.ttl-link-secundario:hover {
	text-decoration: underline;
}

.ttl-texto-bloqueado {
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ttl-texto-fraco);
	font-style: italic;
}

/* ---------- Admin: metabox da trilha (mantido claro, é tela wp-admin) ---------- */

#ttl-sequence-list {
	margin: 0;
	padding: 0;
}

.ttl-sequence-row .ttl-drag-handle {
	color: #a7aaad;
}

.ttl-sequence-row.ttl-dragging {
	opacity: .5;
}