/* =============================================================
   SimuLADI — estilos
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600;1,700&display=swap');

:root{
  /* ---------- PALETA DO FUNDO ----------
     Para trocar o clima do site, mude só estas 5 linhas.
     Alternativa "madeira quente" (mais parecida com o mockup original):
       --bg:#14100c; --bg-deep:#070503;
       --glow-topo:rgba(126,92,52,.55); --glow-base:rgba(224,185,106,.20); --glow-lado:rgba(126,92,52,.24);
     Alternativa "verde diplomático":
       --bg:#0b1614; --bg-deep:#050b0a;
       --glow-topo:rgba(42,120,104,.45); --glow-base:rgba(219,171,92,.18); --glow-lado:rgba(42,120,104,.22);
     ------------------------------------- */
  --bg:#0c1119;
  --bg-deep:#05080d;
  --glow-topo:rgba(48,102,180,.72);
  --glow-base:rgba(152,182,222,.24);
  --glow-lado:rgba(40,84,150,.42);

  --paper:#ffffff;
  --ink:#1b1712;
  --ink-soft:#6d635a;
  --ink-faint:#a49a90;

  --tan:#8e9bab;          /* setinha dos campos */
  --realce:#e2e9f2;       /* realce claro sobre fundo escuro */
  --realce-2:#2b3f5c;     /* realce escuro sobre fundo claro */
  --foco:#6f9fd8;         /* anel de foco do teclado */
  --blue:#3b7cc4;
  --green:#5cb489;
  --red:#dd6a56;

  --hair:rgba(255,255,255,.16);
  --veil:rgba(255,255,255,.07);

  --r-pill:999px;
  --r-card:22px;
  --r-soft:14px;

  --sh-lift:0 10px 30px rgba(0,0,0,.35);
  --sh-pop:0 24px 60px rgba(0,0,0,.5);

  --ease:cubic-bezier(.22,.9,.26,1);
  /* min() em vez de clamp(): o mínimo fixo de 320px somado ao respiro lateral
     não cabia em celulares de 320px. Assim a coluna encolhe junto. */
  --col:min(460px, 100%);
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html,body{ height:100%; }

html{
  /* Cor que aparece quando o celular "estica" a rolagem além do fim da página.
     Sem isto, o iOS mostra o preto do fundo do documento como uma barra no topo
     ou embaixo. O tom fica entre o topo e a base do degradê, para não destoar. */
  background:#0a0e15;
  overscroll-behavior:none;   /* corta o efeito elástico que revela essa faixa */
}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:#fff;
  background:transparent;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* --- fundo em 3 camadas: foto (opcional) + brilhos + textura --- */

/* camada 1: cor base e, se existir, a foto assets/img/bg.jpg */
.bg{
  position:fixed; top:0; left:0; right:0;
  height:100vh; height:100lvh;   /* lvh = viewport maior, sem falha ao recolher a barra */
  z-index:-2; overflow:hidden;
  background-color:var(--bg);
  background-image:url('../img/bg.jpg');
  background-size:cover; background-position:center;
}

/* camada 2: brilhos suaves de luz, com deriva bem lenta */
.bg::before{
  content:''; position:absolute; inset:-20%;
  background-image:
    radial-gradient(58% 50% at 50% -2%,  var(--glow-topo) 0%, transparent 70%),
    radial-gradient(56% 48% at 10% 100%, var(--glow-base) 0%, transparent 68%),
    radial-gradient(52% 44% at 92% 78%,  var(--glow-lado) 0%, transparent 66%),
    linear-gradient(180deg, rgba(5,8,13,.10) 0%, rgba(5,8,13,0) 40%, rgba(5,8,13,.58) 100%);
  animation:deriva 44s ease-in-out infinite alternate;
}
@keyframes deriva{
  from{ transform:translate3d(-1.6%,-1.2%,0) scale(1.02); }
  to  { transform:translate3d( 1.6%, 1.2%,0) scale(1.06); }
}

