/* ==========================================================================
   Saida impressa do protocolo — A4 retrato.
   As medidas vieram do PDF exportado do Canva (595,5 x 842,25 pt):
     faixa preta do cabecalho .... 0     -> 123,0 pt  (14,60%)
     corpo da tabela ............. 122,9 -> 707,4 pt  (69,39%)
     faixa da nota de rodape ..... 707,4 -> 842,25 pt (16,01%)
     colunas ..................... 66 | 121,6 | 66,1 | 84,8 | 258,8 pt
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-700.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}

:root {
  --preto: #000000;
  --verde: #00ff00;
  --verde-nome: #4aff00;
  --verde-obs: #bdff00;
  --cinza-celula: #a5a5a5;
  --cinza-claro: #d9d9d9;
  --colunas: 11.08% 20.42% 11.1% 14.24% 1fr;
}

/* --------------------------------------------------------------- pagina -- */
.pagina {
  position: relative;
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  background: var(--preto);
  color: #fff;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  /* garante que o preto/verde saiam na impressao */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pagina * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- capa -- */
.pagina-capa {
  display: block;
}
.capa-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.capa-texto {
  position: absolute;
  left: 0;
  right: 0;
  top: 64.63%;
  text-align: center;
}
/* o titulo original usa uma grotesca larga; o espacamento abaixo iguala a
   largura da linha usando Poppins (medido contra o PDF de referencia) */
.capa-titulo,
.capa-nome {
  margin: 0;
  font-size: 35pt;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0.195em;
  text-indent: 0.195em; /* compensa o espaco extra do ultimo caractere */
  text-transform: uppercase;
}
.capa-titulo {
  color: var(--cinza-claro);
}
.capa-nome {
  margin-top: 0.9em;
  color: var(--verde-nome);
}
.capa-data {
  position: absolute;
  right: 19pt;
  top: 79%;
  font-size: 16pt;
  font-weight: 400;
  color: var(--cinza-claro);
}

/* -------------------------------------------------------- pagina treino -- */
.pagina-treino {
  display: grid;
  grid-template-rows: 14.6% 69.39% 16.01%;
}

.treino-cabecalho {
  display: grid;
  grid-template-columns: var(--colunas);
  background: var(--preto);
}
.treino-cabecalho > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4pt;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.treino-cabecalho .rotulo-treino {
  justify-content: flex-start;
  padding-left: 6pt;
  font-size: 14pt;
  line-height: 1.4;
  text-align: left;
  white-space: pre-line;
}
.treino-cabecalho .col-exercicio {
  font-size: 10pt;
}
.treino-cabecalho .col-serie,
.treino-cabecalho .col-repeticoes,
.treino-cabecalho .col-tecnica {
  font-size: 12pt;
}

/* corpo: as linhas dividem a altura disponivel por igual, como no Canva */
.treino-corpo {
  display: grid;
  grid-template-columns: var(--colunas);
  gap: 0.5pt;
  background: var(--preto);
}
.treino-corpo > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2pt 5pt;
  overflow: hidden;
  background: var(--cinza-celula);
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  color: var(--preto);
  text-align: center;
  /* sem hifenizacao: o original quebra so nos espacos */
  hyphens: none;
  overflow-wrap: break-word;
}
.treino-corpo .divisao {
  grid-column: 1;
  grid-row: 1 / -1;
  justify-content: flex-start;
  padding-left: 6pt;
  background: var(--verde);
  font-size: 14pt;
  line-height: 1.35;
  text-align: left;
  white-space: pre-line;
}
.treino-corpo .cel-exercicio {
  font-size: 10pt;
  line-height: 1.3;
}
.treino-corpo .cel-serie,
.treino-corpo .cel-repeticoes {
  font-size: 12pt;
}
.treino-corpo .cel-tecnica {
  font-size: 10pt;
  line-height: 1.35;
}

