/* ===========================================================================
   TiPonto Web — base.css  (tema escuro, paridade visual com o desktop)
   =========================================================================== */
:root{
  --bg:#11111b; --bg2:#181825; --card:#1e1e2e; --card2:#24243a;
  --bd:#313244; --bd2:#45475a;
  --tx:#cdd6f4; --tx-mut:#9399b2; --tx-dim:#6c7086;
  --ac:#89b4fa; --ac-d:#74a0e8;
  --ok:#a6e3a1; --warn:#f9e2af; --er:#f38ba8; --info:#89dceb; --roxo:#cba6f7;
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --r:10px; --r-sm:7px;
  --sidebar-w:236px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);
  font:14.5px/1.5 system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}
h1,h2,h3{margin:0 0 .5em;color:#fff;font-weight:600}
code{background:var(--bg2);padding:1px 5px;border-radius:4px;font-size:.9em}

/* ---------- Botoes ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;justify-content:center;
  padding:9px 16px;border:1px solid var(--bd2);border-radius:var(--r-sm);
  background:var(--card2);color:var(--tx);font-size:14px;cursor:pointer;transition:.12s}
.btn:hover{border-color:var(--ac);color:#fff}
.btn-primario{background:var(--ac);border-color:var(--ac);color:#11111b;font-weight:600}
.btn-primario:hover{filter:brightness(1.08);color:#11111b}
.btn-secundario{background:transparent}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#0d1b0d;font-weight:600}
.btn-perigo{background:var(--er);border-color:var(--er);color:#2a0d12;font-weight:600}
.btn-bloco{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{padding:5px 10px;font-size:12.5px}

/* ---------- Layout app ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--bd);
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:30}
.marca{font-size:22px;font-weight:800;color:#fff;padding:18px 20px 12px;letter-spacing:.3px}
.marca span{color:var(--ac)}
.nav{padding:4px 10px 20px;display:flex;flex-direction:column;gap:1px}
.nav-grupo{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--tx-dim);
  padding:14px 10px 5px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--tx-mut);font-size:13.5px;cursor:pointer}
.nav-item .ic{width:20px;text-align:center}
.nav-item:hover{background:var(--card);color:var(--tx)}
.nav-item.ativo{background:var(--ac);color:#11111b;font-weight:600}
.nav-item.destaque{color:var(--roxo);font-weight:600}
.nav-item.ativo.destaque{color:#11111b}
.nav-item.desabilitado{color:var(--tx-dim);cursor:default;opacity:.75}
.nav-item.desabilitado:hover{background:transparent}
.badge{margin-left:auto;font-size:9.5px;background:var(--bd);color:var(--tx-mut);
  padding:1px 6px;border-radius:10px;text-transform:uppercase}

.conteudo{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;align-items:center;gap:14px;padding:0 22px;height:56px;
  background:var(--bg2);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:20}
.topbar-titulo{font-size:17px;margin:0}
.topbar-user{margin-left:auto;display:flex;align-items:center;gap:10px}
.user-nome{color:var(--tx)}
.user-perfil{font-size:11px;background:var(--card2);color:var(--tx-mut);padding:2px 8px;border-radius:10px;text-transform:uppercase}
.btn-sair{padding:5px 10px;border:1px solid var(--bd2);border-radius:6px;color:var(--tx-mut)}
.btn-sair:hover{border-color:var(--er);color:var(--er)}
.hamburguer{display:none;background:none;border:0;color:var(--tx);font-size:20px;cursor:pointer}

.main{flex:1;padding:22px}
.statusbar{display:flex;gap:18px;align-items:center;padding:7px 22px;background:var(--bg2);
  border-top:1px solid var(--bd);font-size:12px;color:var(--tx-mut)}
.status-dir{margin-left:auto}

/* ---------- Cards / painel ---------- */
.painel{display:flex;flex-direction:column;gap:22px}
.cards-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.card-num{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:20px}
.card-num-valor{font-size:32px;font-weight:700;color:#fff}
.card-num-label{color:var(--tx-mut);margin-top:4px}
.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.atalho{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:6px;transition:.12s}
.atalho:hover{border-color:var(--ac);transform:translateY(-2px)}
.atalho-destaque{border-color:var(--roxo);background:linear-gradient(160deg,#231e36,#1e1e2e)}
.atalho-ic{font-size:26px}
.atalho-tit{font-size:16px;font-weight:600;color:#fff}
.atalho-desc{color:var(--tx-mut);font-size:13px}
.rodape-lei{color:var(--tx-dim);font-size:12.5px;border-top:1px dashed var(--bd);padding-top:14px}

/* ---------- Cartoes/secoes genericos ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:18px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .sep{margin-left:auto}
.campo{display:flex;flex-direction:column;gap:4px}
.campo label{font-size:12px;color:var(--tx-mut)}
input,select,textarea{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-sm);
  color:var(--tx);padding:8px 10px;font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac)}

/* ---------- Caixas de data dd · mm · aaaa ----------
   min-width:0 nos seletores de DUAS classes (.data-br .d) p/ vencer regras de
   toolbar como ".asst-toolbar select{min-width:150px}" e manter as caixas compactas. */
.data-br{display:inline-flex;gap:4px;align-items:center}
.data-br select{padding:8px 6px;font-size:13px}
.data-br .d{width:60px;min-width:0}
.data-br .m{width:104px;min-width:0}
.data-br .y{width:82px;min-width:0}
.mes-rapido{display:inline-flex;gap:4px;align-items:center}
.mes-rapido select{padding:8px 6px;font-size:13px}
.mes-rapido .mr-mes{width:112px;min-width:0}
.mes-rapido .mr-ano{width:82px;min-width:0}

/* ---------- Tabelas ---------- */
.tabela{width:100%;border-collapse:collapse;font-size:13px}
.tabela th,.tabela td{padding:7px 9px;border-bottom:1px solid var(--bd);text-align:center;white-space:nowrap}
.tabela th{background:var(--bg2);color:var(--tx-mut);position:sticky;top:0;font-weight:600;z-index:1}
.tabela tbody tr:hover{background:var(--card2)}
.tabela td.txt-esq,.tabela th.txt-esq{text-align:left}
.linha-total td{background:var(--card2);font-weight:700;color:#fff;border-top:2px solid var(--bd2)}
.tabela-wrap{overflow:auto;border:1px solid var(--bd);border-radius:var(--r);max-height:62vh}

/* tags de status do dia */
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600}
.tag-ok{background:rgba(166,227,161,.15);color:var(--ok)}
.tag-falta{background:rgba(243,139,168,.16);color:var(--er)}
.tag-atraso{background:rgba(249,226,175,.16);color:var(--warn)}
.tag-extra{background:rgba(137,180,250,.16);color:var(--ac)}
.tag-folga{background:rgba(108,112,134,.2);color:var(--tx-mut)}
.tag-noturno{background:rgba(203,166,247,.16);color:var(--roxo)}

/* ---------- Avisos ---------- */
.aviso-ok{background:rgba(166,227,161,.12);border:1px solid var(--ok);color:var(--ok);padding:10px 12px;border-radius:var(--r-sm);margin-bottom:14px}
.aviso-erro{background:rgba(243,139,168,.12);border:1px solid var(--er);color:var(--er);padding:10px 12px;border-radius:var(--r-sm);margin-bottom:14px}
.aviso-info{background:rgba(137,220,235,.1);border:1px solid var(--info);color:var(--info);padding:10px 12px;border-radius:var(--r-sm);margin-bottom:14px}

/* ---------- Login ---------- */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:32px;width:340px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.login-marca{font-size:28px;font-weight:800;color:#fff;text-align:center}
.login-marca span{color:var(--ac)}
.login-sub{text-align:center;color:var(--tx-mut);margin:2px 0 18px}
.login-card label{font-size:12px;color:var(--tx-mut);margin:10px 0 4px}
.login-card .btn{margin-top:18px}

/* ---------- Telas vazias / erro ---------- */
.tela-vazia{display:flex;align-items:center;justify-content:center;min-height:100vh}
.card-centro{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:36px;text-align:center;max-width:440px}
.erro-codigo{font-size:48px;font-weight:800;color:var(--ac)}
.card-bloqueio .erro-codigo{color:var(--er)}
.texto-suave{color:var(--tx-mut);font-size:13px}
.acoes-bloqueio{display:flex;gap:10px;justify-content:center;margin-top:18px}

/* ---------- Toast ---------- */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{background:var(--card2);border:1px solid var(--bd2);border-left-width:4px;border-radius:8px;
  padding:11px 16px;min-width:240px;box-shadow:var(--shadow);animation:slidein .2s}
.toast.ok{border-left-color:var(--ok)}
.toast.erro{border-left-color:var(--er)}
.toast.info{border-left-color:var(--info)}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .2s}
  .sidebar.aberta{transform:none}
  .conteudo{margin-left:0}
  .hamburguer{display:block}
}

/* ---------- Ajuda FIXA no cabeçalho (tooltip do sistema) ---------- */
/* O texto de ajuda de QUALQUER elemento (data-tip/title) aparece fixo aqui no
   topo — não flutua sobre o item. Vale em TODAS as telas (a topbar é global). */
.topbar-ajuda{display:flex;align-items:center;gap:8px;flex:1;min-width:0;margin:0 18px;
  color:var(--tx-dim);font-size:12.5px;line-height:1.3}
.topbar-ajuda .ajuda-ic{flex:0 0 auto;opacity:.7}
.topbar-ajuda .ajuda-txt{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.topbar-ajuda.ativa{color:var(--tx)}
.topbar-ajuda.ativa .ajuda-ic{opacity:1}
[data-tip]:not(input):not(select):not(textarea){cursor:help}

/* ---------- Botao "Imprimir PDF" da topbar ---------- */
.btn-print-topo{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid var(--bd2);border-radius:var(--r-sm);
  background:var(--card2);color:var(--tx);font-size:12.5px;cursor:pointer;transition:.12s}
.btn-print-topo:hover{border-color:var(--ac);color:#fff}

/* Cabecalho de impressao: escondido na tela, visivel so no PDF. */
.print-cabecalho{display:none}

/* ===========================================================================
   IMPRESSAO / PDF (preto e branco) — vale para o botao "Imprimir PDF" de
   qualquer tela. Imprime SO o conteudo (sem menu/topo/rodape/botoes), em P&B.
   O nome do arquivo (data+hora) e definido via document.title no app.js.
   =========================================================================== */
@media print{
  /* Paleta vira preto-e-branco: como tudo usa variaveis, isto converte o tema. */
  :root{
    --bg:#fff;--bg2:#fff;--card:#fff;--card2:#fff;--bd:#000;--bd2:#000;
    --tx:#000;--tx-mut:#000;--tx-dim:#333;--ac:#000;--ac-d:#000;
    --ok:#000;--warn:#000;--er:#000;--info:#000;--roxo:#000;--shadow:none;
  }
  @page{size:A4;margin:12mm}
  html,body{background:#fff !important;color:#000 !important}
  body{font-size:11pt}
  /* Esconde toda a "moldura" do app e controles interativos. */
  .sidebar,.topbar,.statusbar,#toasts,.no-print,
  .btn,.btn-print-topo,.btn-sair,.hamburguer,.topbar-ajuda,
  .esp-toolbar,.asst-toolbar,.grade-toolbar,.grade-btns,.tabs,.form-actions,
  .asst-lote-bar,.asst-lote-toggle,.asst-acoes,.asst-form,.par-acoes,
  .esp-colmenu,.esp-filtros,.asst-filtros-dica{display:none !important}
  .conteudo{margin:0 !important;display:block}
  .main{padding:0 !important}
  .app{display:block}
  /* Cartoes/areas viram papel branco com borda preta fina. */
  .card,.tabela-wrap{border:1px solid #000 !important;border-radius:0 !important;
    box-shadow:none !important;background:#fff !important;max-height:none !important;overflow:visible !important}
  .card{margin-bottom:10px}
  h1,h2,h3,.card-num-valor,.topbar-titulo,.marca,.pc-marca{color:#000 !important}
  a{color:#000 !important;text-decoration:none}
  /* Tabelas em P&B com grade preta. */
  .tabela{font-size:9.5pt}
  .tabela th,.tabela td{border:1px solid #000 !important;background:#fff !important;
    color:#000 !important;position:static !important;white-space:normal}
  .tabela th{font-weight:700}
  .tabela tbody tr:hover{background:#fff !important}
  .tabela tr.fim-semana td,#esp-tabela tr.fim-semana td{background:#f2f2f2 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .linha-total td{background:#eaeaea !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #esp-tabela td.neg,#esp-tabela td.pos{color:#000 !important}
  /* Tags sem cor (so contorno). */
  .tag{background:#fff !important;border:1px solid #000 !important;color:#000 !important}
  /* Cabecalho de impressao aparece. */
  .print-cabecalho{display:flex !important;align-items:flex-end;justify-content:space-between;
    gap:14px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:12px}
  .print-cabecalho .pc-marca{font-size:20px;font-weight:800}
  .print-cabecalho .pc-marca span{color:#000}
  .print-cabecalho .pc-info{text-align:right;font-size:10pt;line-height:1.35;display:flex;flex-direction:column}
  .print-cabecalho .pc-titulo{font-size:13pt}
  /* Evita cortar linhas no meio entre paginas. */
  tr,td,th,.card-num,.asst-kpi{page-break-inside:avoid}
}