/* relatorio.css — Documento do relatório (vale na prévia E no papel) e a prévia.
   Parte de painel.css, dividido em 13/09/2026: um arquivo de 3.782 linhas
   não se navega. A ORDEM dos <link> no index.html importa (cascata). */

/* ---------- relatório impresso (Ctrl+P -> Salvar como PDF) ---------- */
#relatorio-imprimir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--verde-500);
  background: var(--verde-tinta);
  color: var(--verde-texto);
  border-radius: var(--r-m);
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
#relatorio-imprimir:hover { background: var(--superficie); }
#relatorio-imprimir:disabled { opacity: .6; cursor: progress; }
#impressao { display: none; }


/* ---------- documento do relatório ----------
   ⚠️ Estas regras vivem FORA do @media print desde 13/09/2026: a prévia
   na tela mostra o MESMO nó e, com o CSS preso ao print, ela aparecia
   sem formatação nenhuma (números colados no texto) e mentia sobre o
   arquivo. `#impressao` é `display:none` por padrão, então isto só
   pinta quando o papel ou a prévia o exibem. */
  /* ⚠️ SEM `display: block` aqui: esta regra vale sempre, e ela vem DEPOIS do
     `#impressao { display: none }` acima — o documento apareceria solto no
     meio do painel. Quem o exibe é o @media print (papel) ou a prévia. */
  #impressao {
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 9.5pt;
    color: #111;
    /* sem isto o Chrome imprime SEM fundo colorido por padrão e o relatório
       sai com os cartões e os gráficos brancos */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #impressao section { margin-top: 13px; }
  #impressao h2 {
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #0f766e;
    padding-bottom: 3px;
    border-bottom: 1.5px solid #0f766e;
    margin-bottom: 8px;
  }
  #impressao table { width: 100%; border-collapse: collapse; }
  #impressao th, #impressao td {
    border: 1px solid #d5dbe0;
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
  }
  #impressao th {
    background: #0f766e;
    color: #fff;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-color: #0f766e;
  }
  #impressao td { font-size: 9pt; }
  #impressao tbody tr:nth-child(even) td { background: #f4f6f8; }
  #impressao thead { display: table-header-group; }
  #impressao tr { break-inside: avoid; }

  /* layout do documento (KPIs, gráficos, tabelas): vale na tela da prévia
     e no papel — ver a nota acima */
  .imp-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 5px;
    background: linear-gradient(100deg, #0b3a33, #0f766e 55%, #0e7490);
    color: #fff;
  }
  .imp-titulo { flex: 1; }
  .imp-cabecalho h1 { font-size: 16pt; letter-spacing: -.015em; line-height: 1.1; }
  .imp-cabecalho p { font-size: 8.5pt; opacity: .9; margin-top: 3px; }
  .imp-emitido {
    text-align: right;
    font-size: 7.5pt;
    line-height: 1.5;
    opacity: .95;
    max-width: 42%;
  }
  .imp-kpis { display: flex; flex-wrap: wrap; gap: 6px; }
  .imp-kpi {
    flex: 1 1 0;
    min-width: 92px;
    border: 1px solid #d5dbe0;
    border-left: 4px solid #64748b;
    border-radius: 4px;
    padding: 7px 9px;
    background: #fafbfc;
  }
  .imp-kpi span {
    font-size: 7pt;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .imp-kpi.ok { border-left-color: #0f766e; }
  .imp-kpi.ok b { color: #0f766e; }
  .imp-kpi.ruim { border-left-color: #9f1239; }
  .imp-kpi.ruim b { color: #9f1239; }
  .imp-kpis.menores { margin-top: 6px; }
  .imp-kpis.menores .imp-kpi { padding: 5px 8px; background: #fff; }
  .imp-kpis.menores b { font-size: 11pt; }
  .imp-dashboard { display: flex; flex-wrap: wrap; gap: 8px; }
  .imp-graf {
    flex: 1 1 300px;
    border: 1px solid #d5dbe0;
    border-radius: 4px;
    padding: 8px 10px 6px;
    break-inside: avoid;
  }
  .imp-graf h3 { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; color: #374151; }
  .imp-graf-leg { font-size: 7pt; color: #6b7280; margin: 1px 0 4px; }
  .imp-equipe td:first-child { font-weight: 700; }
  .imp-equipe tbody tr:first-child td { background: #e7f3f1; }
  .imp-detalhe { font-size: 8.5pt; }
  .imp-nota { margin-top: 6px; font-size: 8.5pt; color: #4b5563; }
  .imp-vazio { font-size: 9pt; color: #4b5563; }
  .imp-rodape {
    margin-top: 14px;
    padding-top: 5px;
    border-top: 1px solid #d5dbe0;
    font-size: 7pt;
    color: #6b7280;
    text-align: center;
  }

@media print {
  /* o documento volta a existir no papel: o display:block saiu da regra geral
     para nao vazar na tela do painel */
  #impressao { display: block; }
  /* o painel inteiro sai de cena: sobra o documento. Sem isto o Chrome
     imprimiria o app com trilho, popovers e a lista lateral. */
  body { background: #fff; color: #111; height: auto; overflow: visible; }
  #app, #login, #ajustes, #instalacao, #alertas, #toasts, #barra-versao,
  .lightbox, .popover { display: none !important; }
  @page { size: A4 portrait; margin: 11mm 9mm; }

  /* ----- capa ----- */
  .imp-marca svg { fill: #fff; display: block; }
  .imp-emitido b { display: block; font-size: 9pt; }


  /* ----- números do período ----- */
  .imp-kpi b { display: block; font-size: 15pt; line-height: 1.1; letter-spacing: -.02em; }

  /* ----- painel de gráficos ----- */
  .graf { width: 100%; height: auto; display: block; overflow: visible; }
  .graf .guia { stroke: #e5e7eb; stroke-width: 1; }
  .graf .guia.base { stroke: #9ca3af; }
  .graf .guia-num { font-size: 7px; fill: #9ca3af; }
  .graf .eixo { font-size: 8px; fill: #6b7280; }
  .graf .rot { font-size: 9px; fill: #374151; }
  .graf .rot-legenda { font-size: 10px; fill: #374151; }
  .graf .val { font-size: 10px; font-weight: 700; fill: #111; }
  .graf .trilho { fill: #eef1f4; }
  .graf .rosca-num { font-size: 17px; font-weight: 700; fill: #111; }
  .graf .rosca-rot { font-size: 8px; fill: #6b7280; }

  /* ----- tabelas ----- */
  /* cabeçalho repetido em toda página e linha que não parte no meio */
}

/* ---------- prévia do relatório antes de baixar ---------- */
/* O documento é o MESMO nó da impressão, então aqui se desfaz o `display:none`
   dele e se dá a moldura de folha. */
#previa-pdf {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--fundo);
  display: flex;
  flex-direction: column;
}
#previa-pdf > header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
  flex-shrink: 0;
}
.previa-titulo { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.previa-titulo strong { color: var(--texto); font-size: 14px; }
.previa-titulo small { color: var(--texto-2); font-size: 12px; }
#previa-baixar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  padding: 9px 15px;
  background: linear-gradient(135deg, var(--verde-600), var(--verde-500));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#previa-baixar:disabled { opacity: .6; cursor: default; }
#previa-fechar {
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-2);
  border-radius: 9px;
  width: 34px;
  height: 34px;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
#previa-folha {
  flex: 1;
  overflow: auto;
  padding: 22px;
  display: flex;
  justify-content: center;
}
/* a folha nasce branca porque é assim que ela vai sair no arquivo: prévia com
   o tema escuro do painel mentiria sobre o resultado */
#previa-folha #impressao {
  display: block;
  background: #fff;
  color: #16191f;
  width: 210mm;
  max-width: 100%;
  padding: 14mm;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
#previa-nota {
  margin: 0;
  padding: 9px 18px 13px;
  text-align: center;
  color: var(--texto-2);
  font-size: 12px;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  flex-shrink: 0;
}
#previa-nota b { color: var(--texto); }
body.com-previa #app { overflow: hidden; }
/* na hora de imprimir, a prévia inteira sai do papel */
@media print { #previa-pdf { display: none !important; } }