/*
  Espelho do cartão ponto.

  Uma tabela de 31 linhas num celular é hostil por natureza. As escolhas aqui existem
  para torná-la legível: rolagem horizontal contida, coluna do dia fixa, e números
  tabulares para as colunas se alinharem visualmente.
*/

.voltar {
  color: var(--primaria); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; padding: 0.4rem 0;
}
.espaco { width: 4rem; }

.espelho { max-width: 900px; margin: 0 auto; padding: 1rem 0.75rem 3rem; }

/* ─── Controles ────────────────────────────────────────────────────────── */

.controles {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.85rem; flex-wrap: wrap;
}

.btn-mes {
  width: 40px; height: 40px; font-size: 1.3rem; line-height: 1;
  background: var(--cartao); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 9px; cursor: pointer;
}
.btn-mes:hover:not(:disabled) { background: var(--fundo); }
.btn-mes:disabled { opacity: 0.35; cursor: not-allowed; }

.competencia {
  flex: 1; text-align: center; font-weight: 600;
  text-transform: capitalize; font-size: 1rem;
}

.filtro {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; color: var(--suave);
  padding: 0.5rem 0.25rem; cursor: pointer; width: 100%;
}
.filtro input { width: 18px; height: 18px; margin: 0; }

/* ─── Tabela ───────────────────────────────────────────────────────────── */

/*
  A rolagem fica NESTE contêiner, não no body. Página que rola de lado no celular
  parece quebrada; tabela que rola dentro de si mesma é comportamento esperado.
*/
.tabela-rolagem {
  overflow-x: auto;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  -webkit-overflow-scrolling: touch;
}

.cartao { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 560px; }

.cartao th {
  text-align: left; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--suave);
  padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--borda);
  background: var(--cartao); position: sticky; top: 0; z-index: 2;
}
.cartao th.num, .cartao td.num { text-align: right; font-variant-numeric: tabular-nums; }

.cartao td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.cartao tr:last-child td { border-bottom: 0; }

/* a coluna do dia acompanha a rolagem: sem ela, perde-se a referência da linha */
.col-dia {
  position: sticky; left: 0; z-index: 1;
  background: var(--cartao);
  display: flex; align-items: baseline; gap: 0.35rem;
  min-width: 68px;
}
.col-dia strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.semana { font-size: 0.72rem; color: var(--suave); text-transform: capitalize; }

