/* =====================================================================
   Marca Tempoon, compartilhada pelo Tempoon (gestão de equipe) e pelo financeiro do Tempoon+.
   Estrutura do padrão v3 (superfícies brancas com borda fina, lateral com o conteúdo numa folha encaixada)
   com as cores e as fontes do manual de marca: Carimbo #5B45E0 nas ações e nos dados, Luz #FFB82E só no
   destaque, Tinta #1E1B3A no texto, Névoa #F3F2FA no fundo; Caixa e Saída só em dinheiro e alerta.
   Unbounded nos títulos e números grandes, Figtree no texto, Martian Mono em horários e rótulos.
   ===================================================================== */
:root {
  --fundo: #F3F2FA;
  --surface: #FFFFFF;
  --surface-2: #F9F8FD;
  --hover: #F0EEF8;
  --ink: #1E1B3A;
  --ink-2: #5F5C78;
  --mute: #8C89A6;
  --line: #E4E1F0;
  --line-2: #EFEDF7;
  --brand: #5B45E0;
  --brand-ink: #FFFFFF;
  --dado: #5B45E0;
  --dado-2: #DCD6FB;
  --dado-soft: #EFECFF;
  --pos: #0D7F55;
  --pos-soft: #E6F6EF;
  --neg: #D1332B;
  --neg-soft: #FCEDEC;
  --warn: #A86400;
  --warn-soft: #FFF4E0;
  --r-s: 8px;
  --r-m: 10px;
  --r-l: 12px;
  --font: "Figtree", "Segoe UI", system-ui, sans-serif;
  --display: "Unbounded", "Figtree", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, Consolas, monospace;
  --luz: #FFB82E;
  --caixa: #12A66F;
  --saida: #E5484D;
  --carimbo-claro: #8F7DFF;
  --sombra: 0 1px 2px rgba(30, 27, 58, .04), 0 4px 16px rgba(30, 27, 58, .06);
  --sombra-forte: 0 12px 40px rgba(30, 27, 58, .14), 0 2px 6px rgba(30, 27, 58, .06);
  /* nomes antigos, mantidos para as telas */
  --bg: var(--fundo);
  --accent: var(--dado);
  --accent-soft: var(--dado-soft);
  --brand-soft: var(--dado-soft);
  --ok: var(--pos);
  --bad: var(--neg);
  --dark-mute: var(--mute);
  --dark-line: var(--line-2);
  --dark-2: var(--surface-2);
  --brand-on-dark: var(--dado);
  --r1: var(--r-s);
  --r2: var(--r-m);
  --r3: var(--r-l);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--ink); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; font-feature-settings: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: #D1CEE2; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.mute { color: var(--mute); }
