/* Painel de cobrança -- estilos sobre os tokens do design system Grupo Vision. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--gv-ink-700);
  background: var(--gv-ink-25);
}

/* Barra superior */
.topbar {
  height: var(--topbar-h);
  background: var(--gv-ink-900);
  color: var(--gv-ink-0);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 0 var(--sp-6);
}
.campo-estreito { width: 90px; }
.topbar .marca { display: flex; align-items: center; }
.topbar .marca img { height: 26px; width: auto; display: block; }
.topbar nav { display: flex; gap: var(--sp-4); }
.topbar nav a {
  color: var(--gv-ink-200);
  text-decoration: none;
  font-size: var(--fs-small);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
.topbar nav a:hover { color: var(--gv-ink-0); background: var(--gv-ink-700); }
.topbar nav a.ativa { color: var(--gv-orange-400); }

/* Conteúdo */
.conteudo {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6);
}
h1 { font-size: var(--fs-h3); letter-spacing: var(--ls-snug); margin-bottom: var(--sp-5); }
h2 { font-size: var(--fs-lead); margin: var(--sp-5) 0 var(--sp-3); }

/* Cartões de resumo */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.cartao {
  background: var(--gv-ink-0);
  border: 1px solid var(--gv-ink-100);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.cartao .rotulo { font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gv-ink-400); }
.cartao .valor { font-size: var(--fs-h2); font-family: var(--ff-display); line-height: var(--lh-snug); }
.cartao .detalhe { font-size: var(--fs-small); color: var(--gv-ink-400); }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); align-items: end; }
.filtros label { display: block; font-size: var(--fs-micro); color: var(--gv-ink-400); margin-bottom: var(--sp-1); }
.filtros select, .filtros input {
  font: inherit;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--gv-ink-200);
  border-radius: var(--r-sm);
  background: var(--gv-ink-0);
  min-width: 160px;
}
.filtros button {
  font: inherit;
  padding: var(--sp-2) var(--sp-4);
  background: var(--gv-orange-500);
  color: var(--gv-ink-0);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.filtros button:hover { background: var(--gv-orange-600); }

/* Tabelas */
table { width: 100%; border-collapse: collapse; background: var(--gv-ink-0); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); }
thead th {
  background: var(--gv-ink-600);
  color: var(--gv-ink-50);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
tbody tr { border-top: 1px solid var(--gv-ink-50); }
tbody tr:hover { background: var(--gv-orange-50); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* Selos de situação e grupo */
.selo {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-base);
}
.selo-regua       { background: #FDECEC; color: var(--gv-danger); }
.selo-aguardando  { background: #FFF7E0; color: #9A6E00; }
.selo-renegociado { background: #E7F0FD; color: var(--gv-info); }
.selo-fora        { background: var(--gv-ink-50); color: var(--gv-ink-400); }
.selo-g1          { background: #E6F7EF; color: var(--gv-success); }
.selo-g2          { background: var(--gv-ink-50); color: var(--gv-ink-500); }

/* Paginação */
.paginacao { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); align-items: center; }
.paginacao a, .paginacao span {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--gv-ink-500);
  border: 1px solid var(--gv-ink-100);
  font-size: var(--fs-small);
  background: var(--gv-ink-0);
}
.paginacao .atual { background: var(--gv-orange-500); color: var(--gv-ink-0); border-color: var(--gv-orange-500); }
.paginacao .info { border: none; background: none; }

.vazio { padding: var(--sp-6); text-align: center; color: var(--gv-ink-300); }
.rodape { margin-top: var(--sp-2); margin-bottom: var(--sp-4); font-size: var(--fs-micro); color: var(--gv-ink-300); }

/* Dashboard explicativo */
.explicacao {
  max-width: 860px;
  color: var(--gv-ink-400);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-loose);
}
.cartao.destaque { border-top: 3px solid var(--gv-orange-500); }
.cartao .valor.menor { font-size: var(--fs-h3); }
.instancia-titulo {
  font-size: var(--fs-lead);
  margin: var(--sp-5) 0 var(--sp-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--gv-ink-500);
}
table.compacta { max-width: 640px; margin-bottom: var(--sp-5); }
.cartoes + .cartoes { margin-top: var(--sp-4); }

/* Envio manual na régua */
.aviso-acao {
  background: #E6F7EF;
  border: 1px solid var(--gv-success);
  color: #14603F;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
}
.acao-envio details { min-width: 220px; }
.acao-envio summary { cursor: pointer; color: var(--gv-orange-600); font-size: var(--fs-micro); }
.previa-mensagem {
  background: var(--gv-ink-25);
  border-left: 3px solid var(--gv-orange-300);
  padding: var(--sp-3);
  margin: var(--sp-2) 0;
  font-size: var(--fs-micro);
  max-width: 340px;
  white-space: pre-wrap;
}
.botao-enviar {
  font: inherit;
  font-size: var(--fs-micro);
  padding: var(--sp-1) var(--sp-3);
  background: var(--gv-orange-500);
  color: var(--gv-ink-0);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.botao-enviar:hover { background: var(--gv-orange-600); }
.botao-enviar:disabled, .botao-enviar.enviando {
  background: var(--gv-ink-200);
  color: var(--gv-ink-500);
  cursor: wait;
}

/* Login */
.corpo-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gv-ink-900);
}
.caixa-login {
  background: var(--gv-ink-0);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  width: min(400px, 92vw);
  box-shadow: var(--shadow-3);
}
.marca-login { height: 34px; width: auto; display: block; margin-bottom: var(--sp-4); }
.caixa-login h1 { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.caixa-login label { display: block; font-size: var(--fs-small); color: var(--gv-ink-400); margin: var(--sp-4) 0 var(--sp-1); }
.caixa-login input {
  width: 100%;
  font: inherit;
  padding: var(--sp-3);
  border: 1px solid var(--gv-ink-200);
  border-radius: var(--r-sm);
}
.caixa-login button {
  width: 100%;
  margin-top: var(--sp-5);
  font: inherit;
  padding: var(--sp-3);
  background: var(--gv-orange-500);
  color: var(--gv-ink-0);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.caixa-login button:hover { background: var(--gv-orange-600); }
.ultima-atualizacao {
  margin-left: auto;
  font-size: var(--fs-micro);
  color: var(--gv-ink-300);
  white-space: nowrap;
}
.topbar .sair { margin-left: var(--sp-4); }
.topbar .sair button {
  font: inherit;
  font-size: var(--fs-micro);
  background: none;
  border: 1px solid var(--gv-ink-500);
  color: var(--gv-ink-200);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.topbar .sair button:hover { border-color: var(--gv-orange-400); color: var(--gv-orange-400); }

/* Configurações */
.aviso-erro {
  background: #FDECEC;
  border: 1px solid var(--gv-danger);
  color: #8A1F23;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
}
.form-config { align-items: start; max-width: 980px; }
.form-config div { max-width: 220px; }
.form-config small { display: block; color: var(--gv-ink-300); font-size: var(--fs-micro); margin-top: var(--sp-1); }
.form-config input { width: 100%; }