/*
 * Retorno ao usuário no layout novo (ui-v2): alertas da página, SweetAlert2 (modalMessage e confirmações),
 * toasts (toastr), carregamentos (loading(), KTApp.block, spinners, esqueleto inicial) e o padrão de movimento.
 * Só CSS sob html.ui-v2: as chamadas, o markup gerado pelos plugins e o momento em que aparecem não mudam.
 * Ícones desenhados com máscara SVG, na cor do significado (ok, atenção, erro, informação, marca).
 */

html.ui-v2 body {
	--ui-ico-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--ui-ico-erro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
	--ui-ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
	--ui-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 16v-4.5M12 8h.01'/%3E%3C/svg%3E");
	--ui-ico-pergunta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");
	--ui-ico-fechar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
	--ui-veu: rgba(8, 22, 21, 0.32);
}

html.ui-v2 body.dark-theme {
	--ui-veu: rgba(0, 0, 0, 0.5);
}

/* ---------- Movimento ---------- */
@keyframes ui-v2-aparecer {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ui-v2-sumir {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes ui-v2-surgir {
	from { opacity: 0; transform: translateY(6px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

@keyframes ui-v2-recolher {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: scale(0.97); }
}

@keyframes ui-v2-deslizar {
	from { opacity: 0; transform: translateX(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes ui-v2-subir {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@keyframes ui-v2-girar {
	to { transform: rotate(360deg); }
}

@keyframes ui-v2-respirar {
	from { opacity: 1; }
	to { opacity: 0.45; }
}

@keyframes ui-v2-pulso {
	0% { transform: scale(0.6); opacity: 0; }
	60% { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* Troca de tela: só opacidade (transform criaria bloco de contenção para modais fixos dentro do componente). */
html.ui-v2 body [data-content="component"] > * {
	animation: ui-v2-aparecer var(--ui-dur-2) var(--ui-ease);
}

/* Menus suspensos, popovers e dicas entram em vez de piscar. */
html.ui-v2 body .daterangepicker[style*="block"],
html.ui-v2 body .datepicker-dropdown,
html.ui-v2 body .select2-container--open .select2-dropdown {
	animation: ui-v2-surgir var(--ui-dur-1) var(--ui-ease);
}

/* O Popper posiciona estes com transform: animar transform faria o menu nascer no lugar errado e saltar. */
html.ui-v2 body .dropdown-menu.show,
html.ui-v2 body .popover.show,
html.ui-v2 body .tooltip.show {
	animation: ui-v2-aparecer var(--ui-dur-1) var(--ui-ease);
}

/* Modais do Bootstrap: sobem com leve escala; o véu escurece com desfoque leve. */
html.ui-v2 body .modal.fade .modal-dialog {
	transform: translateY(10px) scale(0.98);
	transition: transform var(--ui-dur-3) var(--ui-ease), opacity var(--ui-dur-2) var(--ui-ease);
}

html.ui-v2 body .modal.show .modal-dialog {
	transform: none;
}

html.ui-v2 body .modal-backdrop {
	background-color: var(--ui-veu);
}

html.ui-v2 body .modal-backdrop.show {
	opacity: 1;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* Botões: resposta tátil ao clique. */
html.ui-v2 body .btn {
	transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease),
		color var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease);
}

html.ui-v2 body .btn:not(:disabled):not(.disabled):active {
	transform: scale(0.97);
}

/* ---------- Alertas da página (.alert) ---------- */
html.ui-v2 body .alert {
	--ui-alerta: var(--ui-info);
	--ui-alerta-fundo: var(--ui-info-soft);
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--ui-alerta) 22%, transparent);
	border-radius: var(--ui-radius-md);
	background: var(--ui-alerta-fundo);
	color: var(--ui-text);
	font-size: var(--ui-text-md);
	line-height: 1.5;
	box-shadow: none;
}

html.ui-v2 body .alert.alert-success,
html.ui-v2 body .alert.alert-solid-success,
html.ui-v2 body .alert.alert-outline-success {
	--ui-alerta: var(--ui-ok);
	--ui-alerta-fundo: var(--ui-ok-soft);
}

html.ui-v2 body .alert.alert-warning,
html.ui-v2 body .alert.alert-solid-warning,
html.ui-v2 body .alert.alert-outline-warning {
	--ui-alerta: var(--ui-warn);
	--ui-alerta-fundo: var(--ui-warn-soft);
}

html.ui-v2 body .alert.alert-danger,
html.ui-v2 body .alert.alert-solid-danger,
html.ui-v2 body .alert.alert-outline-danger {
	--ui-alerta: var(--ui-bad);
	--ui-alerta-fundo: var(--ui-bad-soft);
}

html.ui-v2 body .alert.alert-brand,
html.ui-v2 body .alert.alert-solid-brand,
html.ui-v2 body .alert.alert-outline-brand {
	--ui-alerta: var(--ui-accent);
	--ui-alerta-fundo: var(--ui-brand-soft);
}

html.ui-v2 body .alert.alert-light,
html.ui-v2 body .alert.alert-secondary,
html.ui-v2 body .alert.alert-dark {
	--ui-alerta: var(--ui-text-muted);
	--ui-alerta-fundo: var(--ui-surface-hover);
}

html.ui-v2 body .alert .alert-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 0;
	color: var(--ui-alerta);
	font-size: 18px;
	line-height: 1.3;
}

html.ui-v2 body .alert .alert-icon i {
	color: inherit;
	font-size: inherit;
}

html.ui-v2 body .alert .alert-text {
	flex: 1 1 auto;
	padding: 0;
	color: inherit;
}

html.ui-v2 body .alert strong,
html.ui-v2 body .alert .alert-heading,
html.ui-v2 body .alert .alert-link {
	color: var(--ui-text);
	font-weight: 600;
}

html.ui-v2 body .alert .alert-close,
html.ui-v2 body .alert .close {
	flex: 0 0 auto;
	padding: 0 0 0 8px;
	color: var(--ui-text-muted);
	opacity: 0.8;
}

html.ui-v2 body .alert.fade:not(.show) {
	opacity: 0;
}

/* ---------- SweetAlert2 (modalMessage, confirmações) ---------- */
html.ui-v2 body .swal2-container.swal2-shown,
html.ui-v2 body .swal2-container.swal2-backdrop-show {
	background: var(--ui-veu);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

html.ui-v2 body .swal2-popup,
html.ui-v2 body.dark-theme .swal2-popup.swal2-modal {
	width: min(26rem, calc(100vw - 32px));
	padding: 28px 28px 22px;
	border: 1px solid var(--ui-line);
	border-radius: 22px;
	background: var(--ui-surface-solid) !important;
	box-shadow: 0 24px 60px -12px rgba(8, 30, 28, 0.32);
	color: var(--ui-text);
	font-family: var(--ui-font);
}

html.ui-v2 body .swal2-popup.swal2-show {
	animation: ui-v2-surgir var(--ui-dur-3) var(--ui-ease);
}

html.ui-v2 body .swal2-popup.swal2-hide {
	animation: ui-v2-recolher var(--ui-dur-1) var(--ui-ease-sai) forwards;
}

html.ui-v2 body .swal2-popup .swal2-header {
	align-items: center;
	padding: 0;
}

/* Ícone: “chip” suave na cor do significado; o desenho antigo (anéis e traços animados) fica oculto. */
html.ui-v2 body .swal2-popup .swal2-icon {
	--ui-swal-cor: var(--ui-info);
	position: relative;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border: 0;
	border-radius: 18px;
	background: color-mix(in srgb, var(--ui-swal-cor) 14%, transparent);
	color: var(--ui-swal-cor);
	animation: ui-v2-pulso var(--ui-dur-3) var(--ui-ease) both;
}

html.ui-v2 body .swal2-popup .swal2-icon > * {
	display: none !important;
}

html.ui-v2 body .swal2-popup .swal2-icon::before,
html.ui-v2 body .swal2-popup .swal2-icon::after {
	content: none;
}

html.ui-v2 body .swal2-popup .swal2-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 28px;
	height: 28px;
	background: currentColor;
	font-size: 0;
	-webkit-mask: var(--ui-swal-ico, var(--ui-ico-info)) center / contain no-repeat;
	mask: var(--ui-swal-ico, var(--ui-ico-info)) center / contain no-repeat;
	animation: none;
}

html.ui-v2 body .swal2-popup .swal2-icon.swal2-success {
	--ui-swal-cor: var(--ui-ok);
	--ui-swal-ico: var(--ui-ico-ok);
}

html.ui-v2 body .swal2-popup .swal2-icon.swal2-error {
	--ui-swal-cor: var(--ui-bad);
	--ui-swal-ico: var(--ui-ico-erro);
}

html.ui-v2 body .swal2-popup .swal2-icon.swal2-warning {
	--ui-swal-cor: var(--ui-warn);
	--ui-swal-ico: var(--ui-ico-aviso);
}

html.ui-v2 body .swal2-popup .swal2-icon.swal2-info {
	--ui-swal-cor: var(--ui-info);
	--ui-swal-ico: var(--ui-ico-info);
}

html.ui-v2 body .swal2-popup .swal2-icon.swal2-question {
	--ui-swal-cor: var(--ui-accent);
	--ui-swal-ico: var(--ui-ico-pergunta);
}

html.ui-v2 body .swal2-popup .swal2-title {
	margin: 0 0 6px;
	color: var(--ui-text);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
	text-align: center;
}

html.ui-v2 body .swal2-popup .swal2-content,
html.ui-v2 body .swal2-popup .swal2-html-container {
	padding: 0;
	color: var(--ui-text-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

html.ui-v2 body .swal2-popup .swal2-input,
html.ui-v2 body .swal2-popup .swal2-textarea,
html.ui-v2 body .swal2-popup .swal2-select {
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-md);
	background: var(--ui-surface-solid);
	box-shadow: none;
	color: var(--ui-text);
	font-family: var(--ui-font);
	font-size: 14.5px;
}

html.ui-v2 body .swal2-popup .swal2-input:focus,
html.ui-v2 body .swal2-popup .swal2-textarea:focus {
	border-color: var(--ui-brand);
	box-shadow: var(--ui-focus);
}

html.ui-v2 body .swal2-popup .swal2-validation-message {
	margin: 12px -28px 0;
	background: var(--ui-bad-soft);
	color: var(--ui-bad);
	font-size: 13.5px;
}

html.ui-v2 body .swal2-popup .swal2-actions {
	gap: 10px;
	width: 100%;
	margin: 22px 0 0;
	flex-wrap: nowrap;
}

html.ui-v2 body .swal2-popup .swal2-actions .btn,
html.ui-v2 body .swal2-popup .swal2-actions .swal2-styled {
	flex: 1 1 0;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--ui-radius-md);
	box-shadow: none;
	font-family: var(--ui-font);
	font-size: 14.5px;
	font-weight: 600;
}

html.ui-v2 body .swal2-popup .swal2-actions .swal2-confirm {
	border-color: var(--ui-brand);
	background: var(--ui-brand) !important;
	color: var(--ui-brand-ink) !important;
}

html.ui-v2 body .swal2-popup .swal2-actions .swal2-confirm:hover {
	border-color: var(--ui-accent);
	background: var(--ui-accent) !important;
}

html.ui-v2 body .swal2-popup .swal2-actions .swal2-cancel {
	border-color: var(--ui-line);
	background: transparent !important;
	color: var(--ui-text) !important;
}

html.ui-v2 body .swal2-popup .swal2-actions .swal2-cancel:hover {
	background: var(--ui-surface-hover) !important;
}

html.ui-v2 body .swal2-popup .swal2-actions .btn:focus,
html.ui-v2 body .swal2-popup .swal2-actions .swal2-styled:focus {
	box-shadow: var(--ui-focus);
}

/* Excluir/confirmar com ícone de atenção ou erro: o botão principal assume o vermelho do risco. */
html.ui-v2 body .swal2-popup:has(.swal2-icon.swal2-warning[style*="flex"], .swal2-icon.swal2-error[style*="flex"]) .swal2-actions:has(.swal2-cancel[style*="inline-block"]) .swal2-confirm {
	border-color: var(--ui-bad);
	background: var(--ui-bad) !important;
	color: #ffffff !important;
}

html.ui-v2 body .swal2-popup .swal2-close {
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	color: transparent;
	font-size: 0;
}

html.ui-v2 body .swal2-popup .swal2-close::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin: auto;
	background: var(--ui-text-muted);
	-webkit-mask: var(--ui-ico-fechar) center / contain no-repeat;
	mask: var(--ui-ico-fechar) center / contain no-repeat;
}

html.ui-v2 body .swal2-popup .swal2-close:hover {
	background: var(--ui-surface-hover);
}

html.ui-v2 body .swal2-popup .swal2-footer {
	border-top-color: var(--ui-line);
	color: var(--ui-text-muted);
	font-size: 13px;
}

/* Toast do próprio SweetAlert2 (toast: true). */
html.ui-v2 body .swal2-popup.swal2-toast {
	width: auto;
	padding: 12px 16px;
	border-radius: 14px;
}

html.ui-v2 body .swal2-popup.swal2-toast .swal2-icon {
	width: 32px;
	height: 32px;
	margin: 0 10px 0 0;
	border-radius: 10px;
}

html.ui-v2 body .swal2-popup.swal2-toast .swal2-icon::before {
	width: 18px;
	height: 18px;
}

html.ui-v2 body .swal2-popup.swal2-toast .swal2-title {
	margin: 0;
	font-size: 14px;
	text-align: left;
}

/* ---------- Toasts (toastr) ---------- */
html.ui-v2 body #toast-container {
	z-index: 1000000;
}

html.ui-v2 body #toast-container.toast-top-right {
	top: 76px;
	right: 20px;
}

html.ui-v2 body #toast-container > .toast,
html.ui-v2 body #toast-container > div {
	--ui-toast-cor: var(--ui-info);
	--ui-toast-ico: var(--ui-ico-info);
	position: relative;
	width: 360px;
	max-width: calc(100vw - 32px);
	margin: 0 0 10px;
	padding: 14px 40px 14px 58px;
	border: 1px solid var(--ui-line);
	border-radius: 16px;
	background: var(--ui-surface-solid) !important;
	background-image: none !important;
	box-shadow: 0 16px 40px -14px rgba(8, 30, 28, 0.32);
	color: var(--ui-text);
	font-family: var(--ui-font);
	opacity: 1;
	overflow: hidden;
	animation: ui-v2-deslizar var(--ui-dur-3) var(--ui-ease);
}

html.ui-v2 body #toast-container > .toast:hover,
html.ui-v2 body #toast-container > div:hover {
	box-shadow: 0 18px 44px -14px rgba(8, 30, 28, 0.38);
	opacity: 1;
}

html.ui-v2 body #toast-container > .toast-success { --ui-toast-cor: var(--ui-ok); --ui-toast-ico: var(--ui-ico-ok); }
html.ui-v2 body #toast-container > .toast-error { --ui-toast-cor: var(--ui-bad); --ui-toast-ico: var(--ui-ico-erro); }
html.ui-v2 body #toast-container > .toast-warning { --ui-toast-cor: var(--ui-warn); --ui-toast-ico: var(--ui-ico-aviso); }
html.ui-v2 body #toast-container > .toast-info { --ui-toast-cor: var(--ui-info); --ui-toast-ico: var(--ui-ico-info); }

/* Chip do ícone (::before) e o desenho (::after). */
html.ui-v2 body #toast-container > .toast::before,
html.ui-v2 body #toast-container > .toast::after {
	content: "";
	position: absolute;
	top: 14px;
	left: 16px;
	width: 30px;
	height: 30px;
}

