/* @versao 1.1.0 | 2026-09-07 | GROW :: grow_padrao.css */
/* ================================================================
 * Design system padrao do GROW - Fazenda Calciolandia.
 * Usar em todas as telas e relatorios do sistema.
 * Fonte: DM Sans (Google Fonts).
 * Referencia: layout desenvolvido no modulo ABCZ WebService.
 *
 * 1.1.0  Componentes de relatorio e auditoria: .rel-sub, .rel-nota,
 *        .rel-vazio, .tabela-comp, .marca, .status, .contadores,
 *        .arvore (pedigree), estados de linha e regras de impressao.
 *
 * Inclusao:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
 *   <link rel="stylesheet" href="../grow_padrao.css">
 *
 * Cabecalho padrao:
 *   <div class="page-head">
 *     <img src="../menu/grow.png" alt="Grow" style="height:32px;margin-right:10px">
 *     <h1>Titulo da pagina</h1>
 *   </div>
 *
 * Rodape padrao:
 *   <div class="grow-footer">
 *     <img src="../menu/grow_f.png" alt="Grow">
 *   </div>
 * ================================================================ */

/* ======================== VARIAVEIS ======================== */
:root {
  /* Cores principais */
  --grow-escuro:      #333;        /* cabecalho, botoes primarios */
  --grow-acento:      #d9230f;     /* links ativos, acento, stepper ativo, erros */
  --grow-ok:          #469408;     /* sucesso, status OK */
  --grow-erro:        #d9230f;     /* erros, pendencias */
  --grow-info:        #029acf;     /* informativo, botao validar */
  --grow-warning:     #d9831f;     /* avisos */

  /* Texto */
  --grow-texto:       #333;        /* texto principal */
  --grow-texto-suave: #777;        /* texto secundario, labels */

  /* Fundos */
  --grow-fundo:       #fff;        /* body */
  --grow-fundo-claro: #c2c2c2;     /* cabecalho tabela, savebar, readonly */
  --grow-zebra:       #f6f5f2;     /* linhas pares da tabela */

  /* Bordas e efeitos */
  --grow-borda:       #ddd;        /* bordas */
  --grow-sombra:      0 1px 3px rgba(0,0,0,.08);
  --grow-raio:        4px;         /* border-radius */

  /* Aliases (compatibilidade com modulo ABCZ) */
  --verde-escuro: var(--grow-escuro);
  --verde-medio:  var(--grow-acento);
  --ok:           var(--grow-ok);
  --erro:         var(--grow-erro);
  --texto:        var(--grow-texto);
  --texto-suave:  var(--grow-texto-suave);
  --fundo:        var(--grow-fundo);
  --fundo-claro:  var(--grow-fundo-claro);
  --borda:        var(--grow-borda);
  --sombra:       var(--grow-sombra);
  --raio:         var(--grow-raio);
}

/* ======================== RESET / BASE ======================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  background: var(--grow-fundo);
  color: var(--grow-texto);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--grow-acento); }
a:hover { color: var(--grow-escuro); }

/* ======================== LAYOUT ======================== */
.container { max-width: 1200px; margin: 0 auto; padding: 10px 18px; }

/* ======================== CABECALHO ======================== */
.page-head {
  background: var(--grow-escuro);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 var(--grow-raio) var(--grow-raio);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.page-head h1 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.page-head .amb {
  background: rgba(255,255,255,.18);
  padding: 3px 10px;
  border-radius: 16px;
  font-size: .82rem;
}

/* ======================== RODAPE ======================== */
.grow-footer {
  text-align: center;
  padding: 20px 0 10px;
}
.grow-footer img { opacity: .7; }
@media print { .grow-footer { display: none !important; } }

/* ======================== PAINEL / CARD ======================== */
.painel {
  background: #fff;
  border: 1px solid var(--grow-borda);
  border-radius: var(--grow-raio);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: var(--grow-sombra);
}

/* ======================== BOTOES ======================== */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: none;
  border-radius: var(--grow-raio);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  gap: 6px;
  text-decoration: none;
  font-family: inherit;
}
.btn:hover { opacity: .9; }

