/* ═══════════════════════════════════════════════════════════════════
PRINT.CSS — Estilos de impressão · Orizendash / Mission Control
v20260501-print
Filosofia:
• Fundo branco, texto preto — legível em P&B e laser colorida
• Identidade preservada: tipografia Archivo, estrutura editorial
• Nenhum ruído de interface (sidebars, botões, filtros interativos)
• Cabeçalho e rodapé automáticos em todas as páginas
• Tabelas: thead repetido em cada página
• Gráficos ECharts/Canvas: print-color-adjust: exact
Estados especiais:
• body.mc-print-all → imprime a aba inteira atual
• body.mc-print-table-{id} → imprime apenas uma tabela específica
Ambos são adicionados por MCPrint.js antes de window.print()
e removidos no evento 'afterprint'.
⚠ NÃO alterar classes JS-bound.
⚠ NÃO alterar lógica de exportação CSV/PDF existente.
═══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
CONFIGURAÇÃO DE PÁGINA — @page rules
════════════════════════════════════════════════════════════════════ */
/* ── A4 LANDSCAPE — orientação padrão do Mission Control ──────────────
Área útil: ~277 × 190 mm (A4 landscape com 10mm de margem).
O usuário NÃO precisa alterar manualmente no diálogo de impressão.
Classe alternativa .print-portrait disponível para exceções pontuais
(ex: tabela com 20+ colunas em retrato). ────────────────────────── */
@page {
size: A4 landscape;
margin: 10mm 12mm 20mm 12mm; /* bottom maior: acomoda rodapé @page */
/* ── Problema 1: Paginação — Fix v20260505 ─────────────────────────
counter(pages) DEVE estar dentro de @page margin-box para funcionar.
Usar @bottom-center/right diretamente no CSS é o único método
garantido no Chrome/Edge/Safari ao salvar PDF.
O div .mc-print-footer injetado por JS ainda existe como fallback
para navegadores que não suportam @page margin-boxes (Firefox < 128).
A regra abaixo tem precedência sobre o div quando o browser suporta.
────────────────────────────────────────────────────────────────────── */
@bottom-left {
content: 'orizendash · Mission Control';
font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
font-size: 8.5px;
color: #777777;
}
@bottom-right {
content: 'Pág. ' counter(page) ' de ' counter(pages);
font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
font-size: 8.5px;
color: #777777;
}
}
/* Exceção pontual: retrato para tabelas muito altas */
@page portrait-page {
size: A4 portrait;
margin: 12mm 14mm 20mm 14mm;
@bottom-left { content: 'orizendash · Mission Control'; font-family: 'Archivo', sans-serif; font-size: 8.5px; color: #777777; }
@bottom-right { content: 'Pág. ' counter(page) ' de ' counter(pages); font-family: 'Archivo', sans-serif; font-size: 8.5px; color: #777777; }
}
/* Primeira página: margem superior ligeiramente maior para cabeçalho */
@page :first {
margin-top: 10mm;
}
/* ════════════════════════════════════════════════════════════════════
@MEDIA PRINT — reset e base
════════════════════════════════════════════════════════════════════ */
@media print {
/* ── Reset global ──────────────────────────────────────────────── */
*,
*::before,
*::after {
/* Garante que backgrounds e cores sejam impressos */
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
/* Remove box-shadow decorativo */
box-shadow: none !important;
/* Transições não fazem sentido em print */
transition: none !important;
animation: none !important;
}
/* ── Base de página ────────────────────────────────────────────── */
html,
body {
background: #FFFFFF !important;
color: #111111 !important;
font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 12px !important;
line-height: 1.5 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
#root {
overflow: visible !important;
width: 100% !important;
height: auto !important;
}
/* ════════════════════════════════════════════════════════════════
ELEMENTOS OCULTOS EM IMPRESSÃO (sempre)
════════════════════════════════════════════════════════════════ */
/* Interface de navegação */
.sidebar,
.nav,
.header,
.app-header { display: none !important; }
/* Topbar MC e controles interativos */
.mc-topbar,
.mc-tabs,
.mc-filterbar-wrap,
.mc-btn-back,
.mc-btn-export,
.mc-btn-print, /* botão imprimir (ele mesmo) */
.mc-print-btn,
[data-print-hide] { display: none !important; }
/* Barra de filtros interativa */
.filter-bar,
.filter-bar-header,
.filter-bar-actions,
.active-filters,
.grl-preset-bar { display: none !important; }
/* Botões de ação e exportação */
.btn-mc,
.mc-csv-btn,
.header-actions,
.mc-table-toolbar-right { display: none !important; }
/* Modais, tooltips, overlays */
.od-root,
.od-portal,
.tooltip-bubble,
.loading-overlay,
.modal,
.modal-overlay { display: none !important; }
/* Drill-down modal do waterfall (F4-2 / F5-C) — overlay fixo */
[style*="position: fixed"][style*="z-index: 9000"],
[style*="position:fixed"][style*="z-index:9000"] { display: none !important; }
/* Upload screen e auth */
.upload-screen,
.login-screen { display: none !important; }
/* Elementos decorativos */
.mc-topbar-divider,
.mc-topbar-sub,
.analytic-toolbar__sep,
.chart-card-title-icon { display: none !important; }
/* Banner de migração F3-A (Comissão na Margem) */
.mc-fin-banner-comissao { display: none !important; }
/* Pill de filtro ativo do funil (Expedição) — botão interativo */
.exp-funnel-filter-badge { display: none !important; }
/* FinConfig — ocultar controles de edição interativos em impressão.
A coluna "Ações" e o form "Adicionar SKU" não têm valor documental;
a tabela SKU×CMV e os valores de toggle permanecem visíveis. */
.fin-cfg-actions-col,
.fin-cfg-add-row,
.fin-cfg-bottom-actions { display: none !important; }
/* Toggle Por Pedido/Por Unidade (FinConfig / Produtos) */
.mc-toggle-group,
[data-print-hide] { display: none !important; }
/* Filtros locais de tabela (Expedição, Representantes, etc.) */
.lg-filter-group,
.mc-filterbar-wrap { display: none !important; }
/* ════════════════════════════════════════════════════════════════
ELEMENTOS VISÍVEIS APENAS EM IMPRESSÃO
════════════════════════════════════════════════════════════════ */
/* Cabeçalho injetado por MCPrint.js — visível em print.
Rodapé (.mc-print-footer) é oculto em Chrome/Edge/Safari pois
@page @bottom-right resolve a paginação diretamente na margin-box.
Ver seção RODAPÉ abaixo para explicação completa. */
.mc-print-header { display: block !important; }
/* ════════════════════════════════════════════════════════════════
LAYOUT PRINCIPAL — mc-shell e mc-content
════════════════════════════════════════════════════════════════ */
/* ── Problema 2: KPI/gráficos ausentes — Fix v20260505 ─────────────
mc-shell tem height:100vh + overflow:hidden em mc.css.
mc-content tem flex:1 + overflow-y:auto.
mc-page (Representantes, Produtos) pode ter height:100%.
Todos precisam de overflow:visible + height:auto em @media print
para que o conteúdo abaixo do viewport apareça no PDF.
────────────────────────────────────────────────────────────────────── */
.mc-shell {
display: block !important;
flex-direction: column !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
background: #FFFFFF !important;
}
.mc-content,
.content {
display: block !important;
flex: none !important; /* cancela flex:1 que limita altura */
overflow: visible !important;
overflow-y: visible !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
background: #FFFFFF !important;
color: #111111 !important;
}
/* mc-page: wrapper de Representantes e Produtos */
.mc-page {
display: block !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
/* App shell: remover flex/grid limitadores */
.app-shell,
.main-area {
display: block !important;
overflow: visible !important;
height: auto !important;
}
/* ════════════════════════════════════════════════════════════════
CABEÇALHO DE IMPRESSÃO — .mc-print-header
Injetado por MCPrint.js como primeiro filho de .mc-shell
════════════════════════════════════════════════════════════════ */
.mc-print-header {
width: 100%;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid #111111;
page-break-after: avoid;
break-after: avoid;
}
.mc-print-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.mc-print-logo {
display: flex;
align-items: center;
gap: 8px;
}
.mc-print-logo-icon {
width: 28px;
height: 28px;
background: #111111;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 12px;
flex-shrink: 0;
}
.mc-print-logo-text {
font-family: 'Archivo', sans-serif;
font-size: 16px;
font-weight: 700;
color: #111111;
letter-spacing: -0.02em;
line-height: 1;
}
.mc-print-logo-text b {
font-weight: 800;
}
.mc-print-logo-sub {
font-size: 9px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #555555;
margin-top: 2px;
}
.mc-print-title {
font-family: 'Archivo', sans-serif;
font-size: 18px;
font-weight: 700;
color: #111111;
letter-spacing: -0.02em;
}
.mc-print-meta {
font-family: 'Archivo', sans-serif;
font-size: 10px;
color: #555555;
text-align: right;
line-height: 1.4;
}
.mc-print-meta strong { color: #111111; font-weight: 600; }
.mc-print-filters {
font-family: 'Archivo', sans-serif;
font-size: 10px;
color: #555555;
line-height: 1.5;
padding-top: 4px;
}
.mc-print-filters strong {
color: #111111;
font-weight: 600;
margin-right: 4px;
}
.mc-print-filter-tag {
display: inline-block;
padding: 1px 6px;
margin: 1px 3px 1px 0;
border: 1px solid #CCCCCC;
border-radius: 3px;
font-size: 9px;
color: #333333;
background: #F5F5F5;
}
/* ════════════════════════════════════════════════════════════════
RODAPÉ DE IMPRESSÃO — .mc-print-footer
Problema 1 fix v20260505:
A paginação real é feita via @page @bottom-right (acima).
O div .mc-print-footer serve como FALLBACK para Firefox < 128
que não suporta @page margin-boxes.
Em Chrome/Edge/Safari o div fica oculto pois o @page margem
já exibe o counter correto.
════════════════════════════════════════════════════════════════ */
.mc-print-footer {
/* Oculto em Chrome/Edge/Safari: @page @bottom-* já resolve.
Mantido como fallback para Firefox via display:none condicional.
Se quiser fallback visível em Firefox, mude para display:flex. */
display: none !important;
}
/* Fallback de texto de paginação para browsers sem @page margin-box.
Ativado removendo o display:none acima se necessário. */
.mc-print-footer-left { text-align: left; }
.mc-print-footer-right { text-align: right; }
.mc-print-footer-page::after {
content: counter(page) ' de ' counter(pages);
}
/* ════════════════════════════════════════════════════════════════
TIPOGRAFIA — escala A4
════════════════════════════════════════════════════════════════ */
/* Títulos de seção / página */
.mc-page-title,
.section-title,
h1, h2 {
font-size: 18px !important;
font-weight: 700 !important;
color: #111111 !important;
margin-bottom: 4px !important;
line-height: 1.25 !important;
}
.mc-page-sub,
.mc-page-subtitle,
.section-subtitle,
h3 {
font-size: 12px !important;
font-weight: 400 !important;
color: #444444 !important;
margin-bottom: 8px !important;
}
/* Labels de seção */
.mc-section-label {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #777777 !important;
margin-bottom: 6px !important;
}
/* Page header */
.mc-page-header {
margin-bottom: 12px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid #DDDDDD !important;
}
/* ════════════════════════════════════════════════════════════════
KPI CARDS — .mc-kpi, .mc-kpi-accent, .kpi-card
════════════════════════════════════════════════════════════════ */
/* KPI row: em paisagem há espaço para até 6 colunas.
Usa auto-fill com min 120px para adaptar ao número de KPIs. */
.mc-kpi-row {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
gap: 6px !important;
margin-bottom: 10px !important;
}
.mc-kpi {
background: #F8F8F8 !important;
border: 1px solid #DDDDDD !important;
border-radius: 4px !important;
padding: 10px 12px !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
}
.mc-kpi-accent {
width: 3px !important;
height: 100% !important;
background: #333333 !important; /* cinza escuro em P&B */
}
/* Variantes de cor → cinza em impressão */
.mc-kpi-accent.blue,
.mc-kpi-accent.green,
.mc-kpi-accent.red,
.mc-kpi-accent.purple,
.mc-kpi-accent.orange,
.mc-kpi-accent.cyan { background: #555555 !important; }
.mc-kpi-label {
font-size: 9px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #666666 !important;
}
.mc-kpi-value {
font-size: 22px !important;
font-weight: 700 !important;
color: #111111 !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
}
.mc-kpi-footer {
font-size: 10px !important;
color: #555555 !important;
margin-top: 3px !important;
}
/* kpi-card do dashboard principal
Fix 2 residual · v20260505: kpis.css linha 40 define overflow:hidden no .kpi-card
para o pseudo-elemento ::before decorativo. Em impressão esse overflow impede
que sub-elementos (ex: spark) apareçam corretamente; forçar visible. */
.kpi-card {
background: #F8F8F8 !important;
border: 1px solid #DDDDDD !important;
color: #111111 !important;
overflow: visible !important; /* cancela kpis.css overflow:hidden */
break-inside: avoid !important;
page-break-inside: avoid !important;
}
.kpi-card-value { color: #111111 !important; }
.kpi-card-label { color: #555555 !important; }
/* ════════════════════════════════════════════════════════════════
CARDS — .mc-card, .analytic-container, .chart-card
════════════════════════════════════════════════════════════════ */
.mc-card,
.analytic-container,
.chart-card {
background: #FFFFFF !important;
border: 1px solid #DDDDDD !important;
border-radius: 4px !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
margin-bottom: 10px !important;
}
.mc-card-header,
.analytic-header,
.chart-card-header {
background: #F3F3F3 !important;
border-bottom: 1px solid #DDDDDD !important;
padding: 8px 12px !important;
}
.mc-card-title,
.analytic-header__title,
.chart-card-title {
font-size: 11px !important;
font-weight: 700 !important;
color: #111111 !important;
letter-spacing: 0.05em !important;
}
.mc-card-sub,
.chart-card-sub {
font-size: 10px !important;
color: #555555 !important;
}
.mc-card-badge {
font-size: 9px !important;
color: #555555 !important;
background: #EEEEEE !important;
border: 1px solid #CCCCCC !important;
}
/* ════════════════════════════════════════════════════════════════
GRIDS DE CHARTS — layout A4 landscape (~277 mm úteis)
Regras em ordem de especificidade crescente.
════════════════════════════════════════════════════════════════ */
/* Base: 1 coluna (fallback seguro) */
.mc-charts-1,
.mc-charts-2,
.mc-charts-3,
.mc-charts-4,
.mc-charts-2-1,
.mc-charts-1-2,
.charts-grid,
.chart-rules-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
/* 2 gráficos lado a lado — layout padrão em paisagem */
.mc-charts-2,
.mc-charts-2-1,
.mc-charts-1-2 {
grid-template-columns: 1fr 1fr !important;
}
/* 3 gráficos em linha — paisagem tem largura para isso */
.mc-charts-3 {
grid-template-columns: 1fr 1fr 1fr !important;
}
/* 4 gráficos: grade 2×2 para manter altura legível */
.mc-charts-4 {
grid-template-columns: 1fr 1fr !important;
}
/* Alturas dos gráficos: max-height para nunca quebrar na metade
Em paisagem temos ~190mm úteis; cabeçalho ocupa ~22mm; gráfico máx 80mm */
.mc-echarts {
height: 180px !important;
max-height: 80mm !important;
width: 100% !important;
max-width: 100% !important;
}
/* ── Snapshot ECharts (Parte 2) ────────────────────────────────
MCPrint.js gera .mc-print-chart (![]()
PNG) e adiciona
.mc-screen-chart ao canvas original antes de window.print().
Em tela: img oculta, canvas visível.
Em print: canvas oculto, img visível. ──────────────────────── */
/* Imagem PNG gerada pelo MCPrint.js — visível apenas em impressão */
.mc-print-chart {
display: block !important;
max-width: 100% !important;
height: auto !important;
border: 1px solid #EEEEEE !important;
border-radius: 2px !important;
background: #FFFFFF !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Canvas ECharts: oculto em impressão quando snapshot existe */
.mc-screen-chart {
display: none !important;
}
/* Canvas sem snapshot (fallback — continua visível) */
.mc-echarts canvas:not(.mc-screen-chart) {
display: block !important;
max-width: 100% !important;
}
/* Chart container genérico */
.chart-container,
.chart-card-body {
padding: 10px !important;
}
/* ════════════════════════════════════════════════════════════════
TABELAS — .mc-table, .data-table, table
════════════════════════════════════════════════════════════════ */
/* Wrapper: remover scroll horizontal */
.mc-table-wrap,
.data-table-scroll,
.table-wrapper {
overflow: visible !important;
width: 100% !important;
max-width: 100% !important;
}
/* Toolbar: mostrar apenas lado esquerdo (título + contagem) */
.mc-table-toolbar {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 6px !important;
padding: 0 !important;
}
/* Ocultar busca e botões no toolbar — já ocultamos acima */
.mc-table-toolbar input,
.mc-table-toolbar .mc-csv-btn,
.mc-table-toolbar .mc-print-btn { display: none !important; }
/* Tabela base — Problema 5 fix: table-layout:auto permite que o
browser calcule larguras baseado no conteúdo, evitando colapso
de colunas numéricas estreitas que produz "27d11d" concatenado.
table-layout:fixed só é seguro quando as colunas têm width definido;
sem isso, comprime tudo igualmente e remove separação visual. */
.mc-table,
.data-table,
table {
width: 100% !important;
border-collapse: collapse !important;
font-size: 10px !important;
color: #111111 !important;
table-layout: auto !important; /* fix: era fixed, causava dias colados */
}
/* Thead: repetir em cada página */
.mc-table thead,
.data-table thead,
thead {
display: table-header-group !important;
background: #F0F0F0 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Células de cabeçalho — Problema 6 fix v20260505:
text-transform:uppercase em PDF pode corromper glyphs acentuados
(ex: "Última" → "ÚLTIMA" em fontes de fallback).
Solução: manter uppercase mas REMOVER letter-spacing que fragmenta
caracteres compostos; adicionar font-variant-numeric para dígitos. */
.mc-table thead th,
.data-table thead th,
thead th {
padding: 6px 8px !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important; /* reduzido: 0.07→0.04 evita fragmentação */
text-transform: uppercase !important;
color: #333333 !important;
background: #F0F0F0 !important;
border-bottom: 2px solid #CCCCCC !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Células de corpo — Problemas 4+5+6 fix v20260505:
word-break:break-word partia datas ("07/04" → "07/" + quebra + "04")
e nomes acentuados ("Brasília" → "Bras" + quebra + "ília").
overflow-wrap:anywhere é mais preciso: só quebra quando absolutamente
necessário (palavra maior que a célula), preservando separadores.
Datas e cidades curtas nunca serão quebradas.
Adicionado min-width:0 para que table-layout:fixed distribua
corretamente sem colapsar células numéricas. */
.mc-table tbody td,
.data-table tbody td,
tbody td {
padding: 5px 8px !important;
font-size: 10px !important;
color: #111111 !important;
border-bottom: 1px solid #EEEEEE !important;
word-break: normal !important; /* fix datas e acentos */
overflow-wrap: anywhere !important; /* quebra só quando célula é muito estreita */
vertical-align: top !important;
min-width: 0 !important;
}
/* Colunas numéricas: garantir largura mínima para não colapsar
Problema 5: "27d11d" = duas células sem espaço entre elas.
min-width nas td .center e .right garante padding visual. */
.mc-table tbody td.center,
.data-table tbody td.center,
tbody td.center {
min-width: 40px !important;
padding-left: 4px !important;
padding-right: 4px !important;
white-space: nowrap !important; /* dígitos nunca quebram */
}
.mc-table tbody td.right,
.data-table tbody td.right,
tbody td.right {
min-width: 60px !important;
white-space: nowrap !important;
}
/* Células de data: nunca quebrar o separador "/"
Problema 4: "07042026" = data sem separador por quebra interna. */
.mc-table tbody td:not(.center):not(.right):not(.mono),
.data-table tbody td:not(.center):not(.right):not(.mono) {
max-width: 200px !important;
}
/* Linhas: evitar quebra no meio */
.mc-table tbody tr,
.data-table tbody tr,
tbody tr {
break-inside: avoid !important;
page-break-inside: avoid !important;
}
/* Linhas zebradas suaves */
.mc-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
tbody tr:nth-child(even) {
background: #FAFAFA !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Remover hover */
.mc-table tbody tr:hover,
.data-table tbody tr:hover,
tbody tr:hover {
background: inherit !important;
}
/* Células especiais */
.mc-table td.primary,
.data-table td.primary { font-weight: 600 !important; color: #111111 !important; }
.mc-table td.mono,
.data-table td.mono { font-family: 'JetBrains Mono', monospace !important; font-size: 9px !important; }
/* Rank badge */
.mc-rank-badge,
.rank-badge {
background: #EEEEEE !important;
color: #333333 !important;
border: 1px solid #CCCCCC !important;
font-size: 9px !important;
}
/* Status badges — tons de cinza em impressão */
.mc-status,
.status-badge {
background: #EEEEEE !important;
color: #333333 !important;
border: 1px solid #CCCCCC !important;
font-size: 9px !important;
padding: 1px 5px !important;
}
.mc-status.entregue { background: #E8F5E9 !important; border-color: #BBCCBB !important; }
.mc-status.cancelado { background: #FDECEA !important; border-color: #CCBBBB !important; }
.mc-status.enviado { background: #E3F2FD !important; border-color: #BBCCDD !important; }
/* Days badge */
.mc-days-badge {
font-size: 9px !important;
padding: 1px 5px !important;
background: #EEEEEE !important;
color: #333333 !important;
border: 1px solid #CCCCCC !important;
}
/* Paginação: ocultar em impressão (imprime tudo) */
.mc-pagination,
.mc-pagination-controls,
.pagination { display: none !important; }
/* Empty state de tabela: ocultar em print */
.mc-empty { display: none !important; }
/* ════════════════════════════════════════════════════════════════
RANKING LISTS — .mc-ranking-list, .mc-ranking-item
════════════════════════════════════════════════════════════════ */
.mc-ranking-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mc-ranking-item {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 0 !important;
border-bottom: 1px solid #EEEEEE !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
}
.mc-rank-num { font-size: 9px !important; color: #888888 !important; min-width: 14px !important; }
.mc-rank-label { font-size: 10px !important; color: #111111 !important; flex: 1 !important; }
.mc-rank-value { font-size: 10px !important; font-weight: 600 !important; color: #111111 !important; }
/* Barras de ranking: converter para cinza */
.mc-rank-bar-wrap {
flex: 1 !important;
height: 6px !important;
background: #EEEEEE !important;
border-radius: 2px !important;
overflow: hidden !important;
}
.mc-rank-bar {
height: 6px !important;
background: #555555 !important;
border-radius: 2px !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Variantes de cor → cinza uniforme */
.mc-rank-bar.blue,
.mc-rank-bar.green,
.mc-rank-bar.purple,
.mc-rank-bar.orange,
.mc-rank-bar.cyan,
.mc-rank-bar.red { background: #555555 !important; }
/* ════════════════════════════════════════════════════════════════
SECTION BREAKS — quebras entre seções principais
════════════════════════════════════════════════════════════════ */
/* Cada seção MC começa em nova página se for grande */
.mc-section-break {
page-break-before: always !important;
break-before: page !important;
}
/* Evitar orphans em cards e itens de lista */
.mc-card,
.mc-kpi,
.kpi-card,
.mc-ranking-item,
.chart-card {
orphans: 3 !important;
widows: 3 !important;
}
/* ════════════════════════════════════════════════════════════════
ORDER DETAIL — .od-* (se aberto, imprimir o detalhe)
════════════════════════════════════════════════════════════════ */
.od-root { display: none !important; }
/* Se body tiver classe mc-print-order-detail, mostrar apenas od */
body.mc-print-order-detail .mc-shell { display: none !important; }
body.mc-print-order-detail .od-root { display: block !important; }
body.mc-print-order-detail .od-nav { display: none !important; }
body.mc-print-order-detail .od-overlay { overflow: visible !important; height: auto !important; }
body.mc-print-order-detail .od-body { overflow: visible !important; padding: 0 !important; }
.od-hero {
background: #F8F8F8 !important;
border: 1px solid #DDDDDD !important;
color: #111111 !important;
}
.od-hero-id-value { color: #111111 !important; font-size: 20px !important; }
.od-hero-kpi-value { color: #111111 !important; }
.od-hero-kpi-label { color: #555555 !important; }
.od-card {
background: #FFFFFF !important;
border: 1px solid #DDDDDD !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
}
.od-card-header { background: #F3F3F3 !important; }
.od-field-label { color: #666666 !important; }
.od-field-value { color: #111111 !important; }
/* ════════════════════════════════════════════════════════════════
MODO: IMPRIMIR APENAS UMA TABELA — body.mc-print-table
MCPrint.js adiciona body.mc-print-table e [data-print-table-id]
A tabela selecionada recebe o atributo data-print-active="true"
════════════════════════════════════════════════════════════════ */
body.mc-print-table .mc-shell { display: none !important; }
body.mc-print-table .mc-print-table-portal { display: block !important; }
.mc-print-table-portal {
display: none; /* oculto em tela — aparece apenas no modo de impressão de tabela */
}
body.mc-print-table .mc-print-header {
display: block !important;
margin-bottom: 14px !important;
}
/* ════════════════════════════════════════════════════════════════
RESUMO DE FILTROS — aparece no cabeçalho de impressão
════════════════════════════════════════════════════════════════ */
.mc-print-filter-summary {
display: block !important;
font-size: 10px !important;
color: #555555 !important;
margin-top: 4px !important;
}
/* ════════════════════════════════════════════════════════════════
OVERRIDES DE COR — forçar legibilidade em P&B
════════════════════════════════════════════════════════════════ */
/* Backgrounds escuros → branco */
[style*="background: #000"],
[style*="background:#000"],
[style*="background-color: #000"],
[style*="background-color:#000"] {
background: #FFFFFF !important;
color: #111111 !important;
}
/* Textos claros (para fundos escuros) → escuro */
.mc-text-primary,
[style*="color: #fff"],
[style*="color:#fff"],
[style*="color: white"] { color: #111111 !important; }
.mc-text-sub,
.mc-text-secondary { color: #333333 !important; }
.mc-text-dim,
.mc-text-ghost { color: #666666 !important; }
/* CSS vars: sobrescrever para impressão */
:root {
--mc-bg-void: #FFFFFF !important;
--mc-bg-base: #FFFFFF !important;
--mc-bg-card: #F8F8F8 !important;
--mc-bg-raised: #F0F0F0 !important;
--mc-bg-overlay: #FFFFFF !important;
--mc-bg-input: #F5F5F5 !important;
--mc-border-subtle: #DDDDDD !important;
--mc-border-default: #CCCCCC !important;
--mc-border-strong: #AAAAAA !important;
--mc-border-solid: #999999 !important;
--mc-text-primary: #111111 !important;
--mc-text-sub: #222222 !important;
--mc-text-secondary: #444444 !important;
--mc-text-dim: #666666 !important;
--mc-text-ghost: #888888 !important;
--mc-hover-bg: transparent !important;
--mc-press-bg: transparent !important;
--mc-active-bg: transparent !important;
}
/* ════════════════════════════════════════════════════════════════
GRÁFICOS — ECharts / Canvas
Nota: ECharts usa