/* =====================================================================
   assets/ui/totem.css — TOTEM no padrão "premium" (2026-09-29, fase 4)
   ---------------------------------------------------------------------
   Vale só quando o <html> tem a classe "totem-premium" (Aparência do Totem → Tela inicial →
   Topo da tela → "Visual premium"). Não vale no modo de acessibilidade (alto contraste),
   que continua exatamente como era, nem no papel impresso (a impressão copia os estilos para
   uma página sem essa classe).
   ===================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
html.totem-premium {
  --tt-bg: #f4f4f5; --tt-panel: #ffffff; --tt-hover: #fafafa; --tt-line: #e4e4e7; --tt-line-2: #d4d4d8;
  --tt-t1: #09090b; --tt-t2: #52525b; --tt-t3: #a1a1aa; --tt-ink: #18181b; --tt-ink-2: #27272a;
  --tt-ok: #15803d; --tt-ok-s: #f0fdf4; --tt-bad: #b91c1c; --tt-bad-s: #fef2f2; --tt-bad-l: #fecaca; --tt-warn: #b45309;
  --tt-sh: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  --tt-sh-md: 0 8px 30px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --tt-sh-lg: 0 24px 64px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06);
  --tt-ease: cubic-bezier(.2,.8,.2,1);
}
html.totem-premium body:not(.modo-acessivel) {
  background-color: var(--tt-bg) !important;
  background-image: radial-gradient(1100px 520px at 50% -10%, rgba(var(--ui-acc-rgb, 99,102,241),.08), transparent 65%) !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: var(--tt-t1); -webkit-font-smoothing: antialiased; letter-spacing: -.012em;
}
/* O quadro grande some: a tela vira o próprio fundo */
html.totem-premium body:not(.modo-acessivel) .totem-card { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; padding: 28px 8px !important; }
html.totem-premium body:not(.modo-acessivel) .totem-header { margin-bottom: 28px !important; }
html.totem-premium body:not(.modo-acessivel) .totem-header > i {
  width: 76px; height: 76px; border-radius: 22px; display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 2rem !important; color: var(--tt-t1) !important; background: var(--tt-panel); border: 1px solid var(--tt-line); box-shadow: var(--tt-sh-md);
}
html.totem-premium body:not(.modo-acessivel) .totem-header h1 { font-size: clamp(2rem, 3.4vw, 2.9rem) !important; font-weight: 700 !important; letter-spacing: -.035em; color: var(--tt-t1); margin: 8px 0 6px !important; }
html.totem-premium body:not(.modo-acessivel) .totem-header p { color: var(--tt-t2); font-size: 1.15rem; }
html.totem-premium body:not(.modo-acessivel) .totem-instrucao { background: var(--tt-panel) !important; color: var(--tt-t2) !important; border: 1px solid var(--tt-line); border-radius: 999px !important; font-size: 1rem !important; }
html.totem-premium body:not(.modo-acessivel) .totem-instrucao i { color: var(--tt-t3); }

