/* ===================================================================== Águia Automóveis — folha A4 para PDF O usuário imprime pelo navegador e escolhe "Salvar como PDF". ===================================================================== */ /* ---------- folha A4 ---------- Fica oculta na tela: é montada só para a impressão e some depois. Deixá-la visível poluía a página com uma cópia do que já está acima. */ .a4-wrap{display:none;background:var(--surface-2);padding:24px; border-radius:var(--r);border:1px solid var(--line);overflow-x:auto} /* quando o usuário pede a prévia explicitamente */ .a4-wrap.visivel{display:block;margin-top:16px} .a4{width:210mm;min-height:297mm;margin:0 auto;background:#fff;color:#17191E; padding:16mm 15mm;box-shadow:0 3px 22px rgba(0,0,0,.3); font-size:10.5pt;line-height:1.42;display:flex;flex-direction:column} /* A folha é sempre clara, mesmo no tema escuro: o papel é branco. */ .a4 *{color:inherit;border-color:#E8EAEE} .a4-h{display:flex;align-items:flex-start;gap:16px; border-bottom:2px solid #F5B21B;padding-bottom:11px;margin-bottom:15px} .a4-h .lg{width:150px;flex:none} .a4-h .lg img,.a4-h .lg svg{max-width:100%;max-height:56px;object-fit:contain} .a4-emp{font-size:8.5pt;line-height:1.5;color:#4A5158;margin-left:auto;text-align:right} .a4-emp b{font-size:10pt;color:#17191E;display:block;margin-bottom:2px} .a4 h2{font-size:14pt;margin:0 0 2px;color:#17191E} .a4-sub{font-size:9pt;color:#5A626C;margin-bottom:14px} /* ---------- logo do banco na folha ---------- `.a4 *{color:inherit}` acima alcança a logo e apagaria a cor da marca, porque a logo oficial é monocromática e desenhada com `currentColor`. `unset` devolve o valor do atributo style inline que `logoBanco()` escreve, restaurando a cor do banco. O fundo neutro é proposital: a logo do Santander em vermelho sobre vermelho desapareceria. */ .a4 .blogo{color:unset;width:15px;height:15px;font-size:6.5pt; border-radius:3px;flex:none;display:inline-grid;place-items:center; overflow:hidden} .a4 .blogo-of{background:#F2F3F5;border:1px solid #E0E3E7} .a4 .blogo-svg{display:block} .a4 .bwrap{display:inline-flex;align-items:center;gap:6px} .a4 table{font-size:9pt;width:100%;border-collapse:collapse;table-layout:fixed} /* Tabela larga em folha estreita. A rentabilidade tem 9 colunas e, a 9pt, a última ("Atraso médio") passava da margem e sumia na impressão. Com `table-layout:fixed` a largura é dividida antes de medir o conteúdo, e a fonte menor faz o conjunto caber; `word-break` impede que um número longo empurre a coluna. Vale só a partir de 7 colunas — tabela curta continua no corpo normal, mais confortável de ler. */ .a4 table.larga{font-size:7.5pt} .a4 table.larga th,.a4 table.larga td{padding:4px 4px;white-space:normal} /* Quebra só entre palavras. `anywhere` partia "CONTRATOS" em "CONTRATO/S" e "FINANCIADO" em "FINANCIAD/O" — pior de ler que a coluna estreita. */ .a4 table.larga th{overflow-wrap:normal;word-break:keep-all;hyphens:none} /* número nunca quebra: 53.333,33 em duas linhas não é número */ .a4 table.larga td{overflow-wrap:normal} .a4 table.larga td.mono{white-space:nowrap} /* a coluna do banco é a única que precisa de espaço para o nome */ .a4 table.larga td:first-child,.a4 table.larga th:first-child{width:22%} .a4 th{background:#F2F3F5;color:#3A4149;border-bottom:1px solid #D5D9DE; padding:6px 8px;font-size:7.5pt;letter-spacing:.06em;text-transform:uppercase; text-align:left;position:static} .a4 td{border-bottom:1px solid #E8EAEE;padding:5.5px 8px} .a4 tbody tr:hover{background:transparent} .a4 tfoot td{background:#F2F3F5;font-weight:700;border-top:1.5px solid #C9CED4} .a4 .r{text-align:right} .a4 .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} /* A BARRA DE PARTICIPAÇÃO NO PAPEL. A folha força `color:inherit` em tudo (para o tema escuro não vazar para a impressão), e isso apagaria a cor da barra. Aqui ela é redesenhada em tinta: cinza de fundo, dourado no preenchimento, com `print-color-adjust` para o navegador não descartar o fundo ao imprimir. */ .a4 .bar-cx{display:flex;align-items:center;gap:6px} .a4 .bar{height:4px;background:#E8EAEE;border-radius:2px;overflow:hidden; flex:1;min-width:30px;-webkit-print-color-adjust:exact;print-color-adjust:exact} .a4 .bar i{display:block;height:100%;background:#B8840C; -webkit-print-color-adjust:exact;print-color-adjust:exact} .a4 .bar-n{font-family:var(--f-mono);font-size:7pt;font-weight:600; font-variant-numeric:tabular-nums;width:26px;text-align:right; flex:none;color:#5A626C} /* FOLGA NA ÚLTIMA COLUNA. Sem isto o número da direita encosta na borda da folha e a impressora corta o último dígito quando a margem é pequena — foi o que o dono viu na coluna Seguro. O padding extra vale só para a célula final, e é maior que o das outras justamente para criar a respiração. */ .a4 table tr > *:last-child{padding-right:14px} .a4 table tr > *:first-child{padding-left:10px} .a4-f{margin-top:auto;padding-top:12px;border-top:1px solid #E0E3E7; font-size:7.5pt;color:#7A828B;display:flex;justify-content:space-between;gap:12px} /* ---------- gráficos na folha ---------- A folha é papel branco, e as variáveis de tema não valem aqui: no tema escuro `var(--ink-3)` é cinza-claro, que sobre branco some. Por isso cor fixa, não token — mesmo princípio do resto da folha. `color:inherit` acima alcança o do SVG mas não o traço nem o preenchimento, então grade e eixos precisam ser ditos um a um. */ .a4-graf{margin:4px 0 16px;page-break-inside:avoid;break-inside:avoid} .a4-graf .g-tit{color:#3A4149;font-size:8pt;margin-bottom:7px} .a4-graf .g-grade{stroke:#E0E3E7} .a4-graf .g-zero{stroke:#C1373C;opacity:1} .a4-graf .g-ax{fill:#5A626C;font-size:8.5px} .a4-graf .g-rot{fill:#3A4149} .a4-graf .g-val{fill:#17191E} .a4-graf .g-pt{stroke:#fff} .a4-graf .g-trilho{fill:#EFF1F3} .a4-graf .g-c-v{fill:#17191E} .a4-graf .g-c-k{fill:#5A626C} .a4-graf .g-leg li{font-size:8.5pt} .a4-graf .g-leg-n{color:#3A4149} .a4-graf .g-leg-p{color:#5A626C} .a4-graf .g-vazio{border-color:#D5D9DE;color:#7A828B} /* Um gráfico por linha, sempre. Lado a lado cada um receberia ~330px para um viewBox de 620: o SVG encolheria pela metade e levaria a letra junto, deixando os rótulos em 4pt — medido, ilegível no papel. A folha é estreita demais para duas colunas de gráfico. */ .a4-graf > * + *{margin-top:14px} /* ---------- impressão ---------- */ @media print{ @page{size:A4 portrait;margin:14mm} html,body{background:#fff !important;color:#17191E !important;height:auto} body{font-size:10.5pt} /* fora da folha */ .side,.top,.fbar,.hint,.toasts,.modal,.offline,.no-print, .side-scrim,.steps,.tabs{display:none !important} .app{display:block !important} main{padding:0 !important;max-width:none !important} .page{display:none !important} .page.on{display:block !important;animation:none !important} /* na impressão ela reaparece, mesmo oculta na tela */ .a4-wrap{display:block !important;background:0 !important;padding:0 !important; border:0 !important;overflow:visible !important} .a4{width:auto !important;min-height:0 !important;box-shadow:none !important; padding:0 !important;margin:0 !important} /* O navegador descarta cor de fundo por padrão ao imprimir. Num gráfico isso apagaria toda barra e toda fatia da rosca, deixando só os eixos — por isso a exceção explícita. */ .a4-graf,.a4-graf *,.a4 .blogo,.a4 .blogo *{ -webkit-print-color-adjust:exact;print-color-adjust:exact} .a4-graf .g-svg{width:100% !important} /* nada de quebra no meio de uma linha da tabela */ tr,img,.kpi,.card,.a4-graf,.g-wrap{page-break-inside:avoid;break-inside:avoid} thead{display:table-header-group} /* repete o cabeçalho a cada página */ tfoot{display:table-footer-group} a{text-decoration:none !important;color:inherit !important} a[href^="http"]::after{content:"" !important} }