/* ============================================================
   BOPE 2.0 — Livro da Meta
   Direção: tática/preto e branco. Fundo quase preto, destaque em
   cinza-aço/branco (da caveira), números sempre em mono. Sem verde.
   (--ouro = cor de destaque; mantive o nome da variável.)
   ============================================================ */
:root {
  --asfalto: #0a0c0f;
  --painel: #14171c;
  --painel-2: #1c2027;
  --linha: #2c333c;
  --texto: #e8eaed;
  --texto-fraco: #99a1ab;
  --ouro: #d3dae1;        /* cinza-aço/branco de destaque */
  --ouro-escuro: #3d444d; /* cinza escuro (bordas/gradientes) */
  --verde: #c3ccd4;       /* "ok/aprovado" em aço (sem verde) */
  --vermelho: #e05252;
  --laranja: #e6a35a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--asfalto);
  color: var(--texto);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  min-height: 100vh;
}
.mono { font-family: 'JetBrains Mono', monospace; }
a { color: var(--ouro); text-decoration: none; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 28px;
  border-bottom: 2px solid var(--ouro-escuro);
  background: var(--painel);
  flex-wrap: wrap;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 75%; font-weight: 800; font-size: 22px;
  letter-spacing: 1px; color: var(--ouro);
}
.marca span { color: var(--texto); font-size: 22px; font-weight: 800; letter-spacing: 1px; margin-left: 4px; }
.marca-logo { width: 34px; height: 34px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.topo nav { display: flex; gap: 4px; flex: 1; }
.topo nav a {
  color: var(--texto-fraco); padding: 8px 14px; border-radius: 6px;
  font-weight: 500; font-size: 14px;
}
.topo nav a:hover { color: var(--texto); background: var(--painel-2); }
.topo nav a.ativo { color: var(--asfalto); background: var(--ouro); font-weight: 600; }
.sessao { display: flex; align-items: center; gap: 12px; color: var(--texto-fraco); font-size: 14px; }
.sair { color: var(--vermelho); }

main { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
h1 { font-family: 'Archivo', sans-serif; font-stretch: 75%; font-weight: 700; font-size: 26px; }
h1 .mono { color: var(--ouro); }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--texto-fraco); margin-bottom: 14px; }

/* ---------- cartões de resumo ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 28px; }
.cartao {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: 10px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.cartao.destaque { border-color: var(--ouro-escuro); background: linear-gradient(160deg, var(--painel) 60%, #1b1f26); }
.rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--texto-fraco); }
.numero { font-size: 32px; font-weight: 700; }
.cartao.destaque .numero { color: var(--ouro); }
.numero.aviso { color: var(--laranja); }
.numero.erro { color: var(--vermelho); }

/* ---------- blocos e tabelas ---------- */
.bloco {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: 10px; padding: 20px; margin-bottom: 24px;
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 8px 10px; color: var(--texto-fraco);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  border-bottom: 1px solid var(--linha);
}
td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.primeiro td { background: rgba(211, 218, 225, 0.07); }
td.pos { color: var(--ouro); font-weight: 700; }
td.total { color: var(--ouro); font-weight: 700; }
.vazio { color: var(--texto-fraco); text-align: center; padding: 18px; }

/* ---------- selos de status ---------- */
.selo {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
}
.selo.aprovado { background: rgba(195,204,212,.16); color: var(--verde); }
.selo.pendente { background: rgba(240,160,75,.15); color: var(--laranja); }
.selo.rejeitado { background: rgba(224,82,82,.15); color: var(--vermelho); }
.motivo { font-size: 12px; color: var(--texto-fraco); margin-top: 4px; }
.quem { font-size: 12px; color: var(--texto-fraco); }
.ver-print { font-size: 13px; border-bottom: 1px dashed var(--ouro-escuro); }