/* Cartões de departamento e de serviço */
html.totem-premium body:not(.modo-acessivel) .departamentos-grid, html.totem-premium body:not(.modo-acessivel) .servicos-grid { gap: 18px !important; }
html.totem-premium body:not(.modo-acessivel) .btn-departamento, html.totem-premium body:not(.modo-acessivel) .btn-servico {
  position: relative; background: var(--tt-panel) !important; color: var(--tt-t1) !important;
  border: 1px solid var(--tt-line) !important; border-radius: 26px !important; box-shadow: var(--tt-sh-md) !important;
  padding: 26px 26px 24px !important; text-align: left !important; min-height: 176px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px;
  font-family: inherit !important; font-weight: 650 !important; font-size: 1.35rem; letter-spacing: -.02em;
  transition: transform .18s var(--tt-ease), box-shadow .18s var(--tt-ease), border-color .18s !important;
  -webkit-tap-highlight-color: transparent;
}
html.totem-premium body:not(.modo-acessivel) .btn-departamento::after, html.totem-premium body:not(.modo-acessivel) .btn-servico::after {
  content: ""; position: absolute; right: 24px; top: 28px; width: 12px; height: 12px;
  border-top: 2.5px solid var(--tt-t3); border-right: 2.5px solid var(--tt-t3); transform: rotate(45deg); transition: transform .18s var(--tt-ease), border-color .18s;
}
html.totem-premium body:not(.modo-acessivel) .btn-departamento:hover, html.totem-premium body:not(.modo-acessivel) .btn-servico:hover {
  background: var(--tt-panel) !important; transform: translateY(-3px) !important; border-color: var(--tt-line-2) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04) !important;
}
html.totem-premium body:not(.modo-acessivel) .btn-departamento:hover::after, html.totem-premium body:not(.modo-acessivel) .btn-servico:hover::after { border-color: var(--tt-t1); transform: translateX(3px) rotate(45deg); }
html.totem-premium body:not(.modo-acessivel) .btn-departamento:active, html.totem-premium body:not(.modo-acessivel) .btn-servico:active { transform: scale(.985) !important; box-shadow: var(--tt-sh) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-departamento > i, html.totem-premium body:not(.modo-acessivel) .btn-servico > i {
  width: 58px; height: 58px; border-radius: 17px; display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 1.55rem !important; margin: 0 0 14px !important;
  background: color-mix(in srgb, currentColor 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, #fff);
}
html.totem-premium body:not(.modo-acessivel) .btn-departamento > i:not([style]), html.totem-premium body:not(.modo-acessivel) .btn-servico > i:not([style]) { color: var(--tt-t1) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-servico > img { margin: 0 0 14px !important; }
html.totem-premium body:not(.modo-acessivel) .btn-departamento .dep-nome { color: var(--tt-t1) !important; font-weight: 650 !important; letter-spacing: -.025em; line-height: 1.2; }
html.totem-premium body:not(.modo-acessivel) .btn-departamento:hover .dep-nome { color: var(--tt-t1) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-departamento .dep-desc { color: var(--tt-t2) !important; font-size: .95rem !important; font-weight: 450; letter-spacing: -.005em; margin-top: 2px !important; }
html.totem-premium body:not(.modo-acessivel) .btn-servico .tempo {
  margin-top: auto !important; padding-top: 12px; color: var(--tt-t2) !important; font-size: .9rem !important; font-weight: 550; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 7px;
}
html.totem-premium body:not(.modo-acessivel) .btn-servico .tempo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-acc, #4f46e5); box-shadow: 0 0 0 3px rgba(var(--ui-acc-rgb, 79,70,229),.16); } /* 2026-09-29 v2.4.8: cor da marca (Aparência) */

/* Busca e letras */
html.totem-premium body:not(.modo-acessivel) .totem-busca input { border: 1px solid var(--tt-line) !important; border-radius: 16px !important; background: var(--tt-panel); box-shadow: var(--tt-sh); font-family: inherit; }
html.totem-premium body:not(.modo-acessivel) .totem-busca input:focus { border-color: var(--tt-t3) !important; box-shadow: 0 0 0 4px rgba(24,24,27,.06); }
html.totem-premium body:not(.modo-acessivel) .letra-aba { background: var(--tt-panel) !important; color: var(--tt-t2) !important; border: 1px solid var(--tt-line) !important; font-family: inherit; }
html.totem-premium body:not(.modo-acessivel) .letra-aba.ativa { background: var(--tt-ink) !important; color: #fff !important; border-color: var(--tt-ink) !important; }

/* Voltar */
html.totem-premium body:not(.modo-acessivel) .btn-voltar {
  background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important;
  border-radius: 14px !important; padding: 12px 20px !important; font-weight: 600; font-size: 1rem; box-shadow: var(--tt-sh);
}
html.totem-premium body:not(.modo-acessivel) .btn-voltar i { color: var(--tt-t3); margin-right: 4px; }

/* Janela Normal / Preferencial / motivo / nome */
html.totem-premium body:not(.modo-acessivel) .tipo-modal { background: rgba(9,9,11,.45) !important; backdrop-filter: blur(10px) saturate(140%) !important; }
html.totem-premium body:not(.modo-acessivel) .tipo-card { background: var(--tt-panel) !important; border-radius: 30px !important; box-shadow: var(--tt-sh-lg) !important; border: 1px solid var(--tt-line); }
html.totem-premium body:not(.modo-acessivel) .tipo-card h3, html.totem-premium body:not(.modo-acessivel) .tipo-card h2 { color: var(--tt-t1) !important; font-weight: 700 !important; letter-spacing: -.03em; }
html.totem-premium body:not(.modo-acessivel) .tipo-card p { color: var(--tt-t2) !important; }
html.totem-premium body:not(.modo-acessivel) .tipo-card > i:first-child { color: var(--tt-t1) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-tipo {
  border-radius: 20px !important; font-weight: 650 !important; font-family: inherit !important; letter-spacing: -.01em;
  box-shadow: var(--tt-sh) !important; transition: transform .12s var(--tt-ease), background .15s !important;
}
html.totem-premium body:not(.modo-acessivel) .btn-tipo:active { transform: scale(.97); }
html.totem-premium body:not(.modo-acessivel) .btn-normal { background: var(--tt-ink) !important; color: #fff !important; }
html.totem-premium body:not(.modo-acessivel) .btn-normal:hover { background: var(--tt-ink-2) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-prioritario { background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line-2) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-prioritario:hover { background: var(--tt-hover) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-prioritario i { color: #ef4444; }
html.totem-premium body:not(.modo-acessivel) .btn-motivo { background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; border-radius: 16px !important; }
html.totem-premium body:not(.modo-acessivel) .btn-motivo:hover { border-color: var(--tt-t3) !important; background: var(--tt-hover) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-motivo-pular { border: 1.5px dashed var(--tt-line-2) !important; color: var(--tt-t2) !important; box-shadow: none !important; }
html.totem-premium body:not(.modo-acessivel) .nome-display { background: var(--tt-bg) !important; border: 1px solid var(--tt-line) !important; color: var(--tt-t1) !important; border-radius: 16px !important; letter-spacing: -.01em !important; font-family: inherit; }
html.totem-premium body:not(.modo-acessivel) .btn-mic { background: var(--tt-bg) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; border-radius: 14px !important; }
html.totem-premium body:not(.modo-acessivel) .btn-mic.ouvindo { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; }
html.totem-premium body:not(.modo-acessivel) .chip-sugestao { background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; font-family: inherit; }
html.totem-premium body:not(.modo-acessivel) .chip-sugestao:hover, html.totem-premium body:not(.modo-acessivel) .chip-sugestao:active { background: var(--tt-ink) !important; color: #fff !important; border-color: var(--tt-ink) !important; }
html.totem-premium body:not(.modo-acessivel) .teclado-nome { background: var(--tt-bg) !important; box-shadow: inset 0 0 0 1px var(--tt-line) !important; border-radius: 22px !important; }
html.totem-premium body:not(.modo-acessivel) .tecla {
  background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important;
  box-shadow: 0 1px 0 var(--tt-line-2), 0 2px 6px rgba(0,0,0,.04) !important; font-family: inherit !important; font-weight: 600 !important;
}
html.totem-premium body:not(.modo-acessivel) .tecla:hover { color: var(--tt-t1) !important; background: var(--tt-hover) !important; }
html.totem-premium body:not(.modo-acessivel) .tecla:active { background: var(--tt-ink) !important; color: #fff !important; box-shadow: none !important; }
html.totem-premium body:not(.modo-acessivel) .tecla-acento { color: var(--tt-t2) !important; }
html.totem-premium body:not(.modo-acessivel) .tecla-apagar { color: var(--tt-bad) !important; }
html.totem-premium body:not(.modo-acessivel) .tecla-apagar:active { background: var(--tt-bad) !important; color: #fff !important; }
html.totem-premium body:not(.modo-acessivel) .tecla-limpar { color: var(--tt-warn) !important; }
html.totem-premium body:not(.modo-acessivel) .tecla-desistir { color: var(--tt-t2) !important; background: var(--tt-bg) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-ajuda-teclado { background: var(--tt-ink) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-pular-nome { background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-confirmar-nome { background: var(--tt-ink) !important; color: #fff !important; }

/* Ficha na tela */
html.totem-premium body:not(.modo-acessivel) .senha-papel {
  background: var(--tt-panel) !important; border: 1px solid var(--tt-line); border-radius: 32px !important; box-shadow: var(--tt-sh-lg) !important;
  max-width: 620px; margin: 0 auto; padding: 34px 30px 26px !important; animation: ttFicha .55s var(--tt-ease) both !important;
}
@keyframes ttFicha { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
html.totem-premium body:not(.modo-acessivel) .senha-papel.prioritario { background: var(--tt-panel) !important; box-shadow: var(--tt-sh-lg), inset 0 4px 0 #ef4444 !important; }
html.totem-premium body:not(.modo-acessivel) .senha-papel > .fa-check-circle { color: #22c55e !important; font-size: 2.4rem !important; }
html.totem-premium body:not(.modo-acessivel) .senha-papel h2 { font-size: 1.05rem !important; font-weight: 600 !important; color: var(--tt-t2) !important; letter-spacing: .06em; text-transform: uppercase; }
html.totem-premium body:not(.modo-acessivel) .senha-papel .numero {
  font-family: "Inter", system-ui, sans-serif !important; color: var(--tt-t1) !important; font-weight: 750 !important; letter-spacing: -.05em !important;
  line-height: 1; font-variant-numeric: tabular-nums; margin: 10px 0 6px !important;
  animation: ttNumero .8s .1s var(--tt-ease) both;
}
@keyframes ttNumero { from { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
html.totem-premium body:not(.modo-acessivel) .senha-papel .info-senha { color: var(--tt-t2); border-top: 1px solid var(--tt-line); padding-top: 14px; }
html.totem-premium body:not(.modo-acessivel) .senha-papel .info-senha i { color: var(--tt-t3); width: 18px; }
html.totem-premium body:not(.modo-acessivel) .senha-papel .info-senha strong { color: var(--tt-t1); font-weight: 600; }
html.totem-premium body:not(.modo-acessivel) .badge-prioritario { background: var(--tt-bad-s) !important; color: var(--tt-bad) !important; border: 1px solid var(--tt-bad-l); font-weight: 650; font-size: .85rem !important; }
html.totem-premium body:not(.modo-acessivel) .senha-papel .qr-code { border: 1px solid var(--tt-line); box-shadow: none !important; border-radius: 18px !important; }
html.totem-premium body:not(.modo-acessivel) .btn-copiar-url { background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; border-radius: 10px !important; font-weight: 600; }
html.totem-premium body:not(.modo-acessivel) .btn-acao { border-radius: 18px !important; font-weight: 650 !important; font-family: inherit !important; letter-spacing: -.02em; font-size: 1.6rem !important; box-shadow: var(--tt-sh) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-imprimir { background: var(--tt-ink) !important; color: #fff !important; }
html.totem-premium body:not(.modo-acessivel) .btn-imprimir:hover { background: var(--tt-ink-2) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-voltar-totem { background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-voltar-totem:hover { background: var(--tt-hover) !important; }
html.totem-premium body:not(.modo-acessivel) .auto-retorno-aviso { background: var(--tt-bg) !important; color: var(--tt-t2) !important; border: 1px solid var(--tt-line); }
html.totem-premium body:not(.modo-acessivel) .auto-retorno-barra { background: rgba(24,24,27,.07) !important; }

/* QR Codes da tela, som, acessibilidade */
html.totem-premium body:not(.modo-acessivel) .qrcodes-dobravel { background: var(--tt-panel) !important; border: 1px solid var(--tt-line); opacity: .9 !important; backdrop-filter: none !important; box-shadow: var(--tt-sh); }
html.totem-premium body:not(.modo-acessivel) .qrcodes-dobravel-header { color: var(--tt-t2) !important; font-size: .8rem !important; }
html.totem-premium body:not(.modo-acessivel) .qrcodes-dobravel-header:hover { background: var(--tt-hover) !important; }
html.totem-premium body:not(.modo-acessivel) .qr-item .qr-titulo { color: var(--tt-t1) !important; }
html.totem-premium body:not(.modo-acessivel) .qr-item .qr-info { color: var(--tt-t2) !important; }
html.totem-premium body:not(.modo-acessivel) .qr-item .qr-code-mini { border: 1px solid var(--tt-line); }
html.totem-premium body:not(.modo-acessivel) .qr-item .btn-copiar-url-pequeno, html.totem-premium body:not(.modo-acessivel) .btn-config-wifi { background: var(--tt-bg) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; }
html.totem-premium body:not(.modo-acessivel) .btn-som-toggle { background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; box-shadow: var(--tt-sh-md) !important; font-weight: 550; }
html.totem-premium body:not(.modo-acessivel) .btn-acessibilidade { background: var(--tt-panel) !important; color: var(--tt-t1) !important; border: 1px solid var(--tt-line) !important; box-shadow: var(--tt-sh-md) !important; }
html.totem-premium body:not(.modo-acessivel) .footer-texto { color: var(--tt-t3) !important; }
html.totem-premium body:not(.modo-acessivel) #loadingOverlay { background: rgba(250,250,250,.82) !important; color: var(--tt-t1) !important; backdrop-filter: blur(10px); }

/* Faixas de cabeçalho e rodapé */
html.totem-premium body:not(.modo-acessivel) .totem-faixa { background: transparent !important; color: var(--tt-t1) !important; box-shadow: none !important; }
html.totem-premium body:not(.modo-acessivel) .totem-faixa-topo { border-bottom: 1px solid var(--tt-line); }
html.totem-premium body:not(.modo-acessivel) .totem-faixa-rodape { border-top: 1px solid var(--tt-line); color: var(--tt-t3) !important; }
html.totem-premium body:not(.modo-acessivel) .totem-faixa-rodape * { color: var(--tt-t3) !important; }
html.totem-premium body:not(.modo-acessivel) .tf-marca i { color: var(--tt-t1) !important; width: 52px; height: 52px; border-radius: 15px; background: var(--tt-panel); border: 1px solid var(--tt-line); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem !important; box-shadow: var(--tt-sh); }
html.totem-premium body:not(.modo-acessivel) .tf-nome { font-weight: 650 !important; letter-spacing: -.025em; }
html.totem-premium body:not(.modo-acessivel) .tf-relogio .tf-hora { font-weight: 650 !important; letter-spacing: -.03em; }
html.totem-premium body:not(.modo-acessivel) .tf-relogio .tf-data { color: var(--tt-t2); opacity: 1 !important; }

/* SweetAlert2 */
html.totem-premium body:not(.modo-acessivel) .swal2-popup { font-family: "Inter", system-ui, sans-serif !important; border-radius: 24px !important; }
html.totem-premium body:not(.modo-acessivel) .swal2-title { font-weight: 700 !important; letter-spacing: -.02em; }
html.totem-premium body:not(.modo-acessivel) .swal2-styled { border-radius: 14px !important; font-weight: 600 !important; box-shadow: none !important; }

/* Botões da janela Normal/Preferencial maiores (toque fácil) */
html.totem-premium body:not(.modo-acessivel) .tipo-card { padding: 34px 30px 26px !important; }
html.totem-premium body:not(.modo-acessivel) .tipo-card .btn-tipo:not(.btn-motivo):not(.btn-pular-nome):not(.btn-confirmar-nome) { padding: 22px 16px !important; font-size: 1.25rem !important; min-height: 96px; }
html.totem-premium body:not(.modo-acessivel) .tipo-card .btn-tipo i { font-size: 1.4rem; margin-bottom: 6px; }
/* Totem em pé (tela vertical): cartões maiores */
@media (orientation: portrait) {
  html.totem-premium body:not(.modo-acessivel) .departamentos-grid, html.totem-premium body:not(.modo-acessivel) .servicos-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
  html.totem-premium body:not(.modo-acessivel) .btn-departamento, html.totem-premium body:not(.modo-acessivel) .btn-servico { min-height: 220px; font-size: 1.6rem; padding: 32px !important; }
  html.totem-premium body:not(.modo-acessivel) .btn-departamento > i, html.totem-premium body:not(.modo-acessivel) .btn-servico > i { width: 70px; height: 70px; font-size: 1.9rem !important; border-radius: 20px; }
}

/* Botão "Já fiz o pré-atendimento" (08/11/2026, pedido do Robson: "visível mas discreto", proposta B escolhida pela
   imagem). Antes era a faixa verde tracejada da largura toda (estilo do totem clássico, que continua igual); no visual
   premium vira uma pílula branca no centro, com o ícone do QR Code num círculo na cor da marca e o texto numa linha. */
html.totem-premium body:not(.modo-acessivel) .btn-pre-totem {
  display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 0 auto 22px;
  padding: 9px 20px 9px 9px; border: 1px solid var(--tt-line); border-radius: 999px; background: var(--tt-panel);
  box-shadow: var(--tt-sh); color: var(--tt-t1); font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .18s, box-shadow .18s var(--tt-ease), transform .18s var(--tt-ease); -webkit-tap-highlight-color: transparent;
}
html.totem-premium body:not(.modo-acessivel) .btn-pre-totem:hover { border-color: var(--tt-line-2); box-shadow: var(--tt-sh-md); }
html.totem-premium body:not(.modo-acessivel) .btn-pre-totem:active { transform: scale(.985); }
html.totem-premium body:not(.modo-acessivel) .btn-pre-totem > i:first-child {
  width: 38px; height: 38px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: var(--ui-acc, #4f46e5); background: rgba(var(--ui-acc-rgb, 79,70,229), .10);
}
html.totem-premium body:not(.modo-acessivel) .btn-pre-totem span { flex: 1; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
html.totem-premium body:not(.modo-acessivel) .btn-pre-totem b { display: inline; font-size: 1.02rem; font-weight: 650; letter-spacing: -.015em; color: var(--tt-t1); }
html.totem-premium body:not(.modo-acessivel) .btn-pre-totem small { display: inline; font-size: .9rem; color: var(--tt-t2); }
html.totem-premium body:not(.modo-acessivel) .btn-pre-totem > i:last-child { font-size: .95rem; color: var(--tt-t3); opacity: 1; }
@media (orientation: portrait) {
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem { padding: 11px 24px 11px 11px; }
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem > i:first-child { width: 46px; height: 46px; font-size: 1.25rem; }
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem b { font-size: 1.2rem; }
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem small { font-size: 1rem; }
}
@media (max-width: 600px) {
  /* Celular (totem aberto no aparelho da pessoa): o texto quebra em duas linhas, então a pílula vira faixa arredondada. */
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem { width: 100%; border-radius: 18px; padding: 10px 16px 10px 10px; }
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem > i:first-child { width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem; }
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem span { flex-direction: column; align-items: flex-start; gap: 1px; }
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem b { font-size: 1rem; }
  html.totem-premium body:not(.modo-acessivel) .btn-pre-totem small { font-size: .85rem; }
}