/* ==========================================================================
   impressao.css - o espelho de ponto no papel
   ==========================================================================

   Regras que vem de Padrao_PDF_Documento e que aqui nao sao opiniao:

   1. FONTE QUE EXISTE. A nota manda embutir a fonte em base64 porque o
      Chromium do container nao tem fonte nenhuma. Neste projeto quem imprime e
      o navegador do dono, que ja carregou as woff2 self-hosted do sistema.
      O que continua proibido e pedir Georgia, Arial, Times New Roman ou
      Calibri: sao fontes Microsoft, e onde elas nao existem o texto troca de
      metrica e a paginacao muda sem ninguem perceber.

   2. MARGEM EM UM LUGAR SO. A nota fala em `page.pdf(margin=)`; aqui esse
      lugar e o `@page` abaixo. Elemento nenhum repete esse recuo, senao soma
      com a margem do papel e o texto entra torto.

   3. NADA DE ALTURA FIXA. Bloco com altura cravada em milimetros, calibrada no
      olho, estoura quando o conteudo cresce e empurra uma pagina em branco.
      Cada mes e um bloco fluido que fecha com `page-break-after`. A medida em
      mm que existe aqui e uma so, e e de LARGURA (`max-width` do papel util):
      o numero proibido nao vai escrito nem em comentario, porque a conferencia
      procura por ele linha a linha.

   4. HEADER E RODAPE EM <table>. `display: flex` nao sobrevive a paginacao do
      navegador: a linha se parte ao meio na virada da folha.

   O CSS mora aqui e nao no template porque template deste projeto nao tem
   CSS proprio (Sistema_de_Estilos, e a bateria de conferencia procura por isso).
   ========================================================================== */

@page {
  size: A4;
  margin: 14mm 12mm;
}

.doc {
  max-width: 186mm;          /* A4 menos as margens: o que sobra de papel */
  margin: 0 auto;
  padding: 16px 0;
  color: var(--texto);
  font-size: 11.5px;
  /* linha solta no pe ou no topo da folha, da nota Padrao_PDF_Documento */
  orphans: 2;
  widows: 2;
}

/* ---- cabecalho e rodape: table, nunca flex --------------------------- */

