/**
 * Janela do Ecossistema (confirmar, avisar, perguntar) e o aviso rápido de sucesso.
 *
 * = O Que =
 * O visual do `<dialog class="leco-dialogo">` criado pelo `dialogo.js`, no painel e no site: caixa branca de cantos
 * arredondados, fundo escurecido, botões de 4 px (roxo no principal, vermelho no de apagar) e o aviso no canto.
 *
 * = Como =
 * Tudo escopado em `.leco-dialogo` e `.leco-dialogo-aviso`, com as propriedades dos botões definidas aqui, para o tema do
 * site e o painel do WordPress não mudarem a cara da janela.
 *
 * @package Libraria_Ecossistema
 * @since 1.90.0
 */

.leco-dialogo {
	box-sizing: border-box;
	width: min( 440px, calc( 100vw - 32px ) );
	max-height: calc( 100vh - 32px );
	margin: auto;
	padding: 24px;
	overflow: auto;
	border: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 20px 50px rgba( 31, 31, 41, 0.25 );
	color: #1f1f29;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
}

.leco-dialogo::backdrop {
	background: rgba( 31, 31, 41, 0.45 );
}

.leco-dialogo__titulo {
	margin: 0 0 8px;
	padding: 0;
	color: #1f1f29;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.leco-dialogo__texto {
	margin: 0 0 8px;
	color: #3c3c4a;
	font-size: 14px;
}

.leco-dialogo--erro .leco-dialogo__corpo {
	padding-left: 12px;
	border-left: 3px solid #d63638;
}

.leco-dialogo__campo {
	box-sizing: border-box;
	width: 100%;
	min-height: 38px;
	margin: 4px 0 0;
	padding: 6px 10px;
	border: 1px solid #d6d4e2;
	border-radius: 8px;
	background: #fff;
	color: #1f1f29;
	font-size: 14px;
}

.leco-dialogo__campo:focus {
	border-color: #6b46f9;
	outline: 2px solid rgba( 107, 70, 249, 0.25 );
	outline-offset: 0;
}

.leco-dialogo__acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 20px;
}

.leco-dialogo .leco-dialogo__botao {
	box-sizing: border-box;
	min-height: 36px;
	margin: 0;
	padding: 6px 16px;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.leco-dialogo .leco-dialogo__botao--cancelar {
	border-color: #d6d4e2;
	background: #fff;
	color: #1f1f29;
}

.leco-dialogo .leco-dialogo__botao--cancelar:hover,
.leco-dialogo .leco-dialogo__botao--cancelar:focus-visible {
	border-color: #6b46f9;
	color: #6b46f9;
}

.leco-dialogo .leco-dialogo__botao--principal {
	border-color: #6b46f9;
	background: #6b46f9;
	color: #fff;
}

.leco-dialogo .leco-dialogo__botao--principal:hover,
.leco-dialogo .leco-dialogo__botao--principal:focus-visible {
	border-color: #5633e0;
	background: #5633e0;
	color: #fff;
}

.leco-dialogo .leco-dialogo__botao--perigo {
	border-color: #d63638;
	background: #d63638;
	color: #fff;
}

.leco-dialogo .leco-dialogo__botao--perigo:hover,
.leco-dialogo .leco-dialogo__botao--perigo:focus-visible {
	border-color: #b32d2e;
	background: #b32d2e;
	color: #fff;
}

.leco-dialogo .leco-dialogo__botao:focus-visible {
	outline: 2px solid #6b46f9;
	outline-offset: 2px;
}

/* Aviso rápido de sucesso: no canto de baixo, some sozinho. */
.leco-dialogo-aviso {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100000;
	max-width: min( 380px, calc( 100vw - 48px ) );
	padding: 12px 16px;
	border-left: 4px solid #00a32a;
	border-radius: 8px;
	background: #1f1f29;
	box-shadow: 0 10px 30px rgba( 31, 31, 41, 0.3 );
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.leco-dialogo-aviso.is-saindo {
	opacity: 0;
	transform: translateY( 8px );
}

@media ( prefers-reduced-motion: reduce ) {
	.leco-dialogo-aviso {
		transition: none;
	}
}