/* SpotMoney v0.3.0: o CSS da SpotMesa (festaqui.css + tema-escuro.css da 1.65.3, só as regras que o SpotMoney usa)
   e, no fim, o que é só do financeiro. 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, h3 { 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; }
h3 { font-size: 1.15rem; }
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; }
.two-cols { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .two-cols { grid-template-columns: 1.4fr 1fr; } }

/* 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; }
.error { color: var(--erro); font-size: .85rem; margin-top: 4px; }

/* 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; }
.badge-solicitada { background: #FFF1D1; color: #7A5200; }
.badge-aceita { background: #FFE3EE; color: var(--rosa-escuro); }
.badge-fila { background: #E7F0FF; color: #1D4E89; }
.badge-confirmada, .badge-ativo { background: #E3F6F4; color: var(--verde-esc); }
.badge-recusada, .badge-cancelada, .badge-suspenso { background: #EEEAF2; color: var(--lavanda); }
.badge-concluida { background: var(--roxo); color: var(--branco); }
.badge-pendente { background: #FFF1D1; color: #7A5200; }

/* 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) */
.badge.rsvp-sim { background: #E3F7EC; color: var(--verde-esc); }
.badge.rsvp-nao { background: #FDE7EA; color: #B42344; }
.badge.rsvp-talvez { background: #FFF4D6; color: #8A5A00; }
.badge.rsvp-pendente { background: var(--creme); color: var(--lavanda); }
tr.muted td { opacity: .6; }

/* Fase C: financeiro, comissões e CRM */
.badge.fin-aberto, .badge.com-prevista { background: #FFF1D1; color: #7A5200; }
.badge.fin-vencido { background: #FDE7EA; color: var(--erro); }
.badge.fin-pago, .badge.com-paga { background: #E3F6F4; color: var(--verde-esc); }
.badge.com-liberada { background: #FFE3EE; color: var(--rosa-escuro); }
.badge.fin-cancelado, .badge.fin-estornado, .badge.com-cancelada { background: #EEEAF2; color: var(--lavanda); }
.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); }
.two-cols > *, .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) */
.nowrap { white-space: nowrap; }
/* 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 */
.badge.ticket-aberto { background: #FFF1CC; color: #8A5A00; }
.badge.ticket-respondido { background: #E3ECFF; color: #2C4FA8; }
.badge.ticket-resolvido { background: #DDF5F3; color: var(--verde-esc); }

/* 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 */
.badge-promo { background: #FFE3EE; color: var(--rosa-escuro); margin-left: 6px; vertical-align: middle; } /* v0.67: fundo sólido */

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

/* v0.26: pré-cadastro por WhatsApp */
.badge-pre-enviado { background: #FFF1D1; color: #7A5200; }
.badge-pre-preenchido { background: #FFE3EE; color: var(--rosa-escuro); }
.badge-pre-cadastrado { background: #E3F6F4; color: var(--verde-esc); }
.badge-pre-descartado { background: #EEEAF2; color: var(--lavanda); }

/* Festa entre amigos (v0.27) */
.badge-novo { background: var(--amarelo); color: var(--roxo); }
.panel-item-main .badge { margin-left: 4px; }

/* 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; }
.nowrap { white-space: nowrap; }

/* 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, h3, .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 */
.planos { max-width: 1100px; margin: 0 auto; }
.plano-card { position: relative; display: flex; flex-direction: column; gap: 8px; }
.plano-card h2 { margin: 0; }
html[data-tema="escuro"] .plano-selo { background: #D6125F; color: #fff; }
.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 { color: var(--lavanda); }

/* 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 */
.badge-adesao { background: var(--verde); color: #fff; }

/* 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 */
.tcard-cover .badge { position: absolute; left: 12px; top: 12px; }
@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 */
.cfg-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-width: 980px; }
.cfg-tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--borda); border-radius: 14px; background: var(--branco); color: inherit; text-decoration: none; transition: .15s; }
.cfg-tile:hover { border-color: var(--rosa); transform: translateY(-1px); }
.cfg-tile b { display: block; margin-bottom: 2px; }
.cfg-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--creme); color: var(--rosa); display: inline-flex; align-items: center; justify-content: center; }
.cfg-ic svg { width: 20px; height: 20px; }

/* 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 */
.cfg-busca { max-width: 980px; margin: 0 0 6px; }
.cfg-busca input { width: 100%; max-width: 420px; }
.cfg-blocos { max-width: 980px; }
.cfg-bloco { margin: 0 0 18px; }
.cfg-bloco[hidden], .cfg-tile[hidden] { display: none; }
.cfg-bloco-t { margin: 14px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lavanda); }
.cfg-tile b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-badge { margin-left: 0; }
.page-crumb { margin: 0 0 4px; font-size: .86rem; color: var(--lavanda); }
.page-crumb a { color: var(--rosa); text-decoration: none; font-weight: 600; }
.page-crumb a:hover { text-decoration: underline; }

/* v1.44.2: a situação de cada cartão de Configurações (verde em dia, amarelo atenção, cinza desligado, vermelho problema) */
.cfg-tile .cfg-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; align-self: stretch; }
.cfg-st { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cfg-chip { display: inline-block; max-width: 100%; font-size: 11.5px; font-weight: 700; line-height: 1.35; padding: 2px 9px; border-radius: 99px; border: 1px solid transparent; overflow-wrap: anywhere; }
.cfg-ok { background: #E3F5EA; color: #116B37; border-color: #B9E3C8; }
.cfg-aviso { background: #FFF4D6; color: #7A5300; border-color: #F2DC9B; }
.cfg-desligado { background: #EFEDF2; color: #5E5870; border-color: #DEDAE4; }
.cfg-problema { background: #FDE4E4; color: #A11A1A; border-color: #F5B8B8; }
.cfg-info { background: transparent; color: var(--lavanda); border-color: var(--borda); }
.cfg-motivo { font-size: 11.5px; line-height: 1.35; color: var(--lavanda); overflow-wrap: anywhere; }
.cfg-alerta { max-width: 980px; background: #FDE4E4; color: #7A1414; border: 1px solid #F5B8B8; }
.cfg-alerta a { color: inherit; font-weight: 700; }
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 */
.switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: #8a8a95; border-radius: 999px; transition: background .15s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: #1E9E5A; }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--rosa); outline-offset: 2px; }

/* 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) */
.wz-card .badge { display: block; width: fit-content; max-width: 100%; margin: 6px 0 0 !important; white-space: normal; line-height: 1.3; }
/* v1.46.1: selo discreto dos parceiros em Destaque na busca (vêm primeiro) */
.badge-destaque { position: absolute; top: 10px; right: 10px; left: auto; background: rgba(20, 18, 30, .78); color: #FFD27A; border: 1px solid rgba(255, 210, 122, .5); font-weight: 800; }
.cover .badge-destaque, .tcard-cover .badge-destaque { z-index: 2; }

/* 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 */
.tcard-cover .badge-destaque, .cover .badge-destaque { left: auto; right: 10px; width: auto; }
/* 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 */
@media (max-width: 600px) {
  .wz-card .badge { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; font-size: .72rem; padding: 2px 8px; margin-top: 4px !important; }
}
/* v1.47.3: Dia e pessoas → O que você quer? → Horário → Pacote ou Cardápio → Confirmar */
.wz-modos .wz-card .badge { display: inline-block; margin: 6px 0 0 !important; }
/* v1.47.4: cartão da busca com as fotos em carrossel e "📍 Ver no mapa"; o horário leva direto ao pedido */
.cf .badge { position: absolute; left: 12px; top: 12px; bottom: auto; z-index: 3; }
.cf .badge-destaque { left: auto; right: 10px; }
.partner-card .cover.cf .badge { top: 12px; bottom: auto; }

/* 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) */
.alert-topo { position: fixed; z-index: 60; top: 74px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); margin: 0; padding-right: 44px; box-shadow: 0 12px 34px rgba(20, 8, 40, .35); transition: opacity .35s; }
.alert-topo.saindo { opacity: 0; }
.alert-topo-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: inherit; cursor: pointer; padding: 2px 6px; }
/* 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 */
.cf-tags .badge, .cf .cf-tags .badge, .tcard-cover .cf-tags .badge, .partner-card .cover.cf .cf-tags .badge { position: static; white-space: nowrap; }
.badge-novo { background: var(--rosa); color: #fff; font-weight: 800; }
/* v1.47.22: Admin › Aparelhos */
/* v1.48.0: cartão compacto da busca (modelo A): foto pequena à esquerda e o resto em 5 linhas */
 .tca .tca-foto .badge-destaque { display: none !important; }
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; }
.badge-pendente { background: #FFF1D1; color: #7A5200; } /* 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 */
[data-so][hidden] { display: none !important; }
/* 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; }
.badge-n { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; line-height: 1; vertical-align: middle; }
.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é */
.footer .rodape-indique { display: inline-block; margin: 6px 0 2px; font-weight: 600; color: var(--rosa); }
/* 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, h3, .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"] :is(.badge-solicitada, .badge-pendente, .badge.fin-aberto, .badge.com-prevista, .badge.rsvp-talvez, .badge.ticket-aberto) { background: #3d321a; color: #f2c46b; }
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); }

/* ==========================================================================
   SpotMoney: o que é só do financeiro, desenhado 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; }

/* v0.4.0: o painel do cliente aberto pelo Admin da plataforma (como a faixa da SpotMesa) */
.pc-faixa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 16px;padding:10px 14px;border-radius:14px;background:#5B2E9E;color:#fff;font-size:.92rem}
.pc-faixa b{color:#fff}
.pc-faixa-txt{display:flex;align-items:flex-start;gap:8px;min-width:0}
.pc-faixa-txt svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;stroke:#fff}
.pc-quando{opacity:.85}
.pc-faixa form{margin:0}
.pc-faixa .btn{background:#fff;color:#5B2E9E;border-color:#fff}
.sb-unit-logo{flex:0 0 28px;width:28px;height:28px;border-radius:8px;object-fit:cover;background:#fff}
/* v0.4.0: Admin da plataforma */
.mod-lista{display:grid;gap:10px;margin:0 0 16px}
.mod-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--borda,#e4dcef);border-radius:14px;cursor:pointer}
.mod-item input{flex:0 0 18px;width:18px;height:18px;margin:3px 0 0}
.mod-item svg{flex:0 0 20px;width:20px;height:20px;margin-top:1px}
.mod-item b{display:block}
.mod-item:has(input:not(:checked)){opacity:.6}
.adm-dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0}
.adm-dados div{min-width:0}
.adm-dados dt{font-size:.8rem;color:var(--muted,#6b6280)}
.adm-dados dd{margin:2px 0 0;font-weight:500;overflow-wrap:anywhere}
.adm-abrir{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.adm-abrir select{width:auto;min-width:0;max-width:100%}
.reg-lista{list-style:none;margin:0;padding:0}
.reg-lista li{padding:8px 0;border-top:1px solid var(--borda,#e4dcef)}
.reg-lista li:first-child{border-top:0}
.logo-previa{width:64px;height:64px;border-radius:14px;object-fit:cover;background:#fff;border:1px solid var(--borda,#e4dcef)}
table.fin-list.sem-pick tr{padding-left:12px}
.mod-item{font-weight:400}.mod-item .small{display:block;font-weight:400}
/* v0.5.0: planos e assinaturas */
.plano-card h3{font-size:1.1rem}
.plano-preco{font-size:1.25rem;font-weight:700;white-space:nowrap}
.bv-link{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bv-link input{flex:1 1 240px;min-width:0;font-size:.85rem}
.mod-linha label{display:flex;align-items:center;gap:8px}
.mod-linha label svg{width:18px;height:18px;flex:0 0 18px}
.quebra{overflow-wrap:anywhere;word-break:break-all}
.ass-topo{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;justify-content:space-between}
.ass-topo .plano-preco{font-size:1.6rem}
.ass-pagar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.ass-instr{white-space:pre-line}
.ass-bloq{border:1.5px solid var(--bad,#d33);}