/* com muitos exercicios as linhas ficam baixas: reduz a fonte junto */
.pagina-treino[data-linhas="7"] .treino-corpo > div,
.pagina-treino[data-linhas="8"] .treino-corpo > div {
  font-size: 9.5pt;
}
.pagina-treino[data-linhas="7"] .treino-corpo .cel-serie,
.pagina-treino[data-linhas="7"] .treino-corpo .cel-repeticoes,
.pagina-treino[data-linhas="8"] .treino-corpo .cel-serie,
.pagina-treino[data-linhas="8"] .treino-corpo .cel-repeticoes {
  font-size: 11pt;
}
.pagina-treino[data-linhas="9"] .treino-corpo > div,
.pagina-treino[data-linhas="10"] .treino-corpo > div,
.pagina-treino[data-linhas="11"] .treino-corpo > div,
.pagina-treino[data-linhas="12"] .treino-corpo > div {
  font-size: 8.5pt;
  padding: 1pt 4pt;
}
.pagina-treino[data-linhas="9"] .treino-corpo .cel-serie,
.pagina-treino[data-linhas="9"] .treino-corpo .cel-repeticoes,
.pagina-treino[data-linhas="10"] .treino-corpo .cel-serie,
.pagina-treino[data-linhas="10"] .treino-corpo .cel-repeticoes,
.pagina-treino[data-linhas="11"] .treino-corpo .cel-serie,
.pagina-treino[data-linhas="11"] .treino-corpo .cel-repeticoes,
.pagina-treino[data-linhas="12"] .treino-corpo .cel-serie,
.pagina-treino[data-linhas="12"] .treino-corpo .cel-repeticoes {
  font-size: 10pt;
}
.pagina-treino[data-linhas="9"] .treino-corpo .divisao,
.pagina-treino[data-linhas="10"] .treino-corpo .divisao,
.pagina-treino[data-linhas="11"] .treino-corpo .divisao,
.pagina-treino[data-linhas="12"] .treino-corpo .divisao {
  font-size: 12pt;
}

.treino-rodape {
  display: flex;
  align-items: flex-start;
  padding: 26pt 8.5pt 0;
  background: var(--preto);
}
.treino-rodape p {
  margin: 0;
  font-size: 14.4pt;
  font-weight: 700;
  line-height: 1.355;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2pt;
}

/* -------------------------------------------------- pagina observacoes -- */
/* Atencao: porcentagem em padding/margin vertical no CSS e calculada sobre a
   LARGURA do elemento, nao a altura. Por isso as medidas verticais aqui usam pt. */
.pagina-obs {
  padding-top: 36.3pt;
}
.obs-faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85.09%;
  height: 45pt;
  margin-left: 9.35%;
  background: var(--verde-obs);
}
.obs-faixa h2 {
  margin: 0;
  font-size: 20pt;
  font-weight: 700;
  color: var(--preto);
}
.obs-itens {
  --obs-fonte: 17.4pt;
  margin: 11.8pt 33pt 0 40pt;
  padding-left: 12.4pt;
  list-style: disc;
}
.obs-itens li {
  margin-bottom: 1.4em;
  font-size: var(--obs-fonte);
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}
.obs-itens li::marker {
  color: #fff;
}

/* ------------------------------------------------------------ impressao -- */
@media print {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    height: auto !important;
    overflow: visible !important;
  }
  #app,
  #avisos,
  .visualizador-barra {
    display: none !important;
  }
  /* o visualizador vira a folha: sem barra, sem escala, sem fundo */
  #visualizador,
  #visualizador[hidden] {
    display: block !important;
    position: static !important;
    padding: 0 !important;
    background: none !important;
  }
  .visualizador-palco {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .palco-escala {
    transform: none !important;
    width: auto !important;
    height: auto !important;
    gap: 0 !important;
  }
  @page {
    size: A4 portrait;
    margin: 0;
  }
  .pagina {
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pagina:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}