/* camada 3: vinheta + granulado fino, para o degradê não "faixar" */
.bg::after{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(120% 85% at 50% 42%, transparent 42%, rgba(0,0,0,.52) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  background-size:cover,180px 180px;
  opacity:.98;
}

/* ============================ layout ============================ */

.wrap{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:max(22px,env(safe-area-inset-top)) 18px max(26px,env(safe-area-inset-bottom));
}
.col{ width:var(--col); display:flex; flex-direction:column; flex:1; }
.col--center{ justify-content:center; }
/* A seção assume exatamente a altura do conteúdo e NÃO encolhe (flex:none):
   sem isso o acordeão aberto era espremido e não expandia. A centralização
   vertical fica por conta dos dois .spacer que envolvem tudo na coluna. */
.view{ display:flex; flex-direction:column; flex:none; }

/* em telas grandes, centraliza o bloco em vez de esticá-lo */
@media (min-width:760px) and (min-height:640px){
  .wrap{ justify-content:center; }
  .col{ flex:0 1 auto; }
  .spacer{ flex:0 0 auto; min-height:26px; }
}

/* ============================ marca ============================ */

.brand{
  display:flex; align-items:center; justify-content:center; gap:13px;
  margin:6px 0 30px;
}
.brand__mark{ width:68px; height:68px; flex:none; display:block; }
.brand__mark img,.brand__mark svg{ width:100%; height:100%; display:block; object-fit:contain; }
.brand__name{
  font-family:'Outfit',sans-serif; font-weight:600; font-size:40px;
  line-height:1; letter-spacing:-.022em; margin:0;
}
.brand__name sup{ font-size:.42em; font-weight:400; top:-.9em; }
.brand__sub{
  font-family:'Outfit',sans-serif; font-weight:200; font-size:23px;
  line-height:1.1; margin:2px 0 0; color:rgba(255,255,255,.94);
}
.brand--sm{ margin-bottom:20px; gap:12px; }
.brand--sm .brand__mark{ width:50px; height:50px; }
.brand--sm .brand__name{ font-size:30px; }
.brand--sm .brand__sub{ font-size:17px; }

/* ============================ texto ============================ */

.lede{
  font-size:16.5px; line-height:1.55; text-align:center;
  color:rgba(255,255,255,.93); margin:0 0 26px; text-wrap:balance;
}
.lede b,.lede strong{ font-weight:700; }

.h-hello{
  font-family:'Outfit',sans-serif; font-weight:400; font-size:27px;
  text-align:center; margin:0 0 18px; letter-spacing:-.01em; text-wrap:balance;
}
.h-hello b{ font-weight:600; }
.h-ask{
  font-family:'Outfit',sans-serif; font-weight:600;
  font-size:24px; text-align:center; margin:0 0 26px;
}
.h-cta{
  font-weight:700; font-size:19px; line-height:1.4;
  text-align:center; margin:0 0 18px;
}
.fineprint{
  font-size:12.5px; line-height:1.5; font-style:italic;
  text-align:center; color:rgba(255,255,255,.62);
  margin:12px 0 0; text-wrap:balance;
}
.spacer{ flex:1 1 0; min-height:0; }

/* ============================ campos ============================ */

.field{ margin-bottom:12px; }

.pill{
  width:100%; display:flex; align-items:center; gap:10px;
  min-height:56px; padding:0 20px;
  background:var(--paper); color:var(--ink);
  border:none; border-radius:var(--r-pill);
  font:inherit; font-size:16.5px; text-align:left;
  box-shadow:var(--sh-lift);
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.pill:active{ transform:scale(.985); }
.pill:focus-visible{ outline:3px solid var(--foco); outline-offset:3px; }

.pill--input{ cursor:text; }
.pill__ph{ color:var(--ink-faint); font-style:italic; }
.pill__grow{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill__caret{
  flex:none; width:0; height:0; margin-left:auto;
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-top:11px solid var(--tan);
  transition:transform .25s var(--ease);
}
.pill[aria-expanded="true"] .pill__caret{ transform:rotate(180deg); }

input.pill{ box-shadow:var(--sh-lift); }
input.pill::placeholder{ color:var(--ink-faint); font-style:italic; opacity:1; }
input.pill:focus{ outline:none; box-shadow:var(--sh-lift),0 0 0 3px rgba(111,159,216,.6); }

.inputwrap{ position:relative; }
.inputwrap .pill{ padding-right:58px; }

/* O navegador desenha ícones próprios DENTRO do campo de senha e eles caem
   exatamente em cima do nosso botão de mostrar senha:
     • caps-lock-indicator            -> a setinha que o Safari mostra com Caps Lock ligado
     • credentials/strong-password    -> a chave do gerenciador de senhas do iOS
     • ms-reveal / ms-clear           -> o "olho" e o "x" do Edge, que duplicariam o nosso
   As senhas das delegações são em maiúsculas (ABC-1234), então o aviso de Caps
   Lock apareceria o tempo todo sem informar nada de útil. */
/* Cada um em sua PRÓPRIA regra de propósito: numa lista separada por vírgula,
   um seletor que o navegador não reconhece invalida a regra inteira — e estes
   são todos pseudo-elementos de fabricante, cada navegador conhece só os seus. */
.inputwrap input::-webkit-caps-lock-indicator{ display:none !important; width:0; margin:0; }
.inputwrap input::-webkit-credentials-auto-fill-button{ display:none !important; width:0; margin:0; }
.inputwrap input::-webkit-strong-password-auto-fill-button{ display:none !important; width:0; margin:0; }
.inputwrap input::-ms-reveal{ display:none !important; }
.inputwrap input::-ms-clear{ display:none !important; }
.eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; display:grid; place-items:center;
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  border-radius:50%;
}
.eye:hover{ background:rgba(0,0,0,.05); }
.eye svg{ width:21px; height:21px; }

.flag{ font-size:20px; line-height:1; flex:none; }

/* ============================ botões ============================ */

.btn{
  width:100%; min-height:58px; padding:0 24px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:none; border-radius:var(--r-pill);
  font:inherit; font-size:18px; font-weight:700;
  cursor:pointer; box-shadow:var(--sh-lift);
  transition:transform .16s var(--ease), opacity .16s var(--ease), background .16s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:3px solid var(--foco); outline-offset:3px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.btn[disabled]:active{ transform:none; }

.btn--primary{ background:var(--paper); color:var(--ink); }
.btn--realce{ background:var(--realce); color:#14202f; }
.btn--ghost{
  background:transparent; color:#fff; box-shadow:none;
  border:1.5px solid var(--hair); font-weight:600; font-size:16px; min-height:50px;
}
.btn--ghost:hover{ background:var(--veil); }
.btn--danger{ background:rgba(221,106,86,.16); color:#ffb9ac; border:1.5px solid rgba(221,106,86,.5); box-shadow:none; font-size:16px; min-height:50px; }
.btn--danger:hover{ background:rgba(221,106,86,.26); }
.btn--sm{ min-height:42px; font-size:14.5px; padding:0 16px; width:auto; }

.linkbtn{
  display:block; width:100%; margin:14px 0 0;
  background:none; border:none; color:rgba(255,255,255,.9);
  font:inherit; font-size:15px; font-weight:500;
  text-decoration:underline; text-underline-offset:4px;
  cursor:pointer; padding:8px;
}
.linkbtn:hover{ color:#fff; }
.linkbtn--quiet{ color:rgba(255,255,255,.55); font-size:13.5px; text-decoration:none; }
.linkbtn--quiet:hover{ text-decoration:underline; }

.stack>*+*{ margin-top:10px; }
.acoes{ margin-top:22px; }

/* ============================ acordeão de opções ============================ */

.acc{ margin-bottom:12px; }
.acc__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--ease);
}
.acc.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__list{ padding:9px 0 2px; display:flex; flex-direction:column; gap:7px; }

.opt{
  width:calc(100% - 24px); margin-left:24px;
  min-height:44px; padding:9px 18px;
  display:flex; align-items:center; gap:10px;
  background:var(--paper); color:var(--ink);
  border:2px solid transparent; border-radius:var(--r-pill);
  font:inherit; font-size:15px; font-style:italic; text-align:left;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
  opacity:0; transform:translateY(-6px);
  animation:optIn .3s var(--ease) forwards;
}
.acc:not(.is-open) .opt{ animation:none; opacity:0; }
@keyframes optIn{ to{ opacity:1; transform:none; } }
.opt:active{ transform:scale(.985); }
.opt:focus-visible{ outline:3px solid var(--foco); outline-offset:2px; }
.opt[aria-pressed="true"]{
  border-color:var(--realce-2); background:#eef2f7; font-weight:600; font-style:normal;
}
.opt__tick{
  margin-left:auto; flex:none; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; background:var(--realce-2); color:#fff;
  font-size:12px; font-weight:800; opacity:0; transform:scale(.6);
  transition:.2s var(--ease);
}
.opt[aria-pressed="true"] .opt__tick{ opacity:1; transform:none; }

/* ============================ cartões / fila ============================ */

.card{
  background:var(--veil); border:1px solid var(--hair);
  border-radius:var(--r-card); padding:18px; backdrop-filter:blur(10px);
}
.card__title{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin:0 0 12px;
}

.turn{
  text-align:center; padding:30px 22px;
  border-radius:var(--r-card);
  border:1.5px solid rgba(226,233,242,.38);
  background:linear-gradient(180deg, rgba(226,233,242,.16), rgba(226,233,242,.04));
  animation:glow 2.6s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(226,233,242,.24); }
  50%    { box-shadow:0 0 0 16px rgba(226,233,242,0); }
}
.turn__kicker{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(226,233,242,.78); margin:0 0 8px; }
.turn__title{ font-family:'Outfit',sans-serif; font-weight:700; font-size:34px; line-height:1.1; margin:0 0 12px; }
.turn__what{ font-size:16px; line-height:1.45; color:rgba(255,255,255,.92); margin:0; }

.wait{ text-align:center; padding:26px 22px; }
.wait__pos{
  font-family:'Outfit',sans-serif; font-weight:600;
  font-size:76px; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0;
}
.wait__label{ font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.6); margin:2px 0 14px; font-weight:600; }
.wait__title{ font-family:'Outfit',sans-serif; font-weight:500; font-size:23px; margin:0 0 6px; }
.wait__what{ font-size:15px; color:rgba(255,255,255,.75); margin:0; }

.empty{ text-align:center; color:rgba(255,255,255,.5); font-size:14.5px; font-style:italic; padding:22px 10px; }

/* ============================ topbar ============================ */

.topbar{
  width:var(--col); display:flex; align-items:center; gap:10px;
  margin-bottom:14px; font-size:13px;
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:var(--r-pill);
  background:var(--veil); border:1px solid var(--hair);
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85);
}
.chip--erro{
  background:rgba(221,106,86,.18); border-color:rgba(221,106,86,.5); color:#ffc3b7;
}
.chip[hidden]{ display:none !important; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }
.dot--off{ background:var(--red); }
.topbar__end{ margin-left:auto; }
.banner[hidden]{ display:none !important; }

/* ============================ folha / modal ============================ */

.sheet{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(6,4,3,.66); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.sheet.is-open{ opacity:1; pointer-events:auto; }
.sheet__box{
  width:min(560px,100%);
  max-height:88dvh; display:flex; flex-direction:column;
  background:#121a26; border:1px solid var(--hair);
  border-radius:26px 26px 0 0;
  padding:10px 18px max(20px,env(safe-area-inset-bottom));
  box-shadow:var(--sh-pop);
  transform:translateY(14px); transition:transform .28s var(--ease);
}
.sheet.is-open .sheet__box{ transform:none; }
@media(min-width:620px){
  .sheet{ align-items:center; }
  .sheet__box{ border-radius:26px; }
}
.sheet__grab{ width:42px; height:4px; border-radius:99px; background:rgba(255,255,255,.24); margin:4px auto 12px; flex:none; }
.sheet__title{ font-family:'Outfit',sans-serif; font-weight:600; font-size:20px; margin:0 0 4px; text-align:center; }
.sheet__desc{ font-size:14.5px; color:rgba(255,255,255,.7); margin:0 0 16px; text-align:center; line-height:1.5; }
.sheet__list{ overflow-y:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:2px 4px 4px; flex:1; }
.sheet__actions{ display:flex; gap:10px; padding-top:6px; flex:none; }
.sheet__actions .btn{ flex:1; }

.search{
  width:100%; min-height:48px; padding:0 16px; margin-bottom:10px;
  background:rgba(255,255,255,.09); border:1px solid var(--hair);
  border-radius:var(--r-pill); color:#fff; font:inherit; font-size:16px;
}
.search::placeholder{ color:rgba(255,255,255,.45); }
.search:focus{ outline:none; border-color:var(--foco); background:rgba(255,255,255,.13); }

.pickitem{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:13px 14px; margin-bottom:5px;
  background:rgba(255,255,255,.05); border:1px solid transparent;
  border-radius:var(--r-soft); color:#fff; font:inherit; font-size:16px;
  text-align:left; cursor:pointer;
}
.pickitem:hover{ background:rgba(255,255,255,.1); }
.pickitem:focus-visible{ outline:2px solid var(--foco); outline-offset:1px; }
.pickitem[aria-selected="true"]{ border-color:rgba(226,233,242,.5); background:rgba(226,233,242,.13); }

.recap{
  display:flex; align-items:center; gap:12px;
  padding:16px; border-radius:var(--r-soft);
  background:rgba(226,233,242,.10); border:1px solid rgba(226,233,242,.28);
  margin-bottom:16px;
}
.recap__k{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(226,233,242,.8); font-weight:700; }
.recap__v{ font-size:16.5px; font-weight:600; line-height:1.35; margin-top:3px; }

/* ============================ avisos ============================ */

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px);
  z-index:80; max-width:min(440px,90vw);
  padding:13px 20px; border-radius:var(--r-pill);
  background:#16202f; border:1px solid var(--hair); box-shadow:var(--sh-pop);
  font-size:14.5px; font-weight:500; text-align:center;
  opacity:0; pointer-events:none; transition:.28s var(--ease);
}
.toast.is-open{ opacity:1; transform:translate(-50%,0); }
.toast--err{ border-color:rgba(221,106,86,.6); background:#2b1a1c; }

.banner{
  width:var(--col); margin:0 auto 14px;
  padding:11px 15px; border-radius:var(--r-soft);
  background:rgba(226,233,242,.10); border:1px solid rgba(226,233,242,.26);
  font-size:13px; line-height:1.5; color:#dbe4ef;
}
.banner--erro{
  background:rgba(221,106,86,.16); border-color:rgba(221,106,86,.45); color:#ffc3b7;
}
.banner b{ font-weight:700; }
.banner a{ color:#fff; }

.shake{ animation:shake .38s; }
@keyframes shake{ 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(5px)} 50%{transform:translateX(-7px)} }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============================ janela do QR code ============================ */

.qr{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,3vh,40px);
  background:rgba(5,8,13,.9); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.qr.is-open{ opacity:1; pointer-events:auto; }

.qr__caixa{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px,1.6vh,20px);
  max-width:min(92vw,760px); max-height:100%;
  padding:clamp(20px,3vh,34px) clamp(20px,4vw,40px);
  background:#121a26; border:1px solid var(--hair); border-radius:26px;
  box-shadow:var(--sh-pop);
  transform:scale(.97); transition:transform .22s var(--ease);
}
.qr.is-open .qr__caixa{ transform:none; }

