/*
 * Imtegra — tema visual 2027
 *
 * Carregado por último nos layouts (menu_lateral / menu_superior) para
 * sobrescrever o Metronic sem mexer nas telas. Tudo parte das variáveis
 * abaixo: para ajustar a identidade, mude só elas.
 *
 * O prefixo "html body" aumenta a especificidade o suficiente para vencer
 * os bundles do Metronic (style*.bundle.css, dark-aside*.css) sem !important.
 * Superfícies claras (fundo, cards, cabeçalho) ficam em body:not(.tema-escuro)
 * para não brigar com o tema escuro (/css/escuro.css).
 * somente
 */

:root {
	--im-indigo: #4E5FAB;
	--im-indigo-escuro: #2E3A78;
	--im-indigo-suave: #EDF0FA;
	--im-tinta: #161B33;
	--im-tinta-2: #222A4A;
	--im-nevoa: #8FAACD;
	--im-nevoa-clara: #E8EEF7;
	--im-papel: #F6F7FB;
	--im-branco: #FFFFFF;
	--im-ambar: #E07B2E;

	--im-texto: #161B33;
	--im-texto-2: #545B70;
	--im-borda: #E3E7F0;
	--im-borda-forte: #CDD4E3;

	--im-sucesso: #1E7A4C;
	--im-sucesso-fundo: #EAF5EF;
	--im-atencao: #9A5B00;
	--im-atencao-fundo: #FDF3E3;
	--im-erro: #B42318;
	--im-erro-fundo: #FDECEB;
	--im-info: #2F6FA8;
	--im-info-fundo: #E8F1FA;

	--im-raio: 12px;
	--im-raio-card: 18px;
	--im-sombra: 0 16px 40px rgba(22, 27, 51, .14);

	--im-fonte: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--im-fonte-titulo: 'Sora', 'Figtree', system-ui, sans-serif;
	--im-fonte-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* ---------- base ---------- */

html body {
	font-family: var(--im-fonte);
	color: var(--im-texto);
	-webkit-font-smoothing: antialiased;
}

html body h1, html body h2, html body h3, html body h4, html body h5,
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5,
html body .card-title, html body .modal-title, html body .subheader-title {
	font-family: var(--im-fonte-titulo);
	letter-spacing: -0.01em;
}

html body .im-mono { font-family: var(--im-fonte-mono); }

html body a { color: var(--im-indigo); }
html body a:hover { color: var(--im-indigo-escuro); }

html body:not(.tema-escuro),
html body:not(.tema-escuro) .content,
html body:not(.tema-escuro) .wrapper {
	background-color: var(--im-papel);
}

/* ---------- menu lateral ---------- */

html body .aside,
html body .aside-menu,
html body .aside .aside-menu-wrapper {
	background-color: var(--im-tinta);
}

html body .brand {
	background-color: var(--im-tinta);
	box-shadow: none;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

html body .brand .brand-logo img { width: 132px; height: auto; }

html body .brand .brand-toggle .svg-icon svg g [fill] { fill: var(--im-nevoa); }

html body .aside-menu .menu-nav { padding: 12px 12px; }

html body .aside-menu .menu-nav > .menu-item > .menu-link,
html body .aside-menu .menu-nav > .menu-item > .menu-heading {
	border-radius: var(--im-raio);
	min-height: 44px;
	margin-bottom: 2px;
	background: transparent;
}

html body .aside-menu .menu-nav > .menu-item > .menu-link .menu-text,
html body .aside-menu .menu-nav > .menu-item > .menu-heading .menu-text {
	color: #C9D3E6;
	font-weight: 500;
	font-size: 14.5px;
}

html body .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon,
html body .aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon {
	color: var(--im-nevoa);
}

html body .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon.svg-icon svg g [fill],
html body .aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon.svg-icon svg g [fill] {
	fill: var(--im-nevoa);
}

html body .aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow { color: #6F7A99; }

html body .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link,
html body .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link {
	background-color: var(--im-tinta-2);
}

html body .aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-text,
html body .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text {
	color: #FFFFFF;
}

html body .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
html body .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link {
	background-color: var(--im-indigo);
}

html body .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
html body .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text,
html body .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-arrow {
	color: #FFFFFF;
}

html body .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon.svg-icon svg g [fill],
html body .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-icon.svg-icon svg g [fill],
html body .aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-icon.svg-icon svg g [fill] {
	fill: #FFFFFF;
}

/* submenu */
html body .aside-menu .menu-nav > .menu-item .menu-submenu { background: transparent; }

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link {
	border-radius: 10px;
	min-height: 38px;
	margin: 1px 0 1px 8px;
	background: transparent;
}

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text {
	color: #AEB8D0;
	font-size: 14px;
}

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-bullet.menu-bullet-line > span,
html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-bullet.menu-bullet-dot > span {
	background-color: #4A557A;
}

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:hover > .menu-link,
html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link {
	background-color: var(--im-tinta-2);
}

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:hover > .menu-link .menu-text,
html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-text {
	color: #FFFFFF;
}

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-bullet > span {
	background-color: var(--im-ambar);
}

/* menu mobile (barra do topo no celular) */
html body .header-mobile {
	background-color: var(--im-tinta);
}

html body .header-mobile .burger-icon span,
html body .header-mobile .burger-icon span::before,
html body .header-mobile .burger-icon span::after {
	background-color: #FFFFFF;
}

html body .header-mobile .svg-icon svg g [fill] { fill: #FFFFFF; }

/* ---------- cabeçalho e subcabeçalho ---------- */

html body:not(.tema-escuro) .header,
html body:not(.tema-escuro) .subheader {
	background-color: var(--im-branco);
	box-shadow: none;
	border-bottom: 1px solid var(--im-borda);
}

/* chips "Empresa" e "Ambiente" do cabeçalho */
html body .header .header-menu .menu-nav .label.label-inline {
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
	border: 1px solid var(--im-borda);
}

/* ---------- cards ---------- */

html body:not(.tema-escuro) .card.card-custom {
	border-radius: var(--im-raio-card);
	border: 1px solid var(--im-borda);
	box-shadow: none;
}

html body .card.card-custom > .card-header {
	border-bottom-color: var(--im-borda);
	min-height: 64px;
}

html body .card.card-custom > .card-header .card-title .card-label {
	font-family: var(--im-fonte-titulo);
	font-weight: 700;
}

/* ---------- botões ---------- */

html body .btn {
	border-radius: var(--im-raio);
	font-weight: 600;
	letter-spacing: 0;
}

html body .btn:focus-visible {
	outline: 2px solid var(--im-indigo);
	outline-offset: 2px;
}

html body .btn.btn-primary {
	background-color: var(--im-indigo);
	border-color: var(--im-indigo);
	color: #FFFFFF;
}

html body .btn.btn-primary:hover:not(.btn-text),
html body .btn.btn-primary:focus:not(.btn-text),
html body .btn.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--im-indigo-escuro);
	border-color: var(--im-indigo-escuro);
	color: #FFFFFF;
}

html body .btn.btn-success {
	background-color: var(--im-sucesso);
	border-color: var(--im-sucesso);
	color: #FFFFFF;
}

html body .btn.btn-success:hover:not(.btn-text),
html body .btn.btn-success:focus:not(.btn-text) {
	background-color: #16603B;
	border-color: #16603B;
}

html body .btn.btn-danger {
	background-color: #C0362C;
	border-color: #C0362C;
	color: #FFFFFF;
}

html body .btn.btn-danger:hover:not(.btn-text),
html body .btn.btn-danger:focus:not(.btn-text) {
	background-color: #A42D24;
	border-color: #A42D24;
}

html body .btn.btn-warning {
	background-color: #F2B45A;
	border-color: #F2B45A;
	color: var(--im-tinta);
}

html body .btn.btn-warning:hover:not(.btn-text),
html body .btn.btn-warning:focus:not(.btn-text) {
	background-color: #E9A23B;
	border-color: #E9A23B;
	color: var(--im-tinta);
}

html body .btn.btn-info {
	background-color: var(--im-info);
	border-color: var(--im-info);
	color: #FFFFFF;
}

html body .btn.btn-info:hover:not(.btn-text),
html body .btn.btn-info:focus:not(.btn-text) {
	background-color: #245A8A;
	border-color: #245A8A;
}

html body .btn.btn-secondary,
html body .btn.btn-light,
html body .btn.btn-outline-secondary {
	background-color: var(--im-branco);
	border: 1px solid var(--im-borda-forte);
	color: var(--im-texto);
}

html body .btn.btn-secondary:hover:not(.btn-text),
html body .btn.btn-light:hover:not(.btn-text) {
	background-color: var(--im-papel);
	border-color: var(--im-borda-forte);
	color: var(--im-texto);
}

html body .btn.btn-light-primary { background-color: var(--im-indigo-suave); color: var(--im-indigo); border-color: transparent; }
html body .btn.btn-light-success { background-color: var(--im-sucesso-fundo); color: var(--im-sucesso); border-color: transparent; }
html body .btn.btn-light-danger { background-color: var(--im-erro-fundo); color: var(--im-erro); border-color: transparent; }
html body .btn.btn-light-warning { background-color: var(--im-atencao-fundo); color: var(--im-atencao); border-color: transparent; }
html body .btn.btn-light-info { background-color: var(--im-info-fundo); color: var(--im-info); border-color: transparent; }

html body .btn.btn-light-primary:hover:not(.btn-text) { background-color: var(--im-indigo); color: #FFFFFF; }
html body .btn.btn-light-success:hover:not(.btn-text) { background-color: var(--im-sucesso); color: #FFFFFF; }
html body .btn.btn-light-danger:hover:not(.btn-text) { background-color: #C0362C; color: #FFFFFF; }
html body .btn.btn-light-warning:hover:not(.btn-text) { background-color: #F2B45A; color: var(--im-tinta); }
html body .btn.btn-light-info:hover:not(.btn-text) { background-color: var(--im-info); color: #FFFFFF; }

html body .btn.btn-light-primary i, html body .btn.btn-light-primary:hover i { color: inherit; }

/* ---------- etiquetas de status ---------- */

html body .label.label-inline {
	border-radius: 999px;
	font-weight: 600;
}

html body .label.label-inline.label-xl { height: 28px; padding: 0 12px; font-size: 13px; }

html body .label.label-light-primary { background-color: var(--im-indigo-suave); color: #3F4FA0; }
html body .label.label-light-success { background-color: var(--im-sucesso-fundo); color: var(--im-sucesso); }
html body .label.label-light-danger { background-color: var(--im-erro-fundo); color: var(--im-erro); }
html body .label.label-light-warning { background-color: var(--im-atencao-fundo); color: var(--im-atencao); }
html body .label.label-light-info { background-color: var(--im-info-fundo); color: var(--im-info); }

html body .label.label-primary, html body .badge-primary { background-color: var(--im-indigo); color: #FFFFFF; }
html body .label.label-success, html body .badge-success { background-color: var(--im-sucesso); color: #FFFFFF; }
html body .label.label-danger, html body .badge-danger { background-color: #C0362C; color: #FFFFFF; }

/* ---------- cores utilitárias ---------- */

html body .text-primary { color: var(--im-indigo) !important; }
html body .bg-primary { background-color: var(--im-indigo) !important; }
html body .text-success { color: var(--im-sucesso) !important; }
html body .text-danger { color: var(--im-erro) !important; }
html body .text-info { color: var(--im-info) !important; }
html body .text-muted { color: var(--im-texto-2) !important; }

/* ---------- formulários ---------- */

html body .form-control,
html body .custom-select,
html body .input-group-text {
	border-radius: 10px;
	border-color: var(--im-borda-forte);
}

html body .input-group > .form-control:not(:last-child),
html body .input-group > .custom-select:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

html body .input-group > .input-group-append > .input-group-text,
html body .input-group > .input-group-append > .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

html body .input-group > .input-group-prepend > .input-group-text,
html body .input-group > .input-group-prepend > .btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

html body .input-group > .form-control:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

html body .form-control:focus,
html body .custom-select:focus {
	border-color: var(--im-indigo);
	box-shadow: 0 0 0 3px rgba(78, 95, 171, .15);
}

html body label,
html body .col-form-label {
	font-weight: 600;
	color: var(--im-texto);
}

html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple {
	border-radius: 10px;
	border-color: var(--im-borda-forte);
}

/* ---------- tabelas ---------- */

html body .table thead th,
html body .datatable.datatable-default > .datatable-table > .datatable-head .datatable-row > .datatable-cell > span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--im-texto-2) !important;
}

html body .datatable.datatable-default > .datatable-table > .datatable-head .datatable-row {
	background-color: #F8F9FC;
}

html body .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row:hover,
html body .table-hover tbody tr:hover {
	background-color: #F3F5FC;
}

html body .table td, html body .table th { border-color: #EEF0F5; }

/* ---------- paginação, abas, dropdowns, modais ---------- */

html body .page-item.active .page-link,
html body .pagination .page-item.active .page-link {
	background-color: var(--im-indigo);
	border-color: var(--im-indigo);
	color: #FFFFFF;
}

html body .page-link { border-radius: 10px !important; margin: 0 2px; color: var(--im-texto); }

html body .nav-tabs .nav-link.active,
html body .nav.nav-tabs.nav-tabs-line .nav-link.active {
	color: var(--im-indigo);
	border-bottom-color: var(--im-indigo);
}

html body .dropdown-menu {
	border-radius: 14px;
	border: 1px solid var(--im-borda);
	box-shadow: var(--im-sombra);
}

html body .modal-content {
	border-radius: 20px;
	border: 0;
	box-shadow: 0 24px 60px rgba(10, 14, 35, .30);
}

html body .modal-header { border-bottom-color: var(--im-borda); }
html body .modal-footer { border-top-color: var(--im-borda); background: #F8F9FC; border-radius: 0 0 20px 20px; }

/* ---------- alertas (sweetalert) ---------- */

html body .swal-modal {
	border-radius: 20px;
	font-family: var(--im-fonte);
}

html body .swal-title {
	font-family: var(--im-fonte-titulo);
	font-size: 22px;
	font-weight: 700;
	color: var(--im-texto);
}

html body .swal-text { color: var(--im-texto); font-size: 15px; line-height: 1.55; }

html body .swal-footer { text-align: right; padding: 16px 20px; }

html body .swal-button {
	border-radius: var(--im-raio);
	background-color: var(--im-indigo);
	font-family: var(--im-fonte);
	font-weight: 600;
	padding: 11px 22px;
}

html body .swal-button:not([disabled]):hover { background-color: var(--im-indigo-escuro); }
html body .swal-button:focus { box-shadow: 0 0 0 3px rgba(78, 95, 171, .3); }

html body .swal-button--cancel {
	background-color: var(--im-branco);
	color: var(--im-texto);
	border: 1px solid var(--im-borda-forte);
}

html body .swal-button--cancel:not([disabled]):hover { background-color: var(--im-papel); }
html body .swal-button--danger { background-color: #C0362C; }

/* ---------- chips do cabeçalho (empresa / ambiente) ---------- */

html body .label.im-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--im-branco);
	color: var(--im-texto);
	border: 1px solid var(--im-borda);
}

html body .label.im-chip:hover { border-color: var(--im-borda-forte); color: var(--im-texto); }

html body .label.im-chip .im-chip-ponto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: currentColor;
}

html body .label.im-chip.im-chip-producao { background-color: var(--im-sucesso-fundo); color: var(--im-sucesso); border-color: transparent; }
html body .label.im-chip.im-chip-homologacao { background-color: var(--im-atencao-fundo); color: var(--im-atencao); border-color: transparent; }

/* =====================================================================
 * Componentes de listagem (im-*) — usados nas telas já repaginadas.
 * Primeira tela: resources/views/mdfe/list.blade.php
 * ===================================================================== */

.im-pagina { display: flex; flex-direction: column; gap: 20px; }

.im-pagina-topo {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.im-pagina-topo .im-trilha { font-size: 13px; color: var(--im-texto-2); margin-bottom: 4px; }

html body .im-pagina-topo h1 {
	margin: 0;
	font-family: var(--im-fonte-titulo);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--im-texto);
}

.im-pagina-acoes { display: flex; gap: 10px; flex-wrap: wrap; }

html body .im-btn {
	height: 44px;
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--im-raio);
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}

html body .im-btn i { font-size: 18px; }

.im-contador {
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--im-atencao-fundo);
	color: var(--im-atencao);
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
}

/* barra de filtros */
.im-filtros {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.im-chips {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 14px;
	background: var(--im-branco);
	border: 1px solid var(--im-borda);
	overflow-x: auto;
	max-width: 100%;
}

html body .im-chip-filtro {
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	color: var(--im-texto);
	white-space: nowrap;
}

html body .im-chip-filtro:hover { background: var(--im-papel); color: var(--im-texto); text-decoration: none; }
html body .im-chip-filtro.ativo { background: var(--im-tinta); color: #FFFFFF; }
.im-chip-filtro .im-qtd { font-size: 12px; opacity: .7; }

.im-periodo {
	margin-left: auto;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

html body .im-periodo .form-control { height: 44px; width: 140px; }
html body .im-periodo label { font-size: 12px; margin-bottom: 4px; color: var(--im-texto-2); display: block; }

/* resumo em números (ex.: totais do dia no PDV) */
.im-resumo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.im-resumo-item {
	background: var(--im-branco);
	border: 1px solid var(--im-borda);
	border-radius: 16px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.im-resumo-item span { font-size: 13px; color: var(--im-texto-2); font-weight: 600; }
.im-resumo-item strong { font-family: var(--im-fonte-mono); font-size: 22px; font-weight: 500; color: var(--im-texto); }
.im-resumo-item.sucesso strong { color: var(--im-sucesso); }
.im-resumo-item.erro strong { color: var(--im-erro); }

/* filtros secundários recolhidos */
.im-filtros-form { display: flex; flex-direction: column; gap: 10px; }

.im-mais-filtros > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--im-indigo);
	cursor: pointer;
	list-style: none;
}

.im-mais-filtros > summary::-webkit-details-marker { display: none; }
.im-mais-filtros > summary::before { content: "+"; font-size: 16px; line-height: 1; }
.im-mais-filtros[open] > summary::before { content: "−"; }
.im-mais-filtros[open] > summary { margin-bottom: 10px; }

/* checkbox com rótulo, alinhado aos campos da barra de filtros */
html body .im-check {
	height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	margin: 0;
	border: 1px solid var(--im-borda-forte);
	border-radius: 10px;
	background: var(--im-branco);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

html body .im-check input { width: 16px; height: 16px; accent-color: var(--im-indigo); }
html body .im-check i { font-size: 18px; color: var(--im-texto-2); }

/* produto com miniatura na primeira coluna */
.im-produto { display: flex; align-items: center; gap: 12px; }
.im-thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 10px;
	object-fit: cover;
	background: var(--im-papel);
	border: 1px solid var(--im-borda);
}

/* botão com cara de link, dentro de tabelas */
html body .im-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--im-indigo);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* barra que aparece no modo "selecionar várias" */
.im-barra-selecao {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--im-tinta);
	color: #FFFFFF;
	font-weight: 600;
}

.im-tabela .im-col-sel { width: 40px; }

/* aviso em faixa (ex.: certificado ausente) */
.im-aviso {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.45;
}

.im-aviso i { font-size: 20px; margin-top: 1px; }
.im-aviso.atencao { background: var(--im-atencao-fundo); color: #6E4100; }
.im-aviso.erro { background: var(--im-erro-fundo); color: var(--im-erro); }
.im-aviso.info { background: var(--im-indigo-suave); color: #2E3A78; }
html body .im-aviso a { color: inherit; font-weight: 700; text-decoration: underline; }

/* status */
.im-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.im-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.im-status.pendente { background: var(--im-indigo-suave); color: #3F4FA0; }
.im-status.aprovado { background: var(--im-sucesso-fundo); color: var(--im-sucesso); }
.im-status.rejeitado { background: var(--im-erro-fundo); color: var(--im-erro); }
.im-status.cancelado { background: #F1F2F5; color: var(--im-texto-2); }
.im-status.atencao { background: var(--im-atencao-fundo); color: var(--im-atencao); }
/* JS legado (nfse.js) marca a aprovação trocando para badge-success */
.im-status.badge-success { background: var(--im-sucesso-fundo); color: var(--im-sucesso); }

/* tabela */
.im-tabela-card {
	background: var(--im-branco);
	border: 1px solid var(--im-borda);
	border-radius: var(--im-raio-card);
}

.im-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }

.im-tabela thead th {
	height: 44px;
	padding: 0 14px;
	background: #F8F9FC;
	border-bottom: 1px solid var(--im-borda);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--im-texto-2);
	white-space: nowrap;
	text-align: left;
}

.im-tabela thead th:first-child { border-top-left-radius: var(--im-raio-card); }
.im-tabela thead th:last-child { border-top-right-radius: var(--im-raio-card); }
.im-tabela thead th.num { text-align: right; }

.im-tabela tbody td {
	height: 60px;
	padding: 8px 14px;
	border-bottom: 1px solid #EEF0F5;
	vertical-align: middle;
}

.im-tabela tbody tr:hover td { background: #F8F9FD; }
.im-tabela tbody tr:last-child td { border-bottom: 0; }

.im-tabela .num { text-align: right; font-family: var(--im-fonte-mono); white-space: nowrap; }
.im-tabela .mono { font-family: var(--im-fonte-mono); font-size: 13px; white-space: nowrap; }
.im-tabela .fraco { color: var(--im-texto-2); }
.im-tabela .duas-linhas { display: flex; flex-direction: column; line-height: 1.25; }
.im-tabela .duas-linhas small { font-size: 12px; color: var(--im-texto-2); }
.im-tabela .acoes-col { text-align: right; white-space: nowrap; }

/* checkbox legado: o JS antigo (mdfe_envio.js) ainda lê a linha "marcada" */
.im-sel-legado { display: none; }

.im-acoes { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }

html body .im-acao-principal {
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

html body .im-acao-icone {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--im-branco);
	border: 1px solid var(--im-borda);
	color: var(--im-texto);
}

html body .im-acao-icone:hover,
html body .im-acao-icone[aria-expanded="true"] {
	background: var(--im-nevoa-clara);
	border-color: var(--im-nevoa-clara);
	color: var(--im-texto);
}

html body .im-acao-icone i { font-size: 18px; color: inherit; }

/* menu "mais ações" */
html body .im-menu-acoes {
	width: 300px;
	padding: 8px;
	border-radius: 16px;
	border: 1px solid var(--im-borda);
	box-shadow: var(--im-sombra);
	/* menu longo (ex.: NF-e aprovada) não pode sair da tela: rola por dentro */
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.im-menu-acoes .im-menu-titulo {
	display: block;
	padding: 8px 12px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--im-texto-2);
}

html body .im-menu-acoes .im-menu-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--im-texto);
	text-align: left;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	white-space: normal;
	cursor: pointer;
}

html body .im-menu-acoes .im-menu-item:hover,
html body .im-menu-acoes .im-menu-item:focus { background: #F3F5FC; color: var(--im-texto); text-decoration: none; outline: none; }

.im-menu-acoes .im-menu-item i { font-size: 18px; margin-top: 1px; color: inherit; }
.im-menu-acoes .im-menu-item small { display: block; font-size: 12.5px; font-weight: 400; color: var(--im-texto-2); margin-top: 2px; }
html body .im-menu-acoes .im-menu-item.perigo,
html body .im-menu-acoes .im-menu-item.perigo:hover { color: var(--im-erro); }
html body .im-menu-acoes .im-menu-item.atencao,
html body .im-menu-acoes .im-menu-item.atencao:hover { color: var(--im-atencao); }
.im-menu-acoes .im-menu-divisor { height: 1px; margin: 6px 4px; background: #EEF0F5; }

/* rodapé da tabela */
.im-tabela-rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border-top: 1px solid var(--im-borda);
	font-size: 14px;
	color: var(--im-texto-2);
}

.im-tabela-rodape .pagination { margin: 0; }

.im-vazio { padding: 56px 16px; text-align: center; color: var(--im-texto-2); }
.im-vazio strong { display: block; font-size: 16px; color: var(--im-texto); margin-bottom: 4px; }

/* ---------- celular: a tabela vira cartões ---------- */
@media (max-width: 767.98px) {
	html body .im-pagina-topo h1 { font-size: 22px; }
	.im-pagina-acoes { width: 100%; }
	.im-pagina-acoes .im-btn { flex: 1 1 auto; }
	.im-periodo { margin-left: 0; width: 100%; }
	.im-periodo .im-campo-periodo { flex: 1 1 40%; }
	html body .im-periodo .form-control { width: 100%; }

	.im-tabela-card { background: transparent; border: 0; }
	.im-tabela-rodape { border-top: 0; padding: 4px 0; }
	.im-tabela thead { display: none; }
	.im-tabela, .im-tabela tbody { display: block; }

	.im-tabela tbody tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px 12px;
		padding: 14px 16px;
		margin-bottom: 12px;
		background: var(--im-branco);
		border: 1px solid var(--im-borda);
		border-radius: var(--im-raio-card);
	}

	html body .im-tabela tbody td {
		display: block;
		height: auto;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.im-tabela tbody td[data-rotulo]::before {
		content: attr(data-rotulo);
		display: block;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--im-texto-2);
		margin-bottom: 2px;
	}

	.im-tabela .num { text-align: left; }
	.im-tabela td.im-cel-titulo { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 16px; }
	.im-tabela td.im-cel-status { grid-column: 2; grid-row: 1; justify-self: end; }
	.im-tabela td.acoes-col { grid-column: 1 / -1; margin-top: 4px; }
	.im-tabela td.acoes-col .im-acoes { display: flex; width: 100%; }
	html body .im-tabela td.acoes-col .im-acao-principal { flex: 1 1 auto; height: 44px; justify-content: center; font-size: 15px; }
	html body .im-tabela td.acoes-col .im-acao-icone { width: 44px; height: 44px; }
	.im-tabela .im-so-desktop { display: none; }

	/* menu de ações vira painel de baixo para cima */
	html body .im-menu-acoes.show {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		transform: none !important;
		width: auto;
		margin: 0;
		padding: 12px 12px 24px;
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -12px 40px rgba(22, 27, 51, .25);
		z-index: 1060;
		max-height: 85vh;
		overflow-y: auto;
	}

	html body .im-menu-acoes .im-menu-item { min-height: 52px; font-size: 16px; }
}

@media (min-width: 768px) {
	.im-so-celular { display: none !important; }
}

/* notebook pequeno / tablet deitado: esconde colunas secundárias */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.im-tabela .im-so-largo { display: none; }
}

/* =====================================================================
 * Padrões antigos do Metronic nas telas ainda não reescritas.
 * Deixa as ~100 listagens legadas no novo visual sem mexer no HTML.
 * ===================================================================== */

/* títulos soltos das listagens ("Lista de clientes") */
html body .content .card-body > h4,
html body .content .card-body > div > h4,
html body .content #kt_user_profile_aside > h4 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 8px 0 4px;
}

/* alternância "Tabela / Grade" (wizard-3) vira seletor compacto */
html body .wizard.wizard-3 .wizard-nav .wizard-steps {
	display: inline-flex;
	flex-direction: row;
	gap: 4px;
	padding: 4px !important; /* sobrescreve os utilitários px-8/py-8 */
	margin: 8px 0 16px;
	border-radius: 14px;
	background: var(--im-branco);
	border: 1px solid var(--im-borda);
	width: auto;
}

html body .wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

html body .wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-label {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	cursor: pointer;
	color: var(--im-texto-2);
}

html body .wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
	margin: 0;
	font-family: var(--im-fonte);
	font-size: 14px;
	font-weight: 600;
	color: inherit;
}

html body .wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title i {
	font-size: 18px !important; /* o HTML legado usa style="font-size: 40px" */
	vertical-align: -3px;
	margin-right: 4px;
	color: inherit;
}

html body .wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-bar { display: none; }

html body .wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label {
	background: var(--im-tinta);
	color: #FFFFFF;
}

html body .wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step:not([data-wizard-state="current"]) .wizard-label:hover {
	background: var(--im-papel);
	color: var(--im-texto);
}

/* datatable legado: mesmo visual da im-tabela */
html body:not(.tema-escuro) .datatable.datatable-default {
	background: var(--im-branco);
	border: 1px solid var(--im-borda);
	border-radius: var(--im-raio-card);
	overflow-x: auto;
}

html body .datatable.datatable-default > .datatable-table {
	border: 0;
	background: transparent;
}

html body .datatable.datatable-default > .datatable-table > .datatable-head .datatable-row > .datatable-cell {
	background: #F8F9FC;
	border-bottom: 1px solid var(--im-borda);
	padding-top: 12px;
	padding-bottom: 12px;
}

html body .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-body .datatable-row > .datatable-cell,
html body .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .datatable-cell,
html body .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > td {
	border-color: #EEF0F5;
	border-left: 0;
	border-right: 0;
	vertical-align: middle;
	font-size: 14px;
	color: var(--im-texto);
}

html body .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row:nth-child(even) > .datatable-cell {
	background-color: transparent;
}

/* botões coloridos dentro das linhas: neutros, cor só no ícone */
html body .datatable-body .btn,
html body .table tbody .btn {
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 2px 1px;
	border-radius: 10px;
	background-color: var(--im-branco);
	border: 1px solid var(--im-borda);
	color: var(--im-texto);
	font-size: 13px;
	box-shadow: none;
}

html body .datatable-body .btn i,
html body .table tbody .btn i { font-size: 17px; padding: 0; color: inherit; }

html body .datatable-body .btn.btn-primary, html body .table tbody .btn.btn-primary,
html body .datatable-body .btn.btn-light-primary, html body .table tbody .btn.btn-light-primary { color: var(--im-indigo); }
html body .datatable-body .btn.btn-success, html body .table tbody .btn.btn-success,
html body .datatable-body .btn.btn-light-success, html body .table tbody .btn.btn-light-success { color: var(--im-sucesso); }
html body .datatable-body .btn.btn-danger, html body .table tbody .btn.btn-danger,
html body .datatable-body .btn.btn-light-danger, html body .table tbody .btn.btn-light-danger { color: var(--im-erro); }
html body .datatable-body .btn.btn-warning, html body .table tbody .btn.btn-warning,
html body .datatable-body .btn.btn-light-warning, html body .table tbody .btn.btn-light-warning { color: var(--im-atencao); }
html body .datatable-body .btn.btn-info, html body .table tbody .btn.btn-info,
html body .datatable-body .btn.btn-light-info, html body .table tbody .btn.btn-light-info { color: var(--im-info); }
html body .datatable-body .btn.btn-dark, html body .table tbody .btn.btn-dark,
html body .datatable-body .btn.btn-secondary, html body .table tbody .btn.btn-secondary { color: var(--im-texto); }

html body .datatable-body .btn:hover:not(.btn-text),
html body .table tbody .btn:hover:not(.btn-text) {
	background-color: var(--im-nevoa-clara);
	border-color: var(--im-nevoa-clara);
}

html body .datatable-body .btn.btn-danger:hover:not(.btn-text),
html body .table tbody .btn.btn-danger:hover:not(.btn-text) {
	background-color: var(--im-erro-fundo);
	border-color: var(--im-erro-fundo);
	color: var(--im-erro);
}

/* cartões da visão "Grade" */
html body .card.card-custom.example-compact > .card-header {
	min-height: 56px;
	padding-top: 8px;
	padding-bottom: 8px;
}

html body .card.card-custom.example-compact > .card-header .card-title,
html body .card.card-custom.example-compact > .card-header .card-title h3 {
	font-family: var(--im-fonte);
	font-size: 15px !important; /* o HTML legado força 12–15px inline */
	font-weight: 700;
	height: auto !important;
	line-height: 1.3;
}

html body .kt-widget__info {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px dashed #E6E9F1;
	font-size: 14px;
}

html body .kt-widget__info:last-of-type { border-bottom: 0; }
html body .kt-widget__info .kt-widget__label { color: var(--im-texto-2); font-weight: 500; }

html body .kt-widget__info .kt-widget__data,
html body .kt-widget__info .kt-widget__data.text-success,
html body .kt-widget__info .kt-widget__data.text-info {
	color: var(--im-texto) !important;
	font-weight: 600;
	text-align: right;
}

/* menus de ações antigos (navi) */
html body .dropdown-menu .navi .navi-header { padding: 10px 16px 6px; }
html body .dropdown-menu .navi .navi-header .font-size-lg {
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--im-texto-2);
}
html body .dropdown-menu .navi .navi-item .navi-link { border-radius: 10px; margin: 0 6px; padding: 8px 10px; }
html body .dropdown-menu .navi .navi-item .navi-link:hover { background: #F3F5FC; }
html body .dropdown-menu .navi .navi-item .navi-link .label.label-inline {
	background: transparent;
	padding: 0;
	height: auto;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--im-texto);
}
html body .dropdown-menu .navi .navi-item .navi-link .label.label-light-danger { color: var(--im-erro); }

/* botões grandes do topo das listas antigas: mesma altura dos novos */
html body .content .card-body .btn.btn-lg {
	height: 44px;
	padding: 0 18px;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

html body .content .card-body .btn.btn-lg i { font-size: 17px; padding: 0; }

/* =====================================================================
 * Tela de login (resources/views/login/access.blade.php)
 * ===================================================================== */

.im-login {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	background: var(--im-papel);
}

.im-login-marca {
	position: relative;
	overflow: hidden;
	background: var(--im-tinta);
	color: #FFFFFF;
	padding: 56px 64px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

.im-login-simbolo {
	position: absolute;
	right: -120px;
	bottom: -80px;
	width: 520px;
	height: 620px;
	opacity: .07;
	pointer-events: none;
}

.im-login-simbolo ellipse { fill: var(--im-nevoa); }
.im-login-simbolo path { fill: #FFFFFF; }

.im-login-logo { height: 52px; width: auto; align-self: flex-start; position: relative; }

.im-login-chamada { position: relative; max-width: 520px; }

html body .im-login-chamada h1 {
	margin: 0 0 28px;
	font-family: var(--im-fonte-titulo);
	font-size: 44px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: #FFFFFF;
}

.im-login-chamada h1 span { color: var(--im-nevoa); }

.im-login-chamada ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.im-login-chamada li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #C9D3E6; }
.im-login-chamada li i {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgba(143, 170, 205, .14);
	color: var(--im-nevoa);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
}

.im-login-rodape { position: relative; font-size: 13px; color: #8C97B3; }

.im-login-area {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
}

.im-login-cartao { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }

.im-login-logo-celular { display: none; height: 72px; width: auto; align-self: center; margin-bottom: 8px; }

html body .im-login-cartao h2 {
	margin: 0 0 4px;
	font-family: var(--im-fonte-titulo);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--im-texto);
}

.im-login-sub { margin: 0 0 20px; color: var(--im-texto-2); font-size: 15px; }

.im-login-cartao .im-aviso { margin-bottom: 16px; }

html body .im-login-cartao .form-group { margin-bottom: 16px; }
html body .im-login-cartao label { font-size: 14px; margin-bottom: 6px; }

html body .im-login-cartao .form-control {
	height: 48px;
	padding: 0 14px;
	border-radius: 12px;
	font-size: 15px;
	background: var(--im-branco);
}

.im-login-linha { display: flex; align-items: baseline; justify-content: space-between; }
html body .im-login-linha a { font-size: 14px; font-weight: 600; }

html body .im-login-lembrar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 20px;
	font-weight: 500;
	color: var(--im-texto-2);
	cursor: pointer;
}

html body .im-login-lembrar input { width: 16px; height: 16px; accent-color: var(--im-indigo); }

html body .btn.im-login-entrar { height: 48px; font-size: 16px; }
html body .btn.im-login-secundario { height: 44px; margin-top: 10px; display: flex; align-items: center; justify-content: center; }

html body .im-login-suporte {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--im-texto-2);
}

html body .im-login-suporte i { font-size: 20px; color: var(--im-sucesso); }
html body .im-login-suporte:hover { color: var(--im-texto); text-decoration: none; }

@media (max-width: 991.98px) {
	.im-login { grid-template-columns: 1fr; }
	.im-login-marca { display: none; }
	.im-login-logo-celular { display: block; }
	.im-login-area { align-items: flex-start; padding-top: 48px; }
}

/* =====================================================================
 * Painel inicial (resources/views/default/grafico.blade.php)
 * Faixas: saudação · números do período · gráfico + atenção · vendas + atalhos
 * ===================================================================== */

.im-painel { gap: 24px; }

.im-painel-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

html body .im-painel-topo h1 {
	margin: 0;
	font-family: var(--im-fonte-titulo);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--im-texto);
}

.im-painel-data { margin: 4px 0 0; font-size: 14px; color: var(--im-texto-2); }
.im-painel-data::first-letter { text-transform: uppercase; }

.im-painel-topo-acoes { display: flex; align-items: center; gap: 8px; }

html body .im-chip-filtro.active { background: var(--im-tinta); color: #FFFFFF; }

/* números do período */
.im-kpis { display: grid; gap: 16px; }
.im-kpis.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.im-kpis.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }

html body .im-kpi {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 128px;
	padding: 20px;
	border-radius: 18px;
	background: var(--im-branco);
	border: 1px solid var(--im-borda);
	color: var(--im-texto);
	text-decoration: none;
}

html body a.im-kpi:hover { border-color: var(--im-borda-forte); color: var(--im-texto); text-decoration: none; }

html body .im-kpi.principal { background: var(--im-tinta); border-color: var(--im-tinta); color: #FFFFFF; }
html body .im-kpi.principal .im-kpi-rotulo,
html body .im-kpi.principal .im-kpi-rodape { color: #AEB8D0; }
html body .im-kpi.principal .im-kpi-rotulo i { color: var(--im-nevoa); }

.im-kpi-rotulo {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--im-texto-2);
}

.im-kpi-rotulo i { font-size: 17px; color: var(--im-indigo); }

.im-kpi-valor {
	margin-top: auto;
	font-family: var(--im-fonte-mono);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	white-space: nowrap;
}

.im-kpi-valor small { font-size: 15px; font-weight: 400; opacity: .7; }
.im-kpi-rodape { font-size: 12.5px; color: var(--im-texto-2); }

/* linhas de blocos: 2/3 + 1/3 */
.im-painel-linha {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}

.im-painel-linha > .im-bloco:only-child { grid-column: 1 / -1; }

.im-bloco {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--im-branco);
	border: 1px solid var(--im-borda);
	border-radius: 18px;
	overflow: hidden;
}

.im-bloco-topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 12px;
}

html body .im-bloco-topo h2 {
	margin: 0;
	font-family: var(--im-fonte-titulo);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--im-texto);
}

.im-bloco-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--im-texto-2); }
.im-bloco-links { display: flex; gap: 14px; font-size: 14px; font-weight: 600; padding-top: 2px; }

