/* Painel WAYAP. Paleta da marca: roxo #32135e, teal #21b8b3, amarelo #fdce0e. */
:root {
  --roxo: #32135e;
  --roxo-claro: #4a2280;
  --teal: #21b8b3;
  --teal-escuro: #178a86;
  --amarelo: #fdce0e;
  --vermelho: #d64545;
  --texto: #241a33;
  --texto-fraco: #6b6280;
  --fundo: #f4f1f8;
  --cartao: #ffffff;
  --borda: #e2dcec;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800;
  color: var(--roxo);
  margin: 0 0 12px;
  line-height: 1.2;
}
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }

a { color: var(--roxo); }

/* ---------- topo ---------- */
.topo {
  background: var(--roxo);
  color: #fff;
  border-bottom: 3px solid var(--teal);
}
.topo-interno {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.topo img { height: 30px; width: auto; }
.topo nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.topo nav a {
  color: #efe9f8;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 14px;
  white-space: nowrap;
}
.topo nav a:hover { background: var(--roxo-claro); color: #fff; }
.topo nav a.ativo { background: var(--teal); color: #06302f; font-weight: 700; }

.conteudo { max-width: 1080px; margin: 0 auto; padding: 20px 16px 56px; }

/* ---------- cartoes ---------- */
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
}

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.numero {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px 16px;
}
.numero .rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-fraco);
  margin-bottom: 4px;
}
.numero .valor {
  font-family: Manrope, Inter, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--roxo);
  line-height: 1.1;
}
.numero .nota { font-size: 12px; color: var(--texto-fraco); margin-top: 3px; }
.numero.destaque { background: var(--roxo); border-color: var(--roxo); }
.numero.destaque .rotulo { color: #c9b9e4; }
.numero.destaque .valor { color: #fff; }
.numero.destaque .nota { color: #c9b9e4; }
.numero.alerta .valor { color: var(--vermelho); }

/* ---------- fila ---------- */
.etapa-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
}
.bolinha { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.contador {
  background: var(--fundo);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 13px;
  color: var(--texto-fraco);
  font-weight: 600;
}

.lead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--borda);
  flex-wrap: wrap;
}
.lead:first-of-type { border-top: 0; }
.lead-info { flex: 1 1 240px; min-width: 0; }
.lead-nome { font-weight: 700; }
.lead-meta { font-size: 13px; color: var(--texto-fraco); }
.lead-meta span + span::before { content: " · "; }

.dias {
  font-weight: 700;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 20px;
  background: #eceaf3;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.dias.atrasado { background: #fbe4e4; color: var(--vermelho); }

.acoes { display: flex; gap: 7px; flex-wrap: wrap; }
.botao {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--borda);
  background: #fff;
  color: var(--roxo);
  cursor: pointer;
  white-space: nowrap;
}
.botao:hover { border-color: var(--teal); }
.botao.zap { background: var(--teal); border-color: var(--teal); color: #06302f; }
.botao.principal { background: var(--roxo); border-color: var(--roxo); color: #fff; }

/* ---------- tabelas ---------- */
.rolagem { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }
td.num, th.num { text-align: right; }

/* ---------- formularios ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=password] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}
input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.campo { margin-bottom: 13px; }

/* ---------- avisos ---------- */
.aviso {
  border-radius: 9px;
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid;
}
.aviso.ok { background: #e7f7f6; border-color: var(--teal); color: #10514f; }
.aviso.erro { background: #fbe9e9; border-color: var(--vermelho); color: #8d2727; }
.aviso.atencao { background: #fff8dd; border-color: var(--amarelo); color: #6b5205; }

.fraco { color: var(--texto-fraco); font-size: 13px; }
.vazio { text-align: center; padding: 26px 10px; color: var(--texto-fraco); }

/* ---------- login ---------- */
.login-caixa {
  max-width: 340px;
  margin: 9vh auto;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 28px 24px;
}
.login-caixa img { height: 44px; display: block; margin: 0 auto 18px; }

@media (max-width: 620px) {
  .topo-interno { padding: 9px 12px; gap: 9px; }
  .topo nav { width: 100%; margin-left: 0; }
  .topo nav a { padding: 6px 9px; font-size: 13px; }
  .conteudo { padding: 15px 12px 44px; }
  .numero .valor { font-size: 22px; }
  .lead { gap: 9px; }
  .acoes { width: 100%; }
}

/* Chart.js com maintainAspectRatio:false precisa de altura fixa no pai,
   senao o canvas cresce em laco (aconteceu: 11.000px de altura). */
.caixa-grafico { position: relative; height: 240px; width: 100%; }
.caixa-grafico canvas { position: absolute; inset: 0; }

/* A logo da Wayap e escura e some no roxo do topo, entao vai numa pastilha clara. */
.marca {
  background: #fff;
  border-radius: 9px;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.marca img { height: 24px; width: auto; display: block; }
.marca span {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--roxo);
  letter-spacing: -.01em;
}
@media (max-width: 620px) {
  .caixa-grafico { height: 210px; }
  .marca span { font-size: 14px; }
}

/* No celular a tabela rola dentro do proprio cartao (.rolagem). Sem o nowrap
   os valores quebram em duas linhas e a leitura fica pior que a rolagem. */
@media (max-width: 620px) {
  th, td { padding: 8px 9px; white-space: nowrap; }
  .rolagem { -webkit-overflow-scrolling: touch; }
}