.qr__fechar{
  position:absolute; top:10px; right:12px;
  width:40px; height:40px; border-radius:50%;
  background:var(--veil); border:1px solid var(--hair); color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
}
.qr__fechar:hover{ background:rgba(255,255,255,.16); }
.qr__fechar:focus-visible{ outline:2px solid var(--foco); outline-offset:2px; }

.qr__titulo{
  margin:0; font-family:'Outfit',sans-serif; font-weight:500;
  font-size:clamp(17px,2.2vh,24px); text-align:center;
}
.qr__papel{
  background:#fff; padding:clamp(8px,1.2vh,16px); border-radius:14px;
  line-height:0;
}
.qr__papel canvas{
  display:block; width:auto; height:auto;
  max-width:min(74vw,560px); max-height:56vh;
  image-rendering:pixelated;   /* mantém as bordas nítidas ao ampliar */
}
.qr__url{
  margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(13px,1.8vh,19px); color:#fff; text-align:center;
  word-break:break-all;
}
.qr__dica{ margin:0; font-size:13px; color:rgba(255,255,255,.55); text-align:center; }
.qr__aviso{
  margin:0; max-width:44ch; text-align:center; font-size:13.5px; line-height:1.5;
  padding:10px 14px; border-radius:10px;
  background:rgba(221,106,86,.16); border:1px solid rgba(221,106,86,.45); color:#ffc3b7;
}
.qr__aviso[hidden]{ display:none !important; }