/* gráfico */
.im-grafico-area { position: relative; height: 290px; margin: 0 !important; padding: 0 16px 8px; }
.im-grafico-area canvas { width: 100% !important; height: 100% !important; }

.im-grafico-tipos {
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: 11px;
	background: var(--im-papel);
}

html body .im-grafico-tipos label {
	margin: 0;
	padding: 0 10px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--im-texto-2);
	cursor: pointer;
}

html body .im-grafico-tipos input { position: absolute; opacity: 0; pointer-events: none; }
html body .im-grafico-tipos label:has(input:checked) { background: var(--im-branco); color: var(--im-texto); box-shadow: 0 1px 3px rgba(22, 27, 51, .12); }
html body .im-grafico-tipos label:has(input:focus-visible) { outline: 2px solid var(--im-indigo); outline-offset: 1px; }

.im-grafico-periodo { margin-top: auto; padding: 10px 20px 16px; border-top: 1px solid #EEF0F5; }
html body.tema-escuro .im-grafico-periodo { border-top-color: #30344C; }

/* precisa da sua atenção */
.im-atencao-lista { list-style: none; margin: 0; padding: 0 10px 12px; }

html body .im-atencao-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 12px;
	color: var(--im-texto);
	text-decoration: none;
}

html body .im-atencao-item:hover { background: #F3F5FC; color: var(--im-texto); text-decoration: none; }
html body.tema-escuro .im-atencao-item:hover { background: #2B2F46; }

.im-atencao-icone {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	background: var(--im-indigo-suave);
	color: var(--im-indigo);
}

.im-atencao-item.erro .im-atencao-icone { background: var(--im-erro-fundo); color: var(--im-erro); }
.im-atencao-item.atencao .im-atencao-icone { background: var(--im-atencao-fundo); color: var(--im-atencao); }

.im-atencao-texto { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.im-atencao-texto > span { font-weight: 600; font-size: 14.5px; }
.im-atencao-texto small { font-size: 12.5px; color: var(--im-texto-2); }
.im-atencao-seta { color: var(--im-texto-2); font-size: 16px; }

.im-atencao-vazio {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px 20px 32px;
	text-align: center;
	color: var(--im-texto-2);
	font-size: 14.5px;
}

.im-atencao-vazio i {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--im-sucesso-fundo);
	color: var(--im-sucesso);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}

.im-atencao-vazio strong { color: var(--im-texto); }

/* últimas vendas */
.im-vendas-lista { list-style: none; margin: 0; padding: 0 20px 8px; }

.im-vendas-lista li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto 120px;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid #EEF0F5;
}

html body.tema-escuro .im-vendas-lista li { border-top-color: #30344C; }

.im-vendas-tipo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
	padding: 4px 0;
	border-radius: 8px;
	background: var(--im-papel);
	color: var(--im-texto-2);
}

.im-vendas-cliente { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.im-vendas-cliente > span { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-vendas-cliente small { font-size: 12.5px; color: var(--im-texto-2); }
.im-vendas-valor { font-family: var(--im-fonte-mono); font-weight: 500; font-size: 14.5px; text-align: right; white-space: nowrap; }

/* atalhos */
.im-atalhos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding: 0 16px 16px;
}

html body .im-atalho {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--im-borda);
	background: var(--im-branco);
	color: var(--im-texto);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

html body .im-atalho i { font-size: 20px; color: var(--im-indigo); flex-shrink: 0; }
html body .im-atalho:hover { border-color: var(--im-indigo); background: var(--im-indigo-suave); color: var(--im-texto); text-decoration: none; }

@media (max-width: 1199.98px) {
	.im-kpis.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.im-painel-linha { grid-template-columns: 1fr; }
	.im-painel-linha > .im-bloco-atencao { order: -1; }
}

@media (max-width: 767.98px) {
	html body .im-painel-topo h1 { font-size: 22px; }
	.im-painel-topo-acoes { width: 100%; }
	.im-painel-topo-acoes .im-chips { flex-grow: 1; }
	.im-kpis.quatro, .im-kpis.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
	html body .im-kpi { min-height: 108px; padding: 16px; }
	.im-kpi-valor { font-size: 19px; }
	.im-grafico-area { height: 220px; }
	.im-bloco-topo { flex-wrap: wrap; }
	.im-vendas-lista li { grid-template-columns: minmax(0, 1fr) auto; }
	.im-vendas-tipo, .im-vendas-lista .im-status { display: none; }
}

/* =====================================================================
 * Menu lateral v2 (protótipo aprovado): seções, ícones de traço, busca,
 * rodapé com a conta e painel lateral quando recolhido.
 * Marcação: default/menu_lateral + default/partials/menu_lateral_itens
 * ===================================================================== */

html body .brand { height: 64px; }

/* busca */
html body .im-aside-busca {
	flex-shrink: 0;
	margin: 12px 14px 4px;
	height: 40px;
	border-radius: 10px;
	background: var(--im-tinta-2);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px 0 4px;
	color: #8C97B3;
}

html body .im-aside-busca-icone {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #8C97B3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	padding: 0;
}

html body .im-aside-busca input {
	flex-grow: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	font: 400 14px var(--im-fonte);
	outline: none;
}

html body .im-aside-busca input::placeholder { color: #8C97B3; }
html body .im-aside-busca input::-webkit-search-cancel-button { filter: invert(.7); }
html body .im-aside-busca:focus-within { box-shadow: 0 0 0 2px rgba(143, 170, 205, .45); }

html body .im-aside-busca kbd {
	font: 500 11px var(--im-fonte-mono);
	padding: 2px 6px;
	border-radius: 6px;
	border: 1px solid #3A4466;
	background: transparent;
	color: #8C97B3;
	box-shadow: none;
}

/* seções */
html body .aside-menu .menu-nav { padding: 6px 12px 16px; }

html body .aside-menu .menu-nav > .menu-section.im-menu-secao {
	margin: 0;
	padding: 14px 12px 4px;
	height: auto;
}

html body .aside-menu .menu-nav > .menu-section.im-menu-secao .menu-text {
	margin: 0;
	font-family: var(--im-fonte);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6F7A99;
}

/* itens do primeiro nível */
html body .aside-menu .menu-nav > .menu-item > .menu-link {
	min-height: 38px;
	padding: 0 12px;
	margin-bottom: 1px;
	border-radius: 10px;
}

html body .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon.im-menu-icone {
	flex: 0 0 20px;
	width: 20px;
	margin-right: 12px;
	color: var(--im-nevoa);
}

html body .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon.im-menu-icone svg { width: 19px; height: 19px; }

html body .aside-menu .menu-nav > .menu-item > .menu-link .menu-text { font-size: 14.5px; font-weight: 500; color: #C9D3E6; }
html body .aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow { color: #6F7A99; }

/* aberto / ativo: fundo sutil em vez do bloco índigo cheio */
html body .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link,
html body .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
html body .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
html body .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link {
	background-color: var(--im-tinta-2);
}

html body .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text,
html body .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text,
html body .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
html body .aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-text { color: #FFFFFF; font-weight: 600; }

html body .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon.im-menu-icone,
html body .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-icon.im-menu-icone,
html body .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon.im-menu-icone,
html body .aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-icon.im-menu-icone { color: #FFFFFF; }

/* submenu: linha-guia à esquerda, sem marcadores */
html body .aside-menu .menu-nav > .menu-item > .menu-submenu > .menu-subnav {
	margin: 2px 0 6px 21px;
	padding: 0 0 0 10px;
	border-left: 1px solid #2E3656;
}

html body .aside-menu .menu-nav > .menu-item > .menu-submenu .menu-item.menu-item-parent { display: none; }
html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-bullet { display: none; }

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link {
	position: relative;
	min-height: 32px;
	margin: 1px 0;
	padding: 0 10px;
	border-radius: 8px;
}

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text { font-size: 14px; font-weight: 400; color: #AEB8D0; }

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:hover > .menu-link { background: rgba(143, 170, 205, .08); }
html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:hover > .menu-link .menu-text { color: #FFFFFF; }

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link { background: rgba(143, 170, 205, .14); }
html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-text { color: #FFFFFF; font-weight: 600; }

html body .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link::before {
	content: "";
	position: absolute;
	left: -11px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 3px;
	background: var(--im-nevoa);
}

/* busca: itens escondidos / grupos abertos à força */
html body .aside-menu .im-oculto { display: none !important; }
html body .aside-menu .menu-item.im-busca-aberto > .menu-submenu { display: block !important; height: auto !important; overflow: visible !important; }
html body .aside-menu .im-busca-destaque > .menu-link { background: rgba(143, 170, 205, .14); }
html body .im-busca-vazia { padding: 14px 12px; font-size: 13.5px; color: #8C97B3; }

/* rodapé: empresa, ambiente e usuário */
html body .im-aside-rodape {
	flex-shrink: 0;
	padding: 12px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	background: var(--im-tinta);
}

html body .im-aside-conta {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	background: #1C2240;
}

html body .im-aside-avatar {
	position: relative;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--im-indigo);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13.5px;
}

html body .im-aside-ambiente {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #F0B566;
	box-shadow: 0 0 0 2px #1C2240;
}

html body .im-aside-ambiente.producao { background: #3FB97C; }

html body .im-aside-conta-texto { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
html body .im-aside-empresa { font-size: 13.5px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .im-aside-conta-texto small { font-size: 12px; color: #8C97B3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

html body .im-aside-botao {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #8C97B3;
	font-size: 17px;
}

html body .im-aside-botao:hover { background: var(--im-tinta-2); color: #FFFFFF; text-decoration: none; }

/* ---------- recolhido (desktop) ---------- */
@media (min-width: 992px) {
	html body.aside-minimize:not(.aside-minimize-hover) .im-aside-busca {
		margin: 12px auto 4px;
		width: 44px;
		padding: 0;
		justify-content: center;
	}

	html body.aside-minimize:not(.aside-minimize-hover) .im-aside-busca input,
	html body.aside-minimize:not(.aside-minimize-hover) .im-aside-busca kbd { display: none; }

	html body.aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav { padding: 6px 0 16px; }

	html body.aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-section.im-menu-secao {
		height: 1px;
		margin: 8px 21px;
		padding: 0;
		background: #2E3656;
	}

	html body.aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-section.im-menu-secao .menu-text { display: none; }

	html body.aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item > .menu-link {
		width: 44px;
		margin: 0 auto 2px;
		padding: 0;
		justify-content: center;
	}

	html body.aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon.im-menu-icone { margin: 0; }

	html body.aside-minimize:not(.aside-minimize-hover) .im-aside-rodape { padding: 12px 0; }
	html body.aside-minimize:not(.aside-minimize-hover) .im-aside-conta { justify-content: center; padding: 8px 0; background: transparent; }
	html body.aside-minimize:not(.aside-minimize-hover) .im-aside-conta-texto,
	html body.aside-minimize:not(.aside-minimize-hover) .im-aside-botao { display: none; }

	/* o item com o painel aberto fica destacado */
	html body.aside-minimize .aside-menu .menu-nav > .menu-item.im-flyout-ativo > .menu-link { background-color: var(--im-tinta-2); }
	html body.aside-minimize .aside-menu .menu-nav > .menu-item.im-flyout-ativo > .menu-link .menu-icon.im-menu-icone { color: #FFFFFF; }
}

/* painel lateral (flyout) do menu recolhido — montado pelo imtegra-ui.js */
.im-menu-flyout {
	position: fixed;
	z-index: 1100;
	width: 244px;
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	padding: 8px;
	border-radius: 14px;
	background: #1C2240;
	border: 1px solid #2E3656;
	box-shadow: 0 18px 40px rgba(10, 14, 35, .4);
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-family: var(--im-fonte);
}

.im-menu-flyout[hidden] { display: none; }

.im-menu-flyout-titulo {
	padding: 8px 10px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--im-nevoa);
}

html body .im-menu-flyout a {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding: 0 10px;
	border-radius: 9px;
	font-size: 14px;
	color: #C9D3E6;
	text-decoration: none;
}

html body .im-menu-flyout a:hover,
html body .im-menu-flyout a:focus { background: rgba(143, 170, 205, .12); color: #FFFFFF; outline: none; }
html body .im-menu-flyout a.ativo { background: rgba(143, 170, 205, .16); color: #FFFFFF; font-weight: 600; }

/* =====================================================================
 * Celular (protótipo "Celular · MDF-e"): barra inferior, botão flutuante,
 * filtros recolhidos e topo compacto. Barra: default/partials/nav_celular.
 * ===================================================================== */

/* WhatsApp: sai de cima do menu lateral (canto esquerdo) para o canto direito */
html body .btn-whatsapp {
	left: auto;
	right: 20px;
	bottom: 20px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 24px;
	box-shadow: 0 8px 20px rgba(22, 27, 51, .22);
}

html body .wcard { left: auto; right: 20px; bottom: 80px; }

.im-nav-celular { display: none; }
html body .im-filtro-toggle { display: none; }

@media (max-width: 991.98px) {
	.im-nav-celular {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 97;
		height: 68px;
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
		background: var(--im-branco);
		border-top: 1px solid var(--im-borda);
		box-shadow: 0 -6px 20px rgba(22, 27, 51, .06);
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	html body .im-nav-celular a,
	html body .im-nav-celular button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		border: 0;
		background: transparent;
		border-radius: 12px;
		color: var(--im-texto-2);
		font: 600 11.5px var(--im-fonte);
		text-decoration: none;
	}

	.im-nav-celular svg { width: 22px; height: 22px; }
	html body .im-nav-celular a.ativo { color: var(--im-indigo); }
	html body .im-nav-celular a.ativo svg { stroke-width: 2.2; }

	/* conteúdo não fica escondido atrás da barra */
	html body .im-conteudo { padding-bottom: 96px; }

	html body .btn-whatsapp { right: auto; left: 16px; bottom: 84px; width: 44px; height: 44px; font-size: 22px; }
	html body .wcard { right: auto; left: 12px; bottom: 136px; max-width: calc(100vw - 24px); }
}

@media (max-width: 767.98px) {
	/* topo da página compacto */
	.im-pagina { gap: 14px; }
	.im-pagina-topo { gap: 10px; }
	.im-pagina-topo .im-trilha { display: none; }
	html body .im-pagina-topo h1 { font-size: 21px; }
	.im-conteudo > .im-pagina { padding-top: 18px; }

	/* ação principal da página vira botão flutuante (acima da barra inferior) */
	html body .im-pagina-acoes > .btn-primary.im-btn {
		position: fixed;
		right: 16px;
		bottom: 84px;
		z-index: 96;
		width: 56px;
		height: 56px;
		padding: 0;
		flex: none;
		border-radius: 18px;
		font-size: 0;
		background: var(--im-ambar);
		border-color: var(--im-ambar);
		color: var(--im-tinta);
		box-shadow: 0 10px 24px rgba(224, 123, 46, .38);
	}

	html body .im-pagina-acoes > .btn-primary.im-btn i { font-size: 26px; margin: 0; }
	html body .im-pagina-acoes > .btn-primary.im-btn:hover,
	html body .im-pagina-acoes > .btn-primary.im-btn:focus { background: #CF6D22; border-color: #CF6D22; color: var(--im-tinta); }

	/* botões secundários do topo em uma linha, com rolagem se precisar */
	.im-pagina-acoes { flex-wrap: nowrap; overflow-x: auto; }
	html body .im-pagina-acoes .im-btn { flex: 0 0 auto; height: 40px; font-size: 14px; }

	/* chips de status em uma linha só, com rolagem lateral */
	.im-chips { flex-wrap: nowrap; }
	html body .im-chip-filtro { flex-shrink: 0; }

	/* filtros recolhidos atrás do botão "Filtros" (montado pelo imtegra-ui.js) */
	html body .im-filtro-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		padding: 0 14px;
		border: 1px solid var(--im-borda-forte);
		border-radius: 10px;
		background: var(--im-branco);
		color: var(--im-texto);
		font: 600 14px var(--im-fonte);
	}

	html body .im-filtro-toggle .im-filtro-ativo { width: 8px; height: 8px; border-radius: 50%; background: var(--im-ambar); }
	html body .im-recolhivel:not(.aberto) { display: none !important; }
	.im-filtros { gap: 10px; }
}

/* =====================================================================
 * Tema escuro (usuários com tema = 2, body.tema-escuro)
 * O escuro.css força texto branco em td/label/h*; aqui as superfícies dos
 * componentes novos (im-*) também ficam escuras, para o texto continuar legível.
 * ===================================================================== */

body.tema-escuro {
	--im-branco: #262A3F;
	--im-papel: #1E1E2D;
	--im-texto: #F1F3F9;
	--im-texto-2: #AEB8D0;
	--im-borda: #363B55;
	--im-borda-forte: #474D6B;
	--im-indigo-suave: #2D3464;
	--im-nevoa-clara: #323857;
	--im-sucesso-fundo: #1D3A2E;
	--im-atencao-fundo: #3D3120;
	--im-erro-fundo: #45262A;
	--im-info-fundo: #22344A;
	--im-sucesso: #6FCF9B;
	--im-atencao: #F0B566;
	--im-erro: #F28B82;
	--im-info: #8CBDEB;
}

html body.tema-escuro .im-tabela thead th { background: #2C3049; }
html body.tema-escuro .im-tabela tbody td { border-bottom-color: #30344C; }
html body.tema-escuro .im-tabela tbody tr:hover td { background: #2B2F46; }
html body.tema-escuro .im-status.pendente { color: #AFBCF2; }
html body.tema-escuro .im-status.cancelado { background: #30344C; color: #AEB8D0; }
html body.tema-escuro .im-menu-acoes .im-menu-item:hover,
html body.tema-escuro .im-menu-acoes .im-menu-item:focus { background: #30355A; }
html body.tema-escuro .im-menu-acoes .im-menu-divisor { background: #30344C; }
html body.tema-escuro .dropdown-menu { background: var(--im-branco); }
html body.tema-escuro .im-aviso.atencao { color: #F0C98E; }
html body.tema-escuro .im-aviso.info { color: #C6CFF5; }

/* espaço entre o conteúdo e o menu lateral / bordas da tela
   (o .content do Metronic só tem espaçamento vertical) */
.im-conteudo { padding: 0 28px 32px; }
.im-conteudo > .im-pagina { padding-top: 28px; }

@media (max-width: 991.98px) {
	.im-conteudo { padding: 0 16px 24px; }
	.im-conteudo > .im-pagina { padding-top: 24px; }
}

@media (max-width: 575.98px) {
	.im-conteudo { padding: 0 12px 20px; }
}