/* Minha Vez: visual do protótipo "Ainda Bem, é a sua vez" (jun/2026), aprovado pelo Paulo em nov/2026.
   Tema claro, azul do protótipo #4A90C2 nos elementos grandes; #3678AA onde há texto branco pequeno (contraste 4.75:1).
   Nexa nos títulos (marca). A TV usa o escopo .tema-escuro porque fica num salão escuro. */
@font-face { font-family: 'Nexa'; src: url('assets/NexaLight.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('assets/NexaBold.otf') format('opentype'); font-weight: 700; font-display: swap; }
:root {
  /* Superfícies (claras, 4 níveis) */
  --bg: #f4f8fb;
  --s1: #ffffff;
  --s2: #eef3f7;
  --s3: #e3e8ec;
  --line: #e3e8ec;
  /* Texto */
  --tx: #1a1d21;
  --tx2: #5f6873;
  --tx3: #6b7280;
  /* Azul do protótipo */
  --blue: #4a90c2;        /* elementos grandes: posição, barra, bordas, cartão da vez */
  --acc: #3678aa;         /* botões e links (texto branco legível) */
  --acc-hover: #2e6b96;
  --acc-ink: #ffffff;
  --acc-soft: #eaf3fa;    /* fundo de etiquetas e seleção */
  --acc-text: #2e6b96;    /* texto azul sobre fundo claro */
  /* Semânticas */
  --ok: #2b7a4b;
  --ok-soft: #e6f4ec;
  --warn: #b25e1c;
  --warn-soft: #fbefe4;
  --bad: #c2412f;
  /* Tipografia */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --brand: 'Nexa', -apple-system, sans-serif;
  --t-xs: 13px; --t-sm: 15px; --t-md: 17px; --t-lg: 22px; --t-xl: 32px; --t-2xl: 48px; --t-3xl: 72px;
  /* Espaço (base 4) */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 64px;
  /* Raios: campo 10, cartão 14, destaque 18, pílula */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;
  /* Elevação: só o que flutua (menu, aviso) */
  --shadow: 0 12px 32px rgba(14, 23, 38, .16);
  --ease: cubic-bezier(.2,.7,.2,1);
}
/* TV do salão */
.tema-escuro {
  --bg: #0e1726; --s1: #172234; --s2: #1e2b40; --s3: #26344a; --line: #2b3a52;
  --tx: #f4f8fb; --tx2: #b7c2d0; --tx3: #94a3b5;
  --acc: #4a90c2; --acc-ink: #ffffff; --acc-text: #8cc0e6;
  --warn: #e89a55;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--font); font-size: var(--t-md); line-height: 1.45; -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; }
body.tema-escuro { background: var(--bg); color: var(--tx); }
h1, h2, h3, p { margin: 0; }
h1, h2, .brand-name, .f-pos, .f-call .vez, .tv-call .n, .tv-call .w b, .est-now .name, .top .ev, .f-next h2 { font-family: var(--brand); }
h1 { font-size: var(--t-xl); font-weight: 700; line-height: 1.15; }
h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--t-md); font-weight: 700; }
.muted { color: var(--tx2); }
.dim { color: var(--tx3); font-size: var(--t-sm); }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--acc); }
svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; }

/* ---------- Marca ---------- */
.brandbar { display: flex; align-items: center; gap: var(--sp3); margin-bottom: var(--sp6); }
.brandbar img { width: 40px; height: auto; }
.brand-name { font-size: var(--t-lg); font-weight: 700; line-height: 1.1; }
.brand-slogan { font-family: var(--brand); font-weight: 300; font-size: var(--t-sm); color: var(--tx2); }
/* Cabeçalho do protótipo: logo completo + nome do produto */
.f-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp2); padding: var(--sp4) 0 var(--sp4); margin: 0 calc(-1 * var(--sp4)) var(--sp5); border-bottom: 1px solid var(--line); }
.f-head img { width: 132px; height: auto; }
.f-head .produto { font-family: var(--brand); font-weight: 700; font-size: var(--t-sm); color: var(--acc-text); letter-spacing: .08em; }

