/**
 * Estilos da tela de produto (Sprint 12). Antes vivia como
 * `.ritual-biblioteca__produto*` em biblioteca.css (placeholder do
 * Sprint 11) — movido para arquivo próprio junto com a extração para
 * `produto.js`, mesmo padrão de auth.css/conta.css/biblioteca.css (um
 * arquivo de estilos por módulo/tela).
 *
 * Usa os aliases `--produto-cor-*` de tokens.css, exatamente como o
 * placeholder do Sprint 11 já fazia — a diferença é que agora
 * `produto.js` sobrescreve esses aliases com os valores reais do produto
 * (via `container.style.setProperty()`) antes deste CSS ser aplicado, então
 * as mesmas declarações abaixo já refletem a identidade visual dinâmica sem
 * precisar de nenhuma regra `[data-produto="..."]` explícita aqui.
 */

.ritual-produto {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	/*
	 * Correção (validação M4, item 3): `produto.js` já setava
	 * `--produto-cor-fundo` no container (via `aplicarIdentidade()`),
	 * mas nenhuma regra deste arquivo consumia a variável — só o
	 * `.ritual-produto__capa` usava `--produto-cor-primaria`, daí o
	 * "quadrado muda mas o fundo não". Aplicando aqui, escopado só a
	 * este container (nunca em #ritual-app), a identidade do produto
	 * não vaza para Biblioteca/Conta ao trocar de tela.
	 */
	background-color: var(--produto-cor-fundo);
	padding: var(--spacing-lg);
	border-radius: var(--radius-md);
}

.ritual-produto__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;
}

.ritual-produto__capa {
	height: 160px;
	border-radius: var(--radius-md);
	background-color: var(--produto-cor-primaria);
}

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

.ritual-produto__rotulo {
	font-family: var(--font-body);
	font-size: var(--font-size-micro);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
	text-align: center;
}

/* Sprint 19 — agrupa os links de Diário (Sono/Sonhos/Anotações) numa
   pequena seção só desenhada quando existe pelo menos um link ativo (ver
   diariosTemplate() em produto.js). Sem isso, com os 3 ativados, os links
   ficariam soltos sem nenhuma relação visual entre eles. */
.ritual-produto__diarios {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-xs);
}

/* Sprint 18 — link de entrada do Diário do Sono, agora reaproveitado por
   qualquer um dos três tipos de diário (ver diariosTemplate() em
   produto.js), só desenhado quando a feature correspondente está ativada
   no produto. */
.ritual-produto__diario {
	align-self: center;
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--produto-cor-acento);
	text-decoration: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: var(--spacing-xs) var(--spacing-md);
	margin-top: var(--spacing-xs);
}

.ritual-produto__diario:hover,
.ritual-produto__diario:focus-visible {
	border-color: var(--produto-cor-acento);
}

.ritual-produto__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;
}

/* Lista de sessões. A partir do Sprint 13, itens com `sessao_key` viram
   clicáveis (`--clicavel`) e abrem `sessao.js`; sem chave (linha nova, ainda
   não salva no admin), o item continua visível mas inerte. */

.ritual-produto__sessoes {
	list-style: none;
	margin: var(--spacing-md) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.ritual-produto__sessao {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-bg-surface);
}

.ritual-produto__sessao--clicavel {
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.ritual-produto__sessao--clicavel:hover,
.ritual-produto__sessao--clicavel:focus-visible {
	border-color: var(--produto-cor-acento);
	background: var(--color-bg-elevated);
}

.ritual-produto__sessao-numero {
	font-family: var(--font-display);
	font-size: var(--font-size-small);
	color: var(--produto-cor-acento);
	min-width: 1.5em;
}

.ritual-produto__sessao-titulo {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--produto-cor-texto);
}

/* Sprint 23 (abre o Marco M8 — Offline de Conteúdo) — botão de download
   offline por sessão, só desenhado quando produto.entitlement.
   offline_permitido é verdadeiro (ver sessaoTemplate() em produto.js). O
   MESMO botão alterna baixar/remover pelo atributo data-estado — nunca dois
   elementos (um de baixar, outro de remover) ao mesmo tempo, ver DDP.md
   "opção simétrica de remoção". `margin-left: auto` empurra o botão pra
   ponta direita do item de lista (que já é display:flex). */
.ritual-produto__sessao-offline {
	margin-left: auto;
	flex-shrink: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-micro);
	color: var(--produto-cor-acento);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: var(--spacing-xs) var(--spacing-sm);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.ritual-produto__sessao-offline:hover,
.ritual-produto__sessao-offline:focus-visible {
	border-color: var(--produto-cor-acento);
}

.ritual-produto__sessao-offline:disabled {
	cursor: default;
	opacity: 0.6;
}

/* Estado "já baixada" — indicação visual discreta (badge), sem depender só
   do texto (ver PROMPT-SPRINT-23.md, tarefa "indicação visual"). */
.ritual-produto__sessao-offline[data-estado="baixada"] {
	color: var(--color-text-secondary);
	border-color: var(--color-border);
}

.ritual-produto__sessao-offline[data-estado="erro"] {
	color: var(--color-error, #B3452C);
	border-color: var(--color-error, #B3452C);
}

/* Sprint 24 (continua o Marco M8) — botão de download de ÁUDIO, separado do
   botão de texto/imagem acima (ver produto.js, decisão registrada no
   cabeçalho do módulo). Reaproveita toda a aparência de
   .ritual-produto__sessao-offline (mesma classe base) — o modificador
   --audio só ajusta o espaçamento entre os dois botões, que agora ficam
   lado a lado na ponta direita do item de lista. Nasce com o atributo
   HTML `hidden` (ver botaoAudioTemplate()) até o texto/imagem da sessão
   terminar de baixar. */
.ritual-produto__sessao-offline--audio {
	margin-left: var(--spacing-xs);
}