/* Painel da Piposlavia.
 *
 * Mesma paleta e mesma lapidacao do site: o cartao e um octogono de cantos
 * chanfrados, o botao tem ponta nas laterais. Quem sai da landing e entra
 * aqui tem de sentir que e a mesma casa.
 *
 * A diferenca de proposito: aqui nao ha animacao nem arte de fundo. E uma
 * ferramenta de trabalho, e quem abre quer ver a fila e clicar.
 */
:root {
  color-scheme: dark;
  --ouro: #d4af37;
  --ouro-fraco: #aa8c3c;
  --tabua: #f7e6a8;
  --creme: #e8dec8;
  --fundo-a: #2a1c14;
  --fundo-b: #120d0a;
  --superficie: rgb(28 20 16 / 0.86);
  --linha: rgb(232 222 200 / 0.14);
  --erro: #d9776a;
  --ok: #62be91;
  --ritmo: cubic-bezier(0.22, 1, 0.36, 1);

  /* O mesmo corte do cartao da republica no site. */
  --corte: 18px;
  --faceta: polygon(
    var(--corte) 0, calc(100% - var(--corte)) 0,
    100% var(--corte), 100% calc(100% - var(--corte)),
    calc(100% - var(--corte)) 100%, var(--corte) 100%,
    0 calc(100% - var(--corte)), 0 var(--corte)
  );
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, var(--fundo-a),
                              var(--fundo-b) 70%) fixed;
  color: var(--creme);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------- topo --- */
.topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem clamp(1rem, 4vw, 2.5rem);
  background: rgb(28 20 16 / 0.96);
  border-bottom: 1px solid rgb(212 175 55 / 0.22);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.5);
}

.marca { color: var(--ouro); letter-spacing: 0.12em; font-weight: 800; }
.marca b { color: var(--creme); font-weight: 400; letter-spacing: 0.06em; }

.topo nav { display: flex; gap: 1rem; margin-left: auto; }
.topo a { color: var(--creme); text-decoration: none; opacity: 0.78; }
.topo a:hover { color: var(--ouro); opacity: 1; }
.quem { font-size: 0.8rem; opacity: 0.6; }
.quem i { color: var(--ouro-fraco); font-style: normal; }

/* -------------------------------------------------------------- miolo --- */
.miolo {
  width: min(64rem, 100%);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
  display: grid;
  gap: 1.2rem;
}

/* O cartao lapidado. Aro e preenchimento em camadas, porque `clip-path`
   recorta borda e sombra -- mesma restricao do site, mesma solucao. */
.cartao {
  position: relative;
  isolation: isolate;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.cartao::before,
.cartao::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--faceta);
}

.cartao::before {
  inset: 0;
  background: rgb(212 175 55 / 0.22);
  filter: drop-shadow(0 12px 26px rgb(0 0 0 / 0.45));
}

.cartao::after {
  inset: 1.5px;
  background:
    linear-gradient(180deg, rgb(212 175 55 / 0.08), rgb(212 175 55 / 0) 55%),
    var(--superficie);
}

.cartao--estreito { width: min(24rem, 100%); margin: 8vh auto 0; }

h1, h2 { margin: 0 0 0.4rem; letter-spacing: 0.04em; color: var(--ouro); }
h1 { font-size: 1.2rem; }
h2 { font-size: 1rem; }
.nota { margin: 0 0 1rem; font-size: 0.85rem; opacity: 0.62; }
.vazio { opacity: 0.55; padding: 1rem 0; }

/* -------------------------------------------------------------- forms --- */
label { display: block; margin: 0.7rem 0; font-size: 0.82rem; opacity: 0.8; }

input[type="text"], input[type="password"], input:not([type]), select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.28);
  color: var(--creme);
  font: inherit;
}

input:focus, select:focus { outline: 2px solid var(--ouro-fraco); }

.linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.8rem;
}
.linha input, .linha select { width: auto; flex: 1 1 12rem; margin-top: 0; }

.caixa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  white-space: nowrap;
}
.caixa input { width: auto; margin: 0; }

/* Botao lapidado, como o do site. */
.botao {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0.5rem 1.3rem;
  border: 0;
  background: none;
  color: #120d0a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--ritmo);
}

.botao::before, .botao::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%,
                     calc(100% - 9px) 100%, 9px 100%, 0 50%);
}
.botao::before { inset: 0; background: #a9852a; }
.botao::after {
  inset: 1.5px;
  background: linear-gradient(180deg, var(--tabua), var(--ouro) 45%,
                              var(--ouro-fraco));
}
.botao:hover { transform: translateY(-1px); }

.botao--fraco { color: var(--creme); }
.botao--fraco::before { background: rgb(232 222 200 / 0.3); }
.botao--fraco::after { background: rgb(28 20 16 / 0.9); }

/* --------------------------------------------------------------- fila --- */
.fila { display: grid; gap: 0.7rem; }

.pessoa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: rgb(0 0 0 / 0.22);
}

.pessoa-nome { font-weight: 700; }
.pessoa-estado { font-size: 0.78rem; opacity: 0.55; margin-right: auto; }

/* A republica em que a pessoa ja esta, com o papel em seguida. */
.pessoa-estado i {
  font-style: normal;
  opacity: 0.7;
  font-size: 0.72rem;
  margin-left: 0.25rem;
}
.so-camarada { opacity: 0.5; }

/* Online e uma bolinha, e nao a palavra: ela repete em toda linha da lista e
   como texto vira ruido. */
.ponto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}
.ponto--vivo { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.ponto--morto { background: rgb(232 222 200 / 0.22); }

/* Selo ao lado do titulo: diz se a tela ainda esta recebendo atualizacao.
   Sem ele, uma conexao caida fica igual a "nao mudou nada" -- e essas duas
   coisas nao podem parecer a mesma. */
.selo {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 0.4rem;
}
.selo--vivo {
  background: var(--ok);
  box-shadow: 0 0 0 0 rgb(98 190 145 / 0.5);
  animation: pulsa 2.4s ease-out infinite;
}
.selo--frio { background: var(--erro); animation: none; }

@keyframes pulsa {
  70% { box-shadow: 0 0 0 7px rgb(98 190 145 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(98 190 145 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .selo--vivo { animation: none; }
}
.pessoa-acoes { display: flex; gap: 0.4rem; align-items: center; }
.pessoa-acoes select { width: auto; margin-top: 0; }

/* ------------------------------------------------------------- tabela --- */
.tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela th {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--linha);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.tabela td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--linha); }
.tabela i { color: var(--ouro-fraco); font-style: normal; font-size: 0.75rem; }
.acoes { display: flex; gap: 0.4rem; justify-content: flex-end; }
.embutido { display: inline; }

.registro { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; opacity: 0.7; }
.registro i { opacity: 0.6; }

/* -------------------------------------------------------------- faixas --- */
.faixa {
  margin: 0;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid currentColor;
  font-size: 0.9rem;
}
.faixa--erro { color: var(--erro); background: rgb(217 119 106 / 0.1); }
.faixa--ok { color: var(--ok); background: rgb(98 190 145 / 0.1); }

@media (max-width: 640px) {
  .pessoa-estado { margin-right: 0; width: 100%; }
  .acoes { justify-content: flex-start; }
}