/* ---------- Controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp2);
  min-height: 44px; padding: 0 var(--sp4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--s1); color: var(--tx);
  font: 600 var(--t-sm)/1 var(--font); cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--s2); }
.btn:active { transform: scale(.98); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .opt:focus-within, .cat:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.btn.is-loading { opacity: .7; cursor: progress; }
.btn-primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn-primary:hover { background: var(--acc-hover); border-color: var(--acc-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--tx2); }
.btn-ghost:hover { background: var(--s2); color: var(--tx); }
.btn-danger { color: var(--bad); }
.btn-lg { min-height: 56px; font-size: var(--t-md); padding: 0 var(--sp5); border-radius: var(--r-lg); }
.btn-sm { min-height: 36px; padding: 0 var(--sp3); font-size: var(--t-xs); }
.btn-icon { width: 40px; min-height: 40px; padding: 0; }
.btn-block { width: 100%; }

label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--tx2); margin-bottom: var(--sp2); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: var(--sp3) var(--sp4);
  background: var(--s1); color: var(--tx); border: 1px solid var(--line); border-radius: var(--r-md);
  font: 500 var(--t-md) var(--font);
}
input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
textarea { min-height: 160px; font-size: var(--t-sm); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tx3); }
.field { margin-bottom: var(--sp4); }
.row { display: flex; gap: var(--sp3); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: var(--sp4); }
.rel { position: relative; }

.badge { display: inline-flex; align-items: center; gap: var(--sp1); padding: 2px var(--sp2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; background: var(--s2); color: var(--tx2); white-space: nowrap; }
.badge-acc { background: var(--acc-soft); color: var(--acc-text); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.tag-tipo { font-size: var(--t-xs); font-weight: 700; padding: 2px var(--sp2); border-radius: var(--r-pill); background: var(--s2); color: var(--tx2); }
.tag-tipo.fam { background: var(--acc-soft); color: var(--acc-text); }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: var(--sp5); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: #1a1d21; color: #ffffff; padding: var(--sp3) var(--sp4); border-radius: var(--r-md); box-shadow: var(--shadow);
  font-size: var(--t-sm); font-weight: 600; max-width: calc(100vw - 32px); transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 70; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { background: #8f2d21; }

/* ---------- Telas simples (login, admin, formando) ---------- */
.narrow { max-width: 480px; margin: 0 auto; padding: var(--sp6) var(--sp4) var(--sp8); }
.panel { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp5); }

