/*
 * netserv_layout.css - cabeçalho, menu lateral, rodapé e tela de login no
 * mesmo padrão do AppSacoleira (app_menu.css e login.html de lá), para os
 * projetos da Netserv terem um layout só.
 *
 * Cores do tema darkblue do Metronic (header #2b3643, menu lateral #364150,
 * item ativo #1caf9a). Tudo prefixado com .a2 (classe do <body>), como no
 * AppSacoleira, para não mexer no resto do tema.
 *
 * O HTML do cabeçalho e do menu é montado pelo principal.js (montaCabec e
 * montaMenu); o da tela de login, pelo loginEmpresa/btNova/logIn.
 */

.a2 {
	--a2-header: #2b3643;
	--a2-menu: #364150;
	--a2-menu-linha: #3d4957;
	--a2-menu-texto: #b4bcc8;
	--a2-menu-ativo: #1caf9a;
	--a2-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ================================================= cabeçalho (>= 768px) */

@media (min-width: 768px) {

	.a2 .page-header.navbar .top-menu .a2-topo-menu {
		display: flex;
		align-items: center;
		height: 46px;
		margin: 0 6px 0 0;
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu > li {
		float: none;
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .dropdown-toggle,
	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .a2-topo-fixo,
	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .a2-topo-botao {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 38px;
		padding: 0 10px 0 6px !important;
		border-radius: 10px !important;
		color: #c6cfda;
		line-height: 1;
		text-decoration: none;
		transition: background-color .2s ease;
	}

	/* o foco que volta ao botão ao fechar o calendário ganhava o fundo cinza claro do bootstrap (.nav > li > a:focus) */
	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .dropdown-toggle:focus,
	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .a2-topo-botao:focus {
		background-color: transparent;
		color: #c6cfda;
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .dropdown-toggle:hover,
	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .a2-topo-botao:hover,
	.a2 .page-header.navbar .top-menu .a2-topo-menu > li.open > .dropdown-toggle {
		background-color: #3f4f62;
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .dropdown-toggle:focus-visible,
	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .a2-topo-botao:focus-visible {
		outline: 2px solid var(--a2-menu-ativo);
		outline-offset: 1px;
	}

	.a2-topo__texto {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
		max-width: 260px;
		text-align: left;
		font-family: var(--a2-fonte);
	}

	.a2-topo__texto strong,
	.a2-topo__texto small {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.a2-topo__texto strong {
		color: #e6ebf1;
		font-size: 13px;
		font-weight: 600;
	}

	.a2-topo__texto small {
		color: #8a97a8;
		font-size: 11px;
	}

	/* Ano/semana: pedido e cobrança com o mesmo peso, uma linha cada */
	.a2-topo__texto .a2-topo__linha {
		overflow: hidden;
		color: #e6ebf1;
		font-size: 12px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* pedido em azul e cobrança em vermelho, como era antes */
	.a2-topo__rotulo {
		font-weight: 700;
	}

	.a2-topo__rotulo--ped {
		color: #63c4fa;
	}

	.a2-topo__rotulo--cob {
		color: #e87373;
	}

	/* Ícones e avatar: mesmo tamanho, mesma linha */
	.a2 .page-header.navbar .top-menu .a2-topo-menu .a2-topo__icone,
	.a2-topo__avatar {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		margin: 0;
		font-size: 14px;
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu .a2-topo__icone {
		border-radius: 8px !important;
		background: rgba(28, 175, 154, .16);
		color: var(--a2-menu-ativo);
	}

	.a2-topo__avatar {
		border-radius: 50% !important;
		background: var(--a2-menu-ativo);
		color: #fff;
		font-family: var(--a2-fonte);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .5px;
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu .a2-topo__seta {
		margin: 0;
		color: #79869a;
		font-size: 13px;
		transition: transform .2s ease, color .2s ease;
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu > li.open .a2-topo__seta {
		transform: rotate(180deg);
		color: #c6cfda;
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu > li > .a2-topo-botao:hover .a2-topo__seta {
		color: #c6cfda;
	}

	.a2-topo-divisor {
		width: 1px;
		height: 24px;
		margin: 0 6px;
		background: rgba(255, 255, 255, .1);
	}

	.a2 .page-header.navbar .top-menu .a2-topo-menu > li.open > .dropdown-menu {
		animation: a2-menu-desce .18s ease-out;
	}
}

/* ============================================ menu lateral (>= 992px) */

@media (min-width: 992px) {

	.a2 .page-sidebar .page-sidebar-menu > li > a {
		transition: background-color .2s ease, color .2s ease;
	}

	.a2 .page-sidebar .page-sidebar-menu > li > a > i {
		display: inline-block;
		transition: transform .2s ease, color .2s ease;
	}

	.a2 .page-sidebar .page-sidebar-menu > li:not(.active) > a:hover > i {
		transform: translateX(3px);
		color: var(--a2-menu-ativo);
	}

	/* Grupo da tela aberta: o verde-água "enche" da esquerda para a direita,
	   o ícone dá um pulinho e aparece uma barrinha clara na borda */
	.a2 .page-sidebar .page-sidebar-menu > li.active > a {
		background: var(--a2-menu) linear-gradient(var(--a2-menu-ativo), var(--a2-menu-ativo)) no-repeat left center / 100% 100%;
		animation: a2-menu-enche .45s cubic-bezier(.2, .8, .2, 1) both;
	}

	.a2 .page-sidebar .page-sidebar-menu > li.active > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 8px;
		bottom: 8px;
		width: 3px;
		border-radius: 0 3px 3px 0 !important;
		background: rgba(255, 255, 255, .85);
		animation: a2-menu-barra .3s .25s cubic-bezier(.2, .8, .2, 1) both;
	}

	.a2 .page-sidebar .page-sidebar-menu > li.active > a > i {
		animation: a2-menu-icone .5s .12s ease-out both;
	}

	.a2 .page-sidebar .page-sidebar-menu > li.active > a > .selected {
		animation: a2-menu-seta .3s .3s ease-out both;
	}

	/* Tela aberta dentro do submenu: faixa verde-água, texto branco e
	   marcador. Os grupos no caminho até ela (li.active.open) ficam com o
	   texto verde-água, para mostrar por onde se chega nela. */
	.a2 .page-sidebar .page-sidebar-menu .sub-menu > li.active:not(.open) > a {
		position: relative;
		margin: 2px 10px 2px 0;
		border-radius: 0 10px 10px 0 !important;
		background: rgba(28, 175, 154, .24) !important;
		box-shadow: inset 4px 0 0 var(--a2-menu-ativo);
		color: #fff !important;
		font-weight: 600;
	}

	.a2 .page-sidebar .page-sidebar-menu .sub-menu > li.active:not(.open) > a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 12px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-radius: 50% !important;
		background: var(--a2-menu-ativo);
		box-shadow: 0 0 0 3px rgba(28, 175, 154, .3);
	}

	.a2 .page-sidebar .page-sidebar-menu .sub-menu > li.active.open > a {
		background: transparent !important;
		color: #5fd6c4 !important;
		font-weight: 600;
	}
}

/* Menu recolhido: a busca some (não cabe na faixa estreita) */
.a2.page-sidebar-closed .page-sidebar .page-sidebar-menu > li.sidebar-search-wrapper {
	display: none !important;
}

@media (min-width: 992px) {

	/* Botão de recolher o menu: arredondado, com seta que gira */
	.a2 .page-sidebar .sidebar-toggler {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin: 10px 12px 10px 0;
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 10px !important;
		background: rgba(255, 255, 255, .06);
		color: var(--a2-menu-texto);
		opacity: 1;
		filter: none;
		transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
	}

	.a2 .page-sidebar .sidebar-toggler:hover {
		border-color: transparent;
		background: var(--a2-menu-ativo);
		color: #fff;
	}

	.a2 .page-sidebar .sidebar-toggler:active {
		transform: scale(.9);
	}

	.a2 .page-sidebar .sidebar-toggler:focus-visible {
		outline: 2px solid var(--a2-menu-ativo);
		outline-offset: 2px;
	}

	.a2 .page-sidebar .sidebar-toggler > i {
		font-size: 16px;
		line-height: 1;
		transition: transform .3s cubic-bezier(.2, .8, .2, 1);
	}

	.a2.page-sidebar-closed .page-sidebar .sidebar-toggler > i {
		transform: rotate(180deg);
	}

	.a2.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed .sidebar-toggler {
		float: none;
		margin: 10px auto;
	}
}

/* Busca do menu: campo arredondado no tom do menu */
.a2 .page-sidebar .sidebar-search {
	margin: 4px 14px 14px;
}

.a2 .page-sidebar .sidebar-search input {
	width: 100%;
	height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-radius: 10px !important;
	background-color: rgba(255, 255, 255, .06) !important;
	color: #e6ebf1 !important;
	font-size: 13px;
	transition: border-color .2s ease, background-color .2s ease;
}

.a2 .page-sidebar .sidebar-search input::placeholder {
	color: #8a97a8;
	text-transform: none;
}

.a2 .page-sidebar .sidebar-search input:focus {
	border-color: var(--a2-menu-ativo) !important;
	background-color: rgba(255, 255, 255, .1) !important;
	outline: none;
}

/* ============================================================ rodapé */

.a2 .page-footer .page-footer-inner {
	color: #98a6ba;
	font-family: var(--a2-fonte);
	font-size: 12px;
}

.a2 .page-footer .page-footer-inner b {
	color: #c6cfda;
	font-weight: 600;
}

@keyframes a2-menu-enche {
	from { background-size: 0% 100%; }
}

@keyframes a2-menu-barra {
	from { transform: scaleY(0); }
}

@keyframes a2-menu-icone {
	0%   { transform: scale(.6); }
	60%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}

@keyframes a2-menu-seta {
	from { opacity: 0; transform: translateX(8px); }
}

@keyframes a2-menu-desce {
	from { opacity: 0; transform: translateY(-6px); }
}

/* ============================================================== login */
/* Mesmo visual do login.html do AppSacoleira (login.css de lá): fundo em
   degradê animado, logo, cartão arredondado e a barra escura do botão.
   Enquanto a tela de login está aberta, o <body> ganha .sw-login e o
   cabeçalho, o menu e o rodapé somem. */

body.sw-login {
	min-height: 100vh;
	background: linear-gradient(207deg, #171473, #969696, #2b3643) !important;
	background-size: 400% 400% !important;
	animation: sw-login-fundo 5s infinite alternate;
}

@keyframes sw-login-fundo {
	0%   { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

body.sw-login .page-header,
body.sw-login .page-sidebar-wrapper,
body.sw-login .page-footer,
body.sw-login > .clearfix {
	display: none !important;
}

body.sw-login .page-container,
body.sw-login .page-content-wrapper,
body.sw-login .page-content {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	border: 0 !important;
	background: transparent !important;
}

.sw-login-tela {
	padding: 0 16px 30px;
	font-family: "Open Sans", sans-serif;
	text-align: left;
}

.sw-login-tela .logo {
	margin: 60px auto 0;
	padding: 15px;
	text-align: center;
}

.sw-login-tela .logo img {
	max-width: 180px;
	height: auto;
}

.sw-login-tela .content {
	position: relative;
	width: 400px;
	max-width: 100%;
	margin: 20px auto 10px;
	padding: 10px 30px 30px;
	overflow: hidden;
	border-radius: 20px !important;
	background-color: #eceef1;
	box-sizing: border-box;
}

.sw-login-tela .content h3 {
	margin: 20px 0 25px;
	color: #00193a;
	font-size: 28px;
	font-weight: 400 !important;
	text-align: center;
}

.sw-login-tela .content .form-group {
	margin-bottom: 15px;
}

/* Única diferença para o AppSacoleira: campos arredondados, como o
   input-circle das demais telas do SacwinWeb */
.sw-login-tela .content .form-control {
	height: 43px;
	padding: 6px 18px;
	border: 1px solid #dde3ec;
	border-radius: 25px !important;
	background-color: #dde3ec;
	color: #4b5a6e;
	font-size: 14px;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.sw-login-tela .content .form-control:focus {
	border-color: #c3ccda;
	box-shadow: none;
}

.sw-login-tela .content .form-control::placeholder {
	color: #8290a3;
	opacity: 1;
	text-transform: none;
}

.sw-login-tela .content .form-control:disabled {
	background-color: #e6eaf0;
	color: #9aa6b6;
	cursor: not-allowed;
}

.sw-login-tela .content .form-control.is-erro {
	border-color: #dc2626;
}

.sw-login-tela .sw-login__mensagem {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 15px;
	padding: 10px 12px;
	border-radius: 10px !important;
	background: #fdecec;
	color: #dc2626;
	font-size: 13px;
	font-weight: 600;
}

.sw-login-tela .sw-login__mensagem[hidden] {
	display: none;
}

.sw-login-tela .sw-login__mensagem--info {
	background: #eaf2fd;
	color: #1f63bd;
}

.sw-login-tela .sw-login__mensagem i {
	margin-top: 2px;
}

/* Senha com o "olho" para mostrar/esconder */
.sw-login__senha {
	position: relative;
}

.sw-login__senha .form-control {
	padding-right: 44px;
}

/* Check verde da senha repetida (mostraCheck, funcoes.js), antes do "olho" */
.sw-login__senha .check-svg {
	position: absolute;
	top: 50%;
	right: 42px;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	pointer-events: none;
}

.sw-login__olho {
	position: absolute;
	top: 2px;
	right: 6px;
	width: 39px;
	height: 39px;
	border: 0;
	background: none;
	color: #8290a3;
	font-size: 16px;
	cursor: pointer;
}

.sw-login__olho:hover,
.sw-login__olho:focus-visible {
	color: #00193a;
}

.sw-login-tela .content .form-actions {
	clear: both;
	margin: 0 -30px;
	padding: 0 30px 15px;
	border: 0;
	background: none;
}

.sw-login-tela .sw-login__links {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	min-height: 20px;
	font-size: 14px;
}

.sw-login-tela .sw-login__links a {
	color: #000;
	cursor: pointer;
}

.sw-login-tela .sw-login__links a:hover {
	color: #1f63bd;
}

/* Barra escura do botão, colada no rodapé do cartão */
.sw-login-tela .create-account {
	margin: 0 -30px -30px;
	padding: 0;
	background-color: #132133;
	text-align: center;
}

.sw-login-tela .create-account .form-actions {
	padding: 0;
}

.sw-login-tela .create-account .btn {
	display: block;
	width: 100%;
	padding: 15px 20px 14px !important;
	border: 0;
	border-radius: 0 !important;
	background-color: #132133;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	transition: background-color .15s ease;
}

.sw-login-tela .create-account .btn:hover,
.sw-login-tela .create-account .btn:focus {
	background-color: #1c3150;
	color: #fff;
	outline: none;
}

.sw-login-tela .create-account .btn:disabled {
	opacity: 1;
	color: #9aa6b6;
	cursor: default;
}

.sw-login-tela .copyright {
	margin: 0 auto 30px;
	padding: 10px;
	color: #fff;
	font-size: 13px;
	text-align: center;
}

.sw-login-tela .sw-login__aviso {
	color: #1f2937;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

@media (max-width: 440px) {
	.sw-login-tela .logo {
		margin-top: 10px;
	}

	.sw-login-tela .content h3 {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a2 .page-sidebar *,
	.a2 .page-header *,
	body.sw-login {
		animation: none !important;
		transition: none !important;
	}
}

/* ============================================ altura mínima do conteúdo */
/* O Metronic calcula a altura do conteúdo ao abrir a tela; a index troca
   o conteúdo depois (CRM) e ficava com um vão enorme até o rodapé */
.a2 .page-content-wrapper > .page-content {
	min-height: calc(100vh - 46px - 33px - 10px);
}

/* ================================= janela de mensagem (mostraMensagem) */

dialog.sw-msg {
	max-width: calc(100vw - 32px);
	padding: 28px 28px 22px;
	border: 0;
	border-radius: 18px !important;
	background: #fff;
	box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
	color: #1f2937;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	text-align: center;
	animation: sw-surge .18s ease-out;
}

dialog.sw-msg::backdrop,
dialog.sw-aguarde::backdrop {
	background: rgba(17, 24, 39, .45);
	backdrop-filter: blur(2px);
}

.sw-msg__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50% !important;
	font-size: 26px;
}

/* o .fa do Font Awesome fixa 14px: os ícones grandes precisam do tamanho no próprio .fa */
.sw-msg__icone .fa {
	font-size: 26px;
}

.sw-modal__icone .fa {
	font-size: 20px;
}

.sw-msg--info .sw-msg__icone     { background: #eaf2fd; color: #2f7de1; }
.sw-msg--atencao .sw-msg__icone  { background: #fff6e5; color: #d97706; }
.sw-msg--erro .sw-msg__icone     { background: #fdecec; color: #dc2626; }
.sw-msg--pergunta .sw-msg__icone { background: #e8f7f4; color: #1caf9a; }
.sw-msg--ok .sw-msg__icone       { background: #e8f7ee; color: #16a34a; }

.sw-msg__titulo {
	margin-bottom: 8px;
	font-size: 19px;
	font-weight: 700;
}

.sw-msg__texto label {
	display: block;
	margin: 0;
	color: #4b5563;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

.sw-msg__botoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
}

.sw-msg__botao {
	min-width: 104px;
	height: 42px;
	padding: 0 20px;
	border: 1px solid #e5e7eb;
	border-radius: 12px !important;
	background: #fff;
	color: #1f2937;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}

.sw-msg__botao:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
}

.sw-msg__botao:active {
	transform: scale(.97);
}

.sw-msg__botao:focus-visible {
	outline: 3px solid rgba(47, 125, 225, .35);
	outline-offset: 1px;
}

.sw-msg__botao--principal {
	border-color: #2f7de1;
	background: #2f7de1;
	color: #fff;
}

.sw-msg__botao--principal:hover {
	border-color: #1f63bd;
	background: #1f63bd;
}

.sw-msg--erro .sw-msg__botao--principal {
	border-color: #dc2626;
	background: #dc2626;
}

/* sair sem gravar (menu clicado com a tela em inclusão/alteração) */
.sw-msg__botao--perigo {
	border-color: #fecaca;
	color: #b91c1c;
}

.sw-msg__botao--perigo:hover {
	border-color: #dc2626;
	background: #dc2626;
	color: #fff;
}

/* "Já Existe" dos cadastros (mostraJaExiste): grade com os registros iguais */
.sw-msg__grade {
	max-height: 260px;
	margin-top: 16px;
	overflow: auto;
	border: 1px solid #e5e7eb;
	border-radius: 12px !important;
	text-align: left;
}

.sw-msg__grade .row {
	margin: 0;
}

/* avisos do sistema (alert trocado pela janela do sistema, funcoes.js) */
dialog.sw-aviso {
	width: 440px;
}

dialog.sw-aviso .sw-msg__texto label {
	max-height: 50vh;
	overflow-y: auto;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* =========================================================== Aguarde */

dialog.sw-aguarde {
	width: 360px;
	max-width: calc(100vw - 32px);
	padding: 30px 28px 20px;
	border: 0;
	border-radius: 20px !important;
	background: #fff;
	box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
	color: #1f2937;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	text-align: center;
	animation: sw-surge .18s ease-out;
}

.sw-aguarde__anel {
	position: relative;
	width: 84px;
	height: 84px;
	margin: 0 auto 16px;
}

.sw-aguarde__anel span {
	position: absolute;
	inset: 0;
	border: 5px solid #e6eef9;
	border-top-color: #2f7de1;
	border-right-color: #1caf9a;
	border-radius: 50% !important;
	animation: sw-gira .9s linear infinite;
}

.sw-aguarde__anel img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	transform: translate(-50%, -50%);
	animation: sw-pulsa 1.8s ease-in-out infinite;
}

.sw-aguarde__titulo {
	font-size: 19px;
	font-weight: 700;
}

.sw-aguarde__texto label {
	display: block;
	margin: 4px 0 0;
	color: #4b5563;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

.sw-aguarde__barra {
	position: relative;
	height: 6px;
	margin: 18px 0 10px;
	overflow: hidden;
	border-radius: 999px !important;
	background: #eef2f7;
}

.sw-aguarde__barra span {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	border-radius: 999px !important;
	background: linear-gradient(90deg, #2f7de1, #1caf9a);
	animation: sw-barra 1.4s ease-in-out infinite;
}

.sw-aguarde__rodape {
	min-height: 16px;
	color: #6b7280;
	font-size: 12px;
	text-align: center;
}

.sw-aguarde__ocultar {
	margin-top: 14px;
	padding: 6px 12px;
	border: 0;
	border-radius: 8px !important;
	background: #f1f5f9;
	color: #475569;
	font-size: 12px;
	cursor: pointer;
}

.sw-aguarde__ocultar[hidden] {
	display: none;
}

.sw-aguarde__ocultar:hover {
	background: #e2e8f0;
}

@keyframes sw-gira {
	to { transform: rotate(360deg); }
}

@keyframes sw-pulsa {
	0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .85; }
	50%      { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}

@keyframes sw-barra {
	0%   { left: -40%; }
	100% { left: 100%; }
}

@keyframes sw-surge {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
}

/* ============================== modal de ano/semana (e outros sw-modal) */
/* Aberto com show(), para o calendário do jQuery UI (que abre no body)
   ficar por cima; o próprio dialog cobre a tela e faz o véu */

dialog.sw-modal[open] {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 16px;
	border: 0;
	background: rgba(17, 24, 39, .45);
	box-sizing: border-box;
}

.sw-modal__caixa {
	width: 460px;
	max-width: 100%;
	overflow: hidden;
	border-radius: 18px !important;
	background: #fff;
	box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
	color: #1f2937;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	animation: sw-surge .18s ease-out;
}

.sw-modal__cabecalho {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 20px 6px 22px;
}

.sw-modal__icone {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px !important;
	background: rgba(28, 175, 154, .14);
	color: #1caf9a;
	font-size: 20px;
}

.sw-modal__titulos {
	flex: 1;
	min-width: 0;
}

.sw-modal__titulos h3 {
	margin: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
}

.sw-modal__titulos p {
	margin: 2px 0 0;
	color: #6b7280;
	font-size: 13px;
}

.sw-modal__fechar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50% !important;
	background: #f1f5f9;
	color: #6b7280;
	font-size: 16px;
	cursor: pointer;
}

.sw-modal__fechar:hover {
	background: #e5e7eb;
	color: #1f2937;
}

.sw-modal__corpo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 0;
	padding: 16px 22px 6px;
}

/* O <form> interno serve ao Enter (entertab) na index; nas telas que já
   estão dentro de um <form> o navegador descarta este. Nos dois casos os
   campos ficam no flex do .sw-modal__corpo */
.sw-modal__form {
	display: contents;
}

.sw-modal__campo {
	flex: 1 1 150px;
	margin: 0;
	font-weight: normal;
}

.sw-modal__campo > span {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
}

.sw-modal__campo--ped > span { color: #1f63bd; }
.sw-modal__campo--cob > span { color: #c2410c; }

.sw-modal__campo input {
	width: 100%;
	height: 42px;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.sw-modal__seta {
	padding-bottom: 11px;
	color: #9ca3af;
	font-size: 16px;
}

.sw-modal__dica {
	flex-basis: 100%;
	margin: 6px 0 0;
	color: #6b7280;
	font-size: 12px;
	line-height: 1.45;
}

.sw-modal__rodape {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 14px;
	padding: 14px 22px;
	border-top: 1px solid #eef0f4;
	background: #fafbfc;
}

.sw-modal__rodape input {
	min-width: 96px;
}

/* produto repetido (abreJaExisteArtigo): aberto com showModal, o véu já vem do próprio dialog */
dialog.sw-jaexiste::backdrop {
	background: transparent;
}

dialog.sw-jaexiste .sw-modal__icone {
	background: #fff6e5;
	color: #d97706;
}

.sw-jaexiste__produto {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #fde7b0;
	border-radius: 12px !important;
	background: #fffbeb;
}

.sw-jaexiste__nome {
	min-width: 0;
	font-size: 15px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.sw-jaexiste__atual {
	flex-shrink: 0;
	color: #92400e;
	font-size: 13px;
}

.sw-jaexiste__atual b {
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.sw-jaexiste__opcoes {
	display: flex;
	flex: 1 1 220px;
	gap: 8px;
}

.sw-jaexiste__opcao {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	margin: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px !important;
	background: #fff;
	color: #4b5563;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

/* o Uniform do Metronic embrulha o radio em div.radio > span: some junto, mas continua no teclado */
.sw-jaexiste__opcao div.radio,
.sw-jaexiste__opcao input {
	position: absolute;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.sw-jaexiste__opcao:hover {
	border-color: #cbd5e1;
}

.sw-jaexiste__opcao:has(input:checked) {
	border-color: #2f7de1;
	background: #eaf2fd;
	color: #1f63bd;
}

.sw-jaexiste__opcao--retirar:has(input:checked) {
	border-color: #dc2626;
	background: #fdecec;
	color: #b91c1c;
}

.sw-jaexiste__opcao:has(input:focus-visible) {
	outline: 3px solid rgba(47, 125, 225, .35);
	outline-offset: 1px;
}

.sw-jaexiste__qtd {
	flex: 0 1 120px;
}

.sw-jaexiste__qtd input {
	text-align: right;
}

.sw-jaexiste__qtd .help-block:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.sw-aguarde__anel span,
	.sw-aguarde__anel img,
	.sw-aguarde__barra span {
		animation-duration: 3s !important;
	}
}

/* ================================================= carregando (CRM do index) */

.sw-carregando {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 240px;
	color: #6b7a8c;
	font-size: 14px;
}

.sw-carregando__roda {
	width: 22px;
	height: 22px;
	border: 3px solid #d9e2ec;
	border-top-color: var(--a2-menu-ativo);
	border-radius: 50%;
	animation: sw-gira .8s linear infinite;
}

@keyframes sw-gira {
	to { transform: rotate(360deg); }
}

/* ================================================= tela inicial: resumo e CRM */

.sw-ini,
.sw-ini button,
.sw-ini input { font-family: inherit; }

.sw-ini { padding: 8px 4px 24px; }

.sw-ini__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.sw-ini__titulo { margin: 0; font-size: 22px; font-weight: 400; color: #2b3643; }

.sw-ini__abas {
	display: inline-flex;
	background: #e9eef3;
	border-radius: 6px;
	padding: 3px;
}

.sw-ini__aba {
	border: 0;
	background: transparent;
	padding: 6px 16px;
	border-radius: 4px;
	font-size: 13px;
	color: #5b6b7d;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.sw-ini__aba:hover { color: #2b3643; }
.sw-ini__aba--ativa { background: #fff; color: #1a8f7d; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.sw-ini__aba:focus-visible, .sw-ini__card:focus-visible { outline: 2px solid var(--a2-menu-ativo); outline-offset: 2px; }

.sw-ini__grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 900px) { .sw-ini__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sw-ini__grade { grid-template-columns: 1fr; } }

.sw-ini__card {
	--cor: #3b82c4;
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 104px;
	padding: 18px 20px;
	background: #fff;
	border-radius: 6px;
	border-left: 5px solid var(--cor);
	box-shadow: 0 1px 4px rgba(43,54,67,.12);
	color: #2b3643;
	text-decoration: none;
	transition: transform .18s, box-shadow .18s;
}

.sw-ini__card--link:hover, .sw-ini__card--link:focus { color: #2b3643; text-decoration: none; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(43,54,67,.18); }
.sw-ini__card--off { opacity: .55; }

.sw-ini__card--azul { --cor: #3b82c4; }
.sw-ini__card--verde { --cor: #2fa36b; }
.sw-ini__card--laranja { --cor: #e8912d; }
.sw-ini__card--roxo { --cor: #8a63c7; }
.sw-ini__card--vermelho { --cor: #d9534f; }
.sw-ini__card--teal { --cor: #1caf9a; }

.sw-ini__icone {
	flex: 0 0 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--cor);
	background: color-mix(in srgb, var(--cor) 14%, #fff);
	transition: background .2s, color .2s, transform .25s;
}

.sw-ini__card--link:hover .sw-ini__icone { background: var(--cor); color: #fff; transform: scale(1.1) rotate(-8deg); }

.sw-ini__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sw-ini__valor { font-size: 32px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.sw-ini__rotulo { font-size: 14px; color: #6b7a8c; }
.sw-ini__rotulo small { font-size: 12px; color: #98a6ba; }

.sw-ini__seta { font-size: 26px; color: #b4bcc8; transition: transform .18s, color .18s; }
.sw-ini__card--link:hover .sw-ini__seta { transform: translateX(5px); color: var(--cor); }

.sw-ini__vazio { text-align: center; padding: 48px 0; color: #8895a5; }
.sw-ini__vazio i { font-size: 36px; }

/* CRM */

.sw-crm__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 14px; }

.sw-crm__busca { position: relative; flex: 0 1 340px; }
.sw-crm__busca i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #8895a5; }
.sw-crm__busca input {
	width: 100%;
	height: 36px;
	padding: 0 12px 0 32px;
	border: 1px solid #d3dbe4;
	border-radius: 8px;
	font-size: 13px;
}
.sw-crm__busca input:focus { outline: 2px solid var(--a2-menu-ativo); border-color: transparent; }

.sw-crm__check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: #4a5a6c; cursor: pointer; }

.sw-crm__quadro { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; padding: 2px 2px 16px; }

.sw-crm__coluna {
	flex: 0 0 290px;
	background: #eef2f6;
	border-radius: 10px;
	padding: 10px;
}

.sw-crm__cabec {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin-bottom: 10px;
	padding: 8px 10px;
	background: #364150;
	color: #fff;
	border-radius: 7px;
}
.sw-crm__cabec strong { font-size: 15px; }
.sw-crm__cabec span { font-size: 12px; color: #c4ccd6; }
.sw-crm__cabec em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; background: var(--a2-menu-ativo); padding: 2px 8px; border-radius: 10px; }

.sw-crm__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
	padding: 10px 12px;
	background: #fff;
	border-radius: 8px;
	border-left: 4px solid #cfd8e2;
	box-shadow: 0 1px 2px rgba(43,54,67,.1);
	transition: box-shadow .15s, transform .15s;
}
.sw-crm__card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(43,54,67,.15); }
.sw-crm__card--pendente { border-left-color: #e8912d; }

.sw-crm__praca { font-size: 13px; font-weight: 700; color: #2b3643; }
.sw-crm__vendedor { font-size: 12px; color: #6b7a8c; }
.sw-crm__vendedor i { width: 12px; }

.sw-crm__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.sw-crm__notas { font-size: 12px; color: #6b7a8c; }
.sw-crm__notas b { font-size: 14px; color: #2b3643; }
.sw-crm__notas--alerta b { color: #c96f0a; }

.sw-crm__carga { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.sw-crm__carga--sim { background: #dff4ea; color: #1f7a4f; }
.sw-crm__carga--nao { background: #f1f3f6; color: #8895a5; }

@media (prefers-reduced-motion: reduce) {
	.sw-ini__card, .sw-crm__card, .sw-ini__icone, .sw-ini__seta { transition: none; }
	.sw-ini__card--link:hover, .sw-crm__card:hover, .sw-ini__card--link:hover .sw-ini__icone { transform: none; }
}

/* ===== atalhos sacdroid ===== */
.sw-ini__secao { margin: 28px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8895a5; }
.sw-ini__grade--atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sw-ini__card--atalho { min-height: 80px; padding: 14px 20px; }
.sw-ini__card--atalho .sw-ini__icone { flex-basis: 48px; height: 48px; font-size: 22px; }
.sw-ini__atalho-titulo { font-size: 16px; font-weight: 600; line-height: 1.25; }
@media (max-width: 560px) { .sw-ini__grade--atalhos { grid-template-columns: 1fr; } }