/*
 * O alerta usava `display: flex`, o que transformava CADA filho direto num flex
 * item — inclusive os nos de texto soltos. Um alerta como
 *
 *     <div class="alert alert-info">
 *         <strong>Titulo:</strong> texto explicativo <table>...</table>
 *     </div>
 *
 * virava tres colunas lado a lado em vez de um paragrafo seguido da tabela.
 * Por isso alertas com mais de um elemento apareciam "quebrados" em todo o
 * painel.
 *
 * `flow-root` devolve o fluxo em bloco (conteudo inline flui como texto, blocos
 * empilham) e ainda contem os floats — o `.close` do Bootstrap e o botao de
 * dismiss usam `float: right`, entao o alerta continua envolvendo os dois sem
 * precisar de clearfix.
 */
.alert {
	display: flow-root;
	border-radius: var(--border-radius-sm);
	margin-top: 12px;
}

/* Respiro entre icone e texto que antes vinha do `gap` do flex. */
.alert > i,
.alert > svg,
.alert > [class^="ph-"],
.alert > [class*=" ph-"] {
	margin-right: var(--gap-md);
}

/* Conteudo em bloco nao deve deixar folga extra no rodape do alerta. */
.alert > p:last-child,
.alert > ul:last-child,
.alert > ol:last-child,
.alert > table:last-child,
.alert > div:last-child {
	margin-bottom: 0;
}

.alert-danger {
	border: 1px solid var(--border-error);
	background: var(--surface-error);
	color: var(--text-error);
	font-weight: 550;
	line-height: 130%;
	letter-spacing: var(--caption-2-letter-spacing);
}

.alert-warning {
	border: var(--border-with-sm) solid var(--border-warning);
	background: var(--surface-warning);
	color: var(--text-warning);
	font-weight: 550;
	line-height: 130%;
	letter-spacing: var(--caption-2-letter-spacing);
}

/* `.close` do Bootstrap ja e float:right; cobre dismiss sem essa classe. */
button[data-dismiss="alert"] {
	float: right;
	margin-left: var(--gap-md);
}