:root {
  --tinta: #202B38;
  --tinta-suave: #55606C;
  --fundo: #F6F3ED;
  --superficie: #FFFFFF;
  --linha: #E4DFD5;
  --chamado: #E2963B;
  --chamado-fundo: #FBEEDA;
  --venda: #2F8F5B;
  --venda-fundo: #E4F2E9;
  --ausente: #B0480F;
  --ausente-fundo: #F6E4DA;
  --raio: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  margin: 0;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
}

.topo .marca {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.topo .marca h1 { font-size: 26px; }
.topo .marca .relogio { color: var(--tinta-suave); font-size: 15px; }

.abas {
  display: flex;
  gap: 6px;
}

.abas a {
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--tinta-suave);
  font-size: 14px;
  font-weight: 600;
}

.abas a.ativa {
  background: var(--tinta);
  color: #fff;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
}

.grade-fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.cartao-vendedor {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 150px;
  position: relative;
}

.cartao-vendedor.na-vez {
  border-color: var(--chamado);
  background: var(--chamado-fundo);
  box-shadow: 0 0 0 3px rgba(226, 150, 59, 0.25);
}

.cartao-vendedor.atendendo {
  border-color: var(--venda);
  background: var(--venda-fundo);
}

.cartao-vendedor.ausente {
  border-color: var(--ausente);
  background: var(--ausente-fundo);
  opacity: 0.75;
}

.posicao {
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-suave);
  letter-spacing: 0.02em;
}

.nome-vendedor {
  font-size: 21px;
  font-weight: 700;
}

.selo {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.selo.disponivel { background: #EEF0F2; color: var(--tinta-suave); }
.selo.na-vez { background: var(--chamado); color: #fff; }
.selo.atendendo { background: var(--venda); color: #fff; }
.selo.ausente { background: var(--ausente); color: #fff; }

button {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 0.05s ease;
}
button:active { transform: scale(0.97); }

.btn-principal { background: var(--tinta); color: #fff; }
.btn-venda { background: var(--venda); color: #fff; }
.btn-sem-venda { background: #EEF0F2; color: var(--tinta); }
.btn-secundario { background: transparent; color: var(--tinta-suave); border: 1px solid var(--linha); }
.btn-perigo { background: var(--ausente); color: #fff; }

.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--linha); font-size: 15px; }
th { color: var(--tinta-suave); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:first-child td { font-weight: 700; }

.barra {
  height: 10px;
  border-radius: 999px;
  background: #EEF0F2;
  overflow: hidden;
}
.barra > div { height: 100%; background: var(--venda); }

.rotulo-secao {
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.vazio {
  color: var(--tinta-suave);
  font-style: italic;
  padding: 24px;
  text-align: center;
}

.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.campo label { font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}

.mensagem-feedback {
  border-left: 3px solid var(--chamado);
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--chamado-fundo);
  border-radius: 0 8px 8px 0;
}
.mensagem-feedback .meta { font-size: 12px; color: var(--tinta-suave); margin-top: 4px; }

dialog {
  border: none;
  border-radius: var(--raio);
  padding: 24px;
  width: min(420px, 90vw);
}
dialog::backdrop { background: rgba(32, 43, 56, 0.5); }