/* ---------- Formando ---------- */
.f-page { max-width: 480px; margin: 0 auto; padding: 0 var(--sp4) var(--sp8); }
.f-chip { display: inline-flex; align-items: center; gap: var(--sp2); background: var(--acc-soft); color: var(--acc-text); font-size: var(--t-xs); font-weight: 700; padding: var(--sp2) var(--sp3); border-radius: var(--r-pill); }
.f-chip svg.lucide { width: 16px; height: 16px; }
.f-sub { color: var(--tx2); font-size: var(--t-sm); margin-top: var(--sp5); }
.f-pos { font-size: 64px; font-weight: 700; color: var(--blue); line-height: 1; margin-top: var(--sp1); }
.f-eta { font-size: var(--t-sm); margin-top: var(--sp2); display: flex; align-items: center; gap: var(--sp2); }
.f-eta svg.lucide { color: var(--tx3); width: 16px; height: 16px; }
.f-bar { height: 8px; background: var(--s3); border-radius: var(--r-pill); margin: var(--sp5) 0 var(--sp2); overflow: hidden; }
.f-bar > div { height: 100%; background: var(--blue); border-radius: var(--r-pill); transition: width .4s var(--ease); }
.f-card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp4); margin-top: var(--sp5); display: flex; gap: var(--sp3); align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; }
.f-card > svg.lucide { color: var(--blue); width: 22px; height: 22px; margin-top: 1px; }
.f-card.alerta { background: var(--warn-soft); border-color: transparent; }
.f-card.alerta > svg.lucide { color: var(--warn); }
/* "Você é o próximo" */
.f-next { text-align: center; padding: var(--sp6) 0 var(--sp2); }
.f-next > svg.lucide { width: 46px; height: 46px; color: var(--blue); }
.f-next h2 { font-size: 26px; margin: var(--sp3) 0 var(--sp2); }
.f-next .f-pos { font-size: 44px; margin-top: var(--sp4); }
.f-confirm { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp4); margin-top: var(--sp5); }
.f-confirm .row { margin-top: var(--sp3); }
/* Escolha do tipo: cartões com ícone, como no protótipo */
.f-sec { margin-top: var(--sp6); }
.f-sec h3 { font-size: var(--t-sm); font-weight: 600; color: var(--tx2); margin-bottom: var(--sp2); }
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp3); }
.cat { display: flex; flex-direction: column; align-items: center; gap: var(--sp1); padding: var(--sp4) var(--sp3); border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--s1); color: var(--tx); font: 600 var(--t-sm) var(--font); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.cat svg.lucide { width: 24px; height: 24px; color: var(--tx3); }
.cat:hover:not([disabled]) { background: var(--s2); }
.cat[aria-pressed="true"] { border-color: var(--blue); background: var(--acc-soft); color: var(--acc-text); }
.cat[aria-pressed="true"] svg.lucide { color: var(--acc-text); }
.cat[disabled] { opacity: .6; cursor: not-allowed; }
.cat small { font-size: var(--t-xs); font-weight: 600; color: var(--tx3); }
.opts { display: grid; gap: var(--sp2); margin-top: var(--sp2); }
.opt { display: flex; align-items: center; gap: var(--sp3); padding: var(--sp3) var(--sp4); background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.opt:hover { background: var(--s2); }
.opt input { width: 20px; min-height: 20px; height: 20px; accent-color: var(--acc); margin: 0; }
.opt.sel { border-color: var(--blue); background: var(--acc-soft); }
.opt.off { opacity: .6; cursor: not-allowed; }
.opt .eta { margin-left: auto; font-weight: 700; color: var(--tx2); white-space: nowrap; }
.opt .tag { font-size: var(--t-xs); font-weight: 700; color: var(--warn); }
.f-tools { display: grid; gap: var(--sp2); margin-top: var(--sp6); }
.f-help { font-size: var(--t-xs); color: var(--tx3); margin-top: var(--sp3); line-height: 1.5; }

/* O momento: cartão "é a SUA VEZ", como no protótipo */
/* Fundo no azul do protótipo; todo texto branco aqui é grande e em negrito (≥19px bold, contraste 3.47:1 vale como texto grande) */
.f-call { background: var(--blue); border-radius: var(--r-xl); padding: var(--sp6) var(--sp5); text-align: center; color: #ffffff; margin-top: var(--sp2); }
.f-call .oi { font-size: 20px; font-weight: 700; }
.f-call .vez { font-size: 40px; font-weight: 700; line-height: 1.05; margin: var(--sp1) 0 var(--sp4); }
.f-call > svg.lucide { width: 32px; height: 32px; }
.f-call .quem { font-size: 20px; font-weight: 700; margin-top: var(--sp3); }
.f-call .onde { background: rgba(14, 23, 38, .2); border-radius: var(--r-md); padding: var(--sp3); margin-top: var(--sp4); font-size: 20px; font-weight: 700; }
.f-clock { text-align: center; font-size: var(--t-sm); color: var(--tx2); margin-top: var(--sp4); }
@media (prefers-reduced-motion: no-preference) {
  .f-call { animation: chega .5s var(--ease); }
  @keyframes chega { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- Equipe: layout ---------- */
.top { position: sticky; top: 0; z-index: 10; background: var(--s1); border-bottom: 1px solid var(--line); padding: var(--sp3) var(--sp4); display: flex; align-items: center; gap: var(--sp4); flex-wrap: wrap; }
.top .ev { font-weight: 700; font-size: var(--t-md); }
.tabs { display: flex; gap: var(--sp1); }
.tab { min-height: 40px; padding: 0 var(--sp3); border-radius: var(--r-sm); background: transparent; border: 0; color: var(--tx2); font: 600 var(--t-sm) var(--font); cursor: pointer; }
.tab:hover { color: var(--tx); background: var(--s2); }
.tab[aria-selected="true"] { color: var(--acc-text); background: var(--acc-soft); }
.stats { display: flex; gap: var(--sp4); margin-left: auto; font-size: var(--t-sm); color: var(--tx2); flex-wrap: wrap; }
.stats b { color: var(--tx); font-variant-numeric: tabular-nums; }
.pause-bar { background: var(--warn); color: #ffffff; padding: var(--sp2) var(--sp4); font-weight: 700; font-size: var(--t-sm); }

.rec-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: var(--sp4); padding: var(--sp4); align-items: start; }
@media (max-width: 860px) { .rec-grid { grid-template-columns: 1fr; } }

.results { margin-top: var(--sp3); display: grid; gap: var(--sp1); }
.res { display: flex; align-items: center; gap: var(--sp3); width: 100%; text-align: left; padding: var(--sp3); background: transparent; border: 1px solid transparent; border-radius: var(--r-md); color: var(--tx); font: inherit; cursor: pointer; }
.res:hover { background: var(--s2); }
.res.sel { border-color: var(--blue); background: var(--acc-soft); }
.res .n { font-weight: 700; }
.checkin-card { margin-top: var(--sp4); padding-top: var(--sp4); border-top: 1px solid var(--line); }
.qr { background: #ffffff; border: 1px solid var(--line); padding: var(--sp3); border-radius: var(--r-md); width: max-content; margin-top: var(--sp3); }
.qr-big { padding: var(--sp4); }
.qr img, .qr canvas { display: block; }

/* Estúdios em faixa */
.studios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp2); margin-bottom: var(--sp4); }
.studio { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp3); min-height: 88px; }
.studio .who { font-weight: 700; margin-top: var(--sp1); }
.studio.busy { border-color: var(--blue); }
.studio.off { opacity: .6; }
.studio-main { display: grid; gap: var(--sp2); margin-top: var(--sp3); }
.studio-acts { margin-top: var(--sp2); gap: var(--sp1); }

/* Lista da fila */
.qlist { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: visible; }
.qhead { display: flex; align-items: center; justify-content: space-between; padding: var(--sp4); }
.qrow { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--sp3); align-items: center; padding: var(--sp3) var(--sp4); border-top: 1px solid var(--line); }
.qrow .pos { font-weight: 700; color: var(--tx3); font-variant-numeric: tabular-nums; }
.qrow .n { font-weight: 700; }
.qrow .meta { font-size: var(--t-xs); color: var(--tx2); display: flex; gap: var(--sp2); flex-wrap: wrap; margin-top: 2px; }
.qrow .acts { display: flex; gap: var(--sp1); align-items: center; }
.empty { padding: var(--sp6) var(--sp4); color: var(--tx2); text-align: center; }

/* Menu de ações */
.pop { position: absolute; right: 0; top: 44px; z-index: 20; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--sp1); min-width: 220px; max-height: 70vh; overflow-y: auto; }
.pop button { display: block; width: 100%; text-align: left; padding: var(--sp2) var(--sp3); background: transparent; border: 0; color: var(--tx); font: 600 var(--t-sm) var(--font); border-radius: var(--r-sm); cursor: pointer; }
.pop button:hover { background: var(--s2); }
.pop button[disabled] { opacity: .5; cursor: not-allowed; }
.pop a { display: block; padding: var(--sp2) var(--sp3); color: var(--tx); font: 600 var(--t-sm) var(--font); border-radius: var(--r-sm); text-decoration: none; }
.pop a:hover { background: var(--s2); }
.pop .pop-h { font-size: var(--t-xs); color: var(--tx3); font-weight: 700; padding: var(--sp2) var(--sp3) var(--sp1); }
.pop .pop-danger { color: var(--bad); }

