/**
 * Estilos da tela de sessão (Sprint 13, navegação bloco-a-bloco a partir do
 * Sprint 15, bloco de áudio principal + painel de confirmação a partir do
 * Sprint 16, que fecha o Marco M5). Mesmo padrão de um arquivo por
 * módulo/tela (auth.css/conta.css/biblioteca.css/produto.css). Usa os
 * aliases `--produto-cor-*` de tokens.css — `sessao.js` sobrescreve esses
 * aliases no próprio container antes deste CSS ser aplicado, mesmo
 * mecanismo de `produto.js`/produto.css (ver Regra de Identidade por
 * Produto em REGRAS.md).
 */

.ritual-sessao {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	background-color: var(--produto-cor-fundo);
	padding: var(--spacing-lg);
	border-radius: var(--radius-md);
}

.ritual-sessao__voltar {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-accent-gold-light);
	text-decoration: none;
	align-self: flex-start;
}

/* Confirmar saída da sessão (atualização pós-Sprint-16) — pergunta
   genérica "Deseja encerrar esta sessão?" ao clicar em "Voltar" no topo,
   pra reduzir saída acidental do programa (ver ligarVoltar() em
   sessao.js). Painel inline, mesmo padrão do painel de áudio principal
   logo abaixo (.ritual-sessao__confirmar-pausa) — as duas classes
   compartilham a mesma estrutura visual de propósito, pra não introduzir
   um segundo estilo de "pergunta" na tela. Vive logo abaixo do link
   "Voltar", sempre presente no HTML (carregando/erro/sessão) e oculto por
   `hidden` até ser acionado. */

.ritual-sessao__confirmar-saida {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	padding: var(--spacing-md);
	background: var(--color-bg-elevated);
	border: 1px solid var(--produto-cor-acento);
	border-radius: var(--radius-sm);
}

.ritual-sessao__confirmar-saida[hidden] {
	display: none;
}

.ritual-sessao__confirmar-saida-texto {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--produto-cor-texto);
	margin: 0;
}

.ritual-sessao__confirmar-saida-botoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-sm);
}

.ritual-sessao__confirmar-saida-continuar {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--produto-cor-fundo);
	background: var(--produto-cor-acento);
	border-radius: var(--radius-full);
	padding: var(--spacing-xs) var(--spacing-md);
}

.ritual-sessao__confirmar-saida-confirmar {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	background: none;
	padding: var(--spacing-xs) var(--spacing-sm);
}

.ritual-sessao__titulo {
	font-family: var(--font-display);
	font-size: var(--font-size-title);
	color: var(--produto-cor-texto);
	margin: 0;
	text-align: center;
}

.ritual-sessao__aviso {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	text-align: center;
	margin: var(--spacing-md) 0 0;
}

.ritual-sessao__aviso--erro {
	color: var(--color-accent-gold-light);
}

/* Bullets de progresso (Sprint 15, clicáveis desde a atualização pós-
   Sprint-16 — ver templateProgresso()/ligarNavegacaoBlocos() em
   sessao.js) — um por bloco da sessão, o ativo ganha destaque na cor de
   acento do produto. Cada bullet é um <button> de 24x24 (área de toque
   confortável, inclusive em mobile) com o ponto visual de 8px desenhado
   via ::after — aumentar a área clicável não deveria aumentar o ponto. */

.ritual-sessao__progresso {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-xs);
}

.ritual-sessao__bullet {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.ritual-sessao__bullet::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background-color: var(--color-border);
	transform: translate(-50%, -50%);
	transition: background-color var(--transition-base), transform var(--transition-base);
}

.ritual-sessao__bullet--ativo::after {
	background-color: var(--produto-cor-acento);
	transform: translate(-50%, -50%) scale(1.25);
}

/* Sprint 17 (Marco M6) — bloco já marcado como concluído (ver Progress.php /
   templateProgresso() em sessao.js). Convive com --ativo: o ponto pode estar
   destacado (bloco atual) E preenchido (já concluído) ao mesmo tempo — por
   isso um contorno em vez de cor sólida, pra não se confundir com --ativo. */
.ritual-sessao__bullet--concluido::after {
	background-color: transparent;
	box-shadow: 0 0 0 2px var(--produto-cor-acento) inset;
}

.ritual-sessao__bullet--concluido.ritual-sessao__bullet--ativo::after {
	background-color: var(--produto-cor-acento);
	box-shadow: none;
}

.ritual-sessao__bullet:hover::after {
	background-color: var(--produto-cor-acento);
}

.ritual-sessao__bullet:focus-visible {
	outline: 2px solid var(--produto-cor-acento);
	outline-offset: 2px;
	border-radius: var(--radius-full);
}