html.ui-v2 body #toast-container > .toast::before {
	border-radius: 10px;
	background: color-mix(in srgb, var(--ui-toast-cor) 14%, transparent);
}

html.ui-v2 body #toast-container > .toast::after {
	background: var(--ui-toast-cor);
	-webkit-mask: var(--ui-toast-ico) center / 17px 17px no-repeat;
	mask: var(--ui-toast-ico) center / 17px 17px no-repeat;
}

html.ui-v2 body #toast-container .toast-title {
	margin: 0 0 2px;
	color: var(--ui-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

html.ui-v2 body #toast-container .toast-message {
	color: var(--ui-text-muted);
	font-size: 13.5px;
	line-height: 1.45;
}

html.ui-v2 body #toast-container .toast-message:only-child {
	padding-top: 5px;
	color: var(--ui-text);
}

html.ui-v2 body #toast-container .toast-message a {
	color: var(--ui-accent);
}

html.ui-v2 body #toast-container .toast-close-button {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	color: transparent;
	font-size: 0;
	opacity: 1;
	text-shadow: none;
}

html.ui-v2 body #toast-container .toast-close-button::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin: auto;
	background: var(--ui-text-faint);
	-webkit-mask: var(--ui-ico-fechar) center / contain no-repeat;
	mask: var(--ui-ico-fechar) center / contain no-repeat;
}