.ink2 { color: var(--ink-2); }
.pos, .ok { color: var(--pos); }
.neg, .bad { color: var(--neg); }
.warn { color: var(--warn); }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 14px; height: 14px; }
svg.i.lg { width: 20px; height: 20px; }
svg.i.xl { width: 24px; height: 24px; }
:focus-visible { outline: 2px solid var(--dado); outline-offset: 2px; }
::selection { background: var(--dado-2); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: 0 1px 1px rgba(30, 27, 58, .03); transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn.primario, .btn.escuro { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(30, 27, 58,.12), inset 0 1px 0 rgba(255,255,255,.08); }
.btn.primario:hover, .btn.escuro:hover { background: #2E2A55; border-color: #2E2A55; }
.btn.pos { color: var(--pos); }
.btn.neg { color: var(--neg); }
.btn.suave { background: var(--hover); border-color: transparent; }
.btn.fantasma { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn.fantasma:hover { background: var(--hover); color: var(--ink); }
.btn.perigo { color: var(--neg); }
.btn.grande { height: 46px; font-size: 15px; width: 100%; border-radius: var(--r-m); }
.btn.icone { width: 32px; height: 32px; padding: 0; }
.btn.peq { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .atalho { font-family: var(--mono); font-size: 11px; color: var(--mute); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* ---------- Campos ---------- */
.campo { display: grid; gap: 6px; }
.campo > span { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.campo small { color: var(--mute); font-size: 12px; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; height: 36px; padding: 0 11px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--surface); font-size: 14px; box-shadow: 0 1px 1px rgba(30, 27, 58,.03);
  transition: border-color .12s, box-shadow .12s;
}
textarea.entrada { height: auto; min-height: 80px; padding: 9px 11px; resize: vertical; }
.entrada::placeholder { color: #A9A6BF; }
.entrada:focus { outline: none; border-color: #A19EB8; box-shadow: 0 0 0 3px rgba(30, 27, 58,.06); }
select.entrada { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.entrada.curta { width: auto; min-width: 150px; }
.entrada.valor-grande { height: 60px; font-size: 32px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; border: 0; box-shadow: none; padding: 0; background: transparent; }
.entrada.valor-grande:focus { box-shadow: none; }
.grade-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grade-form .inteiro { grid-column: 1 / -1; }
.erro-form { color: var(--neg); font-size: 13px; }

/* ---------- Casca: lateral cinza + folha branca encaixada ---------- */
.casca { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.trilho { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 10px; overflow-y: auto; scrollbar-width: none; }
.trilho::-webkit-scrollbar { display: none; }
.marca { display: flex; align-items: center; gap: 9px; padding: 6px 8px 14px; min-width: 0; }
.marca-sinal { width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.marca-sinal svg.i { width: 15px; height: 15px; }
.marca > div { min-width: 0; }
.marca b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca small { display: block; color: var(--mute); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilho nav { display: grid; gap: 1px; }
.trilho nav a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; text-decoration: none; transition: background .12s, color .12s; }
.trilho nav a svg { color: #8C89A6; }
.trilho nav a:hover { background: rgba(30, 27, 58, .045); color: var(--ink); }
.trilho nav a.ativo { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 27, 58,.06), 0 0 0 1px var(--line); }
.trilho nav a.ativo svg { color: var(--ink); }
.trilho nav a .contador { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; background: var(--neg); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
/* Menu em grupos: marca da loja no topo, três grupos, e no pé o resumo do mês, Ajustes e quem está logado. */
.marca-menu { margin: 0 0 8px; padding: 8px 8px 14px; border-bottom: 1px solid var(--line); border-radius: 0; }
.marca-menu .marca-sinal { width: 32px; height: 32px; border-radius: 9px; }
.marca-menu .marca-sinal svg.i { width: 17px; height: 17px; }
.marca-menu b { font-size: 14px; }
.nav-menu { gap: 14px !important; }
.grupo-menu { display: grid; gap: 1px; }
.trilho .rotulo-grupo { font-size: 11px; font-weight: 600; color: #A19EB8; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px 6px; }
.trilho nav a > span:first-of-type { flex: 1; min-width: 0; }
.dica-menu { font-size: 11.5px; font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; }
.trilho nav a.ativo .dica-menu { color: var(--ink-2); }
.falta-definir { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); margin-right: 4px; }
.pe-menu { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; }
.resumo-menu { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(30, 27, 58,.03); }
.resumo-menu:hover { border-color: #D8D5E8; }
.resumo-menu > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.resumo-menu small { color: var(--mute); font-size: 11.5px; }
.resumo-menu b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.resumo-menu .barra { min-width: 0; height: 5px; }
.pe-menu nav { border-top: 1px solid var(--line); padding-top: 8px; }
.trilho .pe { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--r-m); }
.trilho .pe:hover { background: rgba(30, 27, 58,.035); }
.trilho .pe .quem { flex: 1; min-width: 0; }
.trilho .pe b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilho .pe small { color: var(--mute); font-size: 12px; }
.miolo {
  min-width: 0; margin: 8px 8px 8px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(30, 27, 58,.03); padding: 26px 34px 72px; min-height: calc(100vh - 16px);
}
.barra-inferior { display: none; }

.cabeca { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.cabeca h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.cabeca p { color: var(--mute); margin-top: 2px; font-size: 13.5px; }
.cabeca .acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--mute); font-size: 13px; font-weight: 500; margin-bottom: 12px; text-decoration: none; }
.voltar:hover { color: var(--ink); }

/* ---------- Resumo (o número principal da tela) ---------- */
.heroi { border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px 24px 0; display: grid; gap: 14px; background: var(--surface); }
.heroi .rotulo { color: var(--mute); font-size: 13px; font-weight: 500; }
.heroi .gigante { font-weight: 500; font-size: clamp(34px, 4.6vw, 44px); line-height: 1.05; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.heroi .frase { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 72ch; }
.heroi .frase b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.heroi .frase .pos { color: var(--pos); }
.heroi .frase .neg { color: var(--neg); }
.heroi .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 6px -24px 0; border-top: 1px solid var(--line); }
.heroi .grade > div { padding: 14px 24px 16px; }
.heroi .grade > div + div { border-left: 1px solid var(--line); }
.heroi .grade small { display: block; color: var(--mute); font-size: 12.5px; font-weight: 500; }
.heroi .grade b { display: block; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.heroi .grade span { display: block; font-size: 12px; color: var(--mute); margin-top: 1px; }
.heroi > :last-child:not(.grade) { margin-bottom: 22px; }
.heroi .trilha { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; position: relative; }
.heroi .trilha > i { position: absolute; inset: 0 auto 0 0; background: var(--dado); border-radius: 3px; }
.heroi .trilha > i.proj { background: var(--dado-2); }
.heroi .trilha > i.ok { background: var(--pos); }

a.cartao, a.painel, a.cartao-pessoa, .linhas a, .trilho a, .barra-inferior a, .abas-func a { text-decoration: none; color: inherit; }

/* ---------- Resumo com gráfico de área ---------- */
.heroi .topo-heroi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 440px); gap: 28px; align-items: end; }
.heroi .topo-heroi > div { min-width: 0; display: grid; gap: 10px; }
.area svg { width: 100%; display: block; overflow: visible; }
.area .linha-area { fill: none; stroke: var(--dado); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area .linha-ref { fill: none; stroke: #C4C4C1; stroke-width: 1.25; stroke-dasharray: 4 4; }
.area .eixo-area { fill: #A19EB8; font: 500 11px var(--font); }
.area .rot-ref { fill: #8C89A6; font: 500 11px var(--font); }
.area .ponto { fill: var(--surface); stroke: var(--dado); stroke-width: 2; }
.area .base { stroke: var(--line); stroke-width: 1; }
@media (max-width: 1000px) { .heroi .topo-heroi { grid-template-columns: 1fr; } }

/* ---------- Cartões ---------- */
.painel { background: var(--surface); border-radius: var(--r-l); border: 1px solid var(--line); overflow: hidden; }
.painel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.painel-cab h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.painel-cab p { color: var(--mute); font-size: 12.5px; margin-top: 1px; }
.painel-corpo { padding: 16px 18px; }
.pilha { display: grid; gap: 16px; margin-top: 16px; }
.duas { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; align-items: start; }
.duas > * { min-width: 0; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vazio { padding: 28px 18px; text-align: center; color: var(--mute); font-size: 13.5px; }

/* ---------- Listas ---------- */
.linhas { list-style: none; margin: 0; padding: 4px 0; }
.linhas > li { display: flex; align-items: center; gap: 12px; padding: 9px 18px; min-height: 48px; }
.linhas > li + li { border-top: 1px solid var(--line-2); }
.linhas .cresce { flex: 1; min-width: 0; }
.linhas .titulo { font-weight: 500; font-size: 13.5px; }
.linhas .sub { color: var(--mute); font-size: 12.5px; }
.linhas > li.clicavel { cursor: pointer; transition: background .1s; }
.linhas > li.clicavel:hover { background: var(--surface-2); }

/* ---------- Pessoas ---------- */
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 600; font-size: 11.5px; background: #EFEFED; color: #5C5C5C; position: relative; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(30, 27, 58,.05); }
.avatar.g { width: 40px; height: 40px; font-size: 13.5px; }
.avatar.gg { width: 56px; height: 56px; font-size: 18px; }
.avatar .ponto-status { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); background: #C6C3D8; }
.ponto-status.ok { background: #12A66F !important; }
.ponto-status.warn { background: #F2A516 !important; }
.ponto-status.bad { background: var(--neg) !important; }
.pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.pessoa > div { min-width: 0; }
.pessoa b { display: block; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pessoa small { display: block; color: var(--mute); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cartoes-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
/* min-width: 0 e a coluna minmax(0, 1fr): nome comprido não alarga o cartão por cima do vizinho. */
.cartao-pessoa { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.cartao-pessoa:hover { border-color: #D4D4D1; box-shadow: var(--sombra); }
.cartao-pessoa .topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cartao-pessoa .topo .quem { min-width: 0; flex: 1; }
.cartao-pessoa .topo .quem b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.cartao-pessoa .topo .quem span { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-pessoa .numeros { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; min-width: 0; }
.cartao-pessoa .numeros b { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cartao-pessoa .numeros small { display: block; color: var(--mute); font-size: 12px; }
.cartao-pessoa .rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; font-size: 12.5px; color: var(--ink-2); }
.cartao-pessoa .rodape .estado { white-space: nowrap; }

/* ---------- Anel ---------- */
.anel { position: relative; display: grid; place-items: center; flex: none; }
.anel svg { display: block; transform: rotate(-90deg); }
.anel .fundo-anel { stroke: var(--line-2); }
.anel .frente-anel { stroke: var(--dado); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.anel.ok .frente-anel { stroke: #12A66F; }
.anel.lento .frente-anel { stroke: #F2A516; }
.anel span { position: absolute; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---------- Barras ---------- */
.barra { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; position: relative; min-width: 60px; }
.barra > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--dado); }
.barra.ok > i, .barra.pos > i { background: #12A66F; }
.barra.neg > i { background: #E5484D; }
.barra.lento > i { background: #F2A516; }
.barra.grossa { height: 8px; border-radius: 4px; }
.barra > i.proj { background: var(--dado-2) !important; }

/* ---------- Pendências ---------- */
.atencao { list-style: none; margin: 0; padding: 4px 0; }
.atencao li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; }
.atencao li + li { border-top: 1px solid var(--line-2); }
.atencao .sinal { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--warn-soft); color: var(--warn); }
.atencao .sinal.neg { background: var(--neg-soft); color: var(--neg); }
.atencao .sinal.info { background: var(--hover); color: var(--ink-2); }
.atencao .texto { flex: 1; min-width: 0; }
.atencao .texto b { display: block; font-weight: 500; font-size: 13.5px; }
.atencao .texto span { color: var(--mute); font-size: 12.5px; }
.tudo-certo { display: flex; align-items: center; gap: 10px; padding: 18px; color: var(--mute); font-size: 13.5px; }
.tudo-certo svg { color: #12A66F; }

/* ---------- Estado ---------- */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #C6C3D8; flex: none; }
.estado.ok::before { background: #12A66F; }
.estado.warn::before { background: #F2A516; }
.estado.bad::before { background: var(--neg); }
.estado.bad { color: var(--neg); }
.etiqueta { font-size: 11.5px; font-weight: 500; color: var(--mute); }

/* ---------- Guias (controle segmentado) ---------- */
.guias { display: inline-flex; gap: 2px; padding: 2px; background: var(--hover); border-radius: 9px; max-width: 100%; overflow-x: auto; margin-bottom: 18px; border: 1px solid var(--line-2); }
.guias a, .guias button { padding: 5px 12px; border-radius: 7px; color: var(--ink-2); font-weight: 500; font-size: 13px; border: 0; background: transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.guias a:hover { color: var(--ink); }
.guias .ativo { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 27, 58,.08), 0 0 0 1px rgba(30, 27, 58,.04); }

/* ---------- Tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { text-align: left; font-size: 12px; font-weight: 500; color: var(--mute); padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.t td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.t tbody tr:hover td { background: var(--surface-2); }
.t tr:last-child td { border-bottom: 0; }
.t th:first-child, .t td:first-child { padding-left: 18px; }
.t th:last-child, .t td:last-child { padding-right: 18px; }
.t .dir { text-align: right; }
.t .centro { text-align: center; }
.t .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.t tr.fim-semana td { color: #B5B5B5; }
.t tfoot td { font-weight: 600; border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---------- Gráfico ---------- */
.grafico { padding: 12px 18px 12px; }
.grafico svg { width: 100%; display: block; overflow: visible; }
.grafico .eixo { fill: #A19EB8; font: 500 11px var(--font); }
.grafico .grade { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .coluna { fill: var(--dado-2); transition: fill .12s; }
.grafico .coluna:hover { fill: #B4C9FF; }
.grafico .coluna.hoje { fill: var(--dado); }

/* ---------- Período ---------- */
.periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.periodo-custom { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.periodo-custom .entrada { width: 150px; }
.periodo-datas { font-size: 12.5px; color: var(--mute); }
.carregando-periodo { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.carregando-periodo svg { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Tarefas ---------- */
.checar { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #CBC8DC; background: var(--surface); display: grid; place-items: center; cursor: pointer; flex: none; color: transparent; padding: 0; transition: all .12s; }
.checar svg.i { width: 12px; height: 12px; stroke-width: 2.5; }
.checar:hover { border-color: var(--ink); }
.checar.feito { background: var(--ink); border-color: var(--ink); color: #fff; }
.tarefa-titulo { font-weight: 500; font-size: 13.5px; }
.tarefa-titulo.feito { text-decoration: line-through; color: var(--mute); font-weight: 400; }
.tarefa-desc { color: var(--mute); font-size: 12.5px; margin-top: 1px; }
.prazo { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.compor { display: grid; grid-template-columns: 1fr 190px 140px auto; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }

/* ---------- Etapas do ponto ---------- */
.etapas { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.etapas.sab { grid-template-columns: repeat(2, 1fr); }
.etapa { padding: 10px 6px; text-align: center; background: var(--surface); }
.etapa + .etapa { border-left: 1px solid var(--line); }
.etapa small { display: block; font-size: 11.5px; color: var(--mute); font-weight: 500; }
.etapa b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.etapa.feita b { color: var(--ink); }
.etapa.feita small::before { content: "✓ "; color: #12A66F; }
.etapa.proxima { background: var(--dado-soft); }
.etapa.proxima small { color: var(--dado); }
.etapa .vazio-hora { color: #CFCCE0; }

/* ---------- QR do ponto ---------- */
.qr-painel { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding-bottom: 22px; }
.qr-caixa { background: #fff; padding: 10px; border-radius: 10px; line-height: 0; border: 1px solid var(--line); }
.qr-caixa img, .qr-caixa canvas { display: block; }
.contagem { height: 3px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.contagem > i { display: block; height: 100%; background: var(--dado); transition: width 1s linear; }
.qr-tela { position: fixed; inset: 0; background: #F9F8FD; color: var(--ink); display: grid; place-items: center; padding: 24px; z-index: 50; }
.qr-tela .miolo-qr { display: grid; justify-items: center; gap: 16px; text-align: center; width: min(560px, 100%); }
.qr-tela .qr-caixa { padding: 20px; border-radius: 20px; box-shadow: var(--sombra-forte); border: 0; }
.qr-tela h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.qr-tela .relogio { font-size: 56px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.qr-tela .fechar { position: absolute; top: 18px; right: 18px; }
.qr-tela p { color: var(--mute); }

/* ---------- Leitor de QR ---------- */
.leitor { position: fixed; inset: 0; background: #1E1B3A; color: #fff; z-index: 60; display: grid; grid-template-rows: auto 1fr auto; }
.leitor header { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; }
.leitor header b { font-size: 16px; font-weight: 600; }
.leitor .visor { position: relative; overflow: hidden; display: grid; place-items: center; }
.leitor video { width: 100%; height: 100%; object-fit: cover; }
.leitor .mira { position: absolute; width: min(66vw, 280px); aspect-ratio: 1; border-radius: 24px; box-shadow: 0 0 0 100vmax rgba(30, 27, 58, .6); border: 2px solid #fff; }
.leitor .semcamera { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: #BDBDBD; }
.leitor footer { padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.leitor footer p { text-align: center; color: #BDBDBD; font-size: 13.5px; }
.leitor .btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }

/* ---------- Modal e gaveta ---------- */
.fundo { position: fixed; inset: 0; background: rgba(30, 27, 58, .28); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; z-index: 80; animation: surge .14s ease-out; }
.janela { background: var(--surface); border-radius: 14px; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--sombra-forte); border: 1px solid var(--line); }
.janela.larga { width: min(640px, 100%); }
.janela header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; }
.janela header h2 { font-size: 16px; font-weight: 600; }
.janela .conteudo { padding: 16px 18px; display: grid; gap: 14px; }
.janela footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.torrada {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 90;
  display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; box-shadow: var(--sombra-forte); animation: surge .18s ease-out; max-width: calc(100vw - 32px);
}
.torrada.ok svg { color: #4ADE80; }
.torrada.bad svg { color: #F87171; }
@keyframes surge { from { opacity: 0; transform: translate(var(--tx, 0), 6px); } }
.torrada { --tx: -50%; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.aviso b { color: var(--ink); font-weight: 600; }
.aviso svg { color: var(--ink-2); margin-top: 2px; }
.aviso.warn { background: var(--warn-soft); border-color: #F5DDB5; }
.aviso.warn svg { color: var(--warn); }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); }
.login-form { display: grid; place-items: center; padding: 32px 20px; order: 1; }
.login-lado { order: 2; margin: 8px; border-radius: 16px; background: var(--fundo); border: 1px solid var(--line); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  background-image: radial-gradient(circle at 1px 1px, #DEDEDB 1px, transparent 0); background-size: 22px 22px; }
.login-lado h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; font-weight: 600; letter-spacing: -0.04em; max-width: 16ch; }
.login-lado h1 em { font-style: normal; color: var(--mute); }
.login-lado p { color: var(--ink-2); max-width: 46ch; font-size: 15px; margin-top: 14px; }
.login-lado ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.login-lado li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; max-width: 420px; box-shadow: 0 1px 2px rgba(30, 27, 58,.03); }
.login-form form { width: min(360px, 100%); display: grid; gap: 14px; }
.login-form h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.demo { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; display: grid; gap: 8px; }
.demo small { color: var(--mute); font-size: 12.5px; }
.ok-form { color: var(--pos); font-size: 13px; line-height: 1.5; background: var(--pos-soft); border-radius: var(--r-s); padding: 10px 12px; }
.ok-form[hidden] { display: none; }
.links-auth { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.links-auth a { color: var(--ink-2); }
.links-auth .btn { padding: 0; height: auto; color: var(--ink-2); text-decoration: underline; text-decoration-color: #D1CEE2; text-underline-offset: 3px; }
.chaves-gc { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface-2); }
.carregando-app { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--mute); font-size: 14px; }
.carregando-app .marca-sinal { width: 40px; height: 40px; border-radius: 11px; animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .45; } }

/* ---------- Celular do funcionário ---------- */
.func { max-width: 520px; margin: 0 auto; min-height: 100vh; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px)); background: var(--fundo); }
.func-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.func-topo h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.func-topo p { color: var(--mute); font-size: 13px; margin-top: 1px; }
.func-topo p::first-letter { text-transform: uppercase; }
.func .heroi { background: var(--surface); }
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; }
.cartao + .cartao, .heroi + .cartao, .cartao + .heroi { margin-top: 12px; }
.cartao h2 { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao h2 a { font-size: 13px; font-weight: 500; }
.cartao .linhas { margin: 0 -16px -12px; }
.cartao .linhas > li { padding-left: 16px; padding-right: 16px; }
.ranking-linha { display: grid; grid-template-columns: 28px 1fr 90px 46px; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.cartao h2 + .ranking-linha { border-top: 0; }
.ranking-linha .pos { color: var(--mute); font-variant-numeric: tabular-nums; font-weight: 500; }
.ranking-linha .nome { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-linha .num { text-align: right; font-weight: 500; }
.ranking-linha.eu { background: var(--dado-soft); margin: 0 -10px; padding: 11px 10px; border-radius: var(--r-s); border-top-color: transparent; }
.ranking-linha.eu .nome, .ranking-linha.eu .pos { color: var(--dado); }
.historico-dia { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.cartao h2 + .historico-dia { border-top: 0; }
.abas-func { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line); padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
.abas-func .dentro { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: min(460px, 100%); }
.abas-func a { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; color: #9693AE; font-size: 11px; font-weight: 500; text-decoration: none; }
.abas-func a.ativo { color: var(--ink); }

/* ---------- Painel do funcionário ---------- */
.func > .func-topo ~ * + * { margin-top: 12px; }
.cartao h2 a { text-decoration: none; color: var(--dado); }
.abas-func .dentro { align-items: end; }
.abas-func a.central { position: relative; }
.abas-func a.central .botao-central { width: 50px; height: 50px; border-radius: 16px; background: var(--ink); color: #fff; display: grid; place-items: center; margin-top: -22px; box-shadow: 0 6px 18px rgba(30, 27, 58,.22); }
.abas-func a.central .botao-central svg.i { width: 22px; height: 22px; }
.abas-func a.central.ativo .botao-central { background: var(--dado); }
.numeros-func { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; margin-top: 12px; }
.numeros-func > div { padding: 13px 16px; }
.numeros-func > div:nth-child(even) { border-left: 1px solid var(--line); }
.numeros-func > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.numeros-func small { display: block; color: var(--mute); font-size: 12px; font-weight: 500; }
.numeros-func b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 1px; }
.numeros-func span { display: block; color: var(--mute); font-size: 11.5px; }
.escanear { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 26px 18px 22px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.escanear .moldura { width: 132px; height: 132px; border-radius: 22px; display: grid; place-items: center; position: relative; background: var(--surface-2); color: var(--ink); }
.escanear .moldura i { position: absolute; width: 26px; height: 26px; border: 2.5px solid var(--ink); }
.escanear .moldura i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 20px; }
.escanear .moldura i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 20px; }
.escanear .moldura i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 20px; }
.escanear .moldura i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 20px; }
.escanear .moldura svg.i { width: 54px; height: 54px; stroke-width: 1.4; }
.escanear h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.escanear p { color: var(--mute); font-size: 13.5px; max-width: 32ch; }
.rank-item { display: grid; grid-template-columns: 26px 30px 1fr auto; gap: 4px 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-2); }
.cartao h2 + .rank-item, .etiqueta + .rank-item { border-top: 0; }
.rank-item .pos { color: var(--mute); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rank-item .nome { font-weight: 500; font-size: 13.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-item .pct-v { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; }
.rank-item .falta { font-size: 11.5px; color: var(--mute); text-align: right; }
.rank-item .barra { grid-column: 3 / -1; height: 5px; }
.rank-item.eu { background: var(--dado-soft); margin: 0 -10px; padding: 11px 10px; border-radius: var(--r-s); border-top-color: transparent; }
.rank-item.eu .nome { color: var(--dado); font-weight: 600; }
.grupo-rank { font-size: 11.5px; font-weight: 600; color: var(--mute); margin: 14px 0 2px; display: flex; align-items: center; gap: 6px; }
.grupo-rank:first-of-type { margin-top: 2px; }
.venda-dia { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--mute); padding: 12px 0 4px; }
.venda-dia::first-letter { text-transform: uppercase; }

/* ---------- Ranking da gestão ---------- */
.rk-corpo { padding: 0 0 6px; }
.rk-grupo { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--mute); padding: 14px 18px 4px; }
.rk-grupo span { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.rk-lista { list-style: none; margin: 0; padding: 0; }
.rk { display: grid; grid-template-columns: 28px minmax(0, 1fr) 120px 130px 96px; gap: 8px 14px; align-items: center; padding: 11px 18px; cursor: pointer; transition: background .1s; }
.rk + .rk { border-top: 1px solid var(--line-2); }
.rk:hover { background: var(--surface-2); }
.rk-pos { color: var(--mute); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rk-quem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rk-quem > div { min-width: 0; }
.rk-quem > div > b { display: block; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-quem small { display: block; color: var(--mute); font-size: 12.5px; }
.rk-quem small b { font-weight: 600; }
.rk-num, .rk-pct { text-align: right; font-variant-numeric: tabular-nums; }
.rk-num b, .rk-pct b { display: block; font-weight: 500; font-size: 13.5px; }
.rk-pct b { font-weight: 600; }
.rk-num small, .rk-pct small { display: block; color: var(--mute); font-size: 11.5px; white-space: nowrap; }
.rk-barra { grid-column: 2 / -1; }
.rk-barra .barra { height: 5px; }
.rk.compacta { grid-template-columns: 22px minmax(0, 1fr) auto; }
.rk.compacta .rk-quem small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- Metas ---------- */
.entrada.erro { border-color: var(--neg); }
.campo-rs, .campo-pct { position: relative; display: block; }
.campo-rs > span, .campo-pct > span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--mute); font-size: 13px; pointer-events: none; }
.campo-rs > span { left: 12px; }
.campo-rs .entrada { padding-left: 38px; text-align: right; }
.campo-pct > span { right: 12px; }
.campo-pct .entrada { padding-right: 30px; text-align: right; width: 92px; }
.atalhos-meta { display: grid; grid-template-columns: repeat(3, 1fr); }
.nota-atalhos { font-size: 12.5px; padding: 12px 18px 0; }
.atalho { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.atalho + .atalho { border-left: 1px solid var(--line-2); }
.atalho b { font-weight: 600; font-size: 13.5px; }
.atalho p { color: var(--mute); font-size: 12.5px; line-height: 1.5; }
.linha-atalho { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.linha-atalho .campo-rs { flex: 1; min-width: 140px; }
.metas-lista { list-style: none; margin: 0; padding: 0; }
.meta-linha { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 240px; gap: 8px 18px; align-items: center; padding: 12px 18px; }
.meta-linha + .meta-linha { border-top: 1px solid var(--line-2); }
.meta-quem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.meta-quem > div { min-width: 0; }
.meta-quem b { display: block; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-quem small { display: block; color: var(--mute); font-size: 12px; }
.meta-ref { text-align: right; font-variant-numeric: tabular-nums; }
.meta-ref small { display: block; color: var(--mute); font-size: 11.5px; }
.meta-ref b { font-weight: 500; font-size: 13.5px; }
.meta-campo { display: grid; gap: 4px; }
.meta-campo .entrada { height: 40px; font-size: 15px; font-weight: 500; }
.meta-dif { color: var(--mute); font-size: 11.5px; text-align: right; min-height: 15px; }
.barra-salvar { position: sticky; bottom: 14px; z-index: 30; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 6px 24px rgba(30, 27, 58, .06); }
.barra-salvar b { display: block; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.barra-salvar small { display: block; color: var(--mute); font-size: 12px; }
.barra-salvar.sujo { border-color: #C1BED5; }
.barra-salvar.sujo small { color: var(--ink-2); }
.acoes-salvar { display: flex; gap: 8px; }

/* ---------- Comissão ---------- */
.modos-com { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 18px 4px; }
.modo-com { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; transition: border-color .12s, background .12s; }
.modo-com:hover { background: var(--surface-2); }
.modo-com.ativo { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.modo-com input { margin-top: 3px; accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.modo-com b { display: block; font-weight: 600; font-size: 14px; }
.modo-com small { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }
.config-com { padding: 6px 18px 14px; }
.config-com + .config-com { border-top: 1px solid var(--line-2); padding-top: 14px; }
.linha-com { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.linha-com > span small { display: block; color: var(--mute); font-size: 12px; }
.linha-com.faixa { grid-template-columns: minmax(0, 1fr) 96px 110px; }
.linha-com.faixa + .linha-com.faixa { border-top: 1px dashed var(--line-2); }
.linha-com .campo-pct .entrada { width: 100%; }
.nota-com { font-size: 12.5px; margin-top: 8px; line-height: 1.5; }
.com-lista { list-style: none; margin: 0; padding: 0; }
.com-pessoa { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 9px 18px; }
.com-pessoa + .com-pessoa { border-top: 1px solid var(--line-2); }
.com-pessoa .campo-pct .entrada { width: 100%; height: 36px; }
.historico-com { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.historico-com li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13px; }
.historico-com li + li { border-top: 1px solid var(--line-2); }
.historico-com span { color: var(--mute); }
.historico-com b { font-weight: 500; text-align: right; }
.ligacao-campo { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.4; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none; color: var(--ink-2); background: var(--surface-2); }
.ligacao-campo:hover { color: var(--ink); }
.cartao.degrau { display: flex; gap: 10px; align-items: flex-start; background: var(--dado-soft); border-color: transparent; }
.cartao.degrau svg { color: var(--dado); flex: none; margin-top: 2px; }
.cartao.degrau p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.cartao.degrau b { color: var(--ink); font-weight: 600; }
a.painel { display: block; }
a.painel:hover { border-color: #D8D5E8; }

/* ---------- Jornada ---------- */
.turno-j { padding: 4px 18px 16px; }
.turno-j + .turno-j { border-top: 1px solid var(--line); padding-top: 16px; }
.turno-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0 8px; }
.nome-turno { width: auto; min-width: 200px; max-width: 280px; height: 36px; font-weight: 600; }
.acoes-turno { margin-left: auto; display: flex; gap: 4px; }
.perigo-texto { color: var(--neg); }
.dias-j { border: 1px solid var(--line-2); border-radius: var(--r-m); }
.dia-j { display: grid; grid-template-columns: 130px auto auto minmax(48px, 1fr); gap: 10px 22px; align-items: center; padding: 8px 14px; min-height: 52px; }
.dia-j + .dia-j { border-top: 1px solid var(--line-2); }
.dia-j.off { background: var(--surface-2); }
.chave-dia { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; font-size: 13.5px; }
.chave-dia input { width: 16px; height: 16px; accent-color: var(--ink); }
.dia-j.off .chave-dia span { color: var(--mute); }
.horas-j { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); }
.horas-j .entrada { width: 104px; height: 36px; }
.horas-j small { font-size: 12px; margin-right: 2px; }
.total-dia { text-align: right; font-weight: 500; font-size: 13px; color: var(--ink-2); }
.avisos-j { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.avisos-j li { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--warn); }
.pessoa-j { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 9px 18px; }
.pessoa-j + .pessoa-j { border-top: 1px solid var(--line-2); }
.selects-j { display: flex; gap: 6px; }
.selects-j .entrada { height: 36px; width: auto; min-width: 150px; font-size: 13px; }
.add-fechado { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; border-top: 1px solid var(--line-2); }
.botoes-fechado { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.fechados { border-top: 0; padding: 0 18px; }
.fechados b { display: flex; align-items: center; gap: 6px; }

/* ---------- Rotinas ---------- */
.sinal-rot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--hover); color: var(--mute); }
.sinal-rot.feita { background: var(--pos-soft); color: var(--pos); }
.sinal-rot.atrasada, .sinal-rot.naofeita { background: var(--neg-soft); color: var(--neg); }
.gente-rot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 45%; }
.av-rot { position: relative; opacity: .45; }
.av-rot .avatar { width: 26px; height: 26px; font-size: 10px; }
.av-rot.feito { opacity: 1; }
.av-rot i { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--pos); color: #fff; display: grid; place-items: center; border: 1.5px solid var(--surface); font-style: normal; }
.av-rot i svg.i { width: 8px; height: 8px; stroke-width: 3; }
.rot-def.pausada .titulo { color: var(--mute); }
.rot-pct { text-align: right; font-variant-numeric: tabular-nums; min-width: 72px; }
.rot-pct b { display: block; font-weight: 600; font-size: 13.5px; }
.rot-pct small { display: block; color: var(--mute); font-size: 11.5px; }
.sugestoes-rot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 18px 16px; border-top: 1px solid var(--line-2); }
.sugestoes-rot .etiqueta { width: 100%; }
.dias-rot { display: flex; flex-wrap: wrap; gap: 6px; }
.dias-rot label { cursor: pointer; }
.dias-rot input { position: absolute; opacity: 0; pointer-events: none; }
.dias-rot span { display: inline-grid; place-items: center; min-width: 46px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.dias-rot input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.dias-rot input:focus-visible + span { outline: 2px solid var(--dado); outline-offset: 2px; }
.checar:disabled { cursor: default; opacity: .7; }

.rk-ritmo-cel { display: none; color: var(--mute); font-size: 12px; }
.rk-ritmo-cel b { font-weight: 600; }

/* ---------- Folha de ponto (impressão) ---------- */
.folha { background: #fff; max-width: 860px; margin: 24px auto; padding: 40px 44px; border: 1px solid var(--line); border-radius: var(--r-l); }
.folha h1 { font-size: 20px; }
.folha .cab { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1.5px solid var(--ink); padding-bottom: 14px; margin-bottom: 16px; }
.folha .dados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; font-size: 13px; margin-bottom: 16px; }
.folha .dados small { display: block; color: var(--mute); font-size: 11px; font-weight: 600; }
.folha table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.folha th, .folha td { border: 1px solid #DADAD7; padding: 5px 7px; text-align: center; }
.folha th { background: #F5F5F3; font-weight: 600; }
.folha td:first-child, .folha th:first-child { text-align: left; }
.folha .declara { margin: 22px 0 46px; font-size: 13px; }
.folha .assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.folha .assinaturas div { border-top: 1px solid var(--ink); padding-top: 6px; font-size: 12.5px; text-align: center; }
.barra-impressao { max-width: 860px; margin: 20px auto 0; display: flex; justify-content: space-between; gap: 8px; padding: 0 16px; }
.cap::first-letter { text-transform: uppercase; }
.cap { display: block; }

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  .barra-impressao, .trilho, .barra-inferior, .cabeca .acoes, .guias, .aviso { display: none !important; }
  .casca { display: block; }
  .miolo { margin: 0; border: 0; padding: 0; box-shadow: none; }
  .folha { border: 0; margin: 0; padding: 0; max-width: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .duas { grid-template-columns: 1fr; }
  .tres { grid-template-columns: 1fr 1fr; }
  .compor { grid-template-columns: 1fr 1fr; }
  .compor > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .casca { grid-template-columns: 1fr; }
  .trilho { display: none; }
  .miolo { margin: 0; border: 0; border-radius: 0; box-shadow: none; min-height: 100vh; padding: 12px 16px calc(92px + env(safe-area-inset-bottom, 0px)); background: var(--surface); }
  .barra-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: center; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .barra-inferior .dentro { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: min(520px, 100%); }
  .barra-inferior a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; color: #9693AE; font-size: 11px; font-weight: 500; position: relative; text-decoration: none; }
  .barra-inferior a.ativo { color: var(--ink); }
  .barra-inferior .contador { position: absolute; top: 2px; right: calc(50% - 18px); min-width: 15px; height: 15px; border-radius: 5px; background: var(--neg); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0 3px; }
  .topo-movel { display: flex; align-items: center; justify-content: space-between; margin: 0 -4px 10px; }
  .topo-movel .marca { padding: 4px; }
  .cabeca { margin-bottom: 16px; }
  .cabeca h1 { font-size: 20px; }
  .heroi { padding: 18px 16px 0; }
  .heroi .grade { margin: 4px -16px 0; }
  .heroi .grade > div { padding: 12px 16px 14px; }
  .heroi > :last-child:not(.grade) { margin-bottom: 18px; }
  .grade-form { grid-template-columns: 1fr; }
  .qr-painel { grid-template-columns: 1fr; justify-items: start; }
  .tres { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; }
  .login-lado { display: none; }
  .folha { padding: 24px 18px; margin: 12px; }
  .folha .dados { grid-template-columns: 1fr 1fr; }
  .fundo { align-items: end; padding: 0; }
  .janela, .janela.larga { width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom, 0px); border-bottom: 0; }
  .janela::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: #DADAD7; margin: 8px auto 0; }
  .linhas > li, .atencao li { padding-left: 16px; padding-right: 16px; }
  .painel-cab { padding: 12px 16px; }
  .painel-corpo { padding: 14px 16px; }
  .t th:first-child, .t td:first-child { padding-left: 16px; }
  .compor { grid-template-columns: 1fr; padding: 12px 16px; }
  .torrada { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* celular: nome e % na linha de cima, barra no meio, valores e ritmo embaixo */
  .rk:not(.compacta) { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "pos quem pct" ". barra barra" ". num num" ". ritmo ritmo"; gap: 6px 10px; padding: 12px 16px; }
  .rk:not(.compacta) .rk-pos { grid-area: pos; }
  .rk:not(.compacta) .rk-quem { grid-area: quem; }
  .rk:not(.compacta) .rk-quem .avatar, .rk:not(.compacta) .rk-quem .rk-ritmo, .rk .rk-ticket { display: none; }
  .rk:not(.compacta) .rk-pct { grid-area: pct; }
  .rk:not(.compacta) .rk-barra { grid-area: barra; }
  .rk:not(.compacta) .rk-num { grid-area: num; text-align: left; }
  .rk:not(.compacta) .rk-num b, .rk:not(.compacta) .rk-num small { display: inline; }
  .rk:not(.compacta) .rk-ritmo-cel { grid-area: ritmo; display: block; }
  .rk.compacta { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .rk-grupo { padding-left: 16px; padding-right: 16px; }
  .atalhos-meta { grid-template-columns: 1fr; }
  .atalho { padding: 14px 16px 16px; }
  .atalho + .atalho { border-left: 0; border-top: 1px solid var(--line-2); }
  .meta-linha { grid-template-columns: 1fr 1fr; grid-template-areas: "quem quem" "ant media" "campo campo"; padding: 14px 16px; gap: 10px 12px; }
  .meta-quem { grid-area: quem; }
  .meta-ref { text-align: left; }
  .meta-ref:nth-child(2) { grid-area: ant; }
  .meta-ref:nth-child(3) { grid-area: media; }
  .meta-campo { grid-area: campo; }
  .meta-dif { text-align: left; }
  .modos-com { grid-template-columns: 1fr; padding: 14px 16px 4px; }
  .config-com { padding-left: 16px; padding-right: 16px; }
  .linha-com { grid-template-columns: minmax(0, 1fr) 120px; }
  .linha-com.faixa { grid-template-columns: minmax(0, 1fr) 80px 92px; gap: 8px; }
  .com-pessoa { padding-left: 16px; padding-right: 16px; }
  .turno-j { padding-left: 16px; padding-right: 16px; }
  .nome-turno { min-width: 0; width: 100%; max-width: none; }
  .acoes-turno { margin-left: 0; }
  .dia-j { grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; }
  .dia-j .horas-j { grid-column: 1 / -1; }
  .dia-j .total-dia { grid-row: 1; grid-column: 2; }
  .horas-j .entrada { width: auto; flex: 1; min-width: 0; }
  .horas-j small { min-width: 56px; }
  .pessoa-j { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
  .selects-j .entrada { flex: 1; min-width: 0; }
  .add-fechado { grid-template-columns: 1fr; }
  .fechados { padding: 0 16px; }
  .barra-salvar { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); padding: 10px 10px 10px 14px; }
  .barra-salvar .btn { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 861px) { .topo-movel { display: none; } }
@media (max-width: 640px) { .quatro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .heroi .grade { grid-template-columns: 1fr 1fr; }
  .heroi .grade > div:nth-child(odd) { border-left: 0; }
  .heroi .grade > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .heroi .grade > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .heroi .grade b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* =====================================================================
   Marca Tempoon: o que muda além das cores
   ===================================================================== */
.btn.primario { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primario:hover { background: #4B36CF; border-color: #4B36CF; }
::selection { background: var(--dado-2); }
:focus-visible { outline-color: var(--brand); }

/* Títulos e números grandes em Unbounded; rótulos em Martian Mono */
.cabeca h1, .heroi .gigante, .login-lado h1, .login-form h2, .func-topo h1 { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; }
.cabeca h1 { font-size: 21px; }
.heroi .gigante { letter-spacing: -0.045em; }
.trilho .rotulo-grupo { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .12em; color: var(--mute); }
.trilho nav a.ativo svg { color: var(--brand); }

/* O logotipo no menu, no topo do celular e no login */
.logo-marca { display: block; width: 112px; height: auto; flex: none; }
.marca-menu { display: grid; gap: 7px; }
.marca-menu small { padding-left: 1px; }
.topo-movel .logo-marca { width: 92px; }
.topo-movel .marca { display: grid; gap: 2px; }
.login-lado .logo-marca { width: 136px; }

/* Login: o lado da marca em Tinta, com a luz no destaque */
.login-lado { background: var(--ink); border-color: var(--ink); color: #F3F2FA; }
.login-lado h1 em { color: var(--luz); }
.login-lado p { color: #C9C6E0; }
.login-lado li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #D9D6EE; }
.login-lado li svg { color: var(--carimbo-claro); }

/* Ponto: o horário batido com jeito de carimbo */
.etapa.feita b { font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: 0; color: var(--brand); }

/* O trilho: toda barra de progresso leva a luz acesa na ponta */
.heroi .trilha { height: 8px; border-radius: 4px; }
.barra > i:not(.proj)::after, .heroi .trilha > i:not(.proj)::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: var(--luz); box-shadow: 0 0 6px rgba(255, 184, 46, .65); }

/* Carregando: o botão ligando */
.carregando-app .simbolo-marca { width: 64px; height: auto; }
.carregando-app .luz-marca { animation: liga-luz .9s cubic-bezier(.3, 1.4, .5, 1) infinite alternate; }
@keyframes liga-luz { from { transform: translateX(-32px); fill: #CFCCE0; } to { transform: none; fill: #FFB82E; } }
@media (prefers-reduced-motion: reduce) { .carregando-app .luz-marca { animation: none; } }

/* Equipe | Financeiro: as duas seções da dona, no alto do menu (no celular, acima da tela) */
.troca-app { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.troca-app > * { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 7px; font: 600 12.5px/1 var(--font); color: var(--ink-2); text-decoration: none; }
.troca-app .ativo { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 27, 58, .1); }
.troca-app .ativo svg { color: var(--brand); }
.troca-app a:hover { background: var(--hover); color: var(--ink); }
.troca-app svg.i { width: 15px; height: 15px; }
.troca-app .mais-plano { font: 600 13px/1 var(--display); color: var(--brand); }
.troca-app.so-celular { display: none; }
@media (max-width: 860px) { .troca-app.so-celular { display: grid; margin: 0 0 14px; } .troca-app.so-celular > * { height: 36px; font-size: 13.5px; } }

/* O que o Tempoon+ soma (tela do financeiro para quem está no plano Tempoon) */
.lista-plano { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.lista-plano li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface-2); font-size: 14px; color: var(--ink); }
.lista-plano svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--brand); }