/* Controle de ponto - estilo único do painel, do app e do aparelho fixo */
:root {
  --fundo: #EEF1F4;
  --branco: #FFFFFF;
  --tinta: #12212E;
  --suave: #4B5A68;
  --linha: #D5DCE3;
  --linha-fina: #E3E8ED;
  --borda: #B8C4D0;
  --azul: #0A4FA8;
  --azul-escuro: #083B7E;
  --azul-claro: #E3EEFB;
  --azul-texto: #0A3F86;
  --cinza-claro: #E6EAEE;
  --cinza-texto: #33424F;
  --ambar-claro: #FFF1DC;
  --ambar: #8A4200;
  --faixa: #F5F7F9;
  --titulo: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --texto: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--texto); font-size: 16px; line-height: 1.35; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; margin: 0; line-height: 1.15; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
a { color: var(--azul); }
a:hover { color: var(--azul-escuro); }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.pequeno { font-size: 14px; }
.direita { text-align: right; }
.nowrap { white-space: nowrap; }
.pos { color: var(--azul); font-weight: 700; }
.neg { color: var(--ambar); font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Marca */
.marca { display: flex; align-items: center; gap: 10px; }
.marca-sigla { width: 36px; height: 36px; border-radius: 8px; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--titulo); font-weight: 700; font-size: 17px; letter-spacing: .02em; flex: none; }
.marca-nome { font-family: var(--titulo); font-weight: 600; font-size: 19px; line-height: 1.1; }
.marca-sub { font-size: 13px; opacity: .8; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--azul); color: #fff; font-family: var(--texto); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--azul-escuro); color: #fff; }
.btn-sec { background: var(--branco); color: var(--tinta); border: 1px solid var(--borda); }
.btn-sec:hover { background: var(--faixa); color: var(--tinta); }
.btn-peq { min-height: 38px; padding: 0 12px; font-size: 14px; font-weight: 600; }
.btn-largo { width: 100%; }
.btn-alerta { background: var(--branco); color: var(--ambar); border: 1px solid var(--ambar); }
.btn-alerta:hover { background: var(--ambar-claro); color: var(--ambar); }
.btn[disabled] { opacity: .6; cursor: default; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Cartões e avisos */
.cartao { background: var(--branco); border-radius: 16px; padding: 20px; }
.cartao-tabela { background: var(--branco); border-radius: 16px; overflow: hidden; }
.cartao-tabela > h2, .cartao-tabela > .cartao-topo { padding: 18px 20px 12px; }
.cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.aviso { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.aviso-ok { background: var(--azul-claro); color: var(--azul-texto); }
.aviso-erro { background: var(--ambar-claro); color: #6B3300; }
.aviso-info { background: var(--ambar-claro); color: #6B3300; }
.aviso strong { font-weight: 700; }
.pilula { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.pilula-azul { background: var(--azul-claro); color: var(--azul-texto); }
.pilula-cinza { background: var(--cinza-claro); color: var(--cinza-texto); }
.pilula-ambar { background: var(--ambar-claro); color: var(--ambar); }
.conta { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--ambar-claro); color: var(--ambar); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.vazio { padding: 28px 20px; color: var(--suave); text-align: center; }

/* Formulários */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label, .rotulo { font-size: 14px; font-weight: 600; color: var(--suave); }
.campo input, .campo select, .campo textarea { min-height: 46px; width: 100%; padding: 0 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--branco); color: var(--tinta); font-family: var(--texto); font-size: 16px; }
.campo textarea { padding: 10px 14px; min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #7FB0EE; outline-offset: 1px; }
.dica { font-size: 13px; color: var(--suave); }
.form { display: flex; flex-direction: column; gap: 14px; }
.dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.escolha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.escolha label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--borda); border-radius: 10px; background: var(--branco); font-weight: 600; cursor: pointer; }
.escolha input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.escolha label:has(input:checked) { border: 2px solid var(--azul); background: var(--azul-claro); color: var(--azul-texto); font-weight: 700; }
.escolha label:has(input:focus-visible) { outline: 3px solid #7FB0EE; outline-offset: 1px; }
.filtros { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.filtros .campo { flex: 1 1 160px; }

/* Tabelas */
.rola { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: 16px; }
.tab th { text-align: left; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--suave); letter-spacing: .04em; text-transform: uppercase; background: var(--faixa); white-space: nowrap; }
.tab td { padding: 10px 14px; border-top: 1px solid var(--linha-fina); vertical-align: middle; }
.tab th:first-child, .tab td:first-child { padding-left: 20px; }
.tab th:last-child, .tab td:last-child { padding-right: 20px; }
.tab th.direita, .tab td.direita { text-align: right; }
.tab tfoot td { border-top: 2px solid var(--tinta); background: var(--faixa); font-weight: 700; }
.tab .nome { font-weight: 600; white-space: nowrap; }
.tab .sub { font-size: 14px; color: var(--suave); font-weight: 400; }
.tab .nota { font-size: 13px; font-weight: 700; color: var(--ambar); }
.tab a.mapa { font-size: 12px; display: block; }

/* Painel do gestor */
.painel { min-height: 100vh; display: flex; flex-wrap: wrap; }
.lateral { flex: 1 1 220px; max-width: 100%; background: var(--tinta); color: #fff; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; }
.lateral .marca { padding: 0 8px; }
.lateral nav { display: flex; flex-direction: column; gap: 4px; }
.lateral nav a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #D5DCE3; font-weight: 600; text-decoration: none; }
.lateral nav a:hover { background: #1D3042; color: #fff; }
.lateral nav a.ativo { background: var(--azul); color: #fff; font-weight: 700; }
.lateral-fim { margin-top: auto; padding: 0 12px; font-size: 14px; color: #B8C4D0; display: flex; justify-content: space-between; gap: 8px; }
.lateral-fim a { color: #D5DCE3; }
.conteudo { flex: 999 1 560px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.conteudo > .aviso { margin-bottom: 0; }
.topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.kpis { display: flex; flex-wrap: wrap; gap: 16px; }
.kpi { flex: 1 1 180px; background: var(--branco); border-radius: 14px; padding: 16px 18px; }
.kpi-rot, .kpi-sub { color: var(--suave); font-size: 14px; }
.kpi-num { font-family: var(--titulo); font-weight: 600; font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.colunas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.colunas > .principal { flex: 999 1 560px; min-width: 0; }
.colunas > .ladinho { flex: 1 1 300px; min-width: 0; }
.dia-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dia-nav .seta { width: 44px; height: 44px; border: 1px solid var(--borda); border-radius: 10px; background: var(--branco); color: var(--tinta); display: flex; align-items: center; justify-content: center; }
.dia-nav strong { font-size: 18px; }
.linha-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha-fina); }
.linha-item > div:first-child { flex: 1 1 320px; min-width: 0; }
.caixa-msg { background: var(--faixa); border-radius: 12px; padding: 12px 14px; }
.formatos { display: flex; flex-wrap: wrap; gap: 12px; }
.formatos a { flex: 1 1 220px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--branco); color: var(--tinta); text-decoration: none; }
.formatos a:hover { border-color: var(--azul); background: var(--azul-claro); }
.formatos strong { display: block; }
.formatos span { font-size: 14px; color: var(--suave); }

/* Telas de entrada (login, instalação) */
.entrada-tela { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.entrada-caixa { width: 100%; max-width: 420px; background: var(--branco); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.portas { display: flex; flex-direction: column; gap: 10px; }

/* App do funcionário */
body.app { background: #DDE3E9; }
.app-tela { max-width: 480px; min-height: 100vh; margin: 0 auto; background: var(--fundo); display: flex; flex-direction: column; }
.app-cabeca { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--linha); color: var(--tinta); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; text-decoration: none; }
.app-meio { flex: 1; padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.app-meio h1 { font-size: 26px; }
.app-nav { position: sticky; bottom: 0; display: flex; background: var(--branco); border-top: 1px solid var(--linha); }
.app-nav a { flex: 1; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--suave); font-weight: 600; font-size: 13px; text-decoration: none; border-top: 3px solid var(--branco); }
.app-nav a.ativo { color: var(--azul); font-weight: 700; border-top-color: var(--azul); }
.app-nav .conta { min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; }
.escuro { background: var(--tinta); color: #fff; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.escuro .claro { color: #B8C4D0; }
.relogio { font-family: var(--titulo); font-weight: 600; font-size: 76px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.horario-grande { font-family: var(--titulo); font-weight: 600; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.escuro-pe { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 8px; margin-top: 8px; border-top: 1px solid #2C3E4F; }
.escuro-pe > div:last-child { text-align: right; white-space: nowrap; flex: none; }
.com-icone { display: flex; align-items: flex-start; gap: 10px; }
.com-icone svg { flex: none; margin-top: 2px; }
.btn-ponto { min-height: 64px; border-radius: 14px; font-size: 19px; width: 100%; }
.btn-ponto.btn-sec { min-height: 56px; font-size: 17px; }
.concluido { border-radius: 14px; background: var(--azul-claro); color: var(--azul-texto); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lista { background: var(--branco); border-radius: 16px; padding: 14px 18px 6px; display: flex; flex-direction: column; }
.lista h2 { font-size: 19px; padding-bottom: 10px; }
.lista-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 6px 0; border-top: 1px solid var(--linha-fina); }
.marca-linha { display: flex; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid var(--linha-fina); }
.marca-linha .bola { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #8A97A4; background: var(--branco); flex: none; }
.marca-linha.feita .bola { background: var(--azul); border-color: var(--azul); }
.marca-linha .rot { flex: 1; color: #5A6875; }
.marca-linha.feita .rot { color: var(--tinta); }
.marca-linha .hora { font-family: var(--titulo); font-weight: 600; font-size: 21px; font-variant-numeric: tabular-nums; color: #5A6875; }
.marca-linha.feita .hora { color: var(--tinta); }
.blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bloco { background: var(--branco); border-radius: 14px; padding: 12px 14px; }
.bloco-num { font-family: var(--titulo); font-weight: 600; font-size: 26px; font-variant-numeric: tabular-nums; }
.mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mes-nav a { width: 44px; height: 44px; border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); color: var(--tinta); display: flex; align-items: center; justify-content: center; }
.dia-total { font-family: var(--titulo); font-weight: 600; font-size: 19px; font-variant-numeric: tabular-nums; }

/* Aparelho fixo */
body.totem { background: var(--fundo); }
.totem-tela { min-height: 100vh; display: flex; flex-wrap: wrap; }
.totem-esq { flex: 1 1 340px; background: var(--tinta); color: #fff; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.totem-esq .marca-sigla { width: 48px; height: 48px; font-size: 22px; border-radius: 10px; }
.totem-esq .marca-nome { font-size: 26px; }
.totem-relogio { font-family: var(--titulo); font-weight: 600; font-size: clamp(72px, 13vw, 136px); line-height: 1; font-variant-numeric: tabular-nums; }
.totem-dir { flex: 2 1 420px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.totem-dir h1 { font-size: 34px; }
.pin-bolas { display: flex; gap: 18px; justify-content: center; }
.pin-bolas span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--branco); }
.pin-bolas span.cheia { background: var(--tinta); }
.teclado { width: min(372px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.teclado button { height: 80px; border: 1px solid var(--linha); border-radius: 14px; background: var(--branco); color: var(--tinta); font-family: var(--titulo); font-weight: 600; font-size: 36px; cursor: pointer; }
.teclado button.apagar { background: var(--cinza-claro); font-family: var(--texto); font-weight: 700; font-size: 19px; }
.teclado button:active { background: var(--azul-claro); }
.totem-ok-bola { width: 96px; height: 96px; border-radius: 50%; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; }
.totem-hora { font-family: var(--titulo); font-weight: 600; font-size: 96px; line-height: 1; font-variant-numeric: tabular-nums; }
.totem-nome { font-family: var(--titulo); font-weight: 600; font-size: 34px; }
.totem-opcoes { display: flex; flex-direction: column; gap: 12px; width: min(420px, 100%); }
.totem-opcoes .btn { min-height: 72px; font-size: 22px; border-radius: 14px; }
.totem-erro { color: var(--ambar); font-weight: 700; min-height: 24px; }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  .conteudo { padding: 20px 16px; }
  .lateral { padding: 16px; gap: 12px; }
  .lateral-fim { margin-top: 0; }
  h1 { font-size: 28px; }
}
@media print {
  .lateral, .sem-imprimir { display: none !important; }
  body { background: #fff; }
}