html.ui-v2 body #toast-container .toast-progress {
	height: 3px;
	background: var(--ui-toast-cor);
	opacity: 0.5;
}

/* ---------- Carregamento global: loading(true) e a camada do login ---------- */
html.ui-v2 body > .loading,
html.ui-v2 body #login-loading-layer {
	background: transparent;
	/* Esperas curtas não piscam: a camada só aparece se durar mais de ~150 ms. */
	animation: ui-v2-aparecer var(--ui-dur-2) var(--ui-ease) 150ms both;
}

html.ui-v2 body > .loading > *,
html.ui-v2 body #login-loading-layer > * {
	display: none !important;
}

/* Barra fina no topo em vez de um disco no meio da tela: a tela continua visível durante a espera. */
html.ui-v2 body > .loading::before,
html.ui-v2 body #login-loading-layer::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 38%;
	height: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--ui-brand);
	box-shadow: 0 0 10px color-mix(in srgb, var(--ui-brand) 55%, transparent);
	animation: ui-v2-barra 1.1s var(--ui-ease) infinite;
}

@keyframes ui-v2-barra {
	from { transform: translateX(-100%); }
	to { transform: translateX(265%); }
}

/* ---------- Bloqueio de área (KTApp.block / blockUI) ---------- */
html.ui-v2 body .blockUI.blockOverlay {
	border-radius: inherit;
	background-color: color-mix(in srgb, var(--ui-surface-solid) 55%, transparent) !important;
	opacity: 1 !important;
	-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5px);
	animation: ui-v2-aparecer var(--ui-dur-2) var(--ui-ease);
}

