/* =====================================================================
   A cola em si: unidade impressa + folha A4 com varias copias.
   Tudo dimensionado em em, controlado pelo font-size da celula, para
   que 9 / 6 / 2 por folha usem exatamente o mesmo HTML.
   ===================================================================== */

.cola {
  --tinta-cola: #101010;
  --tinta-fraca: #555;
  --linha: #b8b8b8;
  --destaque: #114234;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .35em;
  padding: .75em .8em .6em;
  background: #fff;
  color: var(--tinta-cola);
  border: 1.4px dashed #8a8a8a;
  border-radius: .55em;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  line-height: 1.25;
  overflow: hidden;
}

/* -------------------------------------------------------------- cabecalho */

.cola__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  padding-bottom: .35em;
  border-bottom: 1.4px solid var(--destaque);
}

.cola__marca {
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: .74em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--destaque);
}

.cola__uf {
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: .82em;
  letter-spacing: .04em;
  color: var(--tinta-cola);
}

.cola__tesoura { font-size: .9em; color: var(--tinta-fraca); line-height: 1; }

/* ------------------------------------------------------------------ itens */

.cola__itens { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: space-between; }

.cola__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .45em;
  padding: .28em 0;
  border-bottom: 1px dotted var(--linha);
}
.cola__item:last-child { border-bottom: 0; }

.cola--comfoto .cola__item { grid-template-columns: minmax(0, 1fr) auto auto; }

.cola__campo { min-width: 0; display: flex; flex-direction: column; }

.cola__foto {
  width: var(--foto, 2.4em);
  height: var(--foto, 2.4em);
  border-radius: .22em;
  border: 1px solid #b0b0b0;
  object-fit: cover;
  object-position: top center;
  background: #f0f0f0;
  display: block;
}
.cola__foto--vazia { border-style: dashed; border-color: #cfcfcf; }

.cola__cargo {
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cola__nome {
  font-size: .88em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cola__nome--vazio { color: #9a9a9a; font-weight: 500; font-style: italic; }

.cola__partido {
  font-style: normal;
  font-weight: 600;
  font-size: .82em;
  color: var(--tinta-fraca);
  margin-left: .4em;
  white-space: nowrap;
}

.cola__numero { display: flex; gap: .16em; }

.cola__digito {
  width: 1.16em; height: 1.52em;
  display: grid; place-items: center;
  border: 1.3px solid #4a4a4a;
  border-radius: .16em;
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.12em;
  letter-spacing: 0;
  color: var(--tinta-cola);
}
.cola__digito--vazio { border-color: #9a9a9a; }

/* ------------------------------------------------------ modelo compacto */

.cola--compacto .cola__itens { gap: 0; justify-content: space-between; }

.cola--compacto .cola__item {
  grid-template-columns: 1fr;
  gap: .04em;
  border-bottom: 0;
  padding: .12em 0;
}

.cola--compacto .cola__foto { display: none; }

.cola--compacto .cola__cargo { font-size: .7em; color: var(--tinta-cola); letter-spacing: .03em; }
.cola--compacto .cola__nome { font-size: .66em; font-weight: 600; color: var(--tinta-fraca); }

.cola--compacto .cola__numero { gap: .18em; margin-top: .06em; }
.cola--compacto .cola__digito { width: 1.28em; height: 1.5em; font-size: 1.1em; border-width: 1.5px; }

/* --------------------------------------------------------------- rodape */

.cola__pe {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  border-top: 1px solid var(--linha);
  padding-top: .3em;
  font-size: .6em;
  color: var(--tinta-fraca);
  line-height: 1.3;
}
.cola__pe span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cola__pe b { color: var(--destaque); font-weight: 700; }

/* ================================================================ folha */

.folha {
  box-sizing: border-box;
  width: 194mm;                    /* A4 (210mm) - 2 x 8mm de margem */
  background: #fff;
  color: #101010;
}

.folha__grade { display: grid; gap: 0; }

.folha[data-por-folha="9"] .folha__grade { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 93mm;  font-size: 8.4pt; --foto: 2.1em; }
.folha[data-por-folha="6"] .folha__grade { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 93mm;  font-size: 9pt;   --foto: 2.6em; }
.folha[data-por-folha="2"] .folha__grade { grid-template-columns: 1fr;            grid-auto-rows: 139mm; font-size: 14pt;  --foto: 3.2em; }

.folha__celula { padding: 1.5mm; break-inside: avoid; page-break-inside: avoid; }

/* economia de tinta: nada de cor, so contorno */
.folha--pb .cola {
  --destaque: #111;
  --tinta-fraca: #444;
}
.folha--pb .cola__digito { border-color: #111; }
.folha--pb .cola__foto { filter: grayscale(1) contrast(1.05); }

/* ------------------------------------------------- previa da folha na tela */

.folha-previa {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(6, 28, 22, .22);
  overflow: hidden;
  padding: 8mm 8mm;
  transform-origin: top center;
}

.previa__palco .cola {
  --foto: 2.6em;
  width: 76mm;
  min-height: 108mm;
  font-size: 9.6pt;
  box-shadow: 0 10px 26px rgba(6, 28, 22, .16);
  background: #fff;
}

/* ================================================================ imprimir */

@page { size: A4 portrait; margin: 8mm; }

@media print {
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nao-imprimir, .topo, .rodape, .barra-movel, .recado, .modal { display: none !important; }

  .so-impressao { display: block !important; }

  .folha-previa { box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; transform: none !important; }

  .area-impressao { display: block !important; position: static !important; left: auto !important; }

  .conteudo { margin: 0 !important; padding: 0 !important; }

  main, .envelope { margin: 0 !important; padding: 0 !important; max-width: none !important; }

  .folha { width: 100% !important; }

  .cola { box-shadow: none !important; }

  a[href]::after { content: "" !important; }
}