/* A central: lista, cria e entrega o endereço de cada evento.
   Depende de core/ui.css. */

body { display: flex; flex-direction: column; overflow-y: auto; }

/* ---- topo ---------------------------------------------------------------- */

.topo {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 28px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 20;
}
.marca-txt {
  font: 700 17px/1 var(--face-c);
  letter-spacing: .16em; text-transform: uppercase;
}
.topo .sub { font-size: 12.5px; color: var(--fraco); }
.topo .pilula { margin-left: auto; }

.corpo { flex: 1 1 auto; padding: 22px 28px 48px; max-width: 1400px; width: 100%; margin: 0 auto; }
.corpo > .aviso { margin-bottom: 18px; }

.bloco { display: flex; flex-direction: column; gap: 16px; }
.cabeca { display: flex; align-items: center; gap: 12px; }
.cabeca .conta { font-size: 12px; color: var(--fraco); }
.cabeca .principal { margin-left: auto; }

/* ---- formulário de criação ---------------------------------------------- */

.novo {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 18px 20px;
}
.grade-novo { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 12px; }

.cores-novo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets button {
  width: 26px; height: 26px; min-height: 0; padding: 0;
  border-radius: 7px; border: 1px solid var(--linha-2);
}
.presets button[aria-pressed="true"] { outline: 2px solid var(--tx); outline-offset: 2px; }
.cor-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mut); }

/* A amostra mostra o par escolhido no visual em que ele vai ao ar: uma
   pastilha translúcida com a faixa da cor primária. Escolher cor olhando dois
   quadradinhos é o jeito de descobrir tarde que o par é ilegível. */
.amostra {
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: 4px;
  background: var(--evento-fundo, rgba(11, 15, 21, .93));
  border-left: 4px solid var(--evento-primaria);
  color: #fff;
  font: 700 15px/1 var(--face-num); font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ---- a grade de eventos -------------------------------------------------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.cartao {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  /* A cor do evento entra como um filete no topo: é o que faz o operador
     reconhecer o cartão certo numa grade de oito. */
  border-top: 3px solid var(--cor, var(--evento-primaria));
}
.cartao.no-ar { border-color: rgba(239, 68, 68, .45); }

.ct-topo { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; }
.ct-nome { font: 600 16px/1.25 var(--face); flex: 1 1 auto; min-width: 0; }
.ct-quando { display: block; margin-top: 3px; font-size: 12px; color: var(--fraco); font-weight: 400; }

/* ---- a prévia: a mesma leitura que a saída faz --------------------------- */

.previa {
  margin: 0 16px 12px;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  background: #0A0D12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0h8v8H0zM8 8h8v8H8z' fill='%23121821'/%3E%3C/svg%3E");
  border: 1px solid var(--linha);
  border-radius: 6px;
  position: relative; overflow: hidden;
}
.pv-blocos { position: absolute; inset: 8px; }
.pv-zona { position: absolute; display: flex; gap: 4px; }
.pv-zona[data-pos="tl"] { top: 0; left: 0; }
.pv-zona[data-pos="tc"] { top: 0; left: 0; right: 0; justify-content: center; }
.pv-zona[data-pos="tr"] { top: 0; right: 0; }
.pv-zona[data-pos="bl"] { bottom: 0; left: 0; }
.pv-zona[data-pos="bc"] { bottom: 0; left: 0; right: 0; justify-content: center; }
.pv-zona[data-pos="br"] { bottom: 0; right: 0; }

.pv-crono {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 3px;
  background: rgba(11, 15, 21, .93);
  border-left: 3px solid var(--cor, var(--evento-primaria));
  font: 600 11px/1 var(--face-c); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
}
.pv-crono b {
  font: 700 12px/1 var(--face-num); font-variant-numeric: tabular-nums;
  color: #fff; letter-spacing: 0;
}
.pv-crono.run b { color: var(--cor, var(--evento-primaria)); }
.pv-pilha { display: flex; flex-direction: column; gap: 3px; }

.pv-tela {
  position: absolute; left: 8px; bottom: 8px;
  font: 600 10px/1 var(--face); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fraco);
}
.pv-fora {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--face); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fraco);
  background: rgba(10, 13, 18, .82);
}

/* ---- endereço e ações ---------------------------------------------------- */

.ct-end { display: flex; gap: 6px; padding: 0 16px 12px; }
.ct-end input {
  font: 12px/1.2 var(--face-num);
  min-height: 32px; padding: 7px 9px;
  color: var(--mut);
}
.ct-end button { min-height: 32px; padding: 6px 10px; font-size: 12.5px; flex: none; }

.ct-acoes {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--linha-2);
  background: var(--bg-2);
}
.ct-acoes .abrir { margin-right: auto; }

/* ---- janela do QR -------------------------------------------------------- */

.modal {
  position: fixed; inset: 0;
  /* Acima do `z-index: 1000` da camada nativa: se um dia um cartão desenhar
     com ela, a janela do QR não pode ficar por baixo. */
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 12, .72);
  padding: 20px;
}
.folha {
  width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 14px; padding: 20px;
}
.folha .cabeca .discreto { margin-left: auto; }
.ips { display: flex; gap: 6px; flex-wrap: wrap; }
.ips button.ligado { font-weight: 600; }
.qr { display: flex; justify-content: center; padding: 8px; }
.qr svg { background: #fff; border-radius: 8px; padding: 10px; width: 220px; height: 220px; }
.enderecos { display: flex; flex-direction: column; gap: 8px; }
.end-item { display: flex; flex-direction: column; gap: 4px; }
.end-item .rot { font-size: 10px; }
.end-item .linha input { font: 12px/1.2 var(--face-num); min-height: 32px; }
.end-item .linha button { min-height: 32px; padding: 6px 10px; font-size: 12.5px; flex: none; }

@media (max-width: 720px) {
  .corpo { padding: 16px; }
  .grade-novo { grid-template-columns: 1fr; }
  .grade { grid-template-columns: 1fr; }
}