html.ui-v2 body .blockUI.blockMsg {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html.ui-v2 body .blockUI.blockMsg .blockui {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-pill);
	background: var(--ui-surface-solid);
	box-shadow: 0 12px 30px -10px rgba(8, 30, 28, 0.28);
	color: var(--ui-text);
	font-family: var(--ui-font);
	font-size: 13.5px;
	font-weight: 500;
	animation: ui-v2-surgir var(--ui-dur-2) var(--ui-ease);
}

html.ui-v2 body .blockUI.blockMsg .blockui > span {
	padding: 0;
	color: inherit;
}

html.ui-v2 body .blockUI.blockMsg .blockui > span:empty {
	display: none;
}

/* ---------- Spinners do Metronic (kt-spinner): anel na cor da marca ---------- */
html.ui-v2 body .kt-spinner::before {
	border: 2px solid color-mix(in srgb, var(--ui-brand) 22%, transparent) !important;
	border-top-color: var(--ui-brand) !important;
	animation: ui-v2-girar 0.7s linear infinite !important;
}

html.ui-v2 body .btn .kt-spinner::before,
html.ui-v2 body .kt-spinner.kt-spinner--light::before {
	border-color: rgba(255, 255, 255, 0.35) !important;
	border-top-color: #ffffff !important;
}