/* QR em tela cheia */
.qr-full { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp4); padding: var(--sp5); text-align: center; }
.qr-full img.logo { width: 150px; height: auto; }
.qf-nome { font-family: var(--brand); font-weight: 700; font-size: var(--t-xl); line-height: 1.15; }
.qf-code { background: #ffffff; border: 1px solid var(--line); padding: var(--sp5); border-radius: var(--r-xl); }
.qf-code img, .qf-code canvas { display: block; }
.qf-dica { color: var(--tx2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp2); }
.chip { display: inline-flex; align-items: center; gap: var(--sp1); min-height: 36px; padding: 0 var(--sp3); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--s1); color: var(--tx); font: 600 var(--t-sm) var(--font); cursor: pointer; transition: background .15s var(--ease); }
.chip:hover { background: var(--s2); }
.chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------- Estúdio (opcional) ---------- */
.est { max-width: 560px; margin: 0 auto; padding: var(--sp5) var(--sp4) var(--sp8); }
.est-now { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp5); margin: var(--sp4) 0; }
.est-now .name { font-size: var(--t-xl); font-weight: 700; line-height: 1.1; margin: var(--sp2) 0; }
.est-now .timer { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.est-now .timer.late { color: var(--warn); }
.est-actions { display: grid; gap: var(--sp2); }
.est-next { margin-top: var(--sp5); }
.est-next li { padding: var(--sp2) 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--sp3); }
.est-next ol { list-style: none; padding: 0; margin: var(--sp2) 0 0; }

