:root {
  --azul: #1B3A6B;
  --azul-claro: #2a5db0;
  --fundo: #f4f6fa;
  --borda: #d5dbe6;
  --texto: #1b2230;
  --amarelo: #fff176;
  --verde: #d4efd9;
  --laranja: #ffc58a;
  --cinza: #ececec;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto); background: var(--fundo); }
a { color: var(--azul-claro); }
.topo { background: var(--azul); color: #fff; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 20px; padding: 10px 20px; }
.topo a { color: #fff; text-decoration: none; }
.marca { font-weight: 700; font-size: 18px; }
.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu a { padding: 6px 12px; border-radius: 6px; }
.menu a:hover, .menu a.ativo { background: rgba(255,255,255,.18); }
.quem { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.conteudo { max-width: 1280px; margin: 0 auto; padding: 20px; }
h1 { font-size: 24px; margin: 0 0 14px; color: var(--azul); }
h2 { font-size: 19px; color: var(--azul); }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 18px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.modulo { display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--borda); border-radius: 10px; padding: 18px; }
.modulo:hover { border-color: var(--azul-claro); box-shadow: 0 2px 10px rgba(27,58,107,.12); }
.modulo.desligado { opacity: .55; pointer-events: none; }
.modulo b { display: block; color: var(--azul); font-size: 18px; margin-bottom: 6px; }
.aviso { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.aviso-ok { background: #e3f4e7; border: 1px solid #a6d6b1; }
.aviso-erro { background: #fde8e8; border: 1px solid #f0b3b3; }
label { display: block; font-size: 14px; font-weight: 600; margin: 10px 0 3px; }
input[type=text], input[type=password], input[type=date], input[type=file], input[type=search],
select, textarea { width: 100%; padding: 9px 10px; font: inherit; border: 1px solid var(--borda);
  border-radius: 7px; background: #fff; color: var(--texto); }
.linha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
.botao { display: inline-block; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--azul); background: var(--azul); color: #fff; border-radius: 7px;
  text-decoration: none; }
.botao:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.botao.sec { background: #fff; color: var(--azul); }
.botao.sec:hover { background: #eef2fa; }
.botao.perigo { background: #fff; color: #b00020; border-color: #b00020; }
.botao.perigo:hover { background: #fde8e8; }
.botao.peq { padding: 4px 10px; font-size: 14px; }
.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.barra .espaco { flex: 1; }
table.tab { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borda);
  border-radius: 8px; overflow: hidden; }
table.tab th, table.tab td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--borda);
  vertical-align: top; }
table.tab th { background: #e9eef7; font-size: 14px; }
table.tab tr:last-child td { border-bottom: 0; }
.rolagem { overflow-x: auto; }
.st-pendente { background: var(--amarelo); }
.st-recebido { background: var(--verde); }
.st-problema { background: var(--laranja); }
.st-na { background: var(--cinza); }
.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 13px; background: #e9eef7; }
.ok { color: #1a7a32; font-weight: 600; }
.ruim { color: #b00020; font-weight: 600; }
.mudo { color: #667; font-size: 14px; }
.botoes-status { display: flex; flex-wrap: wrap; gap: 4px; }
.botoes-status button { padding: 4px 8px; font-size: 13px; cursor: pointer; border: 1px solid var(--borda);
  background: #fff; border-radius: 6px; color: var(--texto); }
.botoes-status button.sel { border-color: #000; font-weight: 700; }
.obs { display: flex; gap: 4px; }
.obs input { min-width: 160px; }
.login { max-width: 380px; margin: 60px auto; }
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .dois { grid-template-columns: 1fr; } .conteudo { padding: 12px; } }

tr.ativa td { background: #cfe3ff !important; font-weight: 600; }
tr.ativa td:first-child { box-shadow: inset 6px 0 0 #1f4e79; }
#atalhos { font-size: 13px; }

/* painel de números */
.painel { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.painel .num { background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 16px;
  min-width: 130px; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.painel a.num:hover { border-color: #1f4e79; }
.painel .num b { font-size: 26px; line-height: 1.1; }
.painel .num span { font-size: 13px; color: #555; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filtros input[type=search] { flex: 1; min-width: 180px; }
.filtros select { max-width: 200px; }

/* celular e tablet: as tabelas viram cartões */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .botao, button, select, input[type=text], input[type=search], input[type=password] { min-height: 44px; }
  .barra .botao { flex: 1 1 auto; text-align: center; }
  .filtros select, .filtros input[type=search] { max-width: none; flex: 1 1 100%; }
  .painel .num { flex: 1 1 45%; min-width: 0; }
  table.tab-cartoes, table.tab-cartoes tbody, table.tab-cartoes tr, table.tab-cartoes td { display: block; width: 100%; }
  table.tab-cartoes thead { display: none; }
  table.tab-cartoes tr { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 10px; padding: 6px 4px; background: #fff; }
  table.tab-cartoes td { border: 0; padding: 4px 10px; }
  table.tab-cartoes td[data-r]::before { content: attr(data-r) ": "; color: #555; font-size: 13px; }
  table.tab-cartoes td.c-nome { font-size: 18px; }
  .botoes-status button { min-height: 44px; padding: 6px 12px; }
  .obs { flex-wrap: wrap; }
  .obs input { flex: 1 1 100%; }
  #atalhos { display: none; }
  .topo { flex-wrap: wrap; }
  .menu { flex-wrap: wrap; }
}

.tecla { display: inline-block; min-width: 16px; text-align: center; font-size: 11px; font-weight: 700; background: #e9eef7; border: 1px solid var(--borda); border-radius: 4px; margin-right: 3px; }

tr.marcada td { background: #dbeafe !important; }
@media (max-width: 760px) { table.tab-cartoes tr.ativa, table.tab-cartoes tr.marcada { background: #cfe3ff; } }

/* ===== redesenho (v2): menu lateral, no padrão do Financeiro ===== */
:root{--navy:#0b1f3a;--acento:#1f5fbf;--lado:236px;--sombra:0 1px 2px rgba(11,31,58,.06),0 4px 14px rgba(11,31,58,.05)}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;background:#f5f7fa}
.app{display:flex;min-height:100vh}
.area{flex:1;min-width:0}
.lado{width:var(--lado);flex:0 0 var(--lado);background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:16px 12px;overflow:auto}
.lado .marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:4px 8px 16px}
.lado .marca img{height:30px;width:auto;border-radius:6px}
.lado nav{flex:1}
.lado .nav{display:flex;align-items:center;gap:11px;color:#c9d6ea;text-decoration:none;padding:10px 12px;border-radius:10px;margin-bottom:2px;font-size:14.5px}
.lado .nav:hover{background:rgba(255,255,255,.08);color:#fff}
.lado .nav.on{background:var(--acento);color:#fff;font-weight:600}
.lado .nav.peq{font-size:13.5px;padding:7px 12px;color:#a9b9d3}
.lado .gt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f93b3;padding:16px 12px 6px}
.rodape-lado{border-top:1px solid rgba(255,255,255,.12);padding-top:10px;margin-top:10px}
.lado .quem{display:block;padding:4px 12px 8px}
.lado .quem b{display:block;font-size:14px}
.lado .quem small{color:#8fa3c4}
.conteudo{max-width:1180px;margin:0 auto;padding:28px 32px}
.boas-vindas h1{font-size:28px;margin:0 0 2px;color:var(--navy)}
.mudo{color:#5b6778}
.modulos{margin-top:18px}
.modulo{border-radius:14px;box-shadow:var(--sombra);transition:.15s;display:flex;flex-direction:column;gap:6px;padding:20px}
.modulo:hover{transform:translateY(-2px);border-color:var(--acento)}
.modulo b{font-size:17px;color:var(--navy)}
.modulo .bola{width:46px;height:46px;border-radius:12px;background:#e6eefb;color:var(--acento);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.modulo.desligado{opacity:.55}
.cartao{border-radius:14px;box-shadow:var(--sombra)}
.botao,button.botao{border-radius:9px}
table.tab{border-radius:12px;overflow:hidden;box-shadow:var(--sombra)}
body.sem-lado{display:flex;flex-direction:column;align-items:center;min-height:100vh;background:linear-gradient(160deg,#0b1f3a,#1f5fbf)}
body.sem-lado .topo-login{padding:44px 0 6px}
body.sem-lado .topo-login img{height:64px;border-radius:12px}
body.sem-lado .conteudo{width:100%;max-width:420px;padding:18px}
body.sem-lado .login.cartao{padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.entrar{margin:0 0 4px;font-size:21px;text-align:center}
.entrar-sub{text-align:center;margin:0 0 16px}
@media(max-width:820px){
 .app{flex-direction:column}
 .lado{width:auto;flex:none;height:auto;position:static;flex-direction:row;flex-wrap:wrap;padding:8px;align-items:center}
 .lado .marca span,.lado .gt,.lado .quem{display:none}
 .lado .marca{padding:4px 8px}
 .lado nav{display:flex;flex-wrap:wrap;flex:1}
 .lado .nav{padding:8px 10px;margin:0}
 .lado .nav span{font-size:13px}
 .rodape-lado{display:flex;border:0;margin:0;padding:0}
 .rodape-lado .nav span{display:none}
 .conteudo{padding:16px}
}
.lado .marca img{background:#fff;padding:4px 8px;height:34px;border-radius:8px}
.lado .marca span{font-size:13px;line-height:1.2}
body.sem-lado .topo-login img{background:#fff;padding:10px 18px;height:64px;border-radius:14px}