/* ---------- DataTables “processando” ---------- */
html.ui-v2 body .dataTables_wrapper .dataTables_processing {
	animation: ui-v2-surgir var(--ui-dur-2) var(--ui-ease) 150ms both;
}

/* ---------- Esqueleto inicial do admin (index.php) ---------- */
/* Pulsa só a opacidade (roda na GPU): animar background-position recalcula estilo a cada quadro em dezenas de elementos. */
html.ui-v2 body .agile-shell-skeleton-line,
html.ui-v2 body .agile-shell-skeleton-icon,
html.ui-v2 body .agile-shell-skeleton-avatar,
html.ui-v2 body .agile-shell-skeleton-pill,
html.ui-v2 body .agile-shell-skeleton-card,
html.ui-v2 body .agile-shell-skeleton-logo {
	background: color-mix(in srgb, var(--ui-text) 7%, transparent) !important;
	animation: ui-v2-respirar 1.3s ease-in-out infinite alternate !important;
}

/* O skeleton vem com as medidas do menu largo do clássico; aqui segue o trilho real, sem salto ao carregar. */
@media (min-width: 1025px) {
	html.ui-v2 body #kt_aside:has(.agile-shell-skeleton) {
		width: 72px !important;
	}

	html.ui-v2 body .agile-shell-skeleton-logo {
		width: 42px;
		height: 42px;
		margin: 11px auto 14px;
		border-radius: 13px;
	}

	html.ui-v2 body .agile-shell-skeleton-menu {
		padding: 0;
	}

	html.ui-v2 body .agile-shell-skeleton-menu-item {
		justify-content: center;
		padding: 0;
	}

	html.ui-v2 body .agile-shell-skeleton-menu-item .agile-shell-skeleton-line {
		display: none;
	}
}

