/* EiGarçom — interface responsiva (painel, telas de mesa e admin).
   Mobile-first: a base é o celular; @media (min-width) amplia para tablet/desktop.
   Cores de marca vêm de tokens.css; aqui ficam os tokens de interface. */
@import url('css/tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Figtree:wght@400;500;600;700;800&display=swap');

body.ui {
  --ui-fundo: #F6F5F2;
  --ui-superficie: #FFFFFF;
  --ui-superficie-2: #EFEEEA;
  --ui-linha: #E7E4DE;
  --ui-linha-forte: #D6D3CC;
  --ui-texto: #14213A;
  --ui-texto-2: #374151;
  --ui-muted: #5B6474;
  --ui-marca: var(--ei-azul-marinho);
  --ui-marca-tint: #E7EDF6;
  --ui-sidebar: var(--ei-azul-marinho);
  --ui-cta: #E0501A;
  --ui-chamando: #C2410C;
  --ui-chamando-borda: #E0501A;
  --ui-chamando-tint: #FFF1EA;
  --ui-chamando-texto: #7C2D12;
  --ui-chamando-apagado: #F3C6B3;
  --ui-aguardando: #1E5AA8;
  --ui-aguardando-tint: #EAF1FA;
  --ui-aguardando-texto: #1E3A5F;
  --ui-ok: #2F9E5B;
  --ui-perigo: #B42318;
  --ui-raio: 16px;
  --ui-raio-sm: 12px;
  --ui-sombra: 0 12px 32px rgba(11, 46, 92, .14);
  --ui-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tema "tech": mesma estrutura, paleta escura. */
body.ui.tema-tech {
  --ui-fundo: #0F172A;
  --ui-superficie: #1E293B;
  --ui-superficie-2: #172033;
  --ui-linha: #2B3A52;
  --ui-linha-forte: #3B4B66;
  --ui-texto: #E2E8F0;
  --ui-texto-2: #CBD5E1;
  --ui-muted: #94A3B8;
  --ui-marca: #6366F1;
  --ui-marca-tint: #262E4F;
  --ui-sidebar: #0B1222;
  --ui-chamando-tint: #3A1E17;
  --ui-chamando-texto: #FDBA9A;
  --ui-chamando-apagado: #5B3326;
  --ui-aguardando-tint: #172A45;
  --ui-aguardando-texto: #BFD7F5;
}

body.ui, body.ui *, body.ui *::before, body.ui *::after { box-sizing: border-box; }
body.ui {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ui-fundo);
  color: var(--ui-texto);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
:where(body.ui) :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; padding: 0; }
:where(body.ui) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.ui) :where(a) { color: var(--ui-marca); }
body.ui :focus-visible { outline: 3px solid var(--ei-laranja); outline-offset: 2px; }
body.ui [hidden] { display: none !important; }
.ui-icone { width: 20px; height: 20px; flex-shrink: 0; }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-display { font-family: var(--ui-display); font-weight: 800; letter-spacing: -.01em; }