/* ============================ painel (projeção) ============================ */

body.painel{ overflow:hidden; }
.painel-wrap{
  position:relative; height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr);   /* sem isso a coluna cresce com o conteúdo */
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:26px clamp(20px,4vw,56px) 22px; gap:22px;
}
.painel-top{ display:flex; align-items:center; gap:16px; }
.painel-top .brand{ margin:0; }
.painel-top__end{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.stage{
  display:grid; gap:20px; min-height:0; overflow:auto;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:'agora' 'pedidos' 'fila';
}
.area-agora  { grid-area:agora;   min-width:0; min-height:0; }
.area-pedidos{ grid-area:pedidos; min-width:0; min-height:0; display:flex; flex-direction:column; }
.area-fila   { grid-area:fila;    min-width:0; }

@media(min-width:1000px){
  .stage{
    /* o orador ocupa 2/3; a lista de questões, 1/3 e nunca mais alta que ele */
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:'agora pedidos' 'fila fila';
    align-items:stretch;
  }
}

.col__titulo{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin:0 0 12px;
}

.now{
  /* ocupa a coluna inteira, para terminar na mesma linha da lista de questões */
  height:100%; overflow:auto;
  border-radius:30px; padding:clamp(26px,4vw,54px);
  border:1.5px solid rgba(226,233,242,.32);
  background:linear-gradient(150deg, rgba(226,233,242,.13), rgba(226,233,242,.02));
  /* três zonas fixas: rótulo em cima, país no centro, tempo e ação embaixo —
     assim os elementos ficam no mesmo lugar independente da altura da tela */
  display:flex; flex-direction:column; justify-content:space-between; gap:16px;
}
.now__miolo{
  flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
}
.now__base{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,24px); flex-wrap:wrap;
}
.now__kicker{ font-size:clamp(12px,1.1vw,15px); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(226,233,242,.72); margin:0 0 14px; }
.now__name{
  font-family:'Outfit',sans-serif; font-weight:600;
  font-size:clamp(40px,7vw,104px); line-height:1.02; letter-spacing:-.03em; margin:0;
  text-wrap:balance;
}
/* três degraus conforme o comprimento do nome da delegação */
.now__name--g{ font-size:clamp(44px,8.4vw,132px); }   /* até 14 caracteres */
.now__name--m{ font-size:clamp(38px,6.4vw,102px); }   /* até 26 */
.now__name--p{ font-size:clamp(30px,4.6vw,74px); }    /* acima disso */
.now__what{
  display:inline-flex; align-items:center; gap:12px; align-self:flex-start;
  font-size:clamp(17px,2.1vw,30px); font-weight:500; line-height:1.25;
  padding:12px 22px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.1); border:1px solid var(--hair);
  text-wrap:balance;
}
.now__timer{
  margin:0; font-variant-numeric:tabular-nums;
  font-size:clamp(15px,1.7vw,22px); color:rgba(255,255,255,.6); font-weight:600;
  letter-spacing:.04em;
}
.now--empty{
  border-color:var(--hair); background:var(--veil);
  text-align:center; align-items:center; justify-content:center;
}
.now--empty .now__name{ font-weight:300; color:rgba(255,255,255,.72); font-size:clamp(26px,3.4vw,46px); }