/* ---------- Dicas e popovers ---------- */
html.ui-v2 body .tooltip .tooltip-inner {
	padding: 6px 10px;
	border-radius: 8px;
	background: #10201f;
	color: #f2f7f6;
	font-family: var(--ui-font);
	font-size: 12.5px;
	line-height: 1.4;
}

html.ui-v2 body .tooltip.bs-tooltip-top .arrow::before,
html.ui-v2 body .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #10201f; }
html.ui-v2 body .tooltip.bs-tooltip-bottom .arrow::before,
html.ui-v2 body .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #10201f; }
html.ui-v2 body .tooltip.bs-tooltip-left .arrow::before,
html.ui-v2 body .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #10201f; }
html.ui-v2 body .tooltip.bs-tooltip-right .arrow::before,
html.ui-v2 body .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #10201f; }

html.ui-v2 body .popover {
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-md);
	background: var(--ui-surface-solid);
	box-shadow: 0 16px 40px -14px rgba(8, 30, 28, 0.3);
	font-family: var(--ui-font);
}

html.ui-v2 body .popover .popover-header {
	border-bottom-color: var(--ui-line);
	border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
	background: transparent;
	color: var(--ui-text);
	font-size: 13.5px;
	font-weight: 600;
}

html.ui-v2 body .popover .popover-body {
	color: var(--ui-text-muted);
	font-size: 13px;
}

/* ---------- Celular: toasts no topo, largura cheia ---------- */
@media (max-width: 767.98px) {
	html.ui-v2 body #toast-container.toast-top-right,
	html.ui-v2 body #toast-container[class*="toast-top"] {
		top: calc(12px + env(safe-area-inset-top, 0px));
		right: 12px;
		left: 12px;
	}

	html.ui-v2 body #toast-container > .toast,
	html.ui-v2 body #toast-container > div {
		width: 100%;
		max-width: none;
		animation-name: ui-v2-subir;
	}

	html.ui-v2 body .swal2-popup .swal2-actions {
		flex-direction: column-reverse;
	}

	html.ui-v2 body .swal2-popup .swal2-actions .btn,
	html.ui-v2 body .swal2-popup .swal2-actions .swal2-styled {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ---------- Quem pede menos movimento no sistema ---------- */
@media (prefers-reduced-motion: reduce) {
	html.ui-v2 body *,
	html.ui-v2 body *::before,
	html.ui-v2 body *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}

	/* Spinners continuam girando devagar: sem isso, a espera parece travada. */
	html.ui-v2 body > .loading::before,
	html.ui-v2 body #login-loading-layer::before,
	html.ui-v2 body .spinner-border,
	html.ui-v2 body .kt-spinner::before {
		animation-duration: 1.6s !important;
		animation-iteration-count: infinite !important;
	}
}

/* ---------- Boas-vindas ao layout novo (includes/layout-v2/boas-vindas.php) ---------- */
html.ui-v2 body .ui-v2-boas-vindas {
	position: fixed;
	inset: 0;
	z-index: 1060;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--ui-veu);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: ui-v2-aparecer var(--ui-dur-2) var(--ui-ease);
}

html.ui-v2 body .ui-v2-boas-vindas[hidden] {
	display: none;
}

html.ui-v2 body .ui-v2-boas-vindas--saindo {
	animation: ui-v2-sumir var(--ui-dur-1) var(--ui-ease-sai) forwards;
}