/* ── Botões ─────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--ui-linha); border-radius: var(--ui-raio-sm);
  background: var(--ui-superficie); color: var(--ui-texto);
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.ui-btn:hover { border-color: var(--ui-linha-forte); }
.ui-btn:active { transform: scale(.98); }
.ui-btn:disabled { opacity: .5; cursor: default; }
.ui-btn-primario { background: var(--ui-marca); border-color: var(--ui-marca); color: #fff !important; }
.ui-btn-primario:hover { background: var(--ei-azul-marinho-claro); border-color: var(--ei-azul-marinho-claro); }
.ui-btn-cta { background: var(--ui-cta); border-color: var(--ui-cta); color: #fff !important; font-size: 18px; font-weight: 800; }
.ui-btn-cta:hover { background: var(--ui-chamando); border-color: var(--ui-chamando); }
.ui-btn-perigo { color: var(--ui-perigo) !important; }
.ui-btn-grande { min-height: 56px; font-size: 17px; font-weight: 800; border-radius: 14px; width: 100%; }
.ui-btn-icone { width: 44px; min-width: 44px; padding: 0; }
.ui-btn-bloco { width: 100%; }

/* ── Badges de status ───────────────────────────────────── */
.ui-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--ui-superficie-2); color: var(--ui-muted);
}
.ui-badge .ui-icone { width: 14px; height: 14px; }
.ui-badge-chamando, .ui-badge.badge-chamando { background: var(--ui-chamando); color: #fff; }
.ui-badge-aguardando, .ui-badge.badge-aguardando { background: var(--ui-aguardando); color: #fff; }
.ui-badge-aberta, .ui-badge.badge-aberta { background: var(--ui-marca-tint); color: var(--ui-marca); }
.ui-badge-fechada, .ui-badge.badge-fechada { background: var(--ui-superficie-2); color: var(--ui-muted); }
body.ui.tema-tech .ui-badge-aberta { color: #C7D2FE; }

/* ── Shell: sidebar + conteúdo (admin) ──────────────────── */
.ui-app { min-height: 100vh; min-height: 100dvh; }
.ui-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: 264px; max-width: 86vw;
  background: var(--ui-sidebar); color: #E6ECF5;
  display: flex; flex-direction: column; gap: 24px;
  padding: 20px 14px calc(16px + var(--ui-safe-bottom));
  transform: translateX(-105%); transition: transform .25s ease;
  overflow-y: auto;
}
.ui-sidebar.aberta { transform: translateX(0); box-shadow: var(--ui-sombra); }
.ui-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(8, 18, 36, .5); display: none; }
.ui-overlay.ativo { display: block; }
.ui-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px; text-decoration: none; }
.ui-marca img { width: 38px; height: 38px; border-radius: 10px; background: #fff; object-fit: contain; padding: 3px; }
.ui-marca span { font-family: var(--ui-display); font-weight: 800; font-size: 21px; color: #fff; }
.ui-marca span b { color: var(--ei-laranja); font-weight: 800; }
.ui-nav { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ui-nav a, .ui-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: #E6ECF5;
  font-size: 15px; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer;
}
.ui-nav a:hover, .ui-nav button:hover { background: rgba(255, 255, 255, .08); }
.ui-nav a[aria-current="page"] { background: #fff; color: var(--ei-azul-marinho); font-weight: 700; }
body.ui.tema-tech .ui-nav a[aria-current="page"] { background: var(--ui-marca); color: #fff; }
.ui-nav-sep { height: 1px; background: rgba(255, 255, 255, .14); margin: 8px 4px; }
.ui-sidebar-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.ui-sidebar .btn-instalar-pwa {
  min-height: 40px; border: 1px dashed rgba(255, 255, 255, .3); border-radius: 10px;
  background: transparent; color: #C9D5E6; font-weight: 600; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ui-usuario { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.ui-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--ei-laranja); color: var(--ei-azul-marinho);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}
.ui-usuario-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ui-usuario-info strong { color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-usuario-info span { color: #B8C6DA; font-size: 12px; }
.ui-usuario form { margin: 0; }
.ui-usuario button {
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .08); color: #E6ECF5; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.ui-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }
.ui-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; min-height: 60px;
  background: var(--ui-superficie); border-bottom: 1px solid var(--ui-linha);
}
.ui-topbar-titulo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ui-topbar-titulo h1 {
  font-family: var(--ui-display); font-weight: 800; font-size: 20px; color: var(--ui-marca);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ui.tema-tech .ui-topbar-titulo h1 { color: var(--ui-texto); }
.ui-topbar-titulo small { font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ui-topbar-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-hamburger { border: 0; background: transparent; }
.ui-topbar .logo-pill { align-self: center; }
@media (min-width: 1024px) { .so-mobile { display: none !important; } }
.ui-conteudo { padding: 16px; flex: 1; }
.ui-logo-min { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; border: 1px solid var(--ui-linha); padding: 2px; background: #fff; }

@media (min-width: 1024px) {
  .ui-app.com-sidebar { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .ui-app.com-sidebar .ui-sidebar {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    width: auto; max-width: none; transform: none; box-shadow: none;
  }
  .ui-app.com-sidebar .ui-hamburger, .ui-app.com-sidebar .ui-overlay { display: none !important; }
  .ui-topbar { padding: 12px 28px; min-height: 72px; }
  .ui-topbar-titulo h1 { font-size: 22px; }
  .ui-conteudo { padding: 24px 28px; }
}

/* ── Barra inferior (garçom no celular) ─────────────────── */
.ui-bottomnav {
  position: sticky; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--ui-superficie); border-top: 1px solid var(--ui-linha);
  padding-bottom: var(--ui-safe-bottom);
}
.ui-bottomnav a, .ui-bottomnav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 62px; border: 0; background: transparent;
  color: var(--ui-muted); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; width: 100%;
}
.ui-bottomnav a[aria-current="page"] { color: var(--ui-marca); font-weight: 800; }
body.ui.tema-tech .ui-bottomnav a[aria-current="page"] { color: #A5B4FC; }
.ui-bottomnav form { margin: 0; display: flex; }
@media (min-width: 1024px) { .ui-bottomnav { display: none; } }

/* ── Painel ao vivo ─────────────────────────────────────── */
.painel-status { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ui-muted); }
.painel-status .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-ok); }
.painel-status.offline .ponto { background: var(--ui-chamando); }
.painel-status.alerta { color: var(--ui-chamando); }
.btn-som[aria-pressed="true"] { background: var(--ui-marca-tint); border-color: var(--ui-marca-tint); color: var(--ui-marca); }
body.ui.tema-tech .btn-som[aria-pressed="true"] { color: #C7D2FE; }
.btn-som .rotulo { display: none; }
@media (min-width: 700px) { .btn-som { width: auto; padding: 0 14px; } .btn-som .rotulo { display: inline; } }
.ui-topbar .btn-instalar-pwa { gap: 8px; }
.ui-topbar .btn-instalar-pwa .rotulo { display: none; }
@media (min-width: 700px) { .ui-topbar .btn-instalar-pwa { width: auto; padding: 0 14px; } .ui-topbar .btn-instalar-pwa .rotulo { display: inline; } }

.banner-ativar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--ui-chamando-tint); border-bottom: 1px solid var(--ui-chamando-apagado);
  color: var(--ui-chamando-texto); font-size: 14px; font-weight: 600;
}
.banner-ativar span { flex: 1; }

.filtros {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 12px 16px; margin: 0;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ui-linha); background: var(--ui-superficie); color: var(--ui-texto);
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.filtro .n { padding: 1px 8px; border-radius: 999px; background: var(--ui-superficie-2); font-size: 12px; font-weight: 700; }
.filtro[aria-pressed="true"] { background: var(--ui-marca); border-color: var(--ui-marca); color: #fff; font-weight: 700; }
.filtro[aria-pressed="true"] .n { background: rgba(255, 255, 255, .2); color: #fff; }
.filtro-chamando .n { background: var(--ui-chamando); color: #fff; }
.filtro-chamando.tem { border-color: var(--ui-chamando-borda); background: var(--ui-chamando-tint); color: var(--ui-chamando-texto); }

.grid-mesas {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: 0 16px 24px; align-content: start;
}
@media (min-width: 600px) { .grid-mesas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .filtros { padding: 18px 28px 14px; }
  .grid-mesas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 0 28px 28px; }
}

/* A ordem visual acompanha a urgência mesmo quando o status muda ao vivo. */
.card-mesa { order: 3; }
.card-mesa.status-chamando { order: 0; }
.card-mesa.status-aguardando { order: 1; }
.card-mesa.status-aberta { order: 2; }

.card-mesa {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: var(--ui-raio);
  background: var(--ui-superficie); border: 1px solid var(--ui-linha);
}
.card-mesa h3 { font-family: var(--ui-display); font-weight: 800; font-size: 21px; line-height: 1.1; }
.card-mesa h3 a { color: var(--ui-texto); text-decoration: none; }
.card-mesa h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-info { font-size: 15px; font-weight: 600; }
.card-aviso { display: none; font-size: 15px; font-weight: 600; color: var(--ui-aguardando-texto); }
.card-mesa.status-aguardando .card-aviso { display: block; }
.card-rodape .ui-icone { width: 16px; height: 16px; color: var(--ui-muted); }
.mensagem-cliente {
  font-size: 15px; font-weight: 700; color: var(--ui-chamando-texto);
  background: var(--ui-superficie); border-radius: 10px; padding: 6px 10px; align-self: flex-start;
}
.card-rodape { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.timer { font-size: 14px; font-weight: 700; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.timer:empty { display: none; }
.urgencia-bars { display: inline-flex; align-items: flex-end; gap: 3px; }
.urgencia-bars span { width: 5px; border-radius: 2px; background: var(--ui-chamando-apagado); }
.urgencia-bars span:nth-child(1) { height: 8px; }
.urgencia-bars span:nth-child(2) { height: 12px; }
.urgencia-bars span:nth-child(3) { height: 16px; }
.urgencia-bars[data-level="1"] span:nth-child(-n+1),
.urgencia-bars[data-level="2"] span:nth-child(-n+2),
.urgencia-bars[data-level="3"] span { background: var(--ui-chamando); }
.urgencia-bars[data-level="3"] { animation: ui-pulso 1s ease-in-out infinite; }
.quick-actions { position: relative; z-index: 1; display: flex; gap: 8px; }
.quick-actions:empty { display: none; }
.btn-quick { flex: 1; }
.btn-quick-fechar { flex: 0 0 48px; }

.card-mesa.status-chamando { background: var(--ui-chamando-tint); border: 2px solid var(--ui-chamando-borda); }
.card-mesa.status-chamando .timer { color: var(--ui-chamando); }
.card-mesa.status-aguardando { background: var(--ui-aguardando-tint); border: 2px solid var(--ui-aguardando); }
.card-mesa.status-aguardando .timer { color: var(--ui-aguardando); }
.card-mesa.status-fechada {
  flex-direction: row; align-items: center; flex-wrap: wrap;
  background: var(--ui-superficie-2); padding: 8px 8px 8px 14px; gap: 8px;
}
.card-mesa.status-fechada .card-topo { flex: 1; justify-content: flex-start; }
.card-mesa.status-fechada h3 { font-size: 17px; }
.card-mesa.status-fechada h3 a { color: var(--ui-texto-2); }
.card-mesa.status-fechada .card-info, .card-mesa.status-fechada .card-rodape,
.card-mesa.status-fechada .mensagem-cliente { display: none; }
.card-mesa.status-aguardando .card-rodape .ui-icone { color: var(--ui-aguardando); }
.card-mesa.status-chamando .card-rodape .ui-icone { color: var(--ui-chamando); }
.card-mesa.status-fechada .ui-badge { background: transparent; padding: 0; }
.card-mesa.status-aberta .btn-quick-fechar { margin-left: auto; }
.painel-vazio { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--ui-muted); }
.card-apareceu { animation: ui-aparece 1.2s ease; }
@keyframes ui-pulso { 50% { opacity: .45; } }
@keyframes ui-aparece { from { box-shadow: 0 0 0 4px var(--ei-laranja); } to { box-shadow: 0 0 0 0 transparent; } }
@media (min-width: 1024px) {
  .card-mesa { padding: 16px; gap: 12px; }
  .card-mesa h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .urgencia-bars[data-level="3"], .card-apareceu { animation: none; }
}

/* ── Telas de mesa (garçom e cliente) ───────────────────── */
.tela {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  width: 100%; max-width: 520px; margin: 0 auto;
  background: var(--ui-fundo);
}
.tela-topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 0 8px;
  background: var(--ui-superficie); border-bottom: 1px solid var(--ui-linha);
}
.tela-voltar {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px;
  border-radius: 10px; color: var(--ui-marca); font-weight: 700; font-size: 15px; text-decoration: none;
}
body.ui.tema-tech .tela-voltar { color: #A5B4FC; }
.tela-corpo { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px 16px; }
.tela-titulo { font-family: var(--ui-display); font-weight: 800; font-size: 34px; line-height: 1.05; color: var(--ui-marca); }
body.ui.tema-tech .tela-titulo { color: var(--ui-texto); }
.tela-acoes {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px calc(16px + var(--ui-safe-bottom));
  background: var(--ui-superficie); border-top: 1px solid var(--ui-linha);
}
.tela-acoes form { margin: 0; display: flex; flex-direction: column; }
.tela-form { flex: 1; display: flex; flex-direction: column; }
.tela-rodape { font-size: 12px; color: var(--ui-muted); text-align: center; }
.tela-rodape strong { color: var(--ui-marca); }
body.ui.tema-tech .tela-rodape strong { color: var(--ui-texto); }
@media (min-width: 600px) {
  body.ui.tela-fundo { padding: 32px 16px; }
  body.ui.tela-fundo .tela {
    min-height: auto; border-radius: 24px; overflow: hidden;
    border: 1px solid var(--ui-linha); box-shadow: var(--ui-sombra);
  }
  body.ui.tela-fundo .tela-acoes, body.ui.tela-fundo .tela-topo { position: static; }
}

.alerta-mesa {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--ui-raio);
  border: 2px solid var(--ui-chamando-borda); background: var(--ui-chamando-tint); color: var(--ui-chamando-texto);
}
.alerta-mesa .ui-icone { width: 28px; height: 28px; color: var(--ui-chamando); }
.alerta-mesa strong { display: block; font-size: 19px; font-weight: 800; }
.alerta-mesa span { font-size: 14px; font-weight: 600; }
.alerta-mesa.azul { border-color: var(--ui-aguardando); background: var(--ui-aguardando-tint); color: var(--ui-aguardando-texto); }
.alerta-mesa.azul .ui-icone { color: var(--ui-aguardando); }

.ficha {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  padding: 16px; border-radius: var(--ui-raio);
  background: var(--ui-superficie); border: 1px solid var(--ui-linha);
}
.ficha dt { font-size: 13px; font-weight: 600; color: var(--ui-muted); }
.ficha dd { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .campo .rotulo { font-size: 15px; font-weight: 700; }
.campo label small { font-weight: 500; color: var(--ui-muted); font-size: 14px; }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--ui-linha-forte); border-radius: 14px;
  background: var(--ui-superficie); color: var(--ui-texto); font-size: 17px; outline: none;
}
.campo textarea { resize: vertical; min-height: 80px; }
.campo input:focus, .campo textarea:focus { border-color: var(--ui-marca); box-shadow: 0 0 0 3px var(--ui-marca-tint); }
.campo input.campo-erro { border-color: var(--ui-chamando); box-shadow: 0 0 0 3px var(--ui-chamando-tint); }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.secao-titulo { font-size: 13px; font-weight: 700; color: var(--ui-muted); letter-spacing: .06em; text-transform: uppercase; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ui-linha); background: var(--ui-superficie); font-weight: 600; font-size: 15px; cursor: pointer;
}

/* Cliente */
.cliente-topo { padding: 20px 20px 4px; display: flex; flex-direction: column; gap: 4px; }
.logo-pill {
  display: inline-flex; align-self: flex-start; border-radius: 8px; overflow: hidden;
  font-weight: 900; font-size: 13px; text-decoration: none; line-height: 1;
}
.logo-pill .logo-ei { background: var(--ei-laranja); color: var(--ei-azul-marinho); padding: 5px 7px; }
.logo-pill .logo-garcom { background: var(--ei-azul-marinho); color: #fff; padding: 5px 9px; }
.estab-nome { font-size: 14px; font-weight: 700; color: var(--ui-muted); }
.cliente-ola { font-size: 16px; font-weight: 600; color: var(--ui-texto-2); }
.chips-chamada { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip-acao {
  min-height: 60px; padding: 8px 12px; border-radius: 14px;
  border: 1.5px solid var(--ui-linha-forte); background: var(--ui-superficie); color: var(--ui-texto);
  font-weight: 700; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.chip-acao[aria-pressed="true"] { background: var(--ui-marca); border-color: var(--ui-marca); color: #fff; font-weight: 800; }
.chip-acao[aria-pressed="true"]::before { content: "✓"; font-weight: 900; }
.chips-chamada .chip-acao:last-child:nth-child(odd) { grid-column: 1 / -1; }

.estado-cliente {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 32px 28px; text-align: center;
}
.estado-cliente[hidden] { display: none; }
.estado-circulo {
  width: 112px; height: 112px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-chamando-tint); color: var(--ui-chamando);
}
.estado-circulo .ui-icone { width: 52px; height: 52px; stroke-width: 1.8; }
.estado-circulo.azul { background: var(--ui-aguardando-tint); color: var(--ui-aguardando); }
.estado-circulo.verde { background: #E6F4EC; color: var(--ui-ok); }
.estado-cliente h2 { font-family: var(--ui-display); font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--ui-marca); }
body.ui.tema-tech .estado-cliente h2 { color: var(--ui-texto); }
.estado-cliente p { font-size: 17px; color: var(--ui-texto-2); max-width: 320px; }
.estado-cliente .ui-btn { min-width: 220px; }
.conexao {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--ui-superficie); border: 1px solid var(--ui-linha); font-size: 14px; font-weight: 600; color: var(--ui-muted);
}
.conexao .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-ok); }

/* ── Admin: conteúdo ────────────────────────────────────── */
body.ui .admin-table { width: 100%; border-collapse: collapse; background: var(--ui-superficie); font-size: 15px; }
body.ui .admin-table th, body.ui .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--ui-linha); text-align: left; vertical-align: middle; }
body.ui .admin-table th { font-size: 13px; color: var(--ui-muted); font-weight: 700; background: var(--ui-superficie); text-transform: none; letter-spacing: 0; }
body.ui .admin-table tr:last-child td { border-bottom: 0; }
body.ui .tabela-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--ui-superficie); border: 1px solid var(--ui-linha); border-radius: var(--ui-raio);
}
body.ui .btn { background: var(--ui-marca); color: #fff; border: 0; border-radius: var(--ui-raio-sm); min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; cursor: pointer; }
body.ui .btn:hover { background: var(--ei-azul-marinho-claro); }
body.ui .btn-secondary, body.ui .btn-danger { min-height: 40px; border-radius: 10px; display: inline-flex; align-items: center; cursor: pointer; }
body.ui .admin-form input, body.ui .admin-form select, body.ui .admin-form textarea { min-height: 44px; font-size: 16px; }
body.ui .admin-form input[type="tel"], body.ui .admin-form input[type="number"], body.ui .admin-form input[type="date"],
body.ui .admin-form textarea {
  width: 100%; padding: 0.6rem 0.8rem; border: 1.5px solid var(--ei-cinza-borda); border-radius: 8px;
  background: #fff; color: #111; font-family: inherit; outline: none;
}
body.ui .admin-form input:focus, body.ui .admin-form textarea:focus { border-color: var(--ei-azul-marinho); }
body.ui .admin-form label small { font-weight: 500; color: var(--ui-muted); }
body.ui .admin-form { max-width: 640px; width: 100%; }
.acoes-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acoes-topo form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.acoes-topo input[type="date"] { min-height: 44px; padding: 0 10px; border: 1px solid var(--ui-linha-forte); border-radius: 10px; background: var(--ui-superficie); }

/* Uso do plano */
.uso-plano { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.uso-plano span { font-size: 13px; font-weight: 600; color: var(--ui-texto-2); }
.uso-plano .barra { height: 6px; border-radius: 999px; background: var(--ui-superficie-2); overflow: hidden; }
.uso-plano .barra i { display: block; height: 100%; background: var(--ui-marca); border-radius: inherit; }
.uso-plano.cheio .barra i { background: var(--ui-chamando); }

/* Lista de mesas (admin): cartões no celular, tabela no desktop */
.lista-mesas { display: flex; flex-direction: column; gap: 10px; }
.mesa-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 12px; border-radius: var(--ui-raio); background: var(--ui-superficie); border: 1px solid var(--ui-linha);
}
.mesa-item .qr { width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--ui-linha); display: block; background: #fff; }
.mesa-item .qr img { width: 100%; height: 100%; display: block; border-radius: 8px; }
.mesa-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mesa-item-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 800; }
.mesa-item-meta { font-size: 13px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesa-item-acoes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mesa-item-acoes .ui-btn { min-height: 44px; font-size: 14px; padding: 0 8px; }
.mesa-item-acoes > .ui-btn, .mesa-item-acoes .mais > summary { width: 100%; }
.mais { position: relative; }
.mais > summary { list-style: none; }
.mais > summary::-webkit-details-marker { display: none; }
.mais-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 250px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--ui-superficie); border: 1px solid var(--ui-linha); border-radius: 14px; box-shadow: var(--ui-sombra);
}
.mais-menu form { margin: 0; }
.mais-menu button {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 15px; font-weight: 600; cursor: pointer;
}
.mais-menu button:hover { background: var(--ui-fundo); }
.mais-menu .perigo { color: var(--ui-perigo); font-weight: 700; }
.mais-menu small { display: block; padding: 0 12px 8px 42px; font-size: 12px; color: var(--ui-muted); }
.mais-menu hr { border: 0; height: 1px; background: var(--ui-linha); margin: 2px 6px; }
@media (min-width: 900px) {
  .mesa-item { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px 16px; }
  .mesa-item-acoes { grid-column: auto; display: flex; }
  .mesa-item-acoes .ui-btn { padding: 0 14px; width: auto; }
}
@media (max-width: 899px) {
  .mais-menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    border-radius: 20px 20px 0 0; padding: 12px 12px calc(16px + var(--ui-safe-bottom));
  }
  .mais[open]::before { content: ""; position: fixed; inset: 0; background: rgba(8, 18, 36, .4); z-index: 19; }
  .mais-menu button { min-height: 52px; font-size: 16px; }
}

