:root {
  --tinta: #14233b;      /* azul-tinta profundo */
  --tinta-2: #1f3a5f;
  --papel: #f6f1e7;      /* tom papel de bilhete */
  --papel-2: #ece4d3;
  --traco: #c8bca3;      /* picote / hairline */
  --acento: #e8623d;     /* carimbo laranja, usado com parcimonia */
  --verde: #1f8a4c;
  --vermelho: #c0271f;
  --texto: #14233b;
  --suave: #5b6b80;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--texto);
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--papel) 55%, var(--papel-2) 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 28px 20px 64px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
h1 { font-size: 28px; line-height: 1.1; margin: 6px 0 4px; letter-spacing: -.01em; }
.sub { color: var(--suave); margin: 0 0 22px; }

/* Cartao com picote — a assinatura visual */
.ticket {
  background: #fff;
  border: 1px solid var(--traco);
  border-radius: 16px;
  box-shadow: 0 18px 40px -28px rgba(20,35,59,.5);
  overflow: hidden;
}
.ticket .stub {
  background: var(--tinta);
  color: var(--papel);
  padding: 18px 22px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.ticket .stub .code { font-family: var(--mono); letter-spacing: .12em; opacity: .8; font-size: 12px; }
.ticket .perf {
  height: 0; border-top: 2px dashed var(--traco);
  position: relative; margin: 0;
}
.ticket .body { padding: 22px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.hint { font-weight: 400; color: var(--suave); }
input[type=text], input[type=password], input[type=tel] {
  width: 100%; padding: 13px 14px; font-size: 16px; font-family: var(--sans);
  border: 1px solid var(--traco); border-radius: 10px; background: var(--papel);
}
input:focus { outline: 3px solid rgba(232,98,61,.35); outline-offset: 1px; border-color: var(--acento); }

button, .btn {
  display: inline-block; width: 100%; margin-top: 20px;
  background: var(--acento); color: #fff; border: none; cursor: pointer;
  padding: 15px; font-size: 16px; font-weight: 700; border-radius: 11px;
  font-family: var(--sans); letter-spacing: .01em;
}
button:hover, .btn:hover { filter: brightness(.96); }
button.ghost { background: transparent; color: var(--tinta); border: 1px solid var(--traco); }

.erros { background: #fbe9e7; border: 1px solid #f3c2bc; color: var(--vermelho);
  padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.erros ul { margin: 6px 0 0; padding-left: 18px; }
.msg { background: #e7f3ec; border: 1px solid #b7ddc5; color: var(--verde);
  padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }

.copia { font-family: var(--mono); font-size: 13px; word-break: break-all;
  background: var(--papel); border: 1px dashed var(--traco); border-radius: 10px; padding: 14px; }
.valor { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }

/* ---- Portaria: estados grandes e glanceaveis ---- */
.portaria { min-height: 100vh; display: flex; flex-direction: column; }
.portaria .topo { padding: 14px 18px; background: var(--tinta); color: var(--papel);
  font-family: var(--mono); letter-spacing: .12em; font-size: 13px; text-transform: uppercase; }
#leitor { width: 100%; max-width: 480px; margin: 18px auto 0; aspect-ratio: 1/1;
  border-radius: 16px; overflow: hidden; background: #000; }
#leitor video { width: 100%; height: 100%; object-fit: cover; }
.manual { max-width: 480px; margin: 14px auto; padding: 0 18px; }

.estado { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; padding: 24px; z-index: 50; }
.estado.show { display: flex; }
.estado .icone { font-size: 84px; line-height: 1; }
.estado .titulo { font-size: 40px; font-weight: 900; margin: 10px 0 6px; letter-spacing: -.02em; }
.estado .det { font-size: 20px; opacity: .92; }
.estado.ok { background: var(--verde); color: #fff; }
.estado.bad { background: var(--vermelho); color: #fff; animation: pisca 1s steps(2) infinite; }
.estado .voltar { margin-top: 28px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); width: auto; padding: 12px 26px; }
@keyframes pisca { 50% { background: #8f1a14; } }
@media (prefers-reduced-motion: reduce) { .estado.bad { animation: none; } }

/* ---- Admin ---- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0 24px; }
.card { background: #fff; border: 1px solid var(--traco); border-radius: 12px; padding: 14px; text-align: center; }
.card .n { font-size: 28px; font-weight: 800; }
.card .l { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--traco); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--papel-2); }
th { background: var(--papel); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.tag.presente { background: #e7f3ec; color: var(--verde); }
.tag.pendente { background: var(--papel-2); color: var(--suave); }
.row { display: flex; gap: 10px; }
.row .col { flex: 1; }
.linkbar { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; }
.linkbar a { color: var(--tinta); }
a.plain { color: var(--acento); font-weight: 600; text-decoration: none; }
.maxwide { max-width: 920px; }
fieldset { border: 1px solid var(--traco); border-radius: 12px; padding: 16px; margin: 0 0 22px; }
legend { font-weight: 700; padding: 0 8px; }
.foot { color: var(--suave); font-size: 13px; margin-top: 28px; }

/* ===== Branding / personalizacao (v2) ===== */
.brandlogo {
  display: block;
  margin: 6px auto 20px;
  width: clamp(220px, 64vw, 420px); /* cresce/encolhe com a tela, dentro de limites */
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .55);
}
/* Cabecalho estilo capa: logo + titulo centralizados */
.capa { text-align: center; margin-bottom: 24px; }
.capa .sub { max-width: 34ch; margin-left: auto; margin-right: auto; }
.rotulo { font-size: 13px; font-weight: 600; margin: 4px 0 10px; }
.qrbox { display: flex; justify-content: center; margin: 0 0 18px; }
.qrbox img { background: #fff; padding: 10px; border: 1px solid var(--traco); border-radius: 12px; max-width: 100%; height: auto; }

.cores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cor label { margin-top: 0; }
.corwrap { display: flex; gap: 8px; align-items: center; }
.corwrap input[type=color] { width: 46px; height: 46px; min-width: 46px; padding: 2px; border: 1px solid var(--traco); border-radius: 10px; background: #fff; cursor: pointer; }
.corwrap input[type=text] { font-family: var(--mono); text-transform: lowercase; }
.logoatual { margin: 6px 0; }
.logoatual img { background: #fff; border: 1px solid var(--traco); border-radius: 8px; padding: 6px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 8px 0; }
.check input { width: auto; }
input[type=file] { width: 100%; font-size: 14px; padding: 10px; border: 1px dashed var(--traco); border-radius: 10px; background: var(--papel); }
select { width: 100%; }

/* Tabela rolavel no celular */
.tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.tablewrap table { min-width: 640px; }

/* ===== Responsivo ===== */
@media (max-width: 620px) {
  .wrap { padding: 20px 16px 56px; }
  h1 { font-size: 24px; }
  .cards { grid-template-columns: 1fr; }
  .cores { grid-template-columns: 1fr; }
  .row { flex-direction: column; gap: 0; }
  .linkbar { gap: 8px; }
  .estado .titulo { font-size: 32px; }
  .estado .icone { font-size: 64px; }
}

/* Conexao WhatsApp */
.statusbox { padding: 14px; border: 1px solid var(--traco); border-radius: 10px; background: var(--papel); font-weight: 600; margin-bottom: 16px; }
.tag.aguardando { background: #fdf2d6; color: #9a6a00; }

/* Tela de boas-vindas */
.bvcheck { width: 84px; height: 84px; line-height: 84px; margin: 6px auto 4px; border-radius: 50%;
  background: var(--acento); color: #fff; font-size: 44px; font-weight: 800; }