/**
 * Estilos da tela de Diário do Sono (Sprint 18). Mesmo padrão de
 * produto.css/sessao.css: um arquivo por módulo/tela, usando os aliases
 * `--produto-cor-*` de tokens.css (já sobrescritos pelo container do
 * produto quando esta tela abre — ver `diario.js`, `aplicarIdentidade()`,
 * mesma função copiada de `produto.js`/`sessao.js`).
 */

.ritual-diario {
	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-diario__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-diario__titulo {
	font-family: var(--font-display);
	font-size: var(--font-size-title);
	color: var(--produto-cor-texto);
	margin: 0;
	text-align: center;
}

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

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

/* Formulário de registro/edição. */

.ritual-diario__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--spacing-md);
}

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

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

.ritual-diario__sentimentos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

.ritual-diario__sentimento {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: var(--spacing-xs) var(--spacing-sm);
	cursor: pointer;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ritual-diario__sentimento--ativo {
	border-color: var(--produto-cor-acento);
	color: var(--produto-cor-texto);
}

.ritual-diario__horarios {
	display: flex;
	gap: var(--spacing-md);
}

.ritual-diario__input,
.ritual-diario__textarea {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--produto-cor-texto);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--spacing-sm);
}

.ritual-diario__textarea {
	resize: vertical;
	min-height: 4.5em;
}

.ritual-diario__estrelas {
	display: flex;
	gap: var(--spacing-xs);
}

.ritual-diario__estrela {
	font-size: var(--font-size-subtitle);
	color: var(--color-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1;
	padding: 0;
}

.ritual-diario__estrela--ativa {
	color: var(--produto-cor-acento);
}

.ritual-diario__acoes {
	display: flex;
	gap: var(--spacing-sm);
	align-items: center;
}

.ritual-diario__botao {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-bg-primary);
	background: var(--produto-cor-acento);
	border: none;
	border-radius: var(--radius-full);
	padding: var(--spacing-sm) var(--spacing-lg);
	cursor: pointer;
}

.ritual-diario__botao--secundario {
	color: var(--produto-cor-texto);
	background: none;
	border: 1px solid var(--color-border);
}

/* Histórico. */

.ritual-diario__historico {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.ritual-diario__historico-titulo {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}

.ritual-diario__entrada {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-bg-surface);
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

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

.ritual-diario__entrada-data {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--produto-cor-texto);
}

.ritual-diario__entrada-resumo {
	font-family: var(--font-body);
	font-size: var(--font-size-micro);
	color: var(--color-text-secondary);
}