:root {
  --bg: #eef1f4;
  --folha: #ffffff;
  --tinta: #1c2530;
  --suave: #5c6875;
  --linha: #d5dbe1;
  --cabeca: #e6ebf0;
  --marca: #17415f;
  --doc: #0b57b0;
  --ok: #17723f;
  --ok-fundo: #dff3e6;
  --falta: #8a94a0;
  --aviso-fundo: #fff4d6;
  --aviso-linha: #eccb7a;
  --aviso-texto: #5e3f00;
  --destaque: #f3f7fb;
  --foco: #fffbe6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font: 13px/1.35 "Segoe UI", Calibri, Arial, sans-serif;
}
.pagina { max-width: 1320px; margin: 0 auto; padding: 16px; }
h1 { font-size: 20px; margin: 0; color: var(--marca); }
h2 { font-size: 15px; margin: 0; }
.topo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
.topo p { margin: 0; color: var(--suave); }
.topo .acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
button {
  font: inherit;
  padding: 4px 10px;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--folha);
  color: var(--tinta);
  cursor: pointer;
}
button.principal { background: var(--marca); border-color: var(--marca); color: #fff; }
.faixa {
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-linha);
  color: var(--aviso-texto);
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}
#situacao { margin-left: 8px; font-weight: 600; }
#situacao.gravado { color: var(--ok); }
#situacao.falhou { color: #a3261b; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--suave); margin-bottom: 12px; }
.legenda b { font-weight: 600; }
.folha {
  background: var(--folha);
  border: 1px solid var(--linha);
  border-radius: 4px;
  margin-bottom: 16px;
  scroll-margin-top: 8px;
}
.folha-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  padding: 9px 12px;
  background: var(--marca);
  color: #fff;
  border-radius: 3px 3px 0 0;
}
.folha-topo .info { color: #cfdce7; }
.folha-topo input, .folha-topo select {
  font: inherit;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #5d8099;
  padding: 0 2px;
}
.folha-topo select option { color: var(--tinta); }
.folha-topo input:focus { outline: 0; background: #2c5877; }
.folha-topo .excluir { margin-left: auto; padding: 1px 8px; background: transparent; border-color: #5d8099; color: #cfdce7; }
.rolar { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { border: 1px solid var(--linha); padding: 3px 7px; white-space: nowrap; text-align: right; }
th { background: var(--cabeca); font-weight: 600; font-size: 12px; }
.esq { text-align: left; }
.centro { text-align: center; }
.doc { color: var(--doc); }
.forte { font-weight: 700; }
.total td { background: var(--destaque); font-weight: 700; }
.vazio { color: var(--falta); }
.semana a { color: var(--marca); font-weight: 700; }
td.campo { padding: 0; }
.campo input {
  width: 100%;
  min-width: 56px;
  border: 0;
  padding: 3px 7px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--doc);
  text-align: right;
  background: transparent;
}
.campo.esq input { text-align: left; }
.campo input:focus { outline: 2px solid var(--doc); outline-offset: -2px; background: var(--foco); }
.etapas { display: inline-flex; gap: 2px; }
.etapa {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #edf0f3;
  color: var(--falta);
}
.etapa.feita { background: var(--ok-fundo); color: var(--ok); font-weight: 600; }
.folha-topo .etapa { background: #2c5877; color: #a9bfd0; }
.folha-topo .etapa.feita { background: var(--ok-fundo); color: var(--ok); }
.grade {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(280px, 1.1fr) minmax(280px, 1.1fr);
  gap: 10px;
  padding: 10px 12px 0;
}
.largo { padding: 10px 12px; }
.bloco-titulo { font-size: 12px; font-weight: 700; color: var(--marca); margin: 0 0 3px; text-transform: uppercase; letter-spacing: .02em; }
.bloco + .bloco { margin-top: 10px; }
.avisos { padding: 0 12px 12px; display: grid; gap: 4px; }
.aviso {
  background: var(--aviso-fundo);
  border-left: 4px solid var(--aviso-linha);
  padding: 5px 9px;
  color: var(--aviso-texto);
}
.limpo { color: var(--ok); padding: 0 12px 12px; }
.nota { color: var(--suave); font-size: 12px; margin: 4px 0 0; }
.receber { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px 12px; }
.receber textarea, #campo-chave {
  width: 100%;
  font: inherit;
  padding: 6px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--linha);
  border-radius: 4px;
  display: block;
}
.zona {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  margin-bottom: 6px;
  padding: 10px;
  text-align: center;
  border: 2px dashed var(--linha);
  border-radius: 4px;
  color: var(--suave);
  cursor: pointer;
}
.zona.sobre { border-color: var(--doc); background: var(--foco); }
.zona.sem-chave { opacity: .6; }
.revisao { display: grid; gap: 10px; padding: 0 12px; }
.revisao:not(:empty) { padding-bottom: 12px; }
.cartao { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--linha); border-radius: 4px; background: var(--destaque); }
.cartao table { background: var(--folha); }
.cartao p { margin: 0; }
.cartao-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cartao-acoes select { font: inherit; padding: 3px; max-width: 100%; }
.ok-texto { color: var(--ok); font-weight: 600; }
@media (max-width: 980px) {
  .receber { grid-template-columns: minmax(0, 1fr); }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .grade > div { min-width: 0; overflow-x: auto; }
}