:root {
  --fundo: #f4f6f5; --cartao: #ffffff; --texto: #1d2321; --suave: #5d6a65; --linha: #dfe5e2;
  --marca: #0f6b45; --marca-escura: #0b5034; --marca-clara: #e3f2ea;
  --alerta: #b54708; --alerta-fundo: #fef0e3; --erro: #b42318; --erro-fundo: #fdecea;
  --ok: #067647; --ok-fundo: #e6f6ec; --info-fundo: #eef3fb; --raio: 10px; --topo: #0f6b45;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #121614; --cartao: #1b211e; --texto: #e7ecea; --suave: #9aa8a2; --linha: #2c3531;
    --marca: #3fb37f; --marca-escura: #6fd0a3; --marca-clara: #1d3a2d;
    --alerta: #f5a35c; --alerta-fundo: #3a2817; --erro: #f8877c; --erro-fundo: #3d1d1a;
    --ok: #63d297; --ok-fundo: #173525; --info-fundo: #1c2533; --topo: #134a33; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--marca); }
h1 { font-size: 1.35rem; margin: 0 0 .8rem; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 .6rem; }
.topo { background: var(--topo); color: #fff; display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1rem; flex-wrap: wrap; }
.topo a { color: #fff; text-decoration: none; opacity: .92; font-weight: 500; padding: .25rem .1rem; }
.topo a:hover, .topo a.ativo { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.topo .marca { font-weight: 700; font-size: 1.05rem; margin-right: .5rem; }
.topo .menu { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; }
.topo .dir { margin-left: auto; display: flex; gap: .8rem; align-items: center; font-size: .9rem; }
.badge { background: #fff; color: var(--marca); border-radius: 999px; font-size: .75rem; padding: 0 .45rem;
  font-weight: 700; margin-left: .2rem; }
main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1rem; margin-bottom: 1rem; }
.grade { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
label { display: block; font-size: .85rem; color: var(--suave); margin-bottom: .2rem; }
input, select, textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--linha); border-radius: 8px;
  background: var(--cartao); color: var(--texto); font: inherit; }
input[type=checkbox] { width: auto; margin-right: .35rem; }
.check { display: flex; align-items: center; color: var(--texto); font-size: .95rem; }
textarea { min-height: 80px; }
button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  background: var(--marca); color: #fff; border: 0; border-radius: 8px; padding: .55rem 1rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button:hover, .botao:hover { background: var(--marca-escura); }
.botao.sec, button.sec { background: transparent; color: var(--marca); border: 1px solid var(--marca); }
.botao.perigo, button.perigo { background: #b42318; color: #fff; }   /* vermelho escuro: legivel no claro e no escuro */
.botao.perigo:hover, button.perigo:hover { background: #912018; }
.botao.peq, button.peq { padding: .25rem .6rem; font-size: .85rem; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .45rem .5rem; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela { overflow-x: auto; }
.aviso { padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1rem; background: var(--info-fundo); }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.tag { display: inline-block; border-radius: 6px; padding: 0 .4rem; font-size: .78rem; font-weight: 600;
  background: var(--marca-clara); color: var(--marca-escura); white-space: nowrap; }
.tag.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.tag.erro { background: var(--erro-fundo); color: var(--erro); }
.tag.cinza { background: var(--fundo); color: var(--suave); }
.suave { color: var(--suave); font-size: .9rem; }
.bat { display: inline-block; font-variant-numeric: tabular-nums; padding: 0 .25rem; border-radius: 4px; margin-right: .15rem; }
.bat.incluida { background: var(--info-fundo); font-style: italic; }
.bat.desconsiderada { text-decoration: line-through; color: var(--suave); }
.bat.secullum { }
tr.fds td { background: color-mix(in srgb, var(--fundo) 60%, transparent); }
tr.falta td:first-child { box-shadow: inset 3px 0 var(--erro); }
tr.pendente td:first-child { box-shadow: inset 3px 0 var(--alerta); }
td.bats { white-space: nowrap; }
td.bats-2 { min-width: 7.4rem; }   /* duas batidas por linha no celular */
tr.hoje td { background: var(--marca-clara); }
tr.dia:hover td, tr.dia:focus-visible td { background: var(--marca-clara); cursor: pointer; }
tr.dia:focus-visible { outline: none; }
.dif { color: var(--erro); font-weight: 700; }
dialog { border: 0; border-radius: 12px; padding: 0; width: min(560px, 94vw); background: var(--cartao); color: var(--texto); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog .conteudo { padding: 1rem; max-height: 85vh; overflow: auto; }
.fechar { float: right; background: transparent; color: var(--suave); font-size: 1.3rem; padding: 0 .3rem; }
.totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.totais div { background: var(--fundo); border-radius: 8px; padding: .5rem .6rem; }
.totais b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.totais span { font-size: .78rem; color: var(--suave); }
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.filtros > div { min-width: 150px; }
.navega { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: -.3rem 0 1rem; }
.navega .esp { flex: 1; }
ul.pend { list-style: none; padding: 0; margin: .6rem 0 0; }
ul.pend li { padding: .35rem 0; border-top: 1px solid var(--linha); display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
button:disabled { cursor: default; }
.sit-trabalhando { color: var(--ok); font-weight: 600; }
.sit-sem { color: var(--suave); }
@media print {
  .topo, .acoes, .naoimprime, form.filtros { display: none !important; }
  body { background: #fff; color: #000; font-size: 11px; }
  main { max-width: none; padding: 0; }
  .cartao { border: 0; box-shadow: none; padding: 0; }
  .pagina { page-break-after: always; }
  th, td { padding: 2px 4px; }
}
@media (max-width: 1180px) {
  /* Menu em uma linha que rola para o lado, em vez de quebrar em varias linhas. */
  .topo { row-gap: .35rem; }
  .topo .menu { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .1rem; }
  .topo .menu::-webkit-scrollbar { display: none; }
  .topo .menu a { white-space: nowrap; }
  .abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .abas::-webkit-scrollbar { display: none; }
  .abas a { white-space: nowrap; flex: none; }
}
@media (max-width: 640px) {
  main { padding: .7rem; }
  .topo { gap: .6rem; }
  .topo .dir { font-size: .85rem; }
  input, select, textarea { font-size: 16px; }   /* evita o zoom automatico do iPhone ao tocar no campo */
  .filtros > div { flex: 1 1 130px; min-width: 0; }
  .col-h { display: none; }
}
@media (pointer: coarse) {
  .botao.peq, button.peq { min-height: 36px; }
}