/* Variantes de cor (usar via style="background:..." ou classes) */
.btn-primario  { background: var(--grow-escuro); }
.btn-acento    { background: var(--grow-acento); }
.btn-ok        { background: var(--grow-ok); }
.btn-info      { background: var(--grow-info); }
.btn-warning   { background: var(--grow-warning); }
.btn-erro      { background: var(--grow-erro); }
.btn-neutro    { background: #555; }

.btn-del {
  padding: 5px 10px;
  border: 0;
  border-radius: var(--grow-raio);
  font-size: .85rem;
  cursor: pointer;
  color: #fff;
  background: var(--grow-erro);
}
.btn-del:hover { opacity: .85; }

/* ======================== MENSAGENS / ALERTAS ======================== */
.mensagem {
  padding: 12px 16px;
  border-radius: var(--grow-raio);
  font-size: .95rem;
  margin: 8px 0;
}
.mensagem-sucesso { background: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; }
.mensagem-erro    { background: #f2dede; color: #a94442; border: 1px solid #ebccd1; }
.mensagem-info    { background: #d9edf7; color: #31708f; border: 1px solid #bce8f1; }
.mensagem-warn    { background: #fcf8e3; color: #8a6d3b; border: 1px solid #faebcc; }

/* ======================== TABELAS ======================== */
.tabela-wrap { overflow-x: auto; }
.tabela-itens { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela-itens th {
  background: var(--grow-fundo-claro);
  border: 1px solid var(--grow-borda);
  padding: 8px 10px;
  font-weight: 600;
  font-size: .88rem;
  text-align: left;
}
.tabela-itens td {
  border: 1px solid var(--grow-borda);
  padding: 6px 10px;
  vertical-align: top;
}
.tabela-itens tbody tr:hover { background: #fafafa; }
.tabela-itens tbody tr:nth-child(even) td { background: var(--grow-zebra); }

/* ======================== FORMULARIOS / INPUTS ======================== */
.cinput {
  border: 1px solid var(--grow-borda);
  border-radius: var(--grow-raio);
  padding: 6px 8px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
}
.cinput:focus {
  border-color: var(--grow-acento);
  outline: none;
  box-shadow: 0 0 0 2px rgba(217,35,15,.12);
}
.cinput[readonly], .cinput:disabled {
  background: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}
.cinput.req-empty {
  background: #f2dede;
  border-color: var(--grow-erro);
}
.cinput.edit-dirty {
  background: #fff6c9;
  border-color: #e6c200;
}

/* Select */
select.cinput { appearance: auto; }

/* ======================== SUB-LINHAS (FLEX) ======================== */
.l2cell {
  border-top: 1px dashed var(--grow-borda);
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
}
.l2cell .cinput { font-size: .95rem; padding: 6px 7px; }
.l2lab {
  font-weight: 600;
  color: var(--grow-acento);
  font-size: .95rem;
  margin: 0 10px 6px 2px;
}
.l2f {
  display: inline-flex;
  flex-direction: column;
  margin: 0 10px 6px 0;
  vertical-align: top;
}
.l2f label {
  font-size: .78rem;
  color: var(--grow-texto-suave);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.l2f label.hint {
  border-bottom: 1px dotted var(--grow-texto-suave);
  cursor: help;
}

/* ======================== BADGES ======================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 500;
}
.b-ok   { color: var(--grow-ok);          background: #dff0d8; }
.b-err  { color: var(--grow-erro);        background: #f2dede; }
.b-run  { color: #8a6d1f;                 background: #fcf8e3; }
.b-idle { color: var(--grow-texto-suave); background: #eee; }

/* ======================== STEPPER ======================== */
.stepper { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }

/* ======================== SAVEBAR (BARRA FIXA) ======================== */
.savebar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--grow-fundo-claro);
  border: 1px solid var(--grow-borda);
  border-radius: var(--grow-raio);
  padding: 10px 14px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ======================== DOC HEADER ======================== */
.doc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 4px;
}
.doc-hd h3 { margin: 0; color: var(--grow-escuro); font-size: 1rem; }

/* ======================== ACTIONS ======================== */
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ======================== LINK CARDS (INDEX) ======================== */
.link-card {
  display: block;
  text-decoration: none;
  color: var(--grow-texto);
  border: 1px solid var(--grow-borda);
  border-left: 4px solid var(--grow-acento);
  border-radius: var(--grow-raio);
  padding: 12px 14px;
  margin: 10px 0;
  background: #fff;
  transition: box-shadow .15s;
}
.link-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.link-card b { color: var(--grow-escuro); font-size: 1rem; }
.link-card .d { font-size: .88rem; color: var(--grow-texto-suave); margin-top: 4px; }

/* ======================== FILTRO ABAS ======================== */
.ftabs {
  display: inline-flex;
  gap: 4px;
  background: var(--grow-fundo-claro);
  padding: 4px;
  border-radius: var(--grow-raio);
}
.ftab {
  text-decoration: none;
  color: var(--grow-texto-suave);
  font-size: .92rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--grow-raio);
}
.ftab:hover { background: #eee; text-decoration: none; color: var(--grow-texto); }
.ftab.ativa { background: var(--grow-escuro); color: #fff; }

/* ======================== PROGRESS BAR ======================== */
.pbar {
  height: 10px;
  background: var(--grow-fundo-claro);
  border: 1px solid var(--grow-borda);
  border-radius: var(--grow-raio);
  overflow: hidden;
}
.pfill {
  height: 100%;
  width: 0;
  background: var(--grow-ok);
  transition: width .3s;
}

/* ======================== XML / DEBUG ======================== */
.xmlraw {
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--grow-fundo-claro);
  border: 1px solid var(--grow-borda);
  border-radius: var(--grow-raio);
  padding: 8px;
  max-height: 420px;
  overflow: auto;
  font-family: monospace;
  font-size: .82rem;
  margin: 0;
}
.trace-det summary { cursor: pointer; color: var(--grow-acento); font-weight: 600; }

/* ======================== RESPONSIVO ======================== */
@media (max-width: 768px) {
  .container { padding: 8px 10px; }
  .page-head { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .page-head h1 { font-size: 1.1rem; }
  .savebar { gap: 8px; padding: 8px 10px; }
  .btn { font-size: .88rem; padding: 7px 12px; }
  .tabela-itens { font-size: .88rem; }
  .tabela-itens th, .tabela-itens td { padding: 4px 6px; }
  .l2cell { padding: 6px 8px; }
}

/* ======================== IMPRESSAO ======================== */
@media print {
  .page-head, .savebar, .btn-del, .stepper, .no-print, .actions, .grow-footer { display: none !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .container { max-width: 100% !important; margin: 0; padding: 0; }
  .painel { box-shadow: none !important; border: none !important; padding: 0 !important; }
  .tabela-wrap { overflow: visible !important; }
  .tabela-itens th, .tabela-itens td { border: 1px solid #999 !important; font-size: 9pt !important; padding: 3px 5px !important; }
  .tabela-itens thead { display: table-header-group !important; }
  .tabela-itens tbody { break-inside: avoid !important; }
  .l2cell { border: 1px solid #999 !important; border-top: none !important; padding: 4px 6px !important; font-size: 8pt !important; }
  .l2lab { font-size: 8pt !important; color: #333 !important; }
  .l2f { margin: 0 8px 3px 0 !important; }
  .l2f label { font-size: 7pt !important; }
  .cinput, .cinput[readonly], select { border: 1px solid #999 !important; padding: 1px 3px !important; font-size: 8pt !important; background: #fff !important; }
  .req-empty { background: #f2dede !important; }
  .doc-hd { margin: 10px 0 2px !important; }
  .doc-hd h3 { font-size: 10pt !important; }
  @page { size: A4 landscape; margin: 8mm; }
}


/* ================================================================
 * RELATORIOS E AUDITORIA
 * Componentes usados nas telas de conferencia e nos relatorios que
 * comparam dados do GROW com fontes externas.
 * ================================================================ */

/* ---- Titulo interno do painel ---- */
.painel > h2 {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grow-texto-suave);
}

/* ---- Textos auxiliares ---- */
.rel-sub   { margin: 4px 0 0; color: var(--grow-texto-suave); font-size: .85rem; }
.rel-nota  { margin: 8px 0 0; color: var(--grow-texto-suave); font-size: .8rem; }
.rel-fraco { color: var(--grow-texto-suave); }

/* ---- Estado vazio ---- */
.rel-vazio {
  border: 1px dashed var(--grow-borda);
  border-radius: var(--grow-raio);
  padding: 34px 16px;
  text-align: center;
  color: var(--grow-texto-suave);
  font-size: .9rem;
}

/* ---- Tabela de comparacao campo a campo ----
   Diferente de .tabela-itens: sem bordas e sem zebra, para leitura
   de pares valor-a-valor em vez de listagem. */
.tabela-comp { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela-comp th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--grow-texto-suave);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--grow-borda);
}
.tabela-comp td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}
.tabela-comp td.rotulo {
  font-weight: 600;
  white-space: nowrap;
  width: 118px;
}

/* ---- Marca de conferencia ---- */
.marca      { font-weight: 700; white-space: nowrap; }
.marca-ok   { color: var(--grow-ok); }
.marca-erro { color: var(--grow-erro); }

/* ---- Status em pilula ---- */
.status {
  display: inline-block;
  font-weight: 600;
  font-size: .85rem;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid var(--grow-borda);
}
.status-ok       { border-color: var(--grow-ok);      color: var(--grow-ok);      background: #dff0d8; }
.status-erro     { border-color: var(--grow-erro);    color: var(--grow-erro);    background: #f2dede; }
.status-alerta   { border-color: var(--grow-warning); color: #8a6d3b;             background: #fcf8e3; }
.status-neutro   { color: var(--grow-texto-suave);    background: #eee; }

/* ---- Estados de linha em listagens ---- */
.tabela-itens tr.linha-pendente td { color: var(--grow-texto-suave); }
.tabela-itens tr.linha-erro     td { background: #f2dede; }
.tabela-itens tr.linha-alerta   td { background: #fcf8e3; }
.tabela-itens tr.linha-ok       td { background: #dff0d8; }

/* ---- Contadores de progresso ---- */
.contadores {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--grow-texto-suave);
}
.contadores b { color: var(--grow-texto); }

/* ---- Detalhe dentro da celula ---- */
.celula-det   { font-size: .8rem; color: var(--grow-texto-suave); }
.celula-det b { color: var(--grow-texto); font-weight: 600; }

/* ---- Codigo como link discreto ---- */
.link-codigo {
  text-decoration: none;
  border-bottom: 1px dotted var(--grow-acento);
}
.link-codigo:hover { background: var(--grow-zebra); }

/* ---- Destaque numerico (lote, sequencia) ---- */
.num-destaque {
  font-weight: 700;
  font-size: .95rem;
  color: var(--grow-escuro);
  white-space: nowrap;
}

/* ================================================================
 * ARVORE GENEALOGICA
 * Tres colunas: pais (2), avos (4), bisavos (8).
 * ================================================================ */
.arvore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.arvore-col { display: grid; gap: 6px; }
.arvore-col.g1 { grid-template-rows: repeat(2, 1fr); }
.arvore-col.g2 { grid-template-rows: repeat(4, 1fr); }
.arvore-col.g3 { grid-template-rows: repeat(8, 1fr); }

.arvore-cel {
  border: 1px solid var(--grow-borda);
  border-radius: var(--grow-raio);
  background: #fff;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  overflow: hidden;
}
.arvore-cel.macho { border-left: 3px solid var(--grow-escuro); }
.arvore-cel.femea { border-left: 3px solid var(--grow-acento); }
.arvore-cel.vazia { background: transparent; border-style: dashed; }

.arvore-nome { font-size: .78rem; font-weight: 600; line-height: 1.25; word-break: break-word; }
.arvore-rg   { font-size: .72rem; color: var(--grow-texto-suave); }

.arvore-cab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.arvore-cab span {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grow-texto-suave);
}

/* ---- Linha de campos de filtro / acoes ---- */
.campos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.campos > div { flex: 0 1 auto; }

/* Rotulo com caixa de selecao ao lado */
.caixa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  padding-bottom: 10px;
}
.caixa input { width: auto; }

/* Grupo de botoes ou links de navegacao */
.atalhos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Formulario reduzido a um botao dentro de celula de tabela */
.form-inline { margin: 0; display: inline; }

/* Link secundario dentro de listagem */
.link-acao { white-space: nowrap; font-size: .8rem; }

/* ---- Cabecalho de resumo do registro ---- */
.resumo {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.resumo h2.titulo-registro {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grow-escuro);
}

/* ---- Painel de confirmacao de gravacao ---- */
.painel-confirma { border-left: 4px solid var(--grow-warning); }
.acoes-linha { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.acoes-linha form { margin: 0; }

/* ================================================================
 * RESPONSIVO - COMPLEMENTO
 * ================================================================ */
@media (max-width: 768px) {
  .arvore { grid-template-columns: 1fr; }
  .arvore-col.g1, .arvore-col.g2, .arvore-col.g3 { grid-template-rows: none; }
  .arvore-cab { display: none; }
  .contadores { gap: 10px; font-size: .8rem; }
  .tabela-comp td.rotulo { width: auto; }
}

/* ================================================================
 * IMPRESSAO - COMPLEMENTO
 * O bloco @media print acima ja esconde page-head, savebar e afins.
 * Aqui ficam os componentes de relatorio.
 * ================================================================ */
@media print {
  .btn, .pbar, .contadores, .mensagem, .link-card { display: none !important; }

  /* Coluna de acoes nao vai para o papel. */
  .tabela-itens th.no-print,
  .tabela-itens td.no-print { display: none !important; }

  .link-codigo { color: inherit !important; border: 0 !important; text-decoration: none !important; }

  .tabela-itens tr.linha-erro   td { background: #f2dede !important; }
  .tabela-itens tr.linha-alerta td { background: #fcf8e3 !important; }
  .tabela-itens tr.linha-ok     td { background: #dff0d8 !important; }

  .tabela-comp td { border-bottom: 1px solid #ccc !important; font-size: 9pt !important; }

  .arvore { break-inside: avoid; }
  .arvore-cel { border: 1px solid #999 !important; }

  .status { border: 1px solid #999 !important; }
  .rel-vazio { display: none !important; }
}

/* ================================================================
 * RODAPE DE IMPRESSAO
 * Logomarca do GROW no pe' da folha, so' no papel. Na tela quem
 * assina e' o .grow-footer.
 *
 * Uso, uma linha por relatorio:
 *   <div class="rodape-print"><img src="../_lib/grow_f.png" alt="Grow"></div>
 *
 * ONDE COLOCAR: se a pagina usa page-break-after em blocos com uma
 * excecao do tipo `.bloco:last-child { page-break-after: auto }`, o
 * rodape precisa vir ANTES desses blocos no HTML. Qualquer elemento
 * depois do ultimo bloco quebra o :last-child, a quebra forcada volta
 * a valer e sai uma folha em branco no fim. Como o rodape e'
 * position:fixed, a ordem no HTML nao muda onde ele aparece impresso.
 * ================================================================ */
/* ================================================================
 * CABECALHO DE IMPRESSAO
 * Titulo do relatorio no alto da folha, so' no papel. A .page-head
 * (a barra escura) nao e' impressa: a logo dela e' a versao clara,
 * ilegivel no branco, e a faixa escura gastaria tinta. Este bloco
 * entra no lugar dela, com a logo colorida do rodape.
 *
 * Uso, logo depois da abertura do .container:
 *   <div class="cabecalho-print">
 *     <img src="../_lib/grow_f.png" alt="Grow"><span>TITULO</span>
 *   </div>
 *
 * Ele fica no fluxo do documento, entao sai no alto da PRIMEIRA
 * folha. Num relatorio que quebra pagina por bloco (uma ficha por
 * animal, por exemplo), repita a mesma linha no inicio de cada
 * bloco e o titulo encabeca todas as folhas.
 * ================================================================ */
.cabecalho-print { display: none; }

@media print {
  .cabecalho-print {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8mm;
    margin-bottom: 4mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid var(--grow-borda);
    break-after: avoid;
    page-break-after: avoid;
  }
  .cabecalho-print img { height: 9mm; width: auto; }
  .cabecalho-print span {
    font-weight: 700;
    font-size: 10pt;
    letter-spacing: .03em;
    color: var(--grow-escuro);
    text-transform: uppercase;
    text-align: right;
  }
}

.rodape-print { display: none; }

@media print {
  /* Fixo no pe'. Chrome e Edge repetem o elemento em todas as folhas;
     Firefox imprime so' na primeira. */
  .rodape-print {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 0;
  }
  .rodape-print img { height: 7mm; width: auto; opacity: .75; }

  /* Reserva o pe' de CADA folha para o rodape. Sem isto o rodape, que e'
     fixo, cobria a ultima linha da pagina. O clone repete o padding em
     todo fragmento do body (Chrome/Edge 130+), e nao so' no fim. */
  body {
    padding-bottom: 12mm !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}