/* SpotChef v0.4.0: o CSS da SpotMesa (festaqui.css + tema-escuro.css da 1.65.3), o mesmo que o SpotMoney 0.3 usa,
   e, no fim, as telas que são só do SpotChef. Tema escuro: html[data-tema="escuro"]. */
/* SpotMesa — identidade visual v1 (cores e fontes de identidade-visual/cores.json) */
:root {
  --rosa: #D6125F;
  --rosa-escuro: #B00E4E;
  --rosa-neon: #FF6FA5;
  --roxo: #2B0F4C;
  --amarelo: #FFC23D;
  --verde: #12B5AD;
  --verde-esc: #0B7A75;
  --creme: #FFF7F0;
  --lavanda: #6B6380;
  --borda: #EADFD8;
  --branco: #FFFFFF;
  --erro: #B42318;
  --r-botao: 14px;
  --r-card: 18px;
  --sombra: 0 6px 24px rgba(43, 15, 76, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--roxo);
  background: var(--creme);
}
h1, h2 { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
h2 { font-size: 1.5rem; }
a { color: var(--rosa); }
p { margin: 0 0 1em; }
.muted { color: var(--lavanda); }
.small { font-size: .9rem; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
main { padding: 24px 0 64px; }

/* Topo */
.topbar { background: var(--branco); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 10; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.topbar .logo img { height: 36px; display: block; }
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav a, .nav button { font: inherit; font-weight: 600; font-size: .95rem; color: var(--roxo); text-decoration: none; background: none; border: 0; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.nav a:hover, .nav button:hover { background: var(--creme); }
.nav form { margin: 0; }
@media (max-width: 640px) { .nav .hide-sm { display: none; } }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 800; font-size: 1rem; padding: 12px 20px; border-radius: var(--r-botao); border: 2px solid transparent; background: var(--rosa); color: var(--branco); text-decoration: none; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--rosa-escuro); }
.btn-ghost { background: transparent; color: var(--rosa); border-color: var(--rosa); }
.btn-ghost:hover { background: rgba(214, 18, 95, .06); }
.btn-sm { padding: 8px 14px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-link { background: none; border: 0; color: var(--rosa); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }

/* Cards e grade */
.card { background: var(--branco); border-radius: var(--r-card); box-shadow: var(--sombra); padding: 20px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Hero */
h1 em { font-style: normal; color: var(--rosa); } /* destaque do título fora da faixa escura (ex.: página de busca) */

/* Busca */
.search { margin-top: 24px; background: var(--branco); color: var(--roxo); border-radius: var(--r-card); padding: 16px; display: grid; gap: 12px; grid-template-columns: 1fr; box-shadow: var(--sombra); }
@media (min-width: 760px) { .search { grid-template-columns: 1.5fr minmax(76px, .55fr) 1.2fr 1fr .9fr auto; align-items: end; } }
@media (max-width: 759px) { .search { grid-template-columns: 96px 1fr; } .search > * { grid-column: 1 / -1; } }

/* Formulários */
label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
input, select, textarea { width: 100%; font: inherit; color: var(--roxo); background: var(--branco); border: 1.5px solid var(--borda); border-radius: var(--r-botao); padding: 11px 12px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(214, 18, 95, .15); }
textarea { min-height: 96px; resize: vertical; }
.field { margin-bottom: 14px; }
.field-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.check input { width: auto; }

/* Avisos */
.alert { border-radius: var(--r-botao); padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }
.alert-ok { background: #E3F6F4; color: var(--verde-esc); }
.alert-erro { background: #FDECEA; color: var(--erro); }
.alert-aviso { background: #FFF1D1; color: #7A5200; }

/* Selos de status */
.badge { display: inline-block; font-size: .8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--creme); color: var(--roxo); white-space: nowrap; }

/* Card de parceiro */

/* Tabelas */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: .85rem; color: var(--lavanda); font-weight: 700; }

.summary dt { color: var(--lavanda); font-size: .85rem; }
.summary dd { margin: 0 0 10px; font-weight: 700; }
.total { font-family: "Fredoka", sans-serif; font-size: 1.6rem; color: var(--rosa); }

.empty { text-align: center; padding: 40px 16px; color: var(--lavanda); }
.footer { padding: 24px 0 40px; color: var(--lavanda); font-size: .9rem; text-align: center; }
details summary { cursor: pointer; font-weight: 700; color: var(--rosa); }

/* Tipos de reserva e forma de pagamento */
.option { display: flex; gap: 10px; align-items: center; font-weight: 700; padding: 11px 12px; border: 1.5px solid var(--borda); border-radius: var(--r-botao); cursor: pointer; background: var(--branco); margin: 0; }
.option input { width: auto; accent-color: var(--rosa); }
.option:has(input:checked) { border-color: var(--rosa); background: #FFF0F5; }
[hidden] { display: none !important; }
code { font-size: .85em; background: var(--creme); padding: 1px 5px; border-radius: 6px; }
@media print { .topbar, .footer { display: none !important; } body { background: #fff; } .card { box-shadow: none; } }

/* Festas e convidados (v0.5) */
tr.muted td { opacity: .6; }

/* Fase C: financeiro, comissões e CRM */
.badge.fin-vencido { background: #FDE7EA; color: var(--erro); }
.flow { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.bar { width: 10px; min-height: 2px; border-radius: 4px 4px 0 0; display: block; }
.bar.in { background: var(--verde); }
.bar.out { background: var(--rosa); }
 .stack > * { min-width: 0; }
.row input { min-width: 0; max-width: 100%; }
.field-row > .field { min-width: 0; }
.field-row input { width: 100%; min-width: 0; }

/* v0.7: fotos, logomarca e mapa */ /* v0.67: faixa sólida */

/* Admin: ajustes (segunda linha do menu) e painel inicial */

/* Equipe (v0.10) */

/* Ocasiões (v0.11) */
/* v0.71: ícone ou GIF da ocasião */

/* Fornecedor que não pode entrar na reserva: só o aviso fica (v0.12) */

/* v0.13: grupos de acesso, avaliações e aniversários */
.bar { height: 8px; background: var(--creme); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: #F5A524; }
.strong { font-weight: 800; color: var(--rosa-escuro); }

/* Janela de confirmação (modal) */

/* Central de Ajuda e chamados */

/* Conversa da reserva (v0.16) */
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; padding: 2px; }

/* Identificação do usuário logado (v0.16.1) */
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--roxo); border: 1px solid var(--borda); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--creme); }
.user-caret { font-size: .75rem; opacity: .7; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .02em; flex: none; }
.avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
.avatar-parceiro { background: var(--roxo); }
.user-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; max-width: calc(100vw - 32px); background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 10px 30px rgba(43,15,76,.15); padding: 8px; z-index: 30; display: flex; flex-direction: column; }
.user-id { display: flex; gap: 10px; align-items: center; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); }
.user-id strong { display: block; color: var(--roxo); line-height: 1.2; overflow-wrap: anywhere; }
.user-email { display: block; font-size: .85rem; color: #6b5b73; overflow-wrap: anywhere; }
.user-role { display: inline-block; margin-top: 4px; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.role-parceiro { background: #ece5f5; color: var(--roxo); }
.user-panel a, .user-panel button { display: block; width: 100%; text-align: left; }
.user-panel form { margin: 0; border-top: 1px solid var(--borda); margin-top: 4px; padding-top: 4px; }
@media (max-width: 640px) { .user-first, .user-caret { display: none; } .user-menu summary { padding: 2px; border-color: transparent; } }

/* Sininho de notificações (v0.17) */

/* v0.18.1: Pix do sinal direto para o estabelecimento */

/* v0.19: fila de espera e prazos */
.prazo { border-left: 4px solid var(--amarelo, #FFC83D); background: #FFF8E6; border-radius: 10px; padding: 8px 12px; margin: 10px 0; }

/* v0.20: convite para ligar os avisos pelo WhatsApp */

/* v0.21: monetização, prêmio do parceiro e fila manual do WhatsApp */

/* v0.22: promoções dos parceiros e clientes avulsos */ /* v0.67: fundo sólido */

/* Horário de funcionamento com turnos (v0.24) */

/* v0.26: pré-cadastro por WhatsApp */

/* Festa entre amigos (v0.27) */

/* v0.28: Deixe com a SpotMesa (festa entre amigos) */ /* v0.67: fundo sólido */

/* v0.28: Indique a SpotMesa */

/* v0.28.2: quadro "Quanto custa" na Ajuda */

/* v0.29: política de cancelamento e devolução */

/* v0.29: pedido de orçamentos */

/* v0.29: selos do parceiro */

/* v0.29: guia de preços */

/* v0.29: lista de presentes */
.gift { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #f0e6ea; flex-wrap: wrap; }
.gift:first-child { border-top: 0; }

/* v0.56: menu lateral recolhível do Admin e do parceiro (desenho "Menu lateral") */
.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - 64px); }
.app-main { flex: 1 1 auto; min-width: 0; }
.app-main .container { max-width: 1180px; padding-left: 24px; padding-right: 24px; }
.sidebar { flex: 0 0 248px; width: 248px; position: sticky; top: 64px; height: calc(100vh - 64px); overflow: hidden; background: var(--side); color: var(--side-fg); display: flex; flex-direction: column; transition: width .18s ease, flex-basis .18s ease; font-family: var(--font); }
.sb-ic { width: 20px; flex: 0 0 20px; display: inline-flex; justify-content: center; line-height: 0; }
.sb-ic .ico { width: 19px; height: 19px; }
.sb-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 14px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sb-mark { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.sb-close { display: none; margin-left: auto; border: 0; background: none; color: var(--side-fg); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 6px; }
.sb-unit, .sb-search { margin: 10px 10px 0; padding: 8px 10px; border-radius: 8px; background: var(--side-hover); display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--side-fg); }
.sb-unit select { background: transparent; border: 0; color: var(--side-fg); font: inherit; font-weight: 700; padding: 0; width: 100%; cursor: pointer; }
.sb-unit select option { color: #1d1a26; }
.sb-search { margin-bottom: 4px; color: var(--side-muted); }
.sb-search label { cursor: pointer; color: var(--side-muted); }
.sb-search input { background: transparent; border: 0; color: var(--side-fg); font: inherit; font-size: 13px; padding: 0; width: 100%; outline: none; }
.sb-search input::placeholder { color: var(--side-muted); }
.sb-search:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.sb-nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.sb-item, .sb-gh { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--side-fg); text-decoration: none; font-size: 14px; cursor: pointer; list-style: none; }
.sb-item:hover, .sb-gh:hover { background: var(--side-hover); color: #fff; }
.sb-item.on { background: var(--side-active); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); } /* v1.42.2: barra de destaque no item da tela atual */
.sb-gh { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--side-muted); margin-top: 10px; }
.sb-gh::-webkit-details-marker { display: none; }
.sb-gicon { display: none; }
.sb-caret { flex: 0 0 auto; line-height: 0; transition: transform .15s; }
.sb-caret .ico { width: 14px; height: 14px; }
.sb-group[open] > .sb-gh .sb-caret { transform: rotate(90deg); }
.sb-sub { padding-left: 14px; }
.sb-foot { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; gap: 10px; }
.sb-avatar { background: var(--side-hover); font-size: 13px; }
.sb-who { display: flex; flex-direction: column; line-height: 1.25; color: #fff; font-size: 13px; }
.sb-who form { margin: 0; }
.sb-who button { background: none; border: 0; padding: 0; color: var(--side-muted); font: inherit; font-size: 12px; cursor: pointer; }
.sb-who button:hover { color: #fff; text-decoration: underline; }
.sb-collapse { margin-left: auto; flex: 0 0 auto; background: var(--side-hover); color: var(--side-fg); border: 0; border-radius: 8px; padding: 6px 7px; cursor: pointer; line-height: 0; }
.sb-collapse:hover { color: #fff; }
.sidebar a:focus-visible, .sidebar button:focus-visible, .sidebar summary:focus-visible, .sidebar select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.sb-open { display: none; align-items: center; gap: 6px; border: 1px solid var(--borda); background: var(--branco); color: var(--roxo); font: inherit; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.sb-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 39; }
.page-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); margin: 0 0 18px; }
.page-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; color: var(--lavanda); text-decoration: none; font-weight: 700; font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.page-tabs a:hover { color: var(--roxo); }
.page-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* Recolhido (computador): só os ícones, com os contadores. */
@media (min-width: 901px) {
  .sb-mini .sidebar { flex-basis: 64px; width: 64px; }
  .sb-mini .sb-label, .sb-mini .sb-caret { display: none !important; }
  .sb-mini .sb-brand { justify-content: center; padding: 14px 0; }
  .sb-mini .sb-unit, .sb-mini .sb-search { justify-content: center; margin: 10px 8px 0; padding: 8px 0; }
  .sb-mini .sb-nav { padding: 8px 6px; }
  .sb-mini .sb-item, .sb-mini .sb-gh { justify-content: center; padding: 9px 0; position: relative; }
  .sb-mini .sb-gh { height: 1px; padding: 0; margin: 8px 8px; background: rgba(255, 255, 255, .1); overflow: hidden; pointer-events: none; }
  .sb-mini .sb-gh > * { display: none !important; }
  .sb-mini .sb-foot { flex-direction: column; padding: 10px 0; }
  .sb-mini .sb-collapse { margin: 0 auto; transform: rotate(180deg); }
}
/* Celular e tablet: o menu abre por cima pelo botão Menu. */
@media (max-width: 900px) {
  .sb-open { display: inline-flex; }
  .sidebar { position: fixed; z-index: 40; top: 0; left: 0; height: 100vh; height: 100dvh; width: min(280px, 86vw); transform: translateX(-102%); transition: transform .18s ease; padding-top: env(safe-area-inset-top, 0px); }
  .sb-shown .sidebar { transform: none; }
  .sb-collapse { display: none; }
  .sb-close { display: block; }
  .app-main .container { padding-left: 16px; padding-right: 16px; }
  .topbar .logo img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .sb-caret { transition: none; } }
@media print { .sidebar, .sb-open, .sb-backdrop, .page-tabs { display: none !important; } }

/* v0.56: área do cliente mais simples */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* v0.58: tema claro do desenho do menu (DM Sans, cinzas neutros e menu escuro) com o destaque no vermelho da marca
   (#D6125F). O tema escuro (padrão) está em tema-escuro.css, com o mesmo vermelho num tom mais claro. */
:root {
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  --accent: #D6125F; --accent-2: #FF6FA5; --accent-soft: #FDE7EF;
  --bad: #c6372f; --warn: #b7791f; --ok: #1f8a5b;
  --side: #211c33; --side-fg: #d9d5e8; --side-muted: #8d87a3; --side-hover: #2d2745; --side-active: #4a1a33;
  --rosa: #D6125F; --rosa-escuro: #B00E4E; --rosa-neon: #FF6FA5;
  --roxo: #1d1a26; --creme: #f6f5f8; --lavanda: #6b6677; --borda: #e4e1ea; --branco: #ffffff;
  --verde: #1f8a5b; --verde-esc: #17694a;
  --r-botao: 8px; --r-card: 12px; --sombra: 0 2px 10px rgba(29, 26, 38, .05);
}
body { font-family: var(--font); background: var(--creme); color: var(--roxo); }
h1, h2, .total {
  font-family: var(--font); font-weight: 700; letter-spacing: -.01em;
}
.btn { font-weight: 700; }
.btn-ghost:hover { background: var(--accent-soft); }
.topbar { background: var(--branco); border-bottom-color: var(--borda); }

/* v0.57: escolha do tema no menu do usuário */
.user-panel form.user-theme { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 10px; }
.user-panel form.user-theme span { flex: 1 0 100%; font-size: .78rem; font-weight: 700; color: var(--lavanda); margin-bottom: 2px; }
.user-panel form.user-theme button { width: auto; flex: 1 1 0; text-align: center; padding: 6px 4px; border: 1px solid var(--borda); border-radius: 8px; background: transparent; color: var(--roxo); font: inherit; font-size: .82rem; cursor: pointer; }
.user-panel form.user-theme button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* v0.57: logo clara no tema escuro */
html .topbar .logo .logo-escuro { display: none; }
html[data-tema="escuro"] .topbar .logo .logo-claro { display: none; }
html[data-tema="escuro"] .topbar .logo .logo-escuro { display: block; }

/* v0.59: documentos e fotos do parceiro */

/* v0.59: indicação por e-mail */

/* v0.59: revisão de responsividade (celular e tablet) */
img { max-width: 100%; }
@media (max-width: 760px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; max-width: 100%; }
    main :not(.table-wrap) > table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (pointer: coarse) {
    .btn, button, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]), .sb-nav a, .sb-group > summary { min-height: 44px; }
    input[type=checkbox], input[type=radio] { min-width: 22px; min-height: 22px; }
}

/* v0.60: botões de entrar com redes sociais (cores de cada marca, legíveis nos dois temas) */
html[data-tema="escuro"] .social-apple { background: #fff; color: #000; border-color: #fff; }

/* v0.60: Pix da plataforma (QR Code, copia e cola e quem recebe cada valor) */

/* v0.61: cardápio com seções, ordem (arrastar) e foto por item */

/* v0.62: Planos para parceiros */
html[data-tema="escuro"] .plano-selo { background: #D6125F; color: #fff; }

/* v0.63: Mensal/Anual e vagas de fundador */
html[data-tema="escuro"] .planos-ciclo button[aria-pressed="true"] { background: #D6125F; }
html[data-tema="escuro"] .plano-economia { color: #7dd3ab; }

/* v0.64: mala direta, tipo de parceiro no CRM e ações da lista de parceiros */

/* v0.65: implantação de parceiros */
html[data-tema="escuro"] .impl-falta { color: #ef7b72; }

/* v0.68: ajudante da festa e motivo de não ir */

/* v0.69: organizadores, item e mesa por adesão, check-in da festa entre amigos */

/* v0.70: "Não precisa levar nada" */

/* v0.71: convite personalizado. As cores e a fonte vêm do tema escolhido (variáveis --cv-*, ver InviteTheme). */
html[data-tema] .convite .btn-ghost { color: var(--cv-tinta); border-color: var(--cv-linha); background: transparent; }

/* Tela de personalizar o convite */
.temas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.temas-grid label { position: relative; margin: 0; cursor: pointer; }
.temas-grid input { position: absolute; opacity: 0; }
.tema-opcao { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 2px solid var(--linha, #EADFEA); border-radius: 14px; font-size: .8rem; font-weight: 700; text-align: center; min-height: 44px; }
.tema-amostra { width: 44px; height: 44px; border-radius: 12px; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.temas-grid input:checked + .tema-opcao { border-color: var(--rosa, #D6125F); box-shadow: 0 0 0 2px var(--rosa, #D6125F); }
.temas-grid input:focus-visible + .tema-opcao { outline: 3px solid var(--rosa, #D6125F); outline-offset: 2px; }
@media (max-width: 760px) { .temas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v0.71: ícone da ocasião no convite */

/* v0.80: página inicial e busca com foco em mesa */
@media (max-width: 640px) {
  main { padding-bottom: 88px; }
}

/* v0.80: ajustes da página inicial no computador */

/* v0.80: duas portas (mesa e festa), Para comemorar e modelos da Festa entre amigos */
.door { display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; cursor: pointer; }
.door b { display: block; font-size: 1.05rem; }
.door span span { display: block; font-size: .84rem; opacity: .8; }
.door.on { border-color: var(--rosa); background: linear-gradient(135deg, rgba(214, 18, 95, .35), rgba(214, 18, 95, .10)); }
.door:focus-visible { outline: 3px solid var(--rosa-neon); outline-offset: 2px; }
@media (max-width: 420px) { .door span span { display: none; } }

/* v0.80: os três atalhos com o mesmo tamanho (no celular, ícone em cima do texto) */

/* v0.81: etapas já respondidas antes, na mesma linha de passos */

/* v0.81: Organizar festa em etapas */

/* v0.87: trocar onde vai ser */

/* v0.88: três opções de onde vai ser */

/* v0.90: painel Hoje do Admin */

/* v0.90: índice das páginas longas do Admin */

/* v0.91: cabeçalho padrão das telas do Admin e do parceiro */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.page-head-text { min-width: 0; }
.page-title { margin: 0; font-size: clamp(1.45rem, 3.2vw, 2rem); line-height: 1.15; }
.page-sub { margin: 4px 0 0; color: var(--lavanda); font-size: .92rem; max-width: 70ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* o título antigo de cada tela some: quem manda é o cabeçalho padrão */
.has-page-head .app-main .container h1:not(.keep) { display: none; }
.has-page-head .app-main .sr-only { display: none; }
/* celular: tabelas rolam de lado, abas roláveis, cabeçalho em coluna */
@media (max-width: 760px) {
   .app-main .card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-main table { min-width: 560px; }
  .page-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .page-tabs a { white-space: nowrap; }
  .page-head { align-items: flex-start; }
  .page-actions .btn { padding: 8px 12px; }
  .app-main .field-row { grid-template-columns: 1fr !important; }
}
/* v0.93: linha de formulário com três campos (vira uma coluna no celular) */

/* v0.97: linha de formulário com quatro campos */
/* v1.04: ícones das redes sociais no rodapé */
.social { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--lavanda); border: 1px solid currentColor; text-decoration: none; transition: .15s; }
.social a:hover { color: #fff; background: var(--rosa, #D6125F); border-color: var(--rosa, #D6125F); transform: translateY(-2px); }
/* v1.06: cartões das listas Minhas festas e Minhas reservas (separados, com a data em destaque e as ações dentro) */
/* v1.06: menu de ações da reserva na lista do Admin */
/* v1.10: atalhos das configurações */

/* v1.32: Prospecção: painel "Situação e observações" numa linha inteira, logo abaixo do influenciador */

/* v1.33: Prospecção de estabelecimentos (usa o painel .pp-* da 1.32) */

/* v1.39: Monte minha festa */

/* v1.41: menu lateral fixo no computador. Antes ele era "sticky" dentro da área do painel e, no fim da página
   (onde começa o rodapé, fora dessa área), subia junto com o conteúdo. */
@media (min-width: 901px) {
  .has-shell .sidebar { position: fixed; top: 64px; left: 0; bottom: 0; height: auto; z-index: 30; }
  .has-shell .app-main, .has-shell .footer { margin-left: 248px; transition: margin-left .18s ease; }
  .has-shell.sb-mini .app-main, .has-shell.sb-mini .footer { margin-left: 64px; }
}
/* v1.41: no celular, com o menu aberto, a página de trás não rola. */
@media (max-width: 900px) {
  html:has(body.sb-shown), body.sb-shown { overflow: hidden; overscroll-behavior: none; }
}
/* v1.41: botões redondos de tamanho fixo não esticam no celular (a regra de toque dava 44px de altura a todo botão). */
/* v1.41: filtros de grupo em Minhas festas (botões com o mesmo visual das abas) */
/* v1.41: mais contraste entre o fundo e os cartões (blocos) em toda a plataforma: fundo um pouco mais acinzentado,
   cartão branco com borda de 1px e sombra leve, e o título do bloco com a faixa da marca. */
:root { --creme: #eceaf1; --card-borda: #d8d3e0; --sombra: 0 1px 2px rgba(29, 26, 38, .06), 0 4px 14px rgba(29, 26, 38, .07); }
.card { border: 1px solid var(--card-borda); }
.card > h2:first-child, .card > header:first-child h2 { border-left: 4px solid var(--accent); padding-left: 10px; margin-left: -4px; }
/* v1.41.1: item "Minhas reservas e festas" mais curto no celular */
/* v1.43.4: campos que não cortam o texto nem desalinham (conferido em todas as telas do Admin e do parceiro a 1280, 1366, 1440 e 390 px).
   1. Dois campos lado a lado só quando cabem (no painel estreito cada um ocupa a linha toda) e alinhados por baixo:
      um rótulo de duas linhas não empurra mais o campo dele para baixo do vizinho. Linha com texto de ajuda embaixo do campo: alinha por cima. */
.field-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; }
/* rótulo, campo e texto de ajuda em faixas comuns da linha (subgrid): os campos ficam na mesma altura mesmo com rótulo de duas linhas ou ajuda embaixo */
@supports (grid-template-rows: subgrid) {
    .field-row { row-gap: 0; }
    .field-row > * { grid-row: span 4; }
    .field-row > .field { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .field-row > .field > label:first-child { align-self: end; }
}
/* 2. Filtros: no computador a caixa de escolha nunca fica mais estreita que a opção mais longa; no celular, cada filtro ocupa a linha */
@media (min-width: 700px) {
     form.row select { min-width: max-content; }
}
/* 3. Campos dentro de tabelas (tipos, comodidades, ocasiões, colunas do CRM, redes, acessos): largura mínima legível */
td input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=number]) { min-width: 12.5em; }
td select { min-width: max-content; }
/* 4. Data digitável (dd/mm/aaaa) e hora (hh:mm) sempre inteiras */
.campo-digitavel > input { min-width: 11ch; }
/* 5. Redes do influenciador no celular: o nome da rede em cima, perfil e seguidores lado a lado */
/* 6. Horário de funcionamento no celular: os dois horários dividem a linha e o "remover" desce */
/* 7. Busca do Financeiro: o texto de exemplo inteiro */
/* 8. Linha com e-mail: o endereço inteiro (a linha vira uma coluna mais cedo) */
.field-row:has(> .field > input[type=email]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* 9. Contas a pagar e a receber: a linha "pago … · falta …" quebra, e a coluna Status (Pagar, Excluir) não sai da tabela */
table.fin-list td[data-label="Valor"] .muted { white-space: normal; }

/* v1.44.1: Configurações como a única entrada dos ajustes: busca, blocos de cartões e o caminho de volta nas telas de ajuste */

/* v1.44.2: a situação de cada cartão de Configurações (verde em dia, amarelo atenção, cinza desligado, vermelho problema) */
html[data-tema="escuro"] .cfg-ok { background: #123222; color: #8FE0AE; border-color: #1F5236; }
html[data-tema="escuro"] .cfg-aviso { background: #3A2E0E; color: #F5D27A; border-color: #5B4816; }
html[data-tema="escuro"] .cfg-desligado { background: #26232F; color: #B7B1C6; border-color: #3A3548; }
html[data-tema="escuro"] .cfg-problema { background: #3D1616; color: #FFB4B4; border-color: #6B2424; }
html[data-tema="escuro"] .cfg-alerta { background: #3D1616; color: #FFD0D0; border-color: #6B2424; }
/* v1.44.3: o menu lateral começa no alto da tela, com a logo; a barra de cima (sininho e conta) fica só sobre o conteúdo.
   Antes a barra ocupava a largura toda e o menu começava 64px abaixo, com a logo repetida ("S SpotMesa · Admin"). */
.sb-brand { height: 64px; flex: 0 0 64px; box-sizing: border-box; padding: 0 12px 0 16px; gap: 8px; }
.sb-logo { display: flex; align-items: center; min-width: 0; line-height: 0; border-radius: 8px; }
.sb-logo-full { height: 26px; width: auto; display: block; }
.sb-logo-mini { display: none; width: 34px; height: 34px; border-radius: 8px; }
.sb-area { flex: 0 1 auto; margin-top: 7px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) {
  .has-shell .sidebar { top: 0; }
  .has-shell .topbar { margin-left: 248px; transition: margin-left .18s ease; }
  .has-shell.sb-mini .topbar { margin-left: 64px; }
  .has-shell .topbar .logo { display: none; }
  .has-shell .topbar .container { justify-content: flex-end; max-width: none; padding-left: 24px; padding-right: 24px; }
  .sb-mini .sb-brand { padding: 0; }
  .sb-mini .sb-logo-full, .sb-mini .sb-area { display: none; }
  .sb-mini .sb-logo-mini { display: block; }
}
@media (prefers-reduced-motion: reduce) { .has-shell .topbar { transition: none; } }
/* v1.45.0: lotação por dia e o selo do happy hour */
html[data-tema="escuro"] .hh-badge { background: #3A2E0E; color: #F5D27A; }
html[data-tema="escuro"] .tcard-hh, html[data-tema="escuro"] .slot-hh-tag { color: #F5D27A; }
/* v1.45.0: fotos dos pacotes */

/* v1.45.0: mala direta (editor, filtros, datas comerciais) */

/* v1.45.1: pedido antecipado — faixa "A PAGAR NO LOCAL", etiqueta de cada item e o selo "a receber no local" */

/* v1.45.1: telas em lista + um formulário só (Pacotes, Cardápio, Cupons) */

/* v1.45.2: seletor de dia e horário só com horários livres */

/* v1.46.0: pedido em passos — letra e toques maiores, cartões, resumo e botão fixos embaixo */

/* v1.46.1: cartões do pedido sem texto sobreposto (o texto quebra a linha; o selo fica numa linha própria) */
/* v1.46.1: selo discreto dos parceiros em Destaque na busca (vêm primeiro) */

/* v1.46.1: pacotes em cartões completos (página do lugar e pedido) */

/* v1.46.1: cardápio em cartões (foto à esquerda no celular, grade no computador) */
/* v1.46.1: ilustração da SpotMesa no lugar da foto que falta, com o selo "Imagem ilustrativa" */

/* v1.46.1: Duração com − e + (mesmo tamanho do "Quantas pessoas?") e o horário grande da festa em casa */
/* v1.46.1: festa entre amigos, lugares da SpotMesa em cartões (destaque primeiro) */
/* v1.46.1: cardápio da página em cartões com a foto grande em cima (2 colunas no celular, 3 no computador);
   no pedido, foto maior e o selo "Imagem ilustrativa" como faixa fina, sem cobrir a ilustração */
/* v1.46.1: no painel, a miniatura sem foto um pouco maior e com o selo; o lembrete não cobre o "Visível" */

/* v1.47.0: pizzas — quadro de tamanhos e cobrança, grade de preço do sabor, recorte da foto, painel "Montar pizza" e a lista no pedido */

/* v1.47.0: busca — barra compacta depois de buscar, título dos resultados e cartão inteiro tocável */
/* v1.47.0: tela de sucesso — o WhatsApp diz para que serve, com a prévia da mensagem; e o topo do celular sem quebrar */
.topbar .nav { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 460px) {
  .topbar .nav { gap: 10px; }
}

/* v1.47.1: mesa com comida (o passo da festa só com o cardápio), "+ Adicionar" no cardápio da página e o botão fixo cheio */
/* v1.47.1: Pacotes e Cardápio em cartões que abrem um por vez (no pedido e na página) */ /* v1.47.3: "+ Adicionar" já antes do horário */
/* v1.47.1: formulário do item: "Mais opções" recolhido e a promoção como escolha */
/* v1.47.2: Pacotes e Cardápio para consulta dentro do pedido (passo 1); Mesa/Festa empilhados no celular; resumo acima do botão */
/* v1.47.3: Dia e pessoas → O que você quer? → Horário → Pacote ou Cardápio → Confirmar */
/* v1.47.4: cartão da busca com as fotos em carrossel e "📍 Ver no mapa"; o horário leva direto ao pedido */

/* v1.47.5: o cartão padrão de lugar (fotos em carrossel e "Ver no mapa") também em Para comemorar e Promoções de hoje */ /* v1.47.5: o botão depois dos atalhos */

/* v1.47.6: a promoção de agora no cartão do lugar, em uma linha, com "+1 promoção" */

/* v1.47.6: veio de um horário: só o pedido na página; fotos, mapa e avaliações em "Ver fotos e informações" */

/* v1.47.6: a avaliação no cartão do lugar (estrelas com meia estrela, "4,7" e "Ver avaliações (128)") e o painel */
.est { font-size: 1em; background: linear-gradient(90deg, #F5B301 var(--p), rgba(140, 130, 155, .45) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* v1.47.6: página pública do lugar (sem o pedido, com "Reservar" fixo) e o pedido em /reservar */
 body:has(.pl-reservar-btn) footer { padding-bottom: 90px; }
/* v1.47.7: festa no lugar: a linha dos pacotes no cartão */

/* v1.47.8: Organizar festa aberto como a mesa: a ocasião em atalhos pequenos e opcionais */

/* v1.47.8: "Toque num horário para reservar" sem emoji, na fonte do corpo, peso 600, 16px, cor de texto secundário */

/* v1.47.9: a Duração no último passo, logo abaixo do resumo */

/* v1.47.9: carrossel da página pública: no celular só o dedo; no computador, setas discretas ao passar o mouse e arrastar */
/* v1.47.9: Duração e "Termina às" só na festa; na mesa, nada a escolher */

/* v1.47.10: página pública com "‹ Voltar" (a tela que chamou) e "Reservar" no rodapé */ /* v1.47.10: a página pública numa coluna no PC, com o rodapé centralizado */

/* v1.47.12: a tela da reserva sem repetição */
/* v1.47.13: tela da reserva: Agenda, Alterar e Cancelar numa linha; painéis (cancelar e mensagens); miniatura do convite */
[data-tema="escuro"] .sucesso-linha .btn.btn-cancelar { background: transparent; color: #ff7b7f; border-color: rgba(255, 123, 127, .55); }
 [data-tema="escuro"] .painel-acoes .btn.btn-danger { background: #c4262c; border-color: #c4262c; color: #fff; }
/* v1.47.14: lista de convidados com limite, lista de espera, aumento e o convite grande */
[data-tema="escuro"] .lista-conta.cheia strong { color: #ff7b7f; }
/* v1.47.16: aviso no alto da tela inicial (ex.: reserva cancelada) */
/* v1.47.17: os horários a mais abrem no próprio cartão */
/* v1.47.17: os campos da busca abertos em cima dos resultados, compactos */
/* v1.47.17: "Como quer reservar?" no cartão da busca */
/* v1.47.17: as comodidades no cartão do lugar */
/* v1.47.17: o horário do dia e "Mais informações" no cartão do lugar */
[data-tema="escuro"] .card-aberto { color: #4ade80; }
[data-tema="escuro"] .card-fechado { color: #ff7b7f; }
/* v1.47.18: regras da casa (página do lugar) e a opção para mais gente no cartão */
/* v1.47.19: Ver cardápio e Ver pacotes no cartão da busca, e as páginas de consulta */
/* v1.47.20: "Escolha o horário" acima dos horários do cartão */

/* v1.47.21: tipo do lugar e "Novo na SpotMesa" juntos em cima da foto, no alto à esquerda */
/* v1.47.22: Admin › Aparelhos */
/* v1.48.0: cartão compacto da busca (modelo A): foto pequena à esquerda e o resto em 5 linhas */
html[data-tema="escuro"] .tca-festa { color: var(--amarelo); }
/* a ordem da lista */
/* a folha do lugar: sobe de baixo no celular; no PC fica ao lado da lista */
@media (min-width: 1100px) {
    /* lista à esquerda e o lugar aberto à direita (a lista continua rolando) */
}
/* v1.48.0: no celular, a busca aberta fica compacta (campos baixos, rótulos pequenos, pessoas numa linha só) */
/* v1.48.0: cartão mais baixo no celular; os horários sempre com o "+" à vista */
/* v1.48.0: Reservar mesa | Festa no lugar em cima da busca (a Início é a busca) e a ocasião em atalhos */
/* v1.48.1: três botões numa linha: Reservar mesa | Festa no lugar | Festa em casa */
/* v1.48.2: Lista | Mapa. No celular o mapa ocupa a tela (com "☰ Lista" em cima); no PC fica ao lado da lista */
html[data-tema="escuro"] .vista-chave button.on { background: #efedf5; color: #15131c; }
/* v1.48.3: o "+" do cartão sempre visível (antes ficava rosa sobre rosa ao tocar ou passar o mouse) e o texto branco em todo horário marcado */
/* v1.49.0: escolher e enviar na folha do lugar */
/* v1.49.1: o convite em áudio */
/* v1.49.2: Admin › Configurações › Áudio e vídeo (ffmpeg) */ [data-tema="escuro"] .md-ok { color: #4ade80; } [data-tema="escuro"] .md-nao { color: #ff7b7f; } /* v1.49.2: Aguardando aprovação (Em breve) */
/* v1.49.2: Aguardando aprovação e boas-vindas no WhatsApp viram cartões no celular */
/* v1.49.3: as boas-vindas na linha do cliente aprovado do Em breve */
/* v1.49.4 / v1.49.5: Músicas do convite (Admin): no PC e no tablet, uma linha por música com cabeçalho único; no celular, cartões */ /* v1.49.4 */
/* v1.49.4: os botões de música cabem no celular de 360 (o rádio não estica e o nome quebra dentro) */ /* uma por linha no celular: o nome inteiro, sem quebrar a palavra */
/* v1.49.5: efeitos no convite (Admin) e o efeito de voz no gravador */ /* v1.49.5: nomes curtos, duas colunas */
/* v1.49.5.1: a tela do link de boas-vindas e o código primeiro no Entrar */
/* v1.57.1: o código no e-mail como link discreto embaixo do Entrar */
/* v1.49.6: o convite em vídeo (gravar, editar, gerar e assistir) */
/* v1.49.7: o link na bio da casa */
/* v1.49.7.1: links das casas no Admin (relatório e a ficha do parceiro) */ /* v1.49.7.1: no celular, os botões descem */
/* v1.49.7.1: os links na bio (Divulgar e a ficha do Admin) */
/* v1.49.8: Serviços para a festa (Festa em casa) */
/* v1.49.8.1: o aviso de sessão vencida (no lugar da contagem do sininho) */
/* v1.49.9: o linktree da SpotMesa (/links), feito para o celular */
/* v1.49.9: Links das casas: o bloco da SpotMesa no topo */
/* v1.49.9: os links da bio alterados pela equipe */
/* v1.49.9: a faixa do painel do parceiro aberto pela equipe */
/* v1.49.9: Convidar no WhatsApp (Link, Imagem, Vídeo e Áudio lado a lado) */
/* v1.49.9: os botões Reservar mesa | Festa no lugar | Festa em casa (partials.portas): o ícone sempre visível no selecionado */
/* em Minhas reservas e festas: a versão compacta, como filtro (4 com o Todas) */
/* v1.49.9: o Liberar ações sensíveis abre dentro da faixa (claro e escuro), sem passar da tela */
/* v1.49.10: a roleta de prêmios */
/* v1.49.10.1: Textos legais: qual documento está sendo editado, o histórico e o restaurar */
/* v1.49.11: a bolinha "?" de ajuda (padrão do formulário do INPI): ao lado do rótulo, abre com toque, fecha no X, fora ou Esc */ /* área de toque de 44 px */
:root[data-tema="escuro"] .aj-balao { background: #F4EEFF; color: #2B0F4C; } :root[data-tema="escuro"] .aj-balao::before { border-bottom-color: #F4EEFF; } :root[data-tema="escuro"] .aj-x { color: #2B0F4C; }
/* v1.49.11: a ajuda dos horários com desconto no cartão (no lugar da dica que só aparecia no mouse) e a tela do Admin */ /* v1.49.11: acima do link que cobre o cartão */ /* alinhado com os três botões */
/* v1.49.11.1: no tema escuro, as caixas claras novas ficavam com o texto claro em fundo claro */
:root[data-tema="escuro"] .bl-equipe { background: rgba(91, 46, 158, .28); border-color: #6B45B0; color: inherit; }
:root[data-tema="escuro"] .bl-tag-equipe { color: #CDB6FF; }
:root[data-tema="escuro"] .tl-saiu { color: #FFB4B4; background: rgba(255, 80, 80, .14); }
:root[data-tema="escuro"] .tl-entrou { color: #A8F0C0; background: rgba(60, 200, 120, .14); }
/* v1.49.11.1: o balão da ajuda preso à tela visível (fixed), sempre dentro dela; a setinha aponta para o "?" */
:root[data-tema="escuro"] .aj-balao.aj-cima::before { border-top-color: #F4EEFF; }
/* v1.49.11.1: o "?" redondo (o botão herdava a altura mínima de toque e ficava oval) e na linha do rótulo */
/* v1.49.11.1: os links de gravar convite (tela da reserva) */
/* v1.49.11.1: os menus flutuantes (Ações ▾ e outros): por cima de tudo, nunca cortados; no celular, folha de baixo */ /* nem os botões de grupos (Ordem da lista) mudam o tamanho */ /* a última palavra e o "?" na mesma linha */
/* v1.49.11.2: Vou / Talvez / Não vou grandes, "Confirmar resposta" e a tela de sucesso do convidado */
/* v1.49.11.2: o que é redondo fica redondo (varredura p149112/redondos.mjs em 360, 390, 768 e 1366) */ /* área de toque de 44 px */
input[type="radio"], input[type="checkbox"] { flex-shrink: 0; aspect-ratio: 1 / 1; }
.campo-digitavel > .btn { box-sizing: border-box; flex: none; width: 42px; height: 42px; min-height: 0; padding: 0 !important; aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; }
/* v1.49.11.3: a legenda curta embaixo do título dos botões (no lugar do "O que é cada um?"); no máximo 2 linhas por botão */ /* a legenda inteira no computador */
/* v1.49.11.3: o marcador do mapa com o nome do lugar e a etiqueta (nota ou Novo) ao lado */
/* v1.49.11.4: o botão único dos filtros, os chips dos ativos e a folha (de baixo no celular, painel no computador) */
/* v1.49.11.4: o fim da página (rodapé com as redes) nunca fica atrás da barra de baixo do celular */
@media (max-width: 640px) { body:has(.bnav) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } body:has(.bnav) main { padding-bottom: 12px; } }
/* v1.49.11.5: Ajuda › Mais da SpotMesa e o título de seção no menu do usuário */
.footer .rodape-linha { display: inline-block; white-space: nowrap; font-size: max(13px, .85rem); }
/* v1.61.8.14: Indique a um amigo no rodapé */
/* v1.49.11.5: as abas da página Planos (Para o seu negócio | Para você) */
/* v1.49.11.5: o 🏆 no cartão e o passo 1 do cadastro (a escolha do plano) */

/* v1.51.0: "Perto de mim" ao lado do rótulo Cidade e o aviso da cidade achada */

/* v1.51.0: Momentos (cards de foto rolando para o lado no celular; 5 a 7 à vista no computador) */

/* v1.51.0: Admin › Momentos */
/* v1.57.1: Admin › Tipos de cozinha */

/* v1.51.0: login por SMS */

/* v1.52.0: painel do parceiro, cartão "Cardápio digital" */
/* v1.52.3: prévia do cardápio digital no painel, num celular */
/* v1.56.0: a miniatura nos editores de links (Divulgar, ficha do parceiro e Links da SpotMesa) e a frase do /links */

/* v1.59.8: Admin e parceiro aproveitam a tela. Quadros, tabelas e painéis vão até a borda; o resto fica largo, com texto em até 90 caracteres. */
.app-main .container { max-width: 1400px; }
.app-main.pg-larga .container, .app-main .container:has(table, .table-wrap, .kanban, .counters) { max-width: 2200px; }
.app-main .container p, .app-main .container li { max-width: 90ch; }
.app-main.pg-larga .container form.card:not(:has(table)), .app-main .container:has(table, .table-wrap, .kanban, .counters) form.card:not(:has(table)) { max-width: 1000px; }
/* v1.59.8: quadro do CRM */

/* v1.59.10.2: borda rosa só nas abas Reservar mesa, Festa no lugar e Festa em casa. Horários, filtros e opções ficam neutros; o selecionado ganha fundo um pouco mais claro e texto rosa. */
:root { --sec: var(--rosa); }
html[data-tema="claro"] { --sec: #B00E4E; }
html[data-tema="escuro"] .slot.on, html[data-tema="escuro"] .sp-hora.on, html[data-tema="escuro"] .slot:hover, html[data-tema="escuro"] .sp-hora:hover { color: #FFA3C3; }
html[data-tema="escuro"] .sb-quick.on, html[data-tema="escuro"] .ordem-chips button.on, html[data-tema="escuro"] .sp-rapido.on, html[data-tema="escuro"] .sp-dia.on, html[data-tema="escuro"] .vista-chave button.on { color: #FFA3C3; }
html[data-tema] .sb-when .btn { background: transparent; border: 1.5px solid var(--borda); color: inherit; }
html[data-tema] .vista-chave button.on { background: color-mix(in srgb, var(--roxo) 14%, transparent); color: var(--sec); }
html[data-tema="escuro"] .vista-chave button.on { color: #FFA3C3; }

/* v1.60.0.3: entrada única da reserva */

/* v1.61.4: os painéis (Admin, parceiro, prestador e influenciador) usam a largura do CRM, colados no menu. Os quadros alinham nas duas bordas; só os campos guardam uma largura boa de ler. */
.app-main.pg-painel .container { max-width: 2200px !important; margin-left: 0; }
.app-main.pg-painel .container .card:not(.empty) { max-width: none !important; }
.app-main.pg-painel .card .field, .app-main.pg-painel .card .field-row { max-width: 980px; }
.app-main.pg-painel .container [style*="max-width"]:has(.card, .table-wrap) { max-width: none !important; }

/* Tema escuro (v0.58.1). Liga com <html data-tema="escuro"> (o layout decide: aparelho ou escolha da pessoa). Gerado do festaqui.css. */
html[data-tema="escuro"] {
  color-scheme: dark;
  --rosa: #FF7AA8; --rosa-escuro: #FFA3C3; --rosa-neon: #FFA3C3; --accent: #FF7AA8; --accent-2: #FFA3C3; --accent-soft: #3d1a2a;
  --roxo: #efedf5; --creme: #15131c; --lavanda: #a09bb0; --borda: #2f2b3d; --branco: #1e1b28;
  --verde: #4fc08b; --verde-esc: #7dd3ab; --bad: #ef7b72; --warn: #e3b04f;
  --side: #100e18; --side-hover: #1c1829; --side-active: #42182b;
  --sombra: 0 2px 12px rgba(0, 0, 0, .35);
}
html[data-tema="escuro"] body { background: var(--creme); color: var(--roxo); }
html[data-tema="escuro"] { --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --r-botao: 8px; --r-card: 12px; }
html[data-tema="escuro"] body { font-family: var(--font); }
html[data-tema="escuro"] :is(h1, h2, .total) { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }
html[data-tema="escuro"] .tabs a.active { background: #D6125F; border-color: #D6125F; color: #fff; }
html[data-tema="escuro"] .indique-faixa { background: #2a1f45; color: #fff; border-top: 1px solid #3b3160; }
html[data-tema="escuro"] .indique-faixa .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
html[data-tema="escuro"] input, html[data-tema="escuro"] select, html[data-tema="escuro"] textarea { background: #15131c; color: var(--roxo); border-color: #3a3550; }
html[data-tema="escuro"] input::placeholder, html[data-tema="escuro"] textarea::placeholder { color: #7d778f; }
html[data-tema="escuro"] .btn { color: #fff; background: #D6125F; }
html[data-tema="escuro"] .btn:hover { background: #E8336F; }
html[data-tema="escuro"] .btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
html[data-tema="escuro"] .topbar { background: #1a1724; border-bottom-color: var(--borda); }
html[data-tema="escuro"] table th, html[data-tema="escuro"] table td { border-color: var(--borda); }
html[data-tema="escuro"] [style*="background:#fff" i], html[data-tema="escuro"] [style*="background: #fff" i], html[data-tema="escuro"] [style*="background:#ffffff" i], html[data-tema="escuro"] [style*="background: #ffffff" i] { background: var(--branco) !important; }
html[data-tema="escuro"] [style*="color:#2B0F4C" i], html[data-tema="escuro"] [style*="color: #2B0F4C" i] { color: var(--roxo) !important; }
html[data-tema="escuro"] svg text[fill="#6b5b73"] { fill: #a09bb0; }
html[data-tema="escuro"] img { opacity: .95; }
html[data-tema="escuro"] .hero { background: #211c33; color: #efedf5; }
html[data-tema="escuro"] .hero h1, html[data-tema="escuro"] .hero p { color: #efedf5; }
html[data-tema="escuro"] .btn-dark, html[data-tema="escuro"] .badge-concluida { background: #3b3160; color: #efedf5; }
html[data-tema="escuro"] .tabs a.active { background: #D6125F; color: #fff; border-color: #D6125F; }
html[data-tema="escuro"] .partner-card .cover { background: linear-gradient(135deg, #D6125F 0%, #211c33 100%); }
html[data-tema="escuro"] .avatar { background: #2b2547 !important; color: #efedf5 !important; }
html[data-tema="escuro"] .user-panel { background: var(--branco); }
html[data-tema="escuro"] .user-panel form.user-theme button.on { background: #D6125F; border-color: #D6125F; }

html[data-tema="escuro"] .btn { color: #fff; }
html[data-tema="escuro"] .btn-dark { background: #2a1f45; }
html[data-tema="escuro"] .hero { background: #2a1f45; color: #fff; }
html[data-tema="escuro"] .hero h1 { color: #fff; }
html[data-tema="escuro"] .alert-ok { background: #123a36; color: #9fe8de; }
html[data-tema="escuro"] .alert-ok a { color: #c6f3ec; }
html[data-tema="escuro"] .alert-erro { background: #4a1a26; color: #ffb8c6; } /* v1.18: contraste */
html[data-tema="escuro"] .alert-erro a { color: #ffd3dc; }
html[data-tema="escuro"] .alert-aviso { background: #423d43; }
html[data-tema="escuro"] .badge-solicitada { background: #423d43; }
html[data-tema="escuro"] .badge-aceita { background: #423b48; }
html[data-tema="escuro"] .badge-fila { background: #3e3d4a; color: #c0cdde; }
html[data-tema="escuro"] .badge-confirmada,
html[data-tema="escuro"] .badge-ativo { background: #3e3e49; }
html[data-tema="escuro"] .badge-recusada,
html[data-tema="escuro"] .badge-cancelada,
html[data-tema="escuro"] .badge-suspenso { background: #3f3c48; }
html[data-tema="escuro"] .badge-concluida { background: #2a1f45; color: #fff; }
html[data-tema="escuro"] .badge-pendente { background: #423d43; }
html[data-tema="escuro"] .partner-card .cover { background: linear-gradient(135deg, var(--rosa) 0%, #2a1f45 100%); }
html[data-tema="escuro"] .tabs a.active { background: #2a1f45; color: #fff; border-color: #2a1f45; }
html[data-tema="escuro"] .option:has(input:checked) { background: #423d49; }
html[data-tema="escuro"] .package-box { background: #423d49; border: 1.5px solid #2f2b3d; }
html[data-tema="escuro"] body { background: #1e1b28; }
html[data-tema="escuro"] .badge.rsvp-sim { background: #3e3e47; }
html[data-tema="escuro"] .badge.rsvp-nao { background: #423c47; color: #eac1cb; }
html[data-tema="escuro"] .badge.rsvp-talvez { background: #423e44; }
html[data-tema="escuro"] .badge.fin-aberto,
html[data-tema="escuro"] .badge.com-prevista { background: #423d43; }
html[data-tema="escuro"] .badge.fin-vencido { background: #423c47; }
html[data-tema="escuro"] .badge.fin-pago,
html[data-tema="escuro"] .badge.com-paga { background: #3e3e49; }
html[data-tema="escuro"] .badge.com-liberada { background: #423b48; }
html[data-tema="escuro"] .badge.fin-cancelado,
html[data-tema="escuro"] .badge.fin-estornado,
html[data-tema="escuro"] .badge.com-cancelada { background: #3f3c48; }
html[data-tema="escuro"] .bar.in-plan,
html[data-tema="escuro"] .legend .in-plan { background: #343b45; }
html[data-tema="escuro"] .kanban-col { background: #413d47; }
html[data-tema="escuro"] .carousel { background: #2a1f45; }
html[data-tema="escuro"] .carousel-dots button.on { background: #1e1b28; }
html[data-tema="escuro"] .attention .n { background: #423d43; }
html[data-tema="escuro"] .attention .n.zero { background: #3e3e49; }
html[data-tema="escuro"] .review-card { border: 2px solid #2f2b3d; }
html[data-tema="escuro"] .ticket-msg.from-team { background: #423c48; border-color: #2f2b3d; }
html[data-tema="escuro"] .badge.ticket-aberto { background: #423d42; }
html[data-tema="escuro"] .badge.ticket-respondido { background: #3e3c4a; }
html[data-tema="escuro"] .badge.ticket-resolvido { background: #3d3e48; }
html[data-tema="escuro"] .chat-msg.mine,
html[data-tema="escuro"] .chat-msg.other-partner { background: #423c48; border-color: #2f2b3d; }
html[data-tema="escuro"] .avatar-parceiro { background: #2a1f45; }
html[data-tema="escuro"] .role-cliente { background: #423c48; }
html[data-tema="escuro"] .role-parceiro { background: #3f3b49; }
html[data-tema="escuro"] .role-equipe { background: #3d3e48; }
html[data-tema="escuro"] .bell-item.unread { background: #423e49; }
html[data-tema="escuro"] .bell-item.unread:hover { background: #423c48; }
html[data-tema="escuro"] .bell-text span { color: #cecad0; }
html[data-tema="escuro"] .pix-box { background: #1e1b28; }
html[data-tema="escuro"] .pix-value { color: #c4bccd; }
html[data-tema="escuro"] .fila-box { background: #403e4a; }
html[data-tema="escuro"] .prazo { background: #1e1b28; }
html[data-tema="escuro"] .wa-box { border: 1px solid #2f2b3d; background: #1e1b28; }
html[data-tema="escuro"] .wa-status-erro { color: #eac1be; }
html[data-tema="escuro"] .wa-bubble { background: #3e3f46; }
html[data-tema="escuro"] .badge-promo { background: #423b48; }
html[data-tema="escuro"] .news-card { background: #2a2536; } /* v0.67: fundo sólido (antes 3,87:1 no topo) */
html[data-tema="escuro"] .badge-pre-enviado { background: #423d43; }
html[data-tema="escuro"] .badge-pre-preenchido { background: #423b48; }
html[data-tema="escuro"] .badge-pre-cadastrado { background: #3e3e49; }
html[data-tema="escuro"] .badge-pre-descartado { background: #3f3c48; }
html[data-tema="escuro"] .kind-chip:has(input:checked) { background: #423d49; }
html[data-tema="escuro"] .stepper-btn:active { background: #423b48; }
html[data-tema="escuro"] .amigos-note { background: #423e45; }
html[data-tema="escuro"] .bring.mine { background: #423d49; }
html[data-tema="escuro"] .pot-choice.on { background: #3f3e49; }
html[data-tema="escuro"] .amigos-cta { background: #2a1f45; }
html[data-tema="escuro"] .amigos-promo { background: #2a2536; border: 1.5px solid #3a3450; } /* v0.67: fundo sólido */
html[data-tema="escuro"] .managed-opt { background: #423d49; }
html[data-tema="escuro"] .gestao-card { background: #2c1824; } /* v0.67: fundo sólido */
html[data-tema="escuro"] .gestao-card.gestao-on { background: #10302c; }
html[data-tema="escuro"] .gestao-row-nova { background: #1e1b28; }
html[data-tema="escuro"] .indique-faixa { background: #2a1f45; }
html[data-tema="escuro"] .policy-box { background: var(--creme, #423e48); }
html[data-tema="escuro"] .cancel-confirmed { border-top: 1px solid #2f2b3d; }
html[data-tema="escuro"] .refund-box { background: #423d49; }
html[data-tema="escuro"] .quote-price { color: #e7bccc; }
html[data-tema="escuro"] .quote-cta { background: #1e1b28; }
html[data-tema="escuro"] .pbadge { background: #403d4a; color: #cdc3e7; }
html[data-tema="escuro"] .pbadge-premio { background: #423d42; }
html[data-tema="escuro"] .pbadge-destaque { background: #423b48; color: #e7bccc; }
html[data-tema="escuro"] .pbadge-avaliado { background: #3e3e4a; color: #bad1dd; }
html[data-tema="escuro"] .pbadge-rapido { background: #3e3e48; }
html[data-tema="escuro"] .pbadge-promo { background: #3e3e49; }
html[data-tema="escuro"] .feature-card { background: #1e1b28; }
html[data-tema="escuro"] .price-range { background: #403c47; }
html[data-tema="escuro"] .gift { border-top: 1px solid #2f2b3d; }
html[data-tema="escuro"] .gift-admin { border-top: 1px solid #2f2b3d; }
html[data-tema="escuro"] .gift-form { border-top: 1px solid #2f2b3d; }
html[data-tema="escuro"] .price-table tr { border-bottom: 1px solid #2f2b3d; }
html[data-tema="escuro"] .sb-unit select option { color: #c0bfc2; }
html[data-tema="escuro"] .next-espera { background: #423e44; border-color: #2f2b3d; }
html[data-tema="escuro"] .next-ok { background: #3e3e48; border-color: #2f2b3d; }
html[data-tema="escuro"] .hl-act.primary { background: #D6125F; border-color: #D6125F; color: #fff !important; }
html[data-tema="escuro"] .hl-tag { background: #3d1a2a; }
html[data-tema="escuro"] .hl-ok { background: #16301f; color: #7dd3ab; }
html[data-tema="escuro"] .hl-tip { background: #3a2d12; }
html[data-tema="escuro"] .hl-funnel div, html[data-tema="escuro"] .hl-bar .track { background: #15131c; }
html[data-tema="escuro"] .hl-tabs a.on { background: #D6125F; border-color: #D6125F; color: #fff; }
/* v0.59: check-in, convidado que chegou legível no escuro */
html[data-tema="escuro"] .ci-item.in { background: #10302c; border-color: #12B5AD; }
html[data-tema="escuro"] .ci-item.in .ci-status { color: #7dd3c8; }
/* v0.60: aviso amarelo legível no tema escuro (texto claro sobre fundo âmbar escuro) */
html[data-tema="escuro"] .alert-aviso { background: #3a2d12; color: #f3d48a; }
html[data-tema="escuro"] .alert-aviso a { color: #ffd98a; }

/* v1.32: selos amarelos legíveis no tema escuro (o texto marrom do tema claro sumia no fundo escuro) */
html[data-tema="escuro"] .badge.fin-vencido { color: #ffb8c6; }
html[data-tema="escuro"] .badge.ticket-respondido { background: #2a3350; color: #b9cbff; }
html[data-tema="escuro"] .badge.ticket-resolvido { background: #3e3e49; color: var(--verde-esc); }/* v1.41: mais contraste entre o fundo e os cartões no tema escuro: fundo mais escuro, cartão mais claro com borda visível. */
html[data-tema="escuro"] { --creme: #0e0c14; --branco: #221e2e; --card-borda: #3b3550; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35); }
html[data-tema="escuro"] .card { border-color: var(--card-borda); }

/* ==========================================================================
   Telas de painel da família Spot (as mesmas do SpotMoney), desenhadas com as mesmas variáveis da SpotMesa
   (--roxo é a cor do texto, --branco o fundo dos cartões, --creme o fundo da página,
   --lavanda o texto apagado). Trocando o tema, tudo acompanha.
   ========================================================================== */
.muted { color: var(--lavanda); }
.small { font-size: .88rem; }
.grow { flex: 1; }
[hidden] { display: none !important; }
.field-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.field-row > .field { margin-bottom: 0; }
.field-row { margin-bottom: 14px; }
.card { margin-bottom: 16px; }
.card > h2, .card > h3 { margin-top: 0; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
.erro-campo { color: var(--bad); font-size: .85rem; }
.entra { color: var(--ok); font-weight: 700; }
.sai { color: var(--bad); font-weight: 700; }
html[data-tema="escuro"] .entra { color: #5fd39a; }
html[data-tema="escuro"] .sai { color: #ff8a8a; }

/* botões que o SpotMesa não tem */
.btn-verde { background: var(--verde-esc); border-color: var(--verde-esc); color: #fff; }
.btn-verde:hover { background: var(--verde); }
.btn-perigo { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn-perigo:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.btn-sm { min-height: 0; }

/* etiquetas: as cores das do Financeiro da SpotMesa (fin-aberto, fin-vencido, fin-pago) */
.badge.ok { background: #E3F6F4; color: var(--verde-esc); }
.badge.erro { background: #FDE7EA; color: var(--erro, #B42318); }
.badge.alerta { background: #FFF1D1; color: #7A5200; }
html[data-tema="escuro"] .badge.ok { background: #173a2c; color: #6fe0a8; }
html[data-tema="escuro"] .badge.erro { background: #44202a; color: #ff9aa8; }
html[data-tema="escuro"] .badge.alerta { background: #4a3b26; color: #FFC979; }

/* números do alto das telas: os contadores da SpotMesa */
.cards-num { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-bottom: 16px; }
.num-card { background: var(--branco); border: 1px solid var(--card-borda, var(--borda)); border-radius: var(--r-card); box-shadow: var(--sombra); padding: 14px 16px; min-width: 0; }
.num-card a { text-decoration: none; color: inherit; display: block; }
.num-card .r { color: var(--lavanda); font-size: .88rem; }
.num-card .v { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; font-size: 1.6rem; line-height: 1.25; color: var(--roxo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.num-card .v.entra { color: var(--ok); } .num-card .v.sai { color: var(--bad); }
html[data-tema="escuro"] .num-card .v.entra { color: #5fd39a; } html[data-tema="escuro"] .num-card .v.sai { color: #ff8a8a; }
.num-card .d { color: var(--lavanda); font-size: .85rem; margin-top: 2px; }

/* filtros de situação e a escolha da conta: os chips do Financeiro da SpotMesa */
.abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.abas a { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--borda); font-size: .88rem; text-decoration: none; color: inherit; white-space: nowrap; }
.abas a:hover { border-color: var(--accent); }
.abas a.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
html[data-tema="escuro"] .abas a.on { color: #15131c; }
.abas a .n { opacity: .75; margin-left: 2px; font-weight: 700; }

/* filtros: a linha de campos da SpotMesa (card.filters) */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; background: var(--branco); border: 1px solid var(--card-borda, var(--borda)); border-radius: var(--r-card); box-shadow: var(--sombra); padding: 12px 14px; }
.filtros .field { margin: 0; min-width: 140px; flex: 1 1 140px; }
.filtros .field label { font-size: .8rem; color: var(--lavanda); }
.filtros input, .filtros select { padding: 8px 10px; }
.filtros > .btn { flex: 0 0 auto; }

/* tabelas */
table.lista { width: 100%; border-collapse: collapse; }
table.lista th, table.lista td { padding: 10px 8px; vertical-align: middle; }
table.lista td.num, table.lista th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lista tr.soma td { font-weight: 700; border-top: 2px solid var(--borda); border-bottom: 0; }
table.lista tr.cinza td { color: var(--lavanda); }
table.lista td .sub { display: block; font-size: .82rem; color: var(--lavanda); }
table.lista tbody tr:hover td { background: color-mix(in srgb, var(--roxo) 3%, transparent); }
table.lista input:not([type=checkbox]):not([type=radio]), table.lista select { padding: 7px 9px; min-width: 0; }
.tabela-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acoes form { margin: 0; }
.vazio { text-align: center; color: var(--lavanda); padding: 26px 10px; }

/* blocos que abrem e fecham */
details.caixa { background: var(--branco); border: 1px solid var(--card-borda, var(--borda)); border-radius: var(--r-card); box-shadow: var(--sombra); padding: 14px 18px; margin-bottom: 12px; }
details.caixa > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details.caixa > summary::-webkit-details-marker { display: none; }
details.caixa > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--lavanda); border-bottom: 2px solid var(--lavanda); transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: 2px; }
details.caixa[open] > summary::before { transform: rotate(45deg); }
details.caixa[open] > summary { margin-bottom: 14px; }

.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.grade-2 > .card { margin-bottom: 0; }

/* linhas do extrato e das conferências */
.linha-ext { border: 1px solid var(--card-borda, var(--borda)); border-radius: var(--r-card); padding: 12px 14px; margin-bottom: 10px; background: var(--branco); box-shadow: var(--sombra); }
.linha-ext .cab { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.linha-ext .cab .v { margin-left: auto; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.linha-ext .opcoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.linha-ext .opcoes form { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.linha-ext .opcoes select, .linha-ext .opcoes input { padding: 6px 8px; width: auto; font-size: .9rem; }

/* gráfico do fluxo */
.barras { display: block; width: 100%; height: auto; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--lavanda); margin-top: 6px; }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* chave da API e exemplos de código: a fonte mono da SpotMesa */
.chave { font-family: var(--mono); font-size: .9rem; background: var(--creme); border: 1px solid var(--borda); padding: 10px 12px; border-radius: var(--r-botao); word-break: break-all; }
pre.codigo { font-family: var(--mono); background: #15131c; color: #efedf5; padding: 14px; border-radius: var(--r-card); overflow-x: auto; font-size: .82rem; border: 1px solid var(--borda); }
code { font-family: var(--mono); font-size: .9em; }

/* menu lateral: o seletor de empresa igual ao de unidade da SpotMesa */
.sb-logo-full { max-width: 150px; }

/* telas de fora (entrar e criar conta) */
.pg-entrada main { min-height: calc(100vh - 160px); }
.pg-entrada h1 { font-size: 2.4rem; }

@media (max-width: 680px) {
    .filtros .field { flex-basis: calc(50% - 8px); min-width: 0; }
    .num-card .v { font-size: 1.35rem; }
}

/* a lista de contas vira cartões no celular, como no Financeiro da SpotMesa */
.campo-digitavel > input { flex: 1 1 auto; min-width: 10.5ch; }
.campo-digitavel > .btn { flex: 0 0 auto; padding: 6px 9px; }
@media (max-width: 680px) {
    table.fin-list thead { display: none; }
    .app-main table.fin-list { min-width: 0; }
    table.fin-list, table.fin-list tbody, table.fin-list tr, table.fin-list td { display: block; width: 100%; }
    table.fin-list tr { position: relative; border: 1.5px solid var(--borda); border-radius: 12px; padding: 10px 12px 10px 40px; margin: 0 0 10px; }
    table.fin-list tr.fin-vencido { border-color: var(--bad); }
    table.fin-list tr.soma { padding-left: 12px; }
    table.fin-list td { border: 0; padding: 2px 0; text-align: left !important; }
    table.fin-list td:empty { display: none; }
    table.fin-list td[data-label]::before { content: attr(data-label) ': '; color: var(--lavanda); font-size: .8rem; }
    table.fin-list td.fin-pick { position: absolute; left: 12px; top: 12px; width: auto; }
    table.fin-list td.fin-desc { font-weight: 700; padding-bottom: 4px; }
    table.fin-list tbody tr:hover td { background: none; }
    .card.tabela-rola:has(table.fin-list) { background: none; border: 0; box-shadow: none; padding: 0 !important; }
}

/* caixas de marcar sempre do tamanho delas (no SpotMesa elas ficam dentro de .check) */
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; flex: none; padding: 0; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; }
table.lista td input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-width: 0 !important; }
table.lista td form.row { flex-wrap: wrap; }
table.lista td form.row > input[name=nome] { flex: 1 1 160px !important; }
.grade-2 > * { min-width: 0; }
.app-main .grade-2 table.lista { min-width: 0; }

/* ==========================================================================
   SpotChef: o que é só do PDV/restaurante, com as mesmas variáveis (muda junto com o tema)
   ========================================================================== */
.btn-roxo { background: var(--roxo); border-color: var(--roxo); color: var(--branco); }
.btn-roxo:hover { background: color-mix(in srgb, var(--roxo) 85%, var(--branco)); }
.alert-info { background: #FFF1D1; color: #7A5200; }
html[data-tema="escuro"] .alert-info { background: #4a3b26; color: #FFC979; }
/* "Abrir o PDV" e "Financeiro" no menu lateral */
.sb-nav form { margin: 0; }
.sb-nav button.sb-item { width: 100%; background: none; border: 0; font: inherit; font-size: 14px; text-align: left; }
.sb-item.sb-acao { color: #fff; background: var(--accent); margin-bottom: 4px; }
.sb-item.sb-acao:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.sb-ext { margin-left: auto; opacity: .6; display: inline-flex; }
.sb-ext svg { width: 14px; height: 14px; }
/* comanda e impressão */
.itens-comanda td.cancelado { text-decoration: line-through; color: var(--lavanda); }
/* editor do mapa de mesas no tema escuro */
html[data-tema="escuro"] .mp-dica { background: #4a3b26; color: #FFC979; }
html[data-tema="escuro"] .mp-t { background: #173a2c; color: #6fe0a8; border-color: #6fe0a8; }
:root { --alerta: var(--warn); }
html[data-tema="escuro"] { --alerta: #FFC979; }

/* v0.5.0: a faixa do painel aberto pela plataforma (a mesma da SpotMesa) */
.pp-faixa { position: sticky; top: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 16px; background: #5B2E9E; color: #fff; font-size: .92rem; }
.pp-faixa b { color: #fff; }
.pp-faixa .pp-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-faixa .pp-acoes form { margin: 0; }
.pp-faixa .btn, html[data-tema="escuro"] .pp-faixa .btn { background: #fff; color: #5B2E9E; border-color: #fff; }
@media (max-width: 760px) { .pp-faixa { font-size: .85rem; padding: 8px 12px; } }
@media (min-width: 901px) { .com-faixa.has-shell .sidebar { top: 0; } }
/* v0.5.0: rodapé ao lado do menu lateral e as escolhas de cada função (Padrão / Ligada / Desligada) */
.footer a { color: inherit; }
.escolha3 { display: inline-flex; border: 1.5px solid var(--borda); border-radius: 999px; overflow: hidden; }
.escolha3 label { margin: 0; display: inline-flex !important; align-items: center; padding: 5px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; border-left: 1px solid var(--borda); }
.escolha3 label:first-child { border-left: 0; }
.escolha3 input { position: absolute; opacity: 0; pointer-events: none; }
.escolha3 label:has(input:checked) { background: var(--accent); color: #fff; }
html[data-tema="escuro"] .escolha3 label:has(input:checked) { color: #15131c; }
.modulo-linha { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.modulo-linha:last-child { border-bottom: 0; }
.modulo-linha .sub { display: block; color: var(--lavanda); font-size: .85rem; font-weight: 400; }

/* v0.6.0: planos (os mesmos da SpotMesa) */
.planos { max-width: 1100px; margin: 0 auto; }
.planos-hero { text-align: center; max-width: 720px; margin: 8px auto 24px; }
.planos-tag { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rosa); margin: 0 0 6px; }
.planos-sub { color: var(--lavanda); font-size: 1.05rem; }
.planos-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: stretch; }
.plano-card { position: relative; display: flex; flex-direction: column; gap: 8px; }
.plano-card h2 { margin: 0; }
.plano-destaque { border: 2px solid var(--rosa); box-shadow: 0 8px 28px rgba(214, 18, 95, .18); }
.plano-selo { position: absolute; top: -12px; left: 16px; background: var(--rosa); color: #fff; font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
html[data-tema="escuro"] .plano-selo { background: #D6125F; color: #fff; }
.plano-pitch { color: var(--lavanda); margin: 0; }
.plano-preco { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plano-preco strong { font-size: 1.9rem; line-height: 1.1; }
.plano-preco span, .plano-nota { color: var(--lavanda); }
.plano-nota { margin: 0; }
.plano-inclui { margin: 4px 0 8px; padding-left: 20px; flex: 1; }
.plano-inclui li { margin: 4px 0; }
.planos-h2 { margin-top: 32px; }
.planos-tabela td, .planos-tabela th { text-align: center; }
.planos-tabela td:first-child, .planos-tabela th:first-child { text-align: left; }
.plano-col-destaque { color: var(--rosa); }
.planos-faq { display: grid; gap: 10px; }
.planos-faq summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.planos-faq p { margin: 10px 0 0; }
.planos-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.planos-opcoes { display: grid; gap: 10px; margin-bottom: 12px; }
.plano-opcao { padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--r-card, 12px); }
.plano-escolhido { padding: 8px 10px; border-radius: 10px; background: var(--accent-soft, #FFE6EC); }
@media (max-width: 560px) { .planos-tabela table { font-size: .88rem; } .planos-tabela td:first-child { width: 52%; } .planos-tabela td, .planos-tabela th { padding-left: 6px; padding-right: 6px; } }

/* v0.63: Mensal/Anual e vagas de fundador */
.planos-ciclo { display: flex; justify-content: center; gap: 4px; margin: 0 auto 20px; padding: 4px; border: 1px solid var(--borda); border-radius: 999px; width: fit-content; max-width: 100%; background: var(--branco); }
.planos-ciclo button { border: 0; background: transparent; color: var(--roxo); font: inherit; font-weight: 700; padding: 8px 18px; border-radius: 999px; min-height: 44px; cursor: pointer; }
.planos-ciclo button[aria-pressed="true"] { background: var(--rosa); color: #fff; }
html[data-tema="escuro"] .planos-ciclo button[aria-pressed="true"] { background: #D6125F; }
.planos-economia { font-size: .78rem; font-weight: 800; margin-left: 4px; }
.plano-economia { margin: 0; color: var(--verde-esc, #0B7A75); }
html[data-tema="escuro"] .plano-economia { color: #7dd3ab; }
.plano-vagas { margin: 0; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft, #FFE6EC); width: fit-content; }

.sb-item.sb-trava { opacity: .62; }
.sb-cadeado { display: inline-flex; width: 14px; height: 14px; margin-left: auto; flex: 0 0 auto; }
.sb-cadeado svg { width: 14px; height: 14px; }
.sb-mini .sb-cadeado { display: none; }
.plano-atual { border: 2px solid var(--verde-esc, #0B7A75); }
.plano-limites { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.plano-limites li { font-size: .82rem; padding: 3px 10px; border-radius: 999px; background: var(--creme); }
html[data-tema="escuro"] .plano-limites li { background: #2b2540; }
.aviso-plano { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.aviso-plano .btn { flex: 0 0 auto; }
.pix-qr { display: block; width: 240px; max-width: 100%; height: auto; margin: 8px auto; background: #fff; border-radius: 12px; padding: 8px; }
.pix-copia { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; min-height: 80px; }
.matriz-planos td, .matriz-planos th { text-align: center; }
.matriz-planos td:first-child, .matriz-planos th:first-child { text-align: left; }
th .sub { display: block; font-weight: 400; }

/* v0.7.0: implantação assistida (igual à SpotMesa, 7 etapas) */
.impl-progress { margin: 14px 0 16px; }
.impl-bar { display: block; height: 8px; border-radius: 99px; background: var(--borda); overflow: hidden; margin: 6px 0 2px; }
.impl-bar > span { display: block; height: 100%; background: var(--verde); border-radius: 99px; transition: width .3s; }
.impl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.impl-steps a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; font-size: .75rem; text-align: center; line-height: 1.2; }
.impl-n { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid var(--borda); background: var(--branco); }
.impl-ok .impl-n { background: var(--verde); border-color: var(--verde); color: #fff; }
.impl-and .impl-n { border-color: var(--amarelo); }
.impl-cur .impl-n { outline: 3px solid var(--rosa); outline-offset: 2px; }
.impl-cur .impl-l { font-weight: 800; color: var(--rosa); }
@media (max-width: 760px) { .impl-steps .impl-l { display: none; } .impl-steps .impl-cur .impl-l { display: none; } }
.impl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: start; }
@media (max-width: 900px) { .impl-grid { grid-template-columns: minmax(0, 1fr); } }
.impl-main { min-width: 0; }
.impl input[type=file] { max-width: 100%; min-width: 0; }
.impl .btn:disabled, .impl .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.impl-aside { display: grid; gap: 12px; position: sticky; top: 76px; }
@media (max-width: 900px) { .impl-aside { position: static; } }
.impl-help ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.impl-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.impl-check li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.impl-check li a { color: inherit; text-decoration: none; font-weight: 700; }
.impl-chip { display: inline-block; font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-right: 4px; vertical-align: 1px; border: 1px solid var(--borda); }
.impl-ok .impl-chip { background: var(--verde); border-color: var(--verde); color: #fff; }
.impl-and .impl-chip { background: var(--amarelo); border-color: var(--amarelo); color: #2B0F4C; }
.impl-falta { color: var(--erro); }
html[data-tema="escuro"] .impl-falta { color: #ef7b72; }
.impl-block { border-left: 4px solid var(--erro); background: rgba(180, 35, 24, .08); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.impl-block ul { margin: 4px 0 0; padding-left: 18px; }
.impl-ready { border-left: 4px solid var(--verde); background: rgba(18, 181, 173, .1); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.impl-draft, .impl-missing { border-radius: 8px; padding: 6px 10px; background: rgba(255, 194, 61, .18); }
.impl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.impl-items { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.impl-items li { display: flex; align-items: center; gap: 10px; justify-content: space-between; border: 1px solid var(--borda); border-radius: 10px; padding: 6px 10px; min-width: 0; }
.impl-items li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.impl-items img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
.impl-nophoto { font-size: .65rem; color: var(--lavanda); border: 1px dashed var(--borda); border-radius: 8px; padding: 10px 4px; flex: none; text-align: center; width: 48px; }
.impl-box { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.impl-box form { margin-top: 10px; }
.impl-pre { background: var(--creme); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; font-size: .8rem; overflow-x: auto; }
.impl-areas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin-bottom: 10px; }
.impl-areas-check { display: grid; gap: 6px; }
.impl-plans { display: grid; gap: 10px; }
.impl-plan { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--borda); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.impl-plan:has(input:checked) { border-color: var(--rosa); }
.impl-plan input { width: auto; margin-top: 4px; accent-color: var(--rosa); }
.impl-cycle { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.impl-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.impl-photos figure { margin: 0; }
.impl-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.impl-photos figcaption { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-top: 4px; }
.impl-logo { border-radius: 12px; object-fit: cover; }
.impl-review { display: grid; gap: 8px; }
.impl-rev { border: 1px solid var(--borda); border-left-width: 4px; border-radius: 10px; padding: 8px 12px; }
.impl-rev.impl-ok { border-left-color: var(--verde); }
.impl-rev.impl-and, .impl-rev.impl-pend { border-left-color: var(--amarelo); }
.impl-alert { display: block; border-left: 4px solid var(--amarelo); background: rgba(255, 194, 61, .18); border-radius: 10px; padding: 10px 14px; margin: 12px 0; color: inherit; text-decoration: none; }
.impl-filter { margin: 12px 0; }
.impl-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.impl-card { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.impl-card:hover { border-color: var(--rosa); }
.impl-items form { margin: 0; }
.impl-rev a { color: inherit; text-decoration: none; }
.impl-rev .small { display: block; }
.impl-plan .sub { display: block; font-weight: 400; margin-top: 2px; }