/* ui-batiu.css: tema visual único das telas do produto. Carregado DEPOIS do <style> de cada tela, então vence por
   ordem sem !important. Pedido do Josué (16/09/2026): "tá muito ruim, quero algo mais clean; muda a fonte pra não
   parecer robotizado, e sim humanizado". Fonte: Plus Jakarta Sans (humanista, arredondada, boa em número).
   Paleta: fundo neutro claro, cartão branco, tinta quase preta, navy da marca no cabeçalho e nos botões principais,
   dourado só como detalhe. Sem gradiente, sem caixa alta espaçada, sem sombra pesada.
   Dois níveis: as telas de PAINEL (painel da empresa, do contador, entrada, mestre) recebem tokens e componentes;
   as telas com desenho próprio (cadastro do rosto, portal do colaborador, tablet) têm <body class="bt-tela"> e
   recebem SÓ a fonte, pra não bagunçar o layout delas. */

:root {
  --bt-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bt-bg: #F4F5F7;
  --bt-card: #FFFFFF;
  --bt-ink: #1A1B21;
  --bt-ink-2: #3F4250;
  --bt-muted: #6C6F7A;
  --bt-line: #E4E6EB;
  --bt-line-strong: #C9CBD3;
  --bt-navy: #111135;
  --bt-navy-hover: #1C1C4F;
  --bt-gold: #C9A23C;
  --bt-gold-soft: #D9C3A2;
  --bt-ok: #1E9E5A;
  --bt-ok-bg: #E7F6EE;
  --bt-err: #D14343;
  --bt-err-bg: #FCECEC;
  --bt-warn: #B7791F;
  --bt-warn-bg: #FFF6E3;
  --bt-focus: 0 0 0 3px rgba(17, 17, 53, .14);
  --bt-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
  --bt-radius: 14px;
}
/* Tema claro SEMPRE nos painéis (16/09, Josué viu tudo preto no Mac em modo escuro: número navy invisível, aba
   sumida). Um sistema de gestão tem um visual decidido pelo produto, não pelo sistema operacional. As regras abaixo
   repetem a paleta clara dentro da media query escura, pra vencer o bloco escuro que cada tela ainda carrega. */
