/* ==========================================================================
   style.css — o visual do cartão de ponto
   --------------------------------------------------------------------------
   Ordem do arquivo: fontes, cores dos dois temas, página, cabeçalho, cartão,
   destaque (hora de saída), faixa do dia, campos, resumo, veredito, rodapé.
   ========================================================================== */

/* ------------------------------------------------------------------
   Fontes (ficam na pasta fonts/, então funcionam sem internet)
   Azeret Mono  -> os horários, como a impressão de um relógio de ponto
   Instrument Sans -> rótulos e textos
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Azeret Mono";
  src: url("fonts/azeret-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ------------------------------------------------------------------
   Cores. O tema ESCURO é o padrão; o claro vale quando o <html> tem
   data-tema="claro" (botão "Tema claro").
   Tinta de carimbo violeta para os horários e a tinta vermelha que os
   relógios de ponto usam para irregularidade.
   ------------------------------------------------------------------ */
:root {
  color-scheme: dark;
  --papel: #121A21;       /* fundo da página */
  --cartao: #1A252E;      /* o cartão */
  --tinta: #E8EEF0;       /* texto */
  --tinta-suave: #9AAAB5; /* texto secundário */
  --regua: #33434F;       /* linhas do cartão */
  --zerado: #5C6F7C;      /* 00:00 de quem ainda não tem valor */
  --carimbo: #B0A4FF;     /* horários carimbados e ações */
  --vermelho: #FF8A7D;    /* falta de horas e erros */
  --verde: #6FD3A4;       /* jornada garantida */
  --campo: #111920;
  --texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --numeros: "Azeret Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
}
:root[data-tema="claro"] {
  color-scheme: light;
  --papel: #EEF2EC;
  --cartao: #FBFCF9;
  --tinta: #18242F;
  --tinta-suave: #55636F;
  --regua: #BFD0C4;
  --zerado: #A3B5AA;
  --carimbo: #3D2F9E;
  --vermelho: #B8261B;
  --verde: #1B6747;
  --campo: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.45;
  /* respeita o entalhe/barras do celular quando instalado */
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.pagina { max-width: 27rem; margin: 0 auto; }

.num { font-family: var(--numeros); font-variant-numeric: tabular-nums; }

/* ---------- Cabeçalho ---------- */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem 1rem;
  padding: 0.25rem 0.25rem 0.75rem;
}
.topo .botao { height: 2.5rem; white-space: nowrap; }
.topo h1 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.hoje { flex-basis: 100%; margin: 0; color: var(--tinta-suave); font-size: 0.9375rem; }
.hoje .num { color: var(--tinta); font-weight: 500; margin-left: 0.5rem; }

/* ---------- O cartão ---------- */
.cartao {
  background: var(--cartao);
  border: 1px solid var(--regua);
  border-radius: 0.625rem;
  overflow: hidden;
}

/* ---------- Destaque: o contador de tempo trabalhado ---------- */
.destaque { padding: 1.25rem 1.25rem 1.125rem; border-bottom: 3px double var(--regua); }
.destaque-rotulo { margin: 0; font-size: 1rem; font-weight: 500; }
.carimbo {
  margin: 0.125rem 0 0.25rem -0.04em;
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(4rem, 21vw, 5.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--carimbo);
  transform-origin: 18% 60%;
}
.carimbo.vazio { color: var(--zerado); font-weight: 300; }
.destaque-detalhe { margin: 0; min-height: 1.45em; }
.destaque-detalhe.pede { color: var(--carimbo); font-weight: 600; }
.destaque-detalhe.erro { color: var(--vermelho); font-weight: 600; }