/* ---------- TV (escura) ---------- */
.tv { min-height: 100dvh; padding: var(--sp7) var(--sp7) var(--sp6); display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp7); }
.tv h2 { font-size: var(--t-lg); color: var(--tx2); font-weight: 700; margin-bottom: var(--sp4); }
.tv-calls { display: grid; gap: var(--sp4); align-content: start; }
.tv-call { background: var(--s1); border-radius: var(--r-xl); padding: var(--sp5) var(--sp6); display: flex; justify-content: space-between; align-items: center; gap: var(--sp5); }
.tv-call .n { font-size: var(--t-2xl); font-weight: 700; line-height: 1.05; }
.tv-call .w { text-align: right; font-size: var(--t-lg); font-weight: 700; color: var(--tx2); }
.tv-call .w b { display: block; color: var(--acc-text); font-size: var(--t-xl); }
.tv-call.fresh { background: var(--acc); color: #ffffff; }
.tv-call.fresh .w, .tv-call.fresh .w b { color: #ffffff; }
.tv-next ol { list-style: none; margin: 0; padding: 0; }
.tv-next li { font-size: var(--t-xl); font-weight: 700; padding: var(--sp3) 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--sp4); }
.tv-next li span { color: var(--tx3); font-size: var(--t-lg); }
.tv-foot { grid-column: 1 / -1; color: var(--tx3); font-size: var(--t-lg); align-self: end; }
.tv-foot b { font-family: var(--brand); color: var(--tx); }
.tv-logo { width: 28px; height: auto; vertical-align: middle; margin-right: var(--sp2); }
.tv-pause { grid-column: 1 / -1; background: var(--warn); color: #1a1006; border-radius: var(--r-xl); padding: var(--sp5) var(--sp6); font-size: var(--t-xl); font-weight: 700; }
@media (max-width: 900px) { .tv { grid-template-columns: 1fr; padding: var(--sp5) var(--sp4); gap: var(--sp5); } .tv-call .n { font-size: var(--t-xl); } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Pré-chamada: "Você será o próximo, se dirija ao Estúdio X" */
.f-vai .f-estudio { font-family: var(--brand); font-size: var(--t-2xl); font-weight: 700; color: var(--blue); line-height: 1.05; margin: var(--sp1) 0 var(--sp2); }
.studio-prox { display: flex; align-items: center; gap: var(--sp2); margin-top: var(--sp2); padding: var(--sp2) var(--sp3); background: var(--acc-soft); color: var(--acc-text); border-radius: var(--r-md); font-size: var(--t-xs); font-weight: 600; }
.studio-prox svg.lucide { width: 16px; height: 16px; }
.tag-feito { font-size: var(--t-xs); font-weight: 700; color: var(--ok); }