/* --- botão da mesa para encerrar a fala em andamento --- */
.now__x{
  display:none; flex:none;
  padding:10px 20px; border-radius:var(--r-pill);
  background:rgba(221,106,86,.16); border:1px solid rgba(221,106,86,.45);
  color:#ffc3b7; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
}
.now__x:hover{ background:rgba(221,106,86,.26); }
.now__x:focus-visible{ outline:2px solid var(--foco); outline-offset:2px; }
body.mesa-on .now__x{ display:block; }

/* Barras de rolagem escondidas nas áreas do painel: numa tela de projeção elas
   ficavam por cima do conteúdo. A rolagem continua funcionando normalmente na
   roda do mouse e no trackpad, para a mesa alcançar o resto da lista.
   Regras separadas de propósito: ::-webkit-scrollbar é desconhecido no Firefox
   e invalidaria a regra inteira se estivesse junto com scrollbar-width. */
.stage, .now, .pedidos, .fila{ scrollbar-width:none; -ms-overflow-style:none; }
.stage::-webkit-scrollbar{ width:0; height:0; }
.now::-webkit-scrollbar{ width:0; height:0; }
.pedidos::-webkit-scrollbar{ width:0; height:0; }
.fila::-webkit-scrollbar{ width:0; height:0; }

/* --- lista de questões e moções (persiste até a mesa remover) --- */
.pedidos{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
  flex:1; min-height:0; overflow-y:auto;
}
.pedido{
  display:grid; gap:3px 10px; align-items:center;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:'tag quem x' 'texto texto texto';
  padding:11px 13px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid var(--hair);
  animation:rowIn .3s var(--ease) both;
}
.pedido__tag{
  grid-area:tag; justify-self:start;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-pill);
}
.pedido__texto{
  grid-area:texto; font-size:clamp(13.5px,1.15vw,16px); font-weight:600; line-height:1.3;
}
.pedido__quem{ grid-area:quem; justify-self:end; display:flex; flex-wrap:wrap; gap:2px; }
.pedido__flag{ font-size:14px; line-height:1; }
.pedido__x{
  grid-area:x; width:24px; height:24px; border-radius:50%; display:none; flex:none;
  background:rgba(221,106,86,.18); border:1px solid rgba(221,106,86,.45);
  color:#ffb9ac; font-size:13px; line-height:1; cursor:pointer;
}
body.mesa-on .pedido__x{ display:block; }

