/*
 * Mensagem explicativa de uso da tela — `Views/Shared/_Dica.cshtml` (secao 9.7 do
 * `CLAUDE.md`, autorizada pelo usuario em 03/09/2026).
 *
 * **Nenhuma cor literal**: fundo, texto, borda e o dark mode saem de `--bs-primary-rgb`,
 * `--bs-body-color` e `--bs-border-radius`, que o Metronic redefine no tema escuro. Mesmo
 * criterio de `alpha-lookup.css`, `alpha-loading.css` e `alpha-alertas.css`.
 *
 * A dica e **discreta de proposito**: nao pode competir com o campo do formulario nem com
 * a mensagem de resultado (SweetAlert2, secao 9.2). Nao usa `.alert` do Bootstrap, que e
 * grande demais para uma linha de instrucao e desloca o formulario que o `.dfm` define.
 */

.alpha-dica {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--bs-gray-700);
	font-size: 0.925rem;
	line-height: 1.4;
}

.alpha-dica-icone {
	flex: 0 0 auto;
	line-height: 1.4;
	color: var(--bs-primary);
}

/* Faixa no topo do card ou da aba. */
.alpha-dica-faixa {
	margin-bottom: 1.25rem;
	padding: 0.65rem 0.9rem;
	border-radius: var(--bs-border-radius);
	background-color: rgba(var(--bs-primary-rgb), 0.07);
	border-inline-start: 3px solid rgba(var(--bs-primary-rgb), 0.45);
}

/* Linha curta acima de uma grade. Sem fundo: e legenda, nao aviso. */
.alpha-dica-linha {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	color: var(--bs-gray-600);
}

.alpha-dica-linha .alpha-dica-icone {
	font-size: 0.95rem;
}

/*
 * Modo `Dica.Icone`: o `i` ao lado do rotulo, com a explicacao no tooltip do Metronic.
 * O icone e discreto ate o ponteiro chegar nele — quem sabe o que o campo faz nao precisa
 * dele na frente.
 */
.alpha-dica-marca {
	margin-inline-start: 0.35rem;
	font-size: 1rem;
	line-height: 1;
	vertical-align: middle;
	cursor: help;
	color: var(--bs-gray-500);
}

.alpha-dica-marca:hover {
	color: var(--bs-primary);
}

/*
 * O mesmo `i` ao lado do titulo da pagina (`_PageTitle.cshtml`, `ViewData["Dica"]`): a
 * explicacao da tela inteira. Um pouco maior, porque o vizinho e o `h1`.
 */
.page-heading .alpha-dica-marca {
	font-size: 1.2rem;
	margin-inline-start: 0.5rem;
}

/*
 * O tooltip da `Dica.Icone` — so ele, pela `customClass`; os outros tooltips do sistema
 * continuam com o desenho do tema. `pre-line` e o que faz o `\n` do `TextoDoTooltip`
 * virar linha, sem uma tag de HTML no `title`.
 */
.alpha-dica-tooltip .tooltip-inner {
	max-width: 340px;
	text-align: start;
	white-space: pre-line;
}