:root{
  --azul:#3b8af0; --verde:#2fa84f; --amarelo:#f4b400; --vermelho:#e53935;
  --fundo:#ededed; --lateral:#f5f5f5; --texto:#333; --linha:#dcdcdc; --lima:#b5cc4b;
}
body{background:var(--fundo);color:var(--texto);font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px}
.topo{position:fixed;top:0;left:0;right:0;height:58px;background:#fff;border-bottom:1px solid var(--linha);
  display:flex;align-items:center;padding:0 16px;z-index:30}
.marca{display:flex;align-items:center;gap:8px;width:200px;text-decoration:none;color:#1e7fc7;font-weight:700;font-size:24px}
.marca i{color:#5aa83c;font-size:22px}
.titulo-pagina{font-size:20px;font-weight:400;margin:0 0 0 18px;color:#333}
.lateral{position:fixed;top:58px;bottom:0;left:0;width:218px;background:var(--lateral);border-right:1px solid var(--linha);
  padding-top:14px;overflow-y:auto;z-index:20}
.lateral a{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;color:#444;text-decoration:none;font-size:14px}
.lateral a i{width:18px;text-align:center;color:#555}
.lateral a.ativo{color:var(--azul)} .lateral a.ativo i{color:var(--azul)}
.lateral a:hover{background:#ebebeb}
.lateral .secao{font-size:11px;font-weight:700;color:#999;padding:24px 10px 8px;letter-spacing:.3px}
.conteudo{margin:58px 0 0 218px;padding:14px 12px 30px}
.trilha{font-size:13.5px;margin:6px 0 16px}
.trilha a{color:#222;font-weight:700;text-decoration:none}
.trilha .sep{color:#999;margin:0 6px}
.trilha .atual{color:#555;font-weight:600}
.cartao{background:#fff;padding:22px 24px;margin-bottom:16px}
.cartao.filtro{border-top:4px solid var(--lima)}
.rotulo{font-size:13.5px;text-transform:uppercase;color:#444;margin-bottom:6px}
.form-control,.form-select{border-radius:0;height:46px;border-color:#ccc;font-size:15px}
.btn-sisrem{background:var(--azul);color:#fff;border-radius:2px;font-weight:700;padding:6px 16px}
.btn-sisrem:hover{background:#2f78d6;color:#fff}
.btn-exp{color:#fff;font-weight:700;border-radius:2px;padding:6px 12px}
.btn-exp.excel{background:var(--verde)} .btn-exp.pdf{background:var(--vermelho)}
.btn-exp:hover{color:#fff;filter:brightness(.92)}
.tabela{width:100%;border-collapse:collapse}
.tabela th{font-weight:700;padding:12px 6px;border-bottom:2px solid var(--linha);white-space:nowrap}
.tabela td{padding:12px 6px;border-bottom:1px solid #e3e3e3;vertical-align:middle}
.tabela tbody tr:nth-child(odd){background:#f4f4f4}
.tabela tbody tr{cursor:pointer}
.tabela tbody tr:hover{background:#e9f2fd}
.num{text-align:right;white-space:nowrap}
.acao{width:34px;height:34px;border-radius:50%;border:0;color:#fff;display:inline-flex;align-items:center;
  justify-content:center;margin:0 3px;text-decoration:none}
.acao.ver{background:var(--azul)} .acao.baixar{background:var(--verde)}
.acao:hover{color:#fff;filter:brightness(.9)}
.paginacao{display:flex;justify-content:center;gap:9px;margin-top:22px;flex-wrap:wrap}
.paginacao a,.paginacao span{min-width:40px;height:40px;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;
  color:#222;text-decoration:none;font-weight:700;font-size:13px;padding:0 6px;background:#fff}
.paginacao .atual{border-color:#3b6fb6;background:#f1f6fd}
.registros{text-align:right;color:#888;font-style:italic;font-size:13px;margin-top:10px}
.selo{display:inline-block;font-size:11px;padding:1px 6px;border-radius:3px;background:#fde7e7;color:#b71c1c;margin-left:4px}
/* prévia */
.previa{border:1px solid #ccc;padding:18px 20px;font-family:Arial,sans-serif;color:#000;background:#fff}
.previa .logo{text-align:center;color:#1f6f8b;line-height:1.05;margin-bottom:10px}
.previa .logo img{max-height:64px}
.previa .logo small{display:block;font-size:11px}.previa .logo b{font-size:22px;font-weight:400}
.previa hr{border-top:1.5px solid #000;opacity:1;margin:8px 0}
.previa .num-ticket{font-size:17px;display:flex;gap:30px;padding:2px 8px}
.previa .grade{display:grid;grid-template-columns:150px 1fr 1fr;gap:12px;align-items:start;margin-top:10px}
.previa .caixa{border:1.5px solid #000;border-radius:12px;padding:8px 14px;font-size:15px}
.previa .liquido{border:1.5px solid #000;border-radius:12px;padding:10px 14px;display:inline-flex;gap:24px;align-items:center;font-size:15px}
.previa .liquido b{font-family:"Times New Roman",serif;font-size:24px}
.previa .rodape{border:1.5px solid #000;border-radius:4px;text-align:center;font-family:"Times New Roman",serif;font-weight:700;font-size:12px;padding:6px;margin:8px 0}
.previa .obs-ticket{border:1.5px solid #000;border-radius:4px;padding:6px 10px;font-size:13px;margin:10px 0}
.previa .nota{font-size:11px;color:#666}
.login-caixa{max-width:380px;margin:12vh auto;background:#fff;border-top:4px solid var(--lima);padding:30px}
@media (max-width:991px){
  .lateral{transform:translateX(-100%);transition:transform .2s}
  body.menu-aberto .lateral{transform:none}
  .conteudo{margin-left:0}
  .marca{width:auto}
  .previa .grade{grid-template-columns:1fr}
}
.rastro{border:1px solid #ddd;background:#fafafa;padding:10px 12px}
.rastro td{padding:3px 6px;vertical-align:top;border-bottom:1px solid #eee}
.rastro td:first-child{color:#666;width:190px;white-space:nowrap}
.etiqueta{font-size:12px;font-weight:700;padding:2px 8px;border-radius:3px}
.etiqueta.ok{background:#e3f4e8;color:#1e7a3a}.etiqueta.info{background:#e8f0fb;color:#2459a8}.etiqueta.alerta{background:#fde7e7;color:#b71c1c}
.selo-equipe{background:#e8f0fb;color:#2459a8}