/* --- fila de países, em faixa embaixo --- */
.fila{
  list-style:none; margin:0; padding:2px;
  display:flex; gap:9px; overflow-x:auto;
}
.fila__item{
  flex:none; display:flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid var(--hair);
  animation:rowIn .3s var(--ease) both;
}
.fila__n{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:13px;
  background:rgba(255,255,255,.13);
}
.fila__nome{ font-size:clamp(14px,1.2vw,17px); font-weight:600; white-space:nowrap; }
.fila__x{
  flex:none; width:22px; height:22px; border-radius:50%; display:none;
  background:rgba(221,106,86,.18); border:1px solid rgba(221,106,86,.45);
  color:#ffb9ac; font-size:12px; line-height:1; cursor:pointer;
}
body.mesa-on .fila__x{ display:block; }
/* o estado vazio segue o alinhamento do título da coluna e dos itens,
   em vez de ficar centralizado e parecendo deslocado */
/* sem recuo lateral: o texto começa na mesma coluna do título da seção,
   já que aqui não há cartão com fundo para justificar o respiro interno */
.pedidos .empty,
.fila .empty{
  text-align:left; font-size:14px; padding:12px 0;
}

.painel-foot{ display:flex; align-items:center; gap:14px; font-size:13px; color:rgba(255,255,255,.45); }
.painel-foot__end{ margin-left:auto; display:flex; gap:9px; align-items:center; }