.registros { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.batida {
  display: inline-block; padding: 0.15rem 0.45rem;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 6px; font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
/* batida feita sem rede: o trabalhador precisa saber que ela entrou depois */
.batida.offline { border-style: dashed; }

.sem { color: var(--suave); }

/* ─── Estados de linha ─────────────────────────────────────────────────── */

/*
  Cor sozinha não comunica — daí cada estado ter também um selo textual na coluna
  de observação. Quem não distingue as cores continua entendendo a linha.
*/
.fim-de-semana td { background: color-mix(in srgb, var(--primaria) 5%, transparent); }
.fim-de-semana .col-dia { background: color-mix(in srgb, var(--primaria) 5%, var(--cartao)); }

.em-aberto td { background: color-mix(in srgb, var(--erro) 8%, transparent); }
.em-aberto .col-dia { background: color-mix(in srgb, var(--erro) 8%, var(--cartao)); }

.sem-registro td { background: color-mix(in srgb, var(--atencao) 8%, transparent); }
.sem-registro .col-dia { background: color-mix(in srgb, var(--atencao) 8%, var(--cartao)); }

.tag {
  display: inline-block; padding: 0.12rem 0.45rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  white-space: nowrap; margin: 0.1rem 0;
}
.tag.alerta { background: var(--erro); color: #fff; }
.tag.neutro { background: var(--atencao); color: #fff; }
/* atraso e saída antecipada são informação, não alarme: pesam menos que uma falta */
.tag.suave { background: var(--fundo); color: var(--suave); border: 1px solid var(--borda); }
.tag.noturno { background: color-mix(in srgb, var(--primaria) 15%, transparent); color: var(--primaria); }

/* batida que o gestor desconsiderou: continua visível, mas riscada — some da
   apuração e não da vista, senão o trabalhador não entende o total */
.batida.desconsiderada { text-decoration: line-through; opacity: 0.55; }

.cartao td.extra { color: var(--ok); }
.cartao td.falta { color: var(--erro); }
.cartao td.extra:empty, .cartao td.falta:empty { color: var(--suave); }

/* faixas de extra empilhadas: 50% e 100% valem valores diferentes e não se somam */
.faixa { display: inline-block; font-size: 0.95rem; }
.faixa small { color: var(--suave); font-weight: 400; font-size: 0.75rem; }

.carregando { text-align: center; color: var(--suave); padding: 2rem 1rem; }

/* ─── Resumo ───────────────────────────────────────────────────────────── */

.resumo {
  margin-top: 1rem; padding: 1rem;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.resumo h2 {
  margin: 0 0 0.75rem; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--suave);
}

.resumo-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.85rem; margin: 0;
}
.resumo-grade dt { font-size: 0.78rem; color: var(--suave); margin-bottom: 0.15rem; }
.resumo-grade dd {
  margin: 0; font-size: 1.15rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.resumo-grade .destaque dd { color: var(--primaria); }

.nota {
  margin: 0.85rem 0 0; padding: 0.6rem 0.75rem;
  background: var(--atencao-fundo); color: var(--atencao);
  border-radius: 8px; font-size: 0.82rem;
}

.rodape-legal {
  margin: 1.25rem 0 0; font-size: 0.78rem; color: var(--suave);
  text-align: center; line-height: 1.5;
}

/* ─── Login ────────────────────────────────────────────────────────────── */

.tela-entrar {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 1rem;
}
.entrar-painel { width: 100%; max-width: 380px; }

.marca {
  text-align: center; font-size: 1.4rem; font-weight: 600;
  margin: 0 0 1.5rem; letter-spacing: -0.01em;
}

.cartao-entrar {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.5rem;
}

.campo-senha { position: relative; display: flex; align-items: center; }
.campo-senha input { padding-right: 5rem; }
.ver-senha {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-25%);
  background: none; border: 0; color: var(--primaria);
  font-size: 0.82rem; cursor: pointer; padding: 0.4rem 0.5rem;
}

.btn-entrar {
  width: 100%; min-height: 52px; margin-top: 0.35rem;
  font-size: 1rem; font-weight: 600; color: #fff;
  background: var(--primaria); border: 0; border-radius: var(--raio);
  cursor: pointer;
}
.btn-entrar:hover:not(:disabled) { background: var(--primaria-escura); }
.btn-entrar:disabled { opacity: 0.6; cursor: not-allowed; }

.ajuda {
  margin: 1rem 0 0; font-size: 0.8rem; color: var(--suave);
  text-align: center; line-height: 1.5;
}

@media (min-width: 640px) {
  .filtro { width: auto; margin-left: auto; }
}

/* ─── Login: bloco da empresa ──────────────────────────────────────────── */

/*
  Recolhido por padrão. O campo existe para o caso raro — contadora com o mesmo
  e-mail em várias empresas — e deixá-lo aberto faria todo trabalhador achar que
  precisa preencher um código que não tem.
*/
#bloco-empresa { margin-bottom: 0.9rem; }
#bloco-empresa summary {
  cursor: pointer; font-size: 0.8rem; color: var(--suave);
  padding: 0.35rem 0; list-style: none;
}
#bloco-empresa summary::-webkit-details-marker { display: none; }
#bloco-empresa summary::before { content: '▸ '; }
#bloco-empresa[open] summary::before { content: '▾ '; }
#bloco-empresa summary:hover { color: var(--primaria); }
#bloco-empresa label { margin-top: 0.4rem; margin-bottom: 0; }