/* ---------- Faixa do dia: manhã, almoço, tarde, o que falta ---------- */
.faixa { margin-top: 1rem; }
.faixa-trilho {
  position: relative;
  height: 0.875rem;
  border: 1px solid var(--tinta-suave);
  border-radius: 2px;
  background: var(--campo);
}
.faixa-trilho > i { position: absolute; top: 0; bottom: 0; display: block; }
.seg-trabalho { background: var(--tinta); }
.seg-almoco {
  background: repeating-linear-gradient(135deg, var(--regua) 0 3px, transparent 3px 6px);
}
.marca-saida { width: 3px; margin-left: -1.5px; top: -5px !important; bottom: -5px !important; background: var(--carimbo); }
.marca-desejada { width: 0; margin-left: -1px; top: -5px !important; bottom: -5px !important; border-left: 2px dashed var(--tinta-suave); }
.marca-desejada.curta { border-left-color: var(--vermelho); }
.faixa-legenda {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}

/* ---------- Batidas (os campos) ---------- */
.batidas { margin: 0; }
.linha {
  display: grid;
  grid-template-columns: 1fr auto 4.75rem;
  align-items: center;
  column-gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--regua);
}
.linha label { font-weight: 500; }
.linha label small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--tinta-suave); }

.linha input {
  width: 5.5rem;
  height: 2.75rem;
  padding: 0;
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--carimbo);
  background: var(--campo);
  border: 1.5px solid var(--regua);
  border-radius: 0.375rem;
  caret-color: var(--tinta);
}
.linha input::placeholder { color: var(--zerado); opacity: 1; }
.linha input:focus-visible,
.botao:focus-visible {
  outline: 2px solid var(--carimbo);
  outline-offset: 2px;
}
/* o próximo campo que o app está pedindo */
.linha.pede input { border-style: dashed; border-color: var(--carimbo); }
.linha.invalida input { border-color: var(--vermelho); color: var(--vermelho); }
/* a volta do almoço: resultado calculado, não um campo para digitar */
.linha.calculada input { border-style: solid; border-color: var(--carimbo); cursor: default; }
.linha.calculada input:placeholder-shown { border-color: var(--regua); }
.linha .msg {
  grid-column: 1 / -1;
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--vermelho);
}

.botao {
  height: 2.75rem;
  padding: 0 0.75rem;
  font: inherit;
  font-weight: 600;
  color: var(--carimbo);
  background: transparent;
  border: 1.5px solid var(--carimbo);
  border-radius: 0.375rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.linha .botao { padding: 0; }
.botao:active { background: var(--carimbo); color: var(--cartao); }
.botao.discreto { color: var(--tinta-suave); border-color: var(--regua); font-weight: 500; }
.botao.discreto:active { background: var(--regua); color: var(--tinta); }
.botao.confirmar { color: var(--vermelho); border-color: var(--vermelho); }

/* ---------- Resumo ---------- */
.resumo { margin: 0; padding: 0.25rem 1.25rem 0.5rem; }
.resumo > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}
.resumo > div + div { border-top: 1px dotted var(--regua); }
.resumo dt { color: var(--tinta-suave); }
.resumo dd {
  margin: 0;
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 500;
  white-space: nowrap;
}
.resumo dd.vazio { color: var(--zerado); }
.resumo dd.extra { color: var(--verde); }

/* ---------- Veredito da saída desejada e avisos ---------- */
.veredito {
  margin: 0;
  padding: 0.875rem 1.25rem;
  border-top: 3px double var(--regua);
  font-weight: 500;
}
.veredito.ok { color: var(--verde); }
.veredito.curto { color: var(--vermelho); }
.veredito .num { font-weight: 600; }
.avisos { margin: 0; padding: 0 1.25rem 0.875rem; list-style: none; font-size: 0.875rem; color: var(--tinta-suave); }
.avisos li + li { margin-top: 0.25rem; }

/* ---------- Rodapé ---------- */
.rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0.25rem 0;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}
.rodape p { margin: 0; }
.rodape .acoes { display: flex; gap: 0.5rem; margin-left: auto; }
.rodape .credito {
  flex-basis: 100%;
  margin-top: 0.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--regua);
  text-align: center;
}

[hidden] { display: none !important; }

@media (max-width: 22rem) {
  .linha { grid-template-columns: 1fr auto 4.25rem; padding-left: 1rem; padding-right: 1rem; }
  .linha input { width: 5rem; font-size: 1.125rem; }
  .destaque, .resumo, .veredito, .avisos { padding-left: 1rem; padding-right: 1rem; }
}