.iconbtn{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--veil); border:1px solid var(--hair); color:#fff;
  cursor:pointer; font-size:16px;
}
.iconbtn:hover{ background:rgba(255,255,255,.14); }

/* --- janelas baixas (notebook, projetor 4:3): o cartão precisa encolher
       junto, senão empurra o rodapé para fora e some com os botões --- */
@media (min-width:761px) and (max-height:780px){
  .painel-wrap{ gap:14px; padding:16px clamp(16px,3vw,40px) 14px; }
  .now{ padding:clamp(18px,2.6vw,34px); border-radius:24px; }
  .now__kicker{ margin-bottom:8px; }
  .now__name{ font-size:clamp(30px,4.8vw,66px); margin-bottom:12px; }
  .now__what{ font-size:clamp(15px,1.6vw,22px); padding:9px 17px; }
  .now__x{ padding:7px 16px; font-size:13.5px; }
  .pedido{ padding:9px 12px; }
}

/* --- painel em telas estreitas (celular/tablet da mesa) --- */
@media (max-width:760px){
  body.painel{ overflow:auto; }
  .painel-wrap{
    height:auto; min-height:100dvh;
    grid-template-rows:auto auto auto;
    gap:16px; padding:16px 14px calc(18px + env(safe-area-inset-bottom));
  }
  .stage{ overflow:visible; }
  .pedidos{ max-height:none; }
  .painel-top{ flex-wrap:wrap; gap:12px; }
  .painel-top__end{ margin-left:0; width:100%; flex-wrap:wrap; }
  .now{ height:auto; min-height:44dvh; padding:24px 20px; border-radius:24px; }
  .now__name{ font-size:clamp(32px,9vw,52px); }
  .pedidos{ overflow:visible; }
  /* a faixa horizontal de países não cabe num celular: vira lista */
  .fila{ flex-direction:column; overflow-x:visible; gap:7px; padding:0; }
  .fila__item{ width:100%; border-radius:var(--r-soft); }
  .fila__nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .fila__x{ margin-left:auto; }
  .painel-foot{ flex-wrap:wrap; gap:10px; }
  /* com o modo mesa ligado são 5 controles: precisam poder quebrar em linhas */
  .painel-foot__end{ margin-left:0; width:100%; flex-wrap:wrap; gap:8px; }
  .painel-foot__end .btn{ flex:1 1 auto; min-width:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}