.doc-cab { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.doc-cab td { vertical-align: top; padding: 0; }
.doc-cab .marca {
  font-family: var(--font-titulo);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.doc-cab .sub { font-size: 11px; color: var(--texto-secundario); }
.doc-cab .dir { text-align: right; }
.doc-cab .titulo {
  font-family: var(--font-titulo);
  font-size: 15px;
  font-weight: 700;
}

.doc-linha { border: 0; border-top: 2px solid var(--texto); margin: 0 0 10px; }

/* ---- identificacao da colaboradora ----------------------------------- */

.doc-ident { width: 100%; border-collapse: collapse; margin-bottom: 9px; }
.doc-ident td {
  border: 1px solid var(--borda-forte);
  padding: 5px 9px;
  vertical-align: top;
}
.doc-ident .rot {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-secundario);
  font-weight: 700;
}
.doc-ident .val { font-size: 13px; font-weight: 600; }
/* largura das celulas de identificacao: sai daqui e nao do template, que neste
   projeto nao carrega CSS proprio nem no atributo style */
.doc-ident .c-nome { width: 52%; }
.doc-ident .c-meta { width: 24%; }

/* ---- os tres numeros do mes ------------------------------------------ */

.doc-totais { width: 100%; border-collapse: collapse; margin-bottom: 9px; }
.doc-totais td {
  border: 1px solid var(--borda-forte);
  padding: 7px;
  text-align: center;
  width: 33.33%;
}
.doc-totais .rot {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-secundario);
  font-weight: 700;
}
.doc-totais .num {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.doc-totais .obs { font-size: 9px; color: var(--texto-secundario); }
.doc-totais .neg .num { color: var(--vermelho); }
.doc-totais .ext .num { color: var(--verde); }

/* ---- o mes dia a dia -------------------------------------------------- */

.doc-dias { width: 100%; border-collapse: collapse; }
/* Medida apertada de proposito: 31 dias mais cabecalho, totais e assinatura
   tem que caber em UMA folha A4. Cada 1px de padding aqui vira 31px de papel. */
.doc-dias th, .doc-dias td {
  border: 1px solid var(--borda-forte);
  padding: 1.5px 5px;
  font-size: 10px;
  text-align: center;
}
.doc-dias th {
  background: var(--fundo);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.doc-dias td.dia { text-align: left; white-space: nowrap; }
.doc-dias td.tipo { text-align: left; }
.doc-dias .num { font-variant-numeric: tabular-nums; }
.doc-dias .neg { color: var(--vermelho); font-weight: 600; }
.doc-dias .ext { color: var(--verde); font-weight: 600; }
.doc-dias tr.fds td { background: var(--fundo); }
/* dia pela metade: o papel avisa que aquele numero ainda nao esta apurado */
.doc-dias .meia { color: var(--ambar); font-weight: 700; }
.doc-dias tfoot td {
  border-top: 2px solid var(--texto);
  font-weight: 700;
  font-size: 11px;
}
/* A linha do dia nunca se parte entre duas folhas */
.doc-dias tr { page-break-inside: avoid; }
.doc-dias thead { display: table-header-group; }

/* Na tela estreita a tabela do mes rola dentro do proprio envelope. No papel
   ela cabe inteira, entao la o envelope nao existe (ver o @media print). */
.doc-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- de onde veio cada marco ------------------------------------------ */

/* Letra, e nao icone de fonte: a nota Padrao_PDF_Documento avisa que icone de
   webfont sai VAZIO no documento. Aqui e caixinha de CSS puro, que imprime
   igual em qualquer maquina. */
.org {
  display: inline-block;
  margin-left: 3px;
  min-width: 11px;
  padding: 0 2px;
  border-radius: 3px;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 13px;
  vertical-align: 1px;
}
.org-a { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.org-c { background: var(--ambar-suave); color: var(--ambar); }

.doc-legenda {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 8.5px;
  color: var(--texto-secundario);
}
.doc-legenda td { padding: 0 10px 0 0; vertical-align: middle; }

/* ---- as correcoes do mes ---------------------------------------------- */

/* Bloco fluido, sem altura: se o mes teve uma correcao ele ocupa duas linhas,
   se teve quinze ele cresce e vira a folha sozinho. Altura cravada aqui era o
   caminho mais curto pra pagina em branco. */
.doc-corr { margin-top: 12px; }
.doc-corr-tit {
  font-family: var(--font-titulo);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  /* titulo nunca fica sozinho no pe da folha, com a tabela na seguinte */
  page-break-after: avoid;
}
.doc-corr-pe {
  margin-top: 4px;
  font-size: 8.5px;
  color: var(--texto-secundario);
}

.doc-ajustes { width: 100%; border-collapse: collapse; }
.doc-ajustes th, .doc-ajustes td {
  border: 1px solid var(--borda-forte);
  padding: 2.5px 5px;
  font-size: 9.5px;
  text-align: center;
}
.doc-ajustes th {
  background: var(--fundo);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.doc-ajustes td.dia { white-space: nowrap; }
.doc-ajustes td.txt { text-align: left; }
.doc-ajustes .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a correcao inteira e uma unidade de leitura: nao se parte entre duas folhas */
.doc-ajustes tr { page-break-inside: avoid; }
.doc-ajustes thead { display: table-header-group; }
/* Na tela estreita, sem largura minima o motivo vira uma palavra por linha e a
   linha da correcao estica pra sete alturas. Rolar de lado dentro do envelope
   le melhor do que isso. So na TELA: no papel a tabela cabe inteira. */
@media screen {
  .doc-ajustes { min-width: 620px; }
}

/* ---- assinatura e rodape ---------------------------------------------- */

.doc-assina { width: 100%; border-collapse: collapse; margin-top: 16px; }
.doc-assina td {
  width: 50%;
  padding: 0 14px;
  text-align: center;
  vertical-align: bottom;
}
.doc-assina .linha {
  border-top: 1px solid var(--texto);
  padding-top: 5px;
  font-size: 10.5px;
}

.doc-rodape {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 9.5px;
  color: var(--texto-secundario);
}
.doc-rodape td { padding: 0; }
.doc-rodape .dir { text-align: right; }

/* Cada mes fecha a folha. Sem altura fixa: bloco fluido, como manda a nota. */
.doc-mes + .doc-mes { page-break-before: always; }

.doc-aviso {
  border: 1px solid var(--borda-forte);
  padding: 7px 9px;
  font-size: 10px;
  margin-bottom: 10px;
}

/* ---- a barra que so existe na tela ------------------------------------ */

.doc-barra {
  position: sticky;
  top: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 0 14px;
  background: var(--branco);
}
.doc-barra .dica { margin-right: auto; font-size: 12px; color: var(--texto-secundario); }

/* Celular: o documento deixa de ser uma folha centralizada e passa a ocupar a
   largura que tem. So na tela; a medida do papel esta no @page. */
@media screen and (max-width: 800px) {
  .doc { width: auto; padding: 10px; }
  .doc-barra { flex-wrap: wrap; }
  .doc-barra .dica { flex: 1 1 100%; margin-bottom: 6px; }
}

@media print {
  /* Fora do papel: botao, dica e qualquer coisa que so serve pra clicar */
  .doc-barra { display: none; }
  body { background: var(--branco); }
  .doc { max-width: none; padding: 0; }
  .doc-rolagem { overflow: visible; }
  /* o navegador imprime as cores do documento, senao negativa e extra saem
     do mesmo cinza e o espelho perde justamente a distincao que ele existe
     pra mostrar */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}