html.ui-v2 body .ui-v2-boas-vindas__cartao {
	position: relative;
	width: min(32rem, 100%);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	padding: 28px 28px 22px;
	border: 1px solid var(--ui-line);
	border-radius: 24px;
	background: var(--ui-surface-solid);
	box-shadow: 0 30px 70px -20px rgba(8, 30, 28, 0.4);
	color: var(--ui-text);
	animation: ui-v2-surgir var(--ui-dur-3) var(--ui-ease);
}

html.ui-v2 body .ui-v2-boas-vindas__rotulo {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: var(--ui-radius-pill);
	background: var(--ui-brand-soft);
	color: var(--ui-accent);
	font: 600 11.5px/1.2 var(--ui-font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

html.ui-v2 body .ui-v2-boas-vindas__titulo {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-wrap: balance;
}

html.ui-v2 body .ui-v2-boas-vindas__texto {
	margin: 0 0 10px;
	color: var(--ui-text-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* Mini ilustração: barra superior com o avatar e o menu do usuário aberto. */
html.ui-v2 body .ui-v2-boas-vindas__ilustracao {
	position: relative;
	margin: 14px 0 20px;
	padding: 14px 14px 18px;
	border: 1px solid var(--ui-line);
	border-radius: 16px;
	background: var(--ui-bg);
	background-image: var(--ui-bg-image);
}

html.ui-v2 body .ui-v2-boas-vindas__barra {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--ui-line);
	border-radius: 12px;
	background: var(--ui-surface-solid);
}

html.ui-v2 body .ui-v2-boas-vindas__busca {
	flex: 1 1 auto;
	height: 10px;
	border-radius: var(--ui-radius-pill);
	background: color-mix(in srgb, var(--ui-text) 8%, transparent);
}

html.ui-v2 body .ui-v2-boas-vindas__icone {
	width: 14px;
	height: 14px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--ui-text) 12%, transparent);
}

html.ui-v2 body .ui-v2-boas-vindas__avatar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--ui-brand-soft);
	box-shadow: 0 0 0 2px var(--ui-surface-solid), 0 0 0 4px var(--ui-brand);
	color: var(--ui-accent);
	font-size: 12px;
	font-weight: 700;
}

html.ui-v2 body .ui-v2-boas-vindas__menu {
	position: relative;
	display: grid;
	gap: 2px;
	width: 62%;
	margin: 8px 0 0 auto;
	padding: 6px;
	border: 1px solid var(--ui-line);
	border-radius: 12px;
	background: var(--ui-surface-solid);
	box-shadow: 0 14px 30px -14px rgba(8, 30, 28, 0.35);
}

html.ui-v2 body .ui-v2-boas-vindas__item {
	padding: 6px 8px;
	border-radius: 8px;
	color: var(--ui-text-muted);
	font-size: 12px;
}

html.ui-v2 body .ui-v2-boas-vindas__item--destaque {
	background: var(--ui-brand-soft);
	color: var(--ui-accent);
	font-weight: 600;
}

/* Cursor apontando o item de troca. */
html.ui-v2 body .ui-v2-boas-vindas__cursor {
	position: absolute;
	right: 18px;
	bottom: -8px;
	width: 22px;
	height: 22px;
	background: var(--ui-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7.5-6.2 1.6L10 18.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7.5-6.2 1.6L10 18.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 1px 0 #ffffff);
}

html.ui-v2 body .ui-v2-boas-vindas__acoes {
	display: flex;
	gap: 10px;
}

html.ui-v2 body .ui-v2-boas-vindas__acoes .btn {
	flex: 1 1 auto;
	height: 44px;
	padding: 0 16px;
	border-radius: var(--ui-radius-md);
	font-weight: 600;
	white-space: nowrap;
}

html.ui-v2 body .ui-v2-boas-vindas__nota {
	margin: 12px 0 0;
	color: var(--ui-text-faint);
	font-size: 12.5px;
	text-align: center;
}

@media (max-width: 575.98px) {
	html.ui-v2 body .ui-v2-boas-vindas {
		align-items: flex-end;
		padding: 0;
	}

	html.ui-v2 body .ui-v2-boas-vindas__cartao {
		width: 100%;
		padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
		border-radius: 24px 24px 0 0;
		animation-name: ui-v2-subir;
	}

	html.ui-v2 body .ui-v2-boas-vindas__acoes {
		flex-direction: column;
	}

	html.ui-v2 body .ui-v2-boas-vindas__menu {
		width: 78%;
	}
}