/* Card do bloco atual (Sprint 15) — um bloco por vez, substitui a lista
   empilhada do Sprint 13. */

.ritual-sessao__card {
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
	padding: var(--spacing-lg);
}

.ritual-sessao__bloco {
	border-radius: var(--radius-sm);
}

/* Navegação livre entre blocos (atualização pós-Sprint-16, substitui o
   "Pular"/"Avançar" sequencial do Sprint 15 — ver templateNavegacao() em
   sessao.js). "Anterior" é secundário (texto), some no primeiro bloco e
   cede lugar a um espaçador para "Avançar" não pular de posição;
   "Avançar" é a ação primária e vira "Concluir" no último bloco. */

.ritual-sessao__navegacao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.ritual-sessao__anterior {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	background: none;
}

.ritual-sessao__navegacao-espaco {
	width: 1px;
}

.ritual-sessao__avancar {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 600;
	color: var(--produto-cor-fundo);
	background: var(--produto-cor-acento);
	border-radius: var(--radius-full);
	padding: var(--spacing-sm) var(--spacing-lg);
}

/* Bloco: texto (wysiwyg do ACF, ver nota de confiança em sessao.js) */

.ritual-sessao__texto {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--produto-cor-texto);
	line-height: 1.6;
}

.ritual-sessao__texto p {
	margin: 0 0 var(--spacing-sm);
}

.ritual-sessao__texto p:last-child {
	margin-bottom: 0;
}

/* Bloco: imagem */

.ritual-sessao__imagem {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.ritual-sessao__imagem img {
	width: 100%;
	border-radius: var(--radius-md);
	display: block;
}

.ritual-sessao__imagem-legenda {
	font-family: var(--font-body);
	font-size: var(--font-size-micro);
	color: var(--color-text-secondary);
	text-align: center;
}

/* Bloco: instrução — destacado dos blocos de texto corrido, mesma paleta do
   produto (cor de acento), para ler como uma orientação e não como parágrafo. */

.ritual-sessao__instrucao {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--produto-cor-texto);
	margin: 0;
	padding: var(--spacing-md);
	border-left: 3px solid var(--produto-cor-acento);
	background: var(--color-bg-surface);
	border-radius: var(--radius-sm);
}

/* Bloco: áudio curto (microáudio, Sprint 14) — controles nativos do
   navegador, sem player customizado (não é requisito deste sprint). */

.ritual-sessao__audio-curto-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-md);
	background: var(--color-bg-surface);
	border-radius: var(--radius-sm);
}

.ritual-sessao__audio-curto-titulo {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--produto-cor-texto);
	margin: 0;
}

.ritual-sessao__audio-curto {
	width: 100%;
	accent-color: var(--produto-cor-acento);
}

/* Bloco: áudio principal (encerramento, Sprint 16) — mesma base visual do
   áudio curto, mas com um painel de confirmação de pausa/interrupção
   embutido no wrapper (ver ligarAudioPrincipal() em sessao.js). */

.ritual-sessao__audio-principal-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	padding: var(--spacing-md);
	background: var(--color-bg-surface);
	border-radius: var(--radius-sm);
}

.ritual-sessao__audio-principal-titulo {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--produto-cor-texto);
	margin: 0;
}

.ritual-sessao__audio-principal {
	width: 100%;
	accent-color: var(--produto-cor-acento);
}

/* Painel de confirmação de interrupção do áudio principal (Sprint 16) —
   inline, não modal (ver docblock de ligarAudioPrincipal() em sessao.js
   para a decisão). Some por padrão via o atributo `hidden` do próprio
   HTML. Desde a atualização pós-Sprint-16, só aparece quando o usuário
   tenta SAIR do bloco (navegar ou fechar a sessão) com o áudio tocando —
   pausar pelos controles nativos não passa mais por aqui. */

.ritual-sessao__confirmar-pausa {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	padding: var(--spacing-md);
	background: var(--color-bg-elevated);
	border: 1px solid var(--produto-cor-acento);
	border-radius: var(--radius-sm);
}

.ritual-sessao__confirmar-pausa[hidden] {
	display: none;
}

.ritual-sessao__confirmar-pausa-texto {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--produto-cor-texto);
	margin: 0;
}

.ritual-sessao__confirmar-pausa-botoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-sm);
}

.ritual-sessao__confirmar-pausa-continuar {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--produto-cor-fundo);
	background: var(--produto-cor-acento);
	border-radius: var(--radius-full);
	padding: var(--spacing-xs) var(--spacing-md);
}

.ritual-sessao__confirmar-pausa-confirmar {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	background: none;
	padding: var(--spacing-xs) var(--spacing-sm);
}