@media (prefers-color-scheme: dark) {
  body:not(.bt-tela) {
    color: var(--bt-ink); background: var(--bt-bg); color-scheme: light;
    --navy: var(--bt-navy); --gold: var(--bt-gold); --cream: var(--bt-bg); --ink: var(--bt-ink); --line: var(--bt-line);
    --muted: var(--bt-muted); --card: var(--bt-card); --ok: var(--bt-ok); --err: var(--bt-err); --warn: var(--bt-warn);
  }
  body:not(.bt-tela) .card, body:not(.bt-tela) .kpi, body:not(.bt-tela) .tabs, body:not(.bt-tela) #modal .box { background: var(--bt-card); color: var(--bt-ink); }
  body:not(.bt-tela) input, body:not(.bt-tela) select, body:not(.bt-tela) textarea { background: var(--bt-card); color: var(--bt-ink); border-color: var(--bt-line-strong); }
  body:not(.bt-tela) .hero p, body:not(.bt-tela) .card .sub, body:not(.bt-tela) .muted, body:not(.bt-tela) ul.beneficios { color: var(--bt-muted); }
  body:not(.bt-tela) .pill { background: #EEF0F7; color: var(--bt-navy); }
  body:not(.bt-tela) .banner { background: var(--bt-warn-bg); border-color: #F0DDA8; color: var(--bt-ink-2); }
  body:not(.bt-tela) code.copy { background: #F1F2F4; color: var(--bt-ink-2); }
  body:not(.bt-tela) .btn.ghost, body:not(.bt-tela) .card > button.ghost { background: var(--bt-card); color: var(--bt-ink); }
}

/* ---------- todas as telas: a fonte ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--bt-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: var(--bt-font); }
/* telas com desenho próprio: troca só a família dos títulos que usavam Rajdhani */
body.bt-tela .display, body.bt-tela .page-hero h1, body.bt-tela .strip-logo .mark, body.bt-tela .step-num, body.bt-tela .card-num,
body.bt-tela .topbar .nome, body.bt-tela .status-tag, body.bt-tela .hero-hoje h1, body.bt-tela .ti-hora, body.bt-tela .standby-title,
body.bt-tela .saver-word, body.bt-tela .topbar-logo .mark, body.bt-tela .card h2 { font-family: var(--bt-font); letter-spacing: -0.02em; }
body.bt-tela .eyebrow { font-family: var(--bt-font); letter-spacing: 0.12em; }

/* ---------- telas de painel: tokens e componentes ---------- */
body:not(.bt-tela) {
  color: var(--bt-ink); background: var(--bt-bg); font-size: 15px; line-height: 1.5; font-feature-settings: "cv11", "ss01";
  --navy: var(--bt-navy); --gold: var(--bt-gold); --cream: var(--bt-bg); --ink: var(--bt-ink); --line: var(--bt-line);
  --muted: var(--bt-muted); --card: var(--bt-card); --ok: var(--bt-ok); --err: var(--bt-err); --warn: var(--bt-warn);
}
body:not(.bt-tela) h1, body:not(.bt-tela) h2, body:not(.bt-tela) h3 { font-weight: 600; letter-spacing: -0.01em; color: var(--bt-ink); }

/* cabeçalho */
body:not(.bt-tela) header, body:not(.bt-tela) .top { background: var(--bt-navy); color: #fff; padding: 14px 20px; }
body:not(.bt-tela) header b, body:not(.bt-tela) .top b { letter-spacing: 0; font-weight: 600; font-size: 16px; }
body:not(.bt-tela) header .tag, body:not(.bt-tela) .top .tag { color: var(--bt-gold-soft); font-size: 11px; letter-spacing: 0.08em; font-weight: 500; }
body:not(.bt-tela) header .who { color: rgba(255, 255, 255, .7); font-size: 13px; }
body:not(.bt-tela) header .who a { color: var(--bt-gold-soft); text-decoration: none; }

/* abas */
body:not(.bt-tela) .tabs { background: var(--bt-card); border-bottom: 1px solid var(--bt-line); padding: 0 12px; gap: 4px; }
body:not(.bt-tela) .tabs button { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--bt-muted); font-size: 14px; font-weight: 500; padding: 14px 12px; margin: 0; }
body:not(.bt-tela) .tabs button:hover { color: var(--bt-ink); }
body:not(.bt-tela) .tabs button.on { background: none; color: var(--bt-navy); font-weight: 600; border-bottom-color: var(--bt-navy); }

/* cartões e títulos */
body:not(.bt-tela) .card { background: var(--bt-card); border: 1px solid var(--bt-line); border-radius: var(--bt-radius); box-shadow: var(--bt-shadow); padding: 20px; margin-bottom: 16px; }
body:not(.bt-tela) .card h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.01em; }
body:not(.bt-tela) .card h2 small { font-weight: 400; font-size: 13px; color: var(--bt-muted); margin-left: 6px; }
body:not(.bt-tela) .card .sub, body:not(.bt-tela) .muted { color: var(--bt-muted); font-size: 13.5px; }
body:not(.bt-tela) .empty { color: var(--bt-muted); font-size: 14px; }
body:not(.bt-tela) .banner { background: var(--bt-warn-bg); border: 1px solid #F0DDA8; border-radius: 12px; padding: 12px 16px; font-size: 14px; color: var(--bt-ink-2); }
body:not(.bt-tela) details > summary { color: var(--bt-ink); font-weight: 600; font-size: 15px; }

/* números grandes */
body:not(.bt-tela) .kpi { background: var(--bt-card); border: 1px solid var(--bt-line); border-radius: var(--bt-radius); box-shadow: var(--bt-shadow); padding: 16px 18px; }
body:not(.bt-tela) .kpi b, body:not(.bt-tela) .kpi .n { font-size: 28px; font-weight: 700; color: var(--bt-navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
body:not(.bt-tela) .kpi span, body:not(.bt-tela) .kpi .l { font-size: 13px; color: var(--bt-muted); font-weight: 500; }
body:not(.bt-tela) .kpi.alert b { color: var(--bt-warn); }

/* formulários */
body:not(.bt-tela) label { font-size: 13px; font-weight: 500; color: var(--bt-ink-2); margin: 10px 0 6px; }
body:not(.bt-tela) input, body:not(.bt-tela) select, body:not(.bt-tela) textarea { padding: 11px 12px; border: 1px solid var(--bt-line-strong); border-radius: 10px; font-size: 15px; background: var(--bt-card); color: var(--bt-ink); transition: border-color .15s, box-shadow .15s; }
body:not(.bt-tela) input::placeholder, body:not(.bt-tela) textarea::placeholder { color: #A0A3AD; }
body:not(.bt-tela) input:focus, body:not(.bt-tela) select:focus, body:not(.bt-tela) textarea:focus { outline: none; border-color: var(--bt-navy); box-shadow: var(--bt-focus); }
body:not(.bt-tela) input[type=checkbox], body:not(.bt-tela) input[type=radio] { width: 16px; height: 16px; accent-color: var(--bt-navy); }

/* botões: navy sólido como principal; contorno como secundário */
body:not(.bt-tela) .btn, body:not(.bt-tela) .card > button, body:not(.bt-tela) .card form > button {
  background: var(--bt-navy); color: #fff; border: 1px solid var(--bt-navy); border-radius: 10px; font-weight: 600; font-size: 14px;
  padding: 11px 16px; cursor: pointer; transition: background .15s, border-color .15s; box-shadow: none; text-decoration: none;
}
body:not(.bt-tela) .btn:hover, body:not(.bt-tela) .card > button:hover, body:not(.bt-tela) .card form > button:hover { background: var(--bt-navy-hover); border-color: var(--bt-navy-hover); }
body:not(.bt-tela) .btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
body:not(.bt-tela) .btn.ghost, body:not(.bt-tela) .card > button.ghost, body:not(.bt-tela) .card form > button.ghost { background: var(--bt-card); color: var(--bt-ink); border: 1px solid var(--bt-line-strong); }
body:not(.bt-tela) .btn.ghost:hover, body:not(.bt-tela) .card > button.ghost:hover { background: var(--bt-bg); border-color: var(--bt-ink-2); }
body:not(.bt-tela) .btn.danger { background: var(--bt-card); color: var(--bt-err); border: 1px solid var(--bt-err); }
body:not(.bt-tela) .btn.danger:hover { background: var(--bt-err-bg); }
body:not(.bt-tela) .btn:disabled, body:not(.bt-tela) .card > button:disabled { opacity: .5; cursor: default; }
body:not(.bt-tela) .btn:focus-visible, body:not(.bt-tela) button:focus-visible, body:not(.bt-tela) a:focus-visible { outline: none; box-shadow: var(--bt-focus); }

/* listas, tabelas, etiquetas */
body:not(.bt-tela) .item { padding: 12px 2px; border-bottom: 1px solid var(--bt-line); gap: 12px; }
body:not(.bt-tela) .item .nm { font-weight: 600; color: var(--bt-ink); }
body:not(.bt-tela) .item .sub { font-size: 13px; color: var(--bt-muted); }
body:not(.bt-tela) table { font-size: 14px; }
body:not(.bt-tela) th { font-size: 12px; font-weight: 600; color: var(--bt-muted); text-transform: none; letter-spacing: 0.02em; padding: 8px 8px; border-bottom: 1px solid var(--bt-line); }
body:not(.bt-tela) td { padding: 10px 8px; border-bottom: 1px solid var(--bt-line); color: var(--bt-ink-2); }
body:not(.bt-tela) .pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #EEF0F7; color: var(--bt-navy); }
body:not(.bt-tela) .pill.ok { background: var(--bt-ok-bg); color: var(--bt-ok); }
body:not(.bt-tela) .pill.warn { background: var(--bt-warn-bg); color: var(--bt-warn); }
body:not(.bt-tela) .pill.err { background: var(--bt-err-bg); color: var(--bt-err); }
body:not(.bt-tela) .msg { font-size: 13.5px; } body:not(.bt-tela) .msg.ok { color: var(--bt-ok); } body:not(.bt-tela) .msg.err { color: var(--bt-err); }
body:not(.bt-tela) code.copy { font-family: var(--bt-mono); font-size: 13px; background: #F1F2F4; border: 1px solid var(--bt-line); border-radius: 8px; padding: 8px 10px; color: var(--bt-ink-2); }
body:not(.bt-tela) .big { font-family: var(--bt-font); font-weight: 700; letter-spacing: 0.2em; color: var(--bt-navy); }
body:not(.bt-tela) #modal .box { border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .35); border: 1px solid var(--bt-line); background: var(--bt-card); }
body:not(.bt-tela) #modal-x { color: var(--bt-muted); }

/* telas de entrada (empresa.html, contador.html) */
body:not(.bt-tela) .hero h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--bt-ink); }
body:not(.bt-tela) .hero p { color: var(--bt-muted); }
body:not(.bt-tela) .foot { color: var(--bt-muted); }