/* ---------- barra de meta (assinatura visual) ---------- */
.linha-meta { margin-bottom: 16px; }
.meta-info { display: flex; justify-content: space-between; margin-bottom: 6px; }
.meta-info .mono { color: var(--ouro); font-weight: 700; }
.trilho { height: 14px; background: var(--painel-2); border-radius: 7px; overflow: hidden; border: 1px solid var(--linha); }
.progresso {
  height: 100%;
  background: repeating-linear-gradient(-45deg, var(--ouro), var(--ouro) 8px, #9aa4ae 8px, #9aa4ae 16px);
  transition: width .4s ease;
}
.progresso.completa { background: repeating-linear-gradient(-45deg, var(--verde), var(--verde) 8px, #9aa4ae 8px, #9aa4ae 16px); }

/* ---------- filtros e formulários ---------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; }
input, select {
  background: var(--painel-2); border: 1px solid var(--linha); color: var(--texto);
  padding: 9px 12px; border-radius: 7px; font-family: inherit; font-size: 14px;
}
input:focus, select:focus { outline: 2px solid var(--ouro-escuro); border-color: var(--ouro); }
button {
  background: var(--ouro); color: var(--asfalto); border: none; cursor: pointer;
  padding: 9px 18px; border-radius: 7px; font-weight: 700; font-size: 14px; font-family: inherit;
}
button:hover { filter: brightness(1.1); }
.limpar { font-size: 13px; color: var(--texto-fraco); }
.acoes { display: flex; gap: 6px; align-items: center; }
.campo-motivo { width: 110px; padding: 6px 8px; font-size: 12px; }
.btn-aprovar { background: var(--verde); color: #0c130d; padding: 6px 12px; }
.btn-rejeitar { background: var(--vermelho); color: #170a0a; padding: 6px 12px; }
/* Desfazer uma decisão já tomada — discreto de propósito, não é ação do dia a dia */
.btn-reverter { background: transparent; border: 1px solid var(--linha); color: var(--texto-fraco);
  padding: 4px 9px; font-size: 11px; margin-left: 6px; }
.btn-reverter:hover { border-color: var(--ouro); color: var(--ouro); }
.seletor-semana select { min-width: 130px; }

/* ---------- login ---------- */
.tela-login {
  display: grid; place-items: center; min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(207,216,225,.08), transparent 55%),
    var(--asfalto);
}
.cartao-login {
  width: min(380px, 92vw); background: var(--painel);
  border: 1px solid var(--linha); border-top: 3px solid var(--ouro);
  border-radius: 12px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.marca-login {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: 'Archivo', sans-serif; font-stretch: 75%; font-weight: 800;
  font-size: 30px; letter-spacing: 2px; color: var(--ouro); text-align: center;
}
.marca-login b { color: var(--texto); font-weight: 800; }
.logo-login { width: 66px; height: 66px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.sub-login { text-align: center; color: var(--texto-fraco); font-size: 13px; letter-spacing: 1px; margin-top: -10px; }
.cartao-login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-fraco); }
.alerta {
  background: rgba(224,82,82,.12); color: var(--vermelho);
  padding: 10px 14px; border-radius: 7px; font-size: 13px;
}
/* Avisos com data-toast viram toast (toast.js). Isto só vale se o script NÃO rodar:
   aí o aviso aparece no lugar antigo, e o que não é erro não deve sair vermelho. */
.alerta[data-toast]:not([data-toast="erro"]) { background: rgba(207,216,225,.12); color: #cfd8e1; }

.rodape { text-align: center; color: var(--texto-fraco); font-size: 12px; padding: 20px; }

@media (max-width: 640px) {
  .topo { padding: 12px 14px; gap: 12px; }
  .topo nav { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 18px 12px 50px; }
  .numero { font-size: 26px; }
}

/* Paginação (registros e produção) */
.paginacao { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.paginacao .info { color: var(--texto-fraco); font-size: 13px; }
.paginacao .paginas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.paginacao a.pag-btn, .paginacao span.pag-atual {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--linha);
  color: var(--texto); font-size: 14px; font-family: 'JetBrains Mono', monospace;
}
.paginacao a.pag-btn:hover { border-color: var(--ouro); color: var(--ouro); }
.paginacao a.pag-btn.off { opacity: .35; pointer-events: none; }
.paginacao span.pag-atual { background: rgba(211,218,225,.10); color: var(--ouro); border-color: var(--ouro-escuro); }

/* Modal de resumo (aba Retiradas) */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 1000;
  align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.modal-caixa { background: var(--painel-2); border: 1px solid var(--linha); border-radius: 14px;
  max-width: 860px; width: 100%; padding: 26px; position: relative; }
.modal-caixa h3 { color: var(--ouro); font-size: 18px; margin-bottom: 4px; }
.modal-caixa h4 { color: var(--texto-fraco); font-size: 12px; text-transform: uppercase;
  letter-spacing: 2px; margin: 18px 0 8px; }
.modal-fechar { position: absolute; top: 14px; right: 14px; background: transparent;
  border: 1px solid var(--linha); color: var(--texto); border-radius: 8px; padding: 4px 11px; cursor: pointer; }
.modal-fechar:hover { border-color: var(--ouro); color: var(--ouro); }
.modal-dados { display: none; }