/* Ajustes sobre admin.css e estilos inline das páginas antigas do admin:
   o layout novo já dá o respiro lateral, então margens fixas saem. */
body.ui .admin-table { width: 100%; margin: 0; box-shadow: none; border-radius: 0; }
body.ui .tabela-wrap + .tabela-wrap, body.ui .tabela-wrap + * { margin-top: 16px; }
body.ui .admin-form {
  margin: 0 0 16px; padding: 20px; box-shadow: none;
  border: 1px solid var(--ui-linha); border-radius: var(--ui-raio); background: var(--ui-superficie);
}
body.ui .relatorio-cards { padding: 0; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
body.ui .rel-card { flex: 1 1 140px; min-width: 0; border: 1px solid var(--ui-linha); box-shadow: none; border-radius: var(--ui-raio); }
body.ui .relatorio-secao, body.ui .comanda-secao { padding: 20px 0 8px; }
body.ui .erro, body.ui .aviso { margin: 0 0 16px; }
@media (max-width: 699px) {
  .acoes-topo:has(form) { flex-basis: 100%; }
  .acoes-topo:has(form) form { flex: 1; }
  .acoes-topo:has(form) input[type="date"] { flex: 1; }
}

/* ── Autenticação (login, cadastro, confirmação) ────────── */
.auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
  background: var(--ui-fundo);
}
.auth-marca {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 20px 28px;
  background: var(--ei-azul-marinho); color: #fff;
}
.auth-marca img { width: 56px; height: 56px; border-radius: 50%; background: #fff; padding: 3px; flex-shrink: 0; }
.auth-marca strong { font-family: var(--ui-display); font-weight: 800; font-size: 24px; display: block; line-height: 1.1; }
.auth-marca strong b { color: var(--ei-laranja); font-weight: 800; }
.auth-marca strong .dominio { color: var(--ei-laranja); font-weight: 800; }
.auth-marca span { font-size: 14px; color: #C9D5E6; }
.auth-marca .auth-pontos { display: none; }
.auth-form-lado { display: flex; justify-content: center; align-items: flex-start; padding: 0 16px 32px; }
.auth-cartao {
  width: 100%; max-width: 440px; margin-top: -12px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 20px; border-radius: 20px;
  background: var(--ui-superficie); border: 1px solid var(--ui-linha); box-shadow: var(--ui-sombra);
}
.auth-cartao h1 { font-family: var(--ui-display); font-weight: 800; font-size: 26px; color: var(--ui-marca); line-height: 1.15; }
.auth-cartao .sub { font-size: 15px; color: var(--ui-muted); margin-top: -8px; }
.auth-cartao form { display: flex; flex-direction: column; gap: 14px; }
.auth-rodape {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; font-size: 15px; color: var(--ui-muted);
}
.auth-rodape a { font-weight: 700; }
.auth-erro {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: 12px;
  background: #FEF2F2; border: 1px solid #FECACA; color: #B42318; font-size: 14px; font-weight: 600;
}
.auth-erro .ui-icone { width: 18px; height: 18px; margin-top: 1px; }
.auth-selos { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-selo {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: var(--ui-chamando-tint); color: var(--ui-chamando-texto); font-size: 13px; font-weight: 700;
}
.auth-selo-sec {
  display: inline-flex; align-items: center; gap: 6px;
  background: #E6F4EC; color: #1E6B3D;
}
.auth-selo-sec .ui-icone { width: 14px; height: 14px; }
.senha-campo { position: relative; }
.senha-campo input { padding-right: 56px; }
.senha-campo button {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 48px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ui-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.campo .dica { font-size: 13px; color: var(--ui-muted); }
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; }
  .auth-marca {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px;
    padding: 64px 56px;
    background: linear-gradient(160deg, var(--ei-azul-marinho) 0%, var(--ei-azul-marinho-claro) 100%);
    /* Fixo na tela ao rolar: em formulários altos (cadastro), a coluna do
       formulário cresce mais que uma tela e esticaria o logo até o meio
       de um vão enorme se não travarmos a altura aqui. */
    position: sticky; top: 0; height: 100vh; height: 100dvh;
  }
  .auth-marca img { width: 96px; height: 96px; }
  .auth-marca strong { font-size: 44px; }
  .auth-marca span { font-size: 18px; }
  .auth-marca .auth-pontos { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; list-style: none; padding: 0; }
  .auth-pontos li { display: flex; gap: 10px; align-items: center; font-size: 16px; color: #E6ECF5; }
  .auth-pontos .ui-icone { color: var(--ei-laranja); }
  .auth-form-lado { align-items: center; padding: 48px 32px; }
  .auth-cartao { margin-top: 0; padding: 36px 32px; }
}

/* ── Painel: busca e detalhe lateral ────────────────────── */
.painel-ferramentas { display: flex; flex-direction: column; }
.busca {
  display: flex; align-items: center; gap: 8px; margin: 12px 16px 0;
  min-height: 44px; padding: 0 12px; border-radius: var(--ui-raio-sm);
  border: 1px solid var(--ui-linha); background: var(--ui-superficie); color: var(--ui-muted);
}
.busca:focus-within { border-color: var(--ui-marca); box-shadow: 0 0 0 3px var(--ui-marca-tint); }
.busca input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--ui-texto); }
.painel-detalhe { display: none; }
.card-mesa.selecionada { box-shadow: 0 0 0 3px var(--ui-fundo), 0 0 0 5px var(--ui-marca); }
.det-acoes { display: flex; flex-direction: column; gap: 10px; }
#det-status .ui-badge { font-size: 15px; padding: 6px 12px; }
@media (min-width: 1024px) {
  .painel-ferramentas { flex-direction: row-reverse; align-items: center; gap: 12px; padding: 18px 28px 14px; }
  .painel-ferramentas .filtros { padding: 0; flex: 1; min-width: 0; }
  .busca { margin: 0; width: 300px; flex-shrink: 0; }
}
@media (min-width: 1200px) {
  body.com-detalhe .painel-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .painel-detalhe:not([hidden]) {
    display: flex; flex-direction: column; gap: 18px;
    position: sticky; top: 72px; max-height: calc(100vh - 72px); overflow-y: auto;
    padding: 24px; margin: 0 28px 28px 0; border-radius: var(--ui-raio);
    background: var(--ui-superficie); border: 1px solid var(--ui-linha);
  }
}

/* Aviso de fim do período de teste (admin) */
.aviso-plano { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600; }
.aviso-plano .ui-icone { width: 18px; height: 18px; }
.aviso-plano-aviso { background: #FFF7E0; color: #7A4B00; border-bottom: 1px solid #F2DDA4; }
.aviso-plano-alerta { background: #FEF2F2; color: #B42318; border-bottom: 1px solid #FECACA; }
@media (min-width: 1024px) { .aviso-plano { padding: 10px 28px; } }

/* Primeiros passos após o cadastro */
.boas-vindas {
  margin-bottom: 16px; padding: 16px 18px; border-radius: var(--ui-raio);
  background: var(--ui-marca-tint); border: 1px solid var(--ui-linha);
}
.boas-vindas h2 { font-size: 17px; font-weight: 800; color: var(--ui-marca); margin-bottom: 10px; }
.boas-vindas ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
body.ui.tema-tech .boas-vindas h2 { color: var(--ui-texto); }

/* ── Minha conta / verificação ──────────────────────────── */
.conta { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.conta-secao {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: var(--ui-raio);
  background: var(--ui-superficie); border: 1px solid var(--ui-linha);
  scroll-margin-top: 80px;
}
.conta-secao h2 { font-family: var(--ui-display); font-weight: 800; font-size: 20px; color: var(--ui-marca); }
body.ui.tema-tech .conta-secao h2 { color: var(--ui-texto); }
.conta-ajuda { font-size: 15px; color: var(--ui-texto-2); }
.conta-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.conta-form .ui-btn { align-self: flex-start; }
.verif-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .verif-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verif-cartao {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: var(--ui-raio-sm); border: 1.5px solid var(--ui-linha-forte); background: var(--ui-fundo);
}
.verif-cartao.ok { border-color: #A7D7B8; background: #F1FAF4; }
body.ui.tema-tech .verif-cartao.ok { background: #13281D; border-color: #2F6B45; }
.verif-cartao h3 { font-size: 17px; font-weight: 800; }
.verif-destino { font-size: 15px; font-weight: 600; color: var(--ui-texto-2); overflow-wrap: anywhere; }
.verif-ok { background: #E6F4EC; color: #1E6B3D; }
.verif-pendente { background: #FFF7E0; color: #7A4B00; }
.verif-codigo { display: flex; flex-direction: column; gap: 6px; }
.verif-codigo label { font-size: 14px; font-weight: 700; }
.verif-linha { display: flex; gap: 8px; }
.verif-linha input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 12px;
  border: 1.5px solid var(--ui-linha-forte); border-radius: 12px; background: var(--ui-superficie);
  font-size: 22px; font-weight: 800; letter-spacing: 6px; text-align: center; color: var(--ui-texto);
}
body.ui .erro, body.ui .aviso { padding: 10px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.aviso-plano-info { background: var(--ui-marca-tint); color: var(--ui-marca); border-bottom: 1px solid var(--ui-linha); }
body.ui.tema-tech .aviso-plano-info { color: #C7D2FE; }
.aviso-plano span { flex: 1; }
.aviso-plano .ui-btn { min-height: 36px; padding: 0 12px; font-size: 14px; flex-shrink: 0; }

/* Resumo do estabelecimento (admin) */
.resumo-estab { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; max-width: 640px; }
.resumo-estab > div {
  display: flex; flex-direction: column; gap: 2px; padding: 14px;
  border-radius: var(--ui-raio); background: var(--ui-superficie); border: 1px solid var(--ui-linha);
}
.resumo-estab span { font-size: 13px; font-weight: 700; color: var(--ui-muted); }
.resumo-estab strong { font-size: 18px; }
.resumo-estab small { font-size: 13px; color: var(--ui-muted); }

/* ── Planos e assinatura ────────────────────────────────── */
.plano-resumo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px; margin-bottom: 16px; border-radius: var(--ui-raio);
  background: var(--ui-superficie); border: 1px solid var(--ui-linha);
}
.plano-resumo h2 { font-family: var(--ui-display); font-weight: 800; font-size: 24px; color: var(--ui-marca); margin: 2px 0 4px; }
body.ui.tema-tech .plano-resumo h2 { color: var(--ui-texto); }
.plano-resumo p { font-size: 15px; color: var(--ui-texto-2); max-width: 520px; }
.plano-pendente {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 16px; border-radius: var(--ui-raio);
  background: #FFF7E0; border: 1px solid #F2DDA4; color: #7A4B00;
}
.plano-pendente > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.plano-pendente span { font-size: 14px; }
.plano-pendente form { margin: 0; }
.planos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
.plano-cartao {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 18px 18px; border-radius: 18px;
  background: var(--ui-superficie); border: 1.5px solid var(--ui-linha);
}
.plano-cartao.destaque { border: 2px solid var(--ei-laranja); box-shadow: 0 10px 30px rgba(247, 100, 42, .15); }
.plano-cartao.atual { border: 2px solid var(--ui-marca); }
.plano-selo {
  position: absolute; top: -12px; left: 16px; padding: 3px 10px; border-radius: 999px;
  background: var(--ei-laranja); color: var(--ei-azul-marinho); font-size: 12px; font-weight: 800;
}
.plano-selo.atual { background: var(--ui-marca); color: #fff; }
.plano-cartao h3 { font-family: var(--ui-display); font-weight: 800; font-size: 21px; }
.plano-preco { display: flex; align-items: baseline; gap: 4px; }
.plano-preco strong { font-family: var(--ui-display); font-size: 30px; font-weight: 800; color: var(--ui-marca); }
body.ui.tema-tech .plano-preco strong { color: var(--ui-texto); }
.plano-preco span { color: var(--ui-muted); font-weight: 600; }
.plano-limite { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.plano-limite .ui-icone { width: 18px; height: 18px; color: var(--ui-muted); }
.plano-itens { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ui-texto-2); flex: 1; }
.plano-itens li { display: flex; gap: 8px; align-items: flex-start; }
.plano-itens .ui-icone { width: 16px; height: 16px; color: var(--ui-ok); margin-top: 2px; }
.plano-cartao form { margin: 0; margin-top: auto; }
.plano-cartao > .ui-btn { margin-top: auto; }

/* Chamada de assinatura no menu lateral (admin em teste) */
.menu-assinar {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.menu-assinar strong { color: #fff; font-size: 14px; }
.menu-assinar span { color: #C9D5E6; font-size: 13px; }
.menu-assinar a {
  display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 10px;
  background: var(--ei-laranja); color: var(--ei-azul-marinho); font-weight: 800; font-size: 14px; text-decoration: none;
}