/* ───────────────────────────────────────────────────────────────────────
   Réplica do Anexo I do CIEE Rio.
   Medidas em pt, iguais às do PDF original: número do dia 6,4pt,
   código 4,2pt, texto #333333, fonte Calibri.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --navy:    #002060;   /* faixa do ano e cabeçalho do mês */
  --cinza:   #808080;   /* faixa dos dias da semana */
  --texto:   #333333;
  --verde:   #08A823;   /* Capacitação Prática */
  --amarelo: #FFFF00;   /* Capacitação Teórica */
  --vermelho:#FF0000;   /* Feriados */
  --laranja: #ED7D31;   /* Emendas */
  --azul:    #0070C0;   /* Folga (célula) */
  --azul-leg:#4285F4;   /* Folga (legenda — o original usa um azul diferente) */
  --cinza-f: #D0CECE;   /* Férias */

  --cinza-cl:#E7E6E6;   /* fundo das linhas de total do fechamento */

  /* Todas as medidas abaixo foram conferidas no PDF original do CIEE. */
  --cel-l: 16.71pt;     /* célula do dia: 117pt de mês ÷ 7 */
  --cel-a: 9.1pt;
  --mes-l: calc(var(--cel-l) * 7);
  --gap:   8pt;         /* entre meses na horizontal */
  --gap-v: 9.3pt;       /* entre linhas de meses */
  --margem-esq: 92pt;   /* recuo do bloco de conteúdo na folha */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #6a6a6a;
  font-family: Calibri, Carlito, 'Segoe UI', system-ui, sans-serif;
  color: var(--texto);
}

/* ── Barra de controle (só na tela) ─────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px;
  background: #1b1b1b; color: #eee;
  font-size: 13px;
}
.barra strong { color: #fff; font-weight: 600; }
.barra .dica { color: #9a9a9a; }
.barra button {
  font: inherit; padding: 6px 12px; border-radius: 5px; cursor: pointer;
  border: 1px solid #4a4a4a; background: #2c2c2c; color: #eee;
}
.barra button:hover { background: #3a3a3a; }
.barra button.primario { background: #0b5cad; border-color: #0b5cad; color: #fff; }
.barra button.primario:hover { background: #0d6cca; }
.barra .aviso { color: #ffb4b4; font-weight: 600; }
.barra .ok { color: #8fe08f; }

/* ── Folha A4 ───────────────────────────────────────────────────────── */
.folha {
  width: 595.32pt;
  min-height: 841.92pt;
  margin: 18px auto;
  padding: 74pt 0 30pt;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  zoom: 1.55;                 /* só para leitura na tela; a impressão usa 1 */
}
.conteudo { width: calc(var(--mes-l) * 3 + var(--gap) * 2); margin-left: var(--margem-esq); }

/* ── Cabeçalho ──────────────────────────────────────────────────────── */
.topo { display: flex; align-items: flex-start; gap: 14pt; margin: 2pt 0 14.1pt; }
.topo img { width: 56pt; height: auto; }
.topo .titulo { flex: 1; text-align: center; padding-top: 5pt; }
.topo .titulo b { font-size: 7pt; }
.topo .titulo div { font-size: 6.4pt; }

.identificacao {
  display: grid; grid-template-columns: 1fr 1fr;
  font-size: 6.4pt; line-height: 1.5; margin-bottom: 7.1pt;
}
.identificacao b { font-weight: 700; }

.curso { font-size: 6.4pt; line-height: 1.45; margin-bottom: 5pt; }
.curso .nome { font-weight: 700; }

/* ── Tabela de polos ────────────────────────────────────────────────── */
table.polos {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  font-size: 6.4pt; margin-bottom: 1pt;
}
table.polos td { vertical-align: top; }
table.polos th { font-weight: 700; padding-bottom: 2pt; }
table.polos td { padding: .3pt 0; white-space: nowrap; overflow: hidden; }
table.polos td span { display: inline-block; }
table.polos th { text-align: center; }
table.polos th:first-child, table.polos td:first-child { text-align: left; padding-right: 6pt; }
table.polos td:nth-child(2), table.polos td:nth-child(3), table.polos td:nth-child(4) { text-align: center; }
table.polos td:nth-child(5), table.polos td:nth-child(6) { text-align: left; }
table.polos a { color: #0563c1; }

/* ── Legenda ────────────────────────────────────────────────────────── */
/* As larguras são irregulares no original (vêm das colunas do Excel);
   reproduzidas aqui uma a uma, junto com o recuo de 35pt. */
.legenda {
  display: grid;
  grid-template-columns: 43.4pt 47pt 32.6pt 54pt 42pt 49pt;
  margin: 0 0 11.4pt 35pt;
}
.legenda span {
  border: .6pt solid #000; padding: 1.4pt 0;
  font-size: 5.6pt; font-weight: 700; text-align: center; white-space: nowrap;
}

/* ── Ano e meses ────────────────────────────────────────────────────── */
.ano {
  background: var(--navy); color: #fff;
  font-size: 12.7pt; font-weight: 700; text-align: center;
  height: 12.3pt; line-height: 12.3pt; margin-bottom: 14.8pt;
}
.meses {
  display: grid; grid-template-columns: repeat(3, var(--mes-l));
  gap: var(--gap-v) var(--gap); margin-bottom: 12.7pt;
}
.mes { break-inside: avoid; }
.mes-nome {
  background: var(--navy); color: #fff;
  font-size: 6.4pt; font-weight: 700; text-align: center;
  height: 9.3pt; line-height: 9.3pt;
}
.mes-grade { display: grid; grid-template-columns: repeat(7, var(--cel-l)); }
.mes-grade .sem {
  background: var(--cinza); color: #fff;
  font-size: 6.4pt; font-weight: 700; text-align: center;
  height: 8.9pt; line-height: 8.9pt;
}

/* ── Célula do dia ──────────────────────────────────────────────────── */
/* No Excel são duas células lado a lado — a estreita com a sigla, a larga
   com o número centralizado. A proporção 23/77 veio de medição no PDF. */
.dia {
  position: relative; height: var(--cel-a);
  border: .5pt solid #000; background: #fff;
  display: grid; grid-template-columns: 23% 77%; align-items: center;
}
.dia .cod {
  align-self: start; padding: .2pt 0 0 .5pt;
  font-size: 4.2pt; line-height: 1;
}
.dia .num { font-size: 6.4pt; line-height: 1; text-align: center; }
.dia.fora { display: block; }
.dia.fora .num {
  display: block; text-align: right; padding-right: 2pt;
  line-height: calc(var(--cel-a) - 1pt);
}

/* dias editáveis: só na tela */
.dia.editavel { cursor: pointer; }
.dia.editavel:hover { outline: 1.2pt solid #0b5cad; outline-offset: -1.2pt; z-index: 2; }
.dia.tocado::after {
  content: ''; position: absolute; right: 0; top: 0;
  border: 2.2pt solid transparent; border-right-color: #0b5cad; border-top-color: #0b5cad;
}

/* ── Fechamento ─────────────────────────────────────────────────────── */
.rodape { margin-top: 61.7pt; break-inside: avoid; }
table.fechamento {
  border-collapse: collapse; font-size: 6.4pt;
  width: 133pt; margin: 0 auto 5pt;
}
table.fechamento th, table.fechamento td {
  border: .5pt solid #000; padding: 0 3pt; height: 8pt; line-height: 8pt;
}
table.fechamento .cab { font-weight: 700; text-align: center; background: var(--cinza-cl); }
table.fechamento .rot { text-align: center; }
table.fechamento .n { text-align: center; width: 26pt; padding: 0 1pt; white-space: nowrap; }
table.fechamento tr.destaque .rot { font-weight: 700; background: var(--cinza-cl); }

table.percentual {
  border-collapse: collapse; font-size: 6.4pt;
  width: 133pt; margin: 0 auto;
}
table.percentual td {
  border: .5pt solid #000; padding: 0 3pt; height: 8pt; line-height: 8pt;
  text-align: center; font-weight: 700;
}
table.percentual tr:first-child td { background: var(--cinza-cl); }

.assinaturas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24pt 30pt;
  margin-top: 55.2pt; font-size: 6.4pt;
}
.assinaturas div { border-top: .8pt solid #000; padding-top: 2pt; }
.assinaturas b { display: block; font-weight: 700; }

/* ── Paleta de edição (só na tela) ──────────────────────────────────── */
.paleta {
  position: absolute; z-index: 100; display: none;
  background: #fff; border: 1px solid #bbb; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); padding: 8px; width: 190px;
  font-family: system-ui, sans-serif;
}
.paleta.aberta { display: block; }
.paleta .data { font-size: 11px; color: #666; margin: 0 4px 7px; }
.paleta button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 12px; text-align: left;
  padding: 5px 6px; border: 0; border-radius: 5px; background: none; cursor: pointer;
}
.paleta button:hover { background: #eef2f7; }
.paleta button i { width: 16px; height: 16px; border: 1px solid #555; border-radius: 3px; }
.paleta button span.sigla { color: #888; margin-left: auto; font-size: 11px; }

@media print {
  @page { size: A4 portrait; margin: 74pt 0 30pt; }
  body { background: #fff; }
  .barra, .paleta { display: none !important; }
  .folha { zoom: 1; margin: 0; padding: 0; box-shadow: none; width: auto; min-height: 0; }
  .dia.tocado::after { display: none; }
  .quebra-pagina { break-after: page; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}