/* ─────────────────────────────────────────────────────────────────────────────
TableTap — folha unica, sem build.
Identidade: Verde Mesa, Terracota, Areia, Carvao e Branco.
Playfair Display nos titulos, Inter no texto e na interface.
Tokens em :root; o tema e CLARO, e o escuro so por [data-theme='dark'].
───────────────────────────────────────────────────────────────────────────── */
/* O papel claro e o tema, nao o padrao de um sistema que pode dizer o contrario.
Quem escolheu escuro no celular escolheu para o sistema, nao para o
restaurante — e comida se ve em creme, que e o que as telas de referencia
mostram. O escuro continua inteiro, alcancavel por [data-theme='dark'] no
, para o dia em que a tela do salao as 23h pedir por ele. */
:root {
color-scheme: light;
/* Os cinco nomes da identidade. Constantes: nao mudam de tema, porque sao a
marca — o que muda de tema e o PAPEL que cada um cumpre na tela. */
--verde-mesa: #06211d; /* confianca, sofisticacao, equilibrio */
--terracota: #a5502a; /* acolhimento, apetite, energia */
--areia: #d9c3ac; /* leveza, elegancia, neutralidade */
--carvao: #1b1b1b; /* modernidade, contraste, legibilidade */
--branco: #ffffff; /* limpeza, respiro, clareza */
--papel: #f0ede7; /* o creme da papelaria */
/* Terracota e a cor de acao: botao, foco, o que se toca. */
--brand: var(--terracota);
--brand-ink: #ffffff;
--brand-soft: rgb(165 80 42 / 0.10);
/* Terracota como TEXTO pede outro tom. O de preenchimento nao tem contraste
sobre fundo escuro, e escurecer o fill estragaria o botao — entao sao dois. */
--brand-text: #8f4322;
/* Verde Mesa e a cor de sustentacao: fundo escuro, selo, cabecalho. */
--accent: var(--verde-mesa);
--accent-ink: #f4f0e8;
/* Estado. Tambem sao tokens porque no tema escuro (verde profundo) o verde de
"aberto" cravado no claro sumiria dentro do fundo. */
--ok: #17694d;
--danger: #b3382f;
--warn: #92600f;
--bg: #fcfaf6;
--bg-sidebar: #f2eee6;
--surface: #ebe5db;
--surface-2: #ffffff;
--text: var(--carvao);
--muted: #6d6459;
--border: #e3dbcf;
--shadow: 0 1px 2px rgb(6 33 29 / 0.05), 0 8px 24px rgb(6 33 29 / 0.07);
/* A marca desenhada: a barra (o tampo), a haste e o ponto. */
--mark-bar: var(--terracota);
--mark-stem: var(--verde-mesa);
--mark-dot: var(--terracota);
--wordmark-a: var(--verde-mesa);
--wordmark-b: var(--terracota);
--radius: 14px;
--radius-lg: 22px;
--sidebar-w: 276px;
--thread-w: 48rem;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* O tema escuro nao e cinza: e o Verde Mesa da papelaria, com a areia por cima.
Por isso todo token quente ganha aqui uma versao mais clara — terracota de
preenchimento sobre verde profundo nao se le.
So entra quando alguem o pede por escrito no . Ele ficou aqui inteiro
de proposito: apagar o tema seria jogar fora uma paleta que ja esta afinada,
e a tela do salao a noite ainda pode querer. */
:root[data-theme='dark'] {
color-scheme: dark;
--bg: #071f1b;
--bg-sidebar: #041613;
--surface: #0f302a;
--surface-2: #0b2722;
--text: #f2ede4;
--muted: #9fb3ac;
--border: #16413a;
--brand: #b85a30;
--brand-ink: #ffffff;
--brand-soft: rgb(224 154 111 / 0.14);
--brand-text: #e09a6f;
--accent: var(--areia);
--accent-ink: var(--verde-mesa);
--ok: #66c79c;
--danger: #ef8079;
--warn: #e0b06a;
--mark-bar: #e09a6f;
--mark-stem: #f4f0e8;
--mark-dot: #e09a6f;
--wordmark-a: #f4f0e8;
--wordmark-b: #e09a6f;
--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
}
* { box-sizing: border-box; }
/* O atributo `hidden` vale só `display: none` da folha do navegador, e qualquer
regra nossa com `display` o derruba em silêncio. Sem isto, `el.hidden = true`
não esconde nada que tenha display declarado. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font);
font-size: 15px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overscroll-behavior-y: none;
}
body.shell { overflow: hidden; }
/* Tela de leitura sem a casca do TableTap: a historia da casa e o Sobre.
Nao e `shell` — la o `overflow: hidden` e correto porque quem rola e o painel
de dentro; aqui quem rola e a pagina, e o `height: 100%` herdado do `html`
precisa ceder, senao o documento fica preso na altura da janela. */
body.documento { overflow-y: auto; height: auto; min-height: 100%; }
/* Playfair nos titulos, Inter em todo o resto. A serifa e o que da a voz de
restaurante; usa-la tambem em rotulo e tabela apagaria a diferenca. */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.22;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
/* ── Marca ──────────────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
/* A marca e desenho, nao caixinha com iniciais: o tampo em terracota, a haste
e o ponto. Sem fundo proprio, para pousar tanto no creme quanto no verde. */
.brand-mark {
height: 22px;
width: auto;
flex: none;
stroke: none;
}
.mark-bar { fill: var(--mark-bar); }
.mark-stem { fill: var(--mark-stem); }
.mark-dot { fill: var(--mark-dot); }
.brand-name {
font-family: var(--font);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.025em;
color: var(--wordmark-a);
}
.brand-name b { font-weight: inherit; color: var(--wordmark-b); }
/* "Gastronomia que conecta": assinatura, nao titulo — vive no rodape e nas
telas de entrada, sempre menor e mais espacada que o nome. */
.brand-tagline {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--muted);
font-weight: 500;
}
/* A marca empilhada — marca, nome e assinatura — para as telas em que ela e o
assunto: entrar, criar conta, erro. */
.brand-lockup { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0 0 20px; }
.brand-lockup:hover { text-decoration: none; }
.brand-lockup .brand-mark { height: 38px; }
.brand-lockup .brand-name { font-size: 26px; }
.brand-lockup .brand-tagline { margin-top: -5px; }
/* ── Shell do app ───────────────────────────────────────────────────────── */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
height: 100dvh;
}
.sidebar {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
padding: calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
gap: 10px;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; }
.sidebar-close { display: none; }
.new-chat {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 11px 13px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
font-weight: 550;
transition: border-color 0.15s, background 0.15s;
}
.new-chat:hover { border-color: var(--brand); background: var(--brand-soft); }
.conversations { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.conversations-empty { color: var(--muted); font-size: 13px; padding: 10px 12px; }
.conversation {
display: flex; align-items: center; gap: 8px;
padding: 9px 10px;
border-radius: 10px;
font-size: 14px;
color: var(--text);
}
.conversation:hover { background: var(--surface); text-decoration: none; }
.conversation.is-active { background: var(--surface); font-weight: 550; }
.conversation-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-delete {
border: 0; background: none; padding: 2px; border-radius: 6px;
color: var(--muted); opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.conversation-delete svg { width: 16px; height: 16px; }
.conversation:hover .conversation-delete,
.conversation-delete:focus-visible { opacity: 1; }
.conversation-delete:hover { color: var(--danger); }
.sidebar-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.sidebar-action {
display: flex; align-items: center; gap: 10px;
padding: 10px 11px; border: 0; border-radius: 10px;
background: none; font-size: 14px; text-align: left; width: 100%;
}
.sidebar-action:hover { background: var(--surface); text-decoration: none; }
.sidebar-action--accent { color: var(--brand-text); font-weight: 550; }
.account { display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 14px; }
.account-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
display: grid; place-items: center;
width: 26px; height: 26px; border-radius: 50%;
background: var(--brand); color: var(--brand-ink);
font-size: 12px; font-weight: 700;
}
.inline-form { display: inline; }
.link-button { border: 0; background: none; padding: 0; color: var(--muted); font-size: 13px; text-decoration: underline; }
.link-button:hover { color: var(--text); }
.scrim { display: none; }
/* ── Area principal ─────────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main-head {
display: flex; align-items: center; gap: 10px;
padding: calc(10px + var(--safe-top)) 16px 10px;
border-bottom: 1px solid transparent;
background: var(--bg);
}
.main-head.is-stuck { border-bottom-color: var(--border); }
.main-title { font-weight: 650; flex: 1; }
.icon-button {
display: none;
border: 0; background: none; padding: 6px; border-radius: 9px; color: var(--text);
}
.icon-button:hover { background: var(--surface); }
.chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface-2);
font-size: 13px; color: var(--muted);
max-width: 45vw;
}
.chip svg { width: 15px; height: 15px; }
.chip:hover { border-color: var(--brand); color: var(--text); }
.chip.is-on { color: var(--brand-text); border-color: var(--brand); background: var(--brand-soft); }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; padding: 8px 0 24px; }
/* ── Boas-vindas ────────────────────────────────────────────────────────── */
.welcome {
max-width: var(--thread-w);
margin: 0 auto;
padding: clamp(32px, 12vh, 96px) 20px 20px;
text-align: center;
}
.welcome h1 { font-size: clamp(26px, 5.4vw, 38px); letter-spacing: -0.02em; margin: 0 0 10px; }
.welcome p { color: var(--muted); margin: 0 auto 26px; max-width: 34rem; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.suggestion {
padding: 9px 15px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface-2);
font-size: 14px; transition: border-color 0.15s, background 0.15s;
}
.suggestion:hover { border-color: var(--brand); background: var(--brand-soft); }
/* ── As respostas prontas ─────────────────────────────────────────────────
A fileira embaixo da ultima resposta. Alinha com a bolha do assistente (mesma
largura, mesmo respiro lateral) porque e continuacao da fala dele: e a
pergunta do fim da resposta, agora tocavel.
Rola na horizontal quando nao cabe, em vez de quebrar linha: cinco horarios
viram duas fileiras num celular estreito, e duas fileiras de chip empurram o
campo de texto para fora da tela. */
.chips {
max-width: var(--thread-w);
margin: 0 auto;
padding: 2px 20px 14px;
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
/* O respiro do fim tem de sobreviver ao overflow, e `padding-right` some em
container rolavel no Chromium — por isso o espacador vai no ultimo filho. */
scroll-padding: 20px;
}
.chips::-webkit-scrollbar { display: none; }
.chips > :last-child { margin-right: 20px; }
.chip-reply {
flex: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 9px 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
font-size: 14px;
line-height: 1.3;
text-align: center;
transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.chip-reply:hover { border-color: var(--brand); background: var(--brand-soft); }
.chip-reply:active { transform: scale(0.97); }
.chip-reply-title { font-weight: 550; white-space: nowrap; }
.chip-reply-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* ── Mensagens ──────────────────────────────────────────────────────────── */
.msg { max-width: var(--thread-w); margin: 0 auto; padding: 10px 20px; }
.msg--user { display: flex; justify-content: flex-end; }
.msg--user .bubble {
background: var(--surface);
padding: 11px 16px;
border-radius: var(--radius-lg);
border-bottom-right-radius: 6px;
max-width: 85%;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.msg--assistant .bubble { overflow-wrap: anywhere; }
.msg--assistant .bubble > *:first-child { margin-top: 0; }
.msg--assistant .bubble > *:last-child { margin-bottom: 0; }
.msg--assistant p { margin: 0 0 12px; }
.msg--assistant ul, .msg--assistant ol { margin: 0 0 12px; padding-left: 22px; }
.msg--assistant li { margin-bottom: 4px; }
.msg--assistant code {
background: var(--surface); padding: 1px 5px; border-radius: 5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
}
.msg--error .bubble { color: var(--danger); font-size: 14px; }
/* Cursor de digitacao enquanto o modelo escreve */
.is-streaming .bubble::after {
content: '';
display: inline-block;
width: 7px; height: 1.05em;
margin-left: 2px;
vertical-align: text-bottom;
background: var(--brand);
border-radius: 1px;
animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.thinking { display: flex; gap: 5px; padding: 6px 0; }
.thinking i {
width: 7px; height: 7px; border-radius: 50%;
background: var(--muted); opacity: 0.4;
animation: bounce 1.2s ease-in-out infinite;
}
.thinking i:nth-child(2) { animation-delay: 0.15s; }
.thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-5px); opacity: 0.9; } }
.tool-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
/* ── Cards de restaurante ───────────────────────────────────────────────── */
.cards {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(258px, 288px);
gap: 10px;
overflow-x: auto;
padding: 4px 20px 14px;
max-width: var(--thread-w);
margin: 0 auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.cards::-webkit-scrollbar { height: 6px; }
.cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.place {
scroll-snap-align: start;
display: flex; flex-direction: column; gap: 7px;
padding: 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
box-shadow: var(--shadow);
}
.place-name { font-weight: 650; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
/* Descoberto na rua, ainda sem contrato: visualmente mais discreto que um parceiro. */
.place--prospect { border-style: dashed; background: transparent; box-shadow: none; }
.place-tag {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 999px;
background: var(--surface);
color: var(--muted);
}
.place-name { font-family: var(--font-display); font-size: 16.5px; }
.place-name a:hover { color: var(--brand-text); }
.place-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.place-meta strong { color: var(--text); font-weight: 550; }
.place-tagline { font-size: 13.5px; color: var(--muted); }
.place-matches { display: flex; flex-wrap: wrap; gap: 5px; }
.place-match {
font-size: 12px; padding: 2px 8px; border-radius: 999px;
background: var(--brand-soft); color: var(--brand-text); font-weight: 550;
}
/* Aberto e fechado sao decisao de ida, nao decoracao: cor solida, nao pastel. */
.place-open { color: var(--ok); font-weight: 600; }
.place-closed { color: var(--danger); font-weight: 600; }
.place-diets { display: flex; flex-wrap: wrap; gap: 5px; }
.place-diet {
font-size: 12px; padding: 2px 8px; border-radius: 999px;
border: 1px solid var(--border); color: var(--muted);
}
.place-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.place-actions a {
font-size: 13px; padding: 6px 11px; border-radius: 9px;
border: 1px solid var(--border); background: var(--bg);
}
.place-actions a:hover { border-color: var(--brand); color: var(--brand-text); text-decoration: none; }
.place-actions a.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.place-actions a.primary:hover { filter: brightness(1.06); color: var(--brand-ink); }
/* ── Pedido de localização na abertura ──────────────────────────────────── */
.location-ask {
display: flex;
align-items: center;
gap: 13px;
text-align: left;
max-width: 34rem;
margin: 0 auto 22px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
box-shadow: var(--shadow);
}
.location-ask > svg { width: 22px; height: 22px; color: var(--brand-text); }
.location-ask.is-denied > svg { color: var(--muted); }
.location-ask-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.location-ask-copy strong { font-size: 14.5px; }
.location-ask-copy span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.location-ask .button { flex: none; padding: 9px 15px; }
@media (max-width: 560px) {
.location-ask { flex-wrap: wrap; }
.location-ask .button { width: 100%; }
}
/* ── Pedido de localização no meio da conversa ──────────────────────────── */
.ask-location {
max-width: var(--thread-w);
margin: 0 auto 14px;
padding: 14px 16px;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border: 1px dashed var(--brand);
border-radius: var(--radius);
background: var(--brand-soft);
}
.ask-location p { margin: 0; flex: 1; min-width: 180px; font-size: 14px; }
/* ── Composer ───────────────────────────────────────────────────────────── */
.composer-area {
padding: 0 20px calc(12px + var(--safe-bottom));
background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.composer {
display: flex; align-items: flex-end; gap: 8px;
max-width: var(--thread-w);
margin: 0 auto;
padding: 8px 8px 8px 16px;
border: 1px solid var(--border);
border-radius: 26px;
background: var(--surface-2);
box-shadow: var(--shadow);
transition: border-color 0.15s;
}
.composer:focus-within { border-color: var(--brand); }
.composer textarea {
flex: 1;
border: 0; outline: 0; resize: none;
background: none; color: inherit;
font: inherit; line-height: 1.5;
padding: 8px 0;
max-height: 200px;
}
.composer textarea::placeholder { color: var(--muted); }
.send {
display: grid; place-items: center;
width: 36px; height: 36px; border: 0; border-radius: 50%;
background: var(--brand); color: var(--brand-ink);
transition: opacity 0.15s, filter 0.15s;
}
.send:hover:not(:disabled) { filter: brightness(1.08); }
.send:disabled { opacity: 0.35; cursor: not-allowed; }
.send.is-stop { background: var(--text); color: var(--bg); }
.composer-hint {
max-width: var(--thread-w);
margin: 8px auto 0;
font-size: 11.5px;
color: var(--muted);
text-align: center;
}
/* ── Paginas de conteudo ────────────────────────────────────────────────── */
.page { display: flex; flex-direction: column; min-height: 100%; }
.topbar {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: calc(14px + var(--safe-top)) 20px 14px;
border-bottom: 1px solid var(--border);
}
.topbar-nav { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.narrow { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 32px 20px 56px; }
.card {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
padding: 22px;
margin-bottom: 16px;
}
.card h2 { font-size: 18px; margin: 0 0 10px; }
.card--form { max-width: 24rem; margin: 6vh auto 0; }
/* O bloco de "perguntaram e nao soube": informacao de trabalho, nao de vitrine. */
.card--soft { background: var(--surface); }
.plain { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.card--form h1 { font-size: 25px; margin: 0 0 6px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.lede { font-size: 17px; color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; color: var(--brand-text); font-weight: 600; margin: 0 0 8px; }
.hero { padding: 24px 0 36px; }
.hero h1 { font-size: clamp(28px, 6.4vw, 46px); letter-spacing: -0.02em; margin: 0 0 12px; }
/* O filete curto entre titulo e texto: o mesmo que separa os blocos da
papelaria, e a unica peca decorativa que a marca usa. */
.rule { width: 46px; height: 3px; border: 0; border-radius: 2px; background: var(--terracota); margin: 0 0 18px; }
.center .rule, .welcome .rule { margin-left: auto; margin-right: auto; }
/* A frase manuscrita da papelaria ("Boa comida aproxima pessoas"). */
.script { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--brand-text); line-height: 1.45; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 16px; }
.grid .card { margin: 0; }
.form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.field input {
padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
background: var(--bg); color: inherit; font: inherit;
}
.field input:focus { outline: 0; border-color: var(--brand); }
.hint { color: var(--muted); font-size: 12px; }
.button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 18px; border: 1px solid var(--border); border-radius: 11px;
background: var(--surface-2); font-weight: 550; font-size: 14px;
}
.button:hover { border-color: var(--brand); text-decoration: none; }
.button--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.button--primary:hover { filter: brightness(1.07); }
.alert {
padding: 11px 14px; border-radius: 10px; font-size: 14px;
background: rgb(179 56 47 / 0.09); color: var(--danger); border: 1px solid rgb(179 56 47 / 0.28);
}
.error-code { font-family: var(--font-display); font-size: 60px; font-weight: 700; color: var(--brand-text); margin: 0; letter-spacing: -0.03em; }
.footer {
border-top: 1px solid var(--border);
padding: 26px 20px calc(26px + var(--safe-bottom));
text-align: center; font-size: 13px; color: var(--muted);
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.footer p { margin: 0; }
.footer .brand { margin-bottom: 2px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.restaurant-head h1 { font-size: clamp(26px, 5.4vw, 36px); margin: 0 0 6px; letter-spacing: -0.02em; }
.meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 12px 0; color: var(--muted); font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.tag { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--surface); }
/* O que o concierge pode afirmar sobre o prato — distinto da etiqueta digitada. */
.tags--diet { margin-top: 4px; }
.tag--diet { background: var(--brand-soft); color: var(--brand-text); font-weight: 550; }
.tag--allergen { background: transparent; border: 1px dashed var(--border); color: var(--muted); }
.menu-section { font-size: 14px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 20px 0 8px; }
.menu { list-style: none; padding: 0; margin: 0; }
.menu-item { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.menu-item:last-child { border-bottom: 0; }
.menu-item p { margin: 2px 0 0; font-size: 13.5px; }
.price { white-space: nowrap; font-weight: 600; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); margin-left: 6px; vertical-align: middle; }
.hours { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; }
.hours li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
.plans { width: 100%; border-collapse: collapse; font-size: 14px; }
.plans th, .plans td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.plans th { color: var(--muted); font-weight: 550; font-size: 13px; }
/* ── White label: o link próprio do restaurante ─────────────────────────── */
/* A marca chega por custom property no elemento (--brand, --brand-ink,
--brand-soft), então tudo aqui é o mesmo vocabulário das outras telas — só
que repintado pela casa.
O desenho mudou em 19/09/2026: saiu a barra lateral DIREITA, que mantinha
horário, endereço e caracteristicas abertos ao lado de quem estava tentando
conversar, e entrou uma gaveta a ESQUERDA com o historico desta pessoa com
esta casa. Informacao de consulta virou tela (/w/:slug/sobre); o que resolve
alguma coisa continua chegando dentro da conversa. */
.venue {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas: 'head' 'main';
height: 100dvh;
}
.venue-head {
grid-area: head;
display: flex; align-items: center; gap: 12px;
padding: calc(10px + var(--safe-top)) 20px 10px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, var(--brand-soft), transparent);
}
.venue-brand { display: flex; align-items: center; gap: 11px; min-width: 0; margin-right: auto; }
.venue-brand:hover { text-decoration: none; }
.venue-brand-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.venue-brand-copy strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-brand-copy span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-logo { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; flex: none; }
.venue-logo--mark {
display: grid; place-items: center;
background: var(--brand); color: var(--brand-ink);
font-size: 14px; font-weight: 800; letter-spacing: -0.03em;
}
/* Os dois atalhos do cabecalho: circulo com o icone e o rotulo embaixo, como
nas telas de referencia. O rotulo some no celular estreito — o icone e a
posicao ja dizem o que sao, e duas palavras ali roubariam o nome da casa. */
.venue-head-actions { display: flex; align-items: flex-start; gap: 6px; flex: none; }
.venue-head-link {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 2px 4px; width: max-content; max-width: 88px;
font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.15;
}
.venue-head-link:hover { text-decoration: none; color: var(--text); }
.venue-head-link:hover .venue-head-icon { border-color: var(--brand); background: var(--brand-soft); }
.venue-head-icon {
display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
transition: border-color 0.15s, background 0.15s;
}
.venue-head-icon svg { width: 18px; height: 18px; }
.venue-drawer-toggle { display: none; }
.venue-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.venue .thread { padding-top: 0; }
/* ── A gaveta das conversas com esta casa ───────────────────────────────── */
.venue-drawer {
position: fixed;
inset: 0 auto 0 0;
z-index: 30;
width: min(86vw, 300px);
display: flex; flex-direction: column; gap: 4px;
padding: calc(16px + var(--safe-top)) 14px calc(16px + var(--safe-bottom));
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
transform: translateX(-102%);
transition: transform 0.22s ease;
}
.venue.is-open .venue-drawer { transform: translateX(0); }
.venue.is-open .scrim { opacity: 1; pointer-events: auto; }
.venue-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 8px; }
.venue-drawer-head strong { font-size: 15px; }
.venue-drawer-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.venue-drawer-new {
display: flex; align-items: center; gap: 8px;
padding: 9px 10px; margin-bottom: 6px; border-radius: 10px;
border: 1px dashed var(--border); color: var(--muted); font-size: 13.5px;
}
.venue-drawer-new:hover { text-decoration: none; border-color: var(--brand); color: var(--brand-text); }
.venue-drawer-new svg { width: 16px; height: 16px; }
.venue-drawer-item {
display: flex; align-items: baseline; gap: 8px;
padding: 9px 10px; border-radius: 10px; font-size: 13.5px;
}
.venue-drawer-item:hover { text-decoration: none; background: var(--surface); }
.venue-drawer-item.is-active { background: var(--brand-soft); color: var(--brand-text); }
.venue-drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-drawer-when { flex: none; font-size: 11px; color: var(--muted); }
/* ── A porta de entrada ─────────────────────────────────────────────────── */
.venue-welcome {
max-width: var(--thread-w);
margin: 0 auto;
/* O respiro de baixo e generoso porque o campo de texto flutua por cima do
fim da rolagem: sem ele, o ultimo destaque fica sob o degrade e parece
cortado. */
padding: 18px 20px 52px;
display: flex; flex-direction: column; gap: 22px;
}
.venue-hero { position: relative; display: flex; align-items: center; min-height: 168px; }
.venue-hero-copy { position: relative; z-index: 1; max-width: 28rem; }
/* A capa entra pela direita e some no texto: a manchete e a primeira coisa que
precisa ser legivel, e foto de prato atras de texto sem uma mascara e o jeito
mais rapido de perder as duas.
`height: 100%` e obrigatorio, nao enfeite: ![]()
e elemento SUBSTITUIDO, e
com `height: auto` o par top/bottom nao define altura nenhuma — a proporcao
da foto ganha, o `bottom` e ignorado, e uma foto alta escorre para fora do
hero e cobre as portas. Foi o que aconteceu. Com a altura cravada, o
`object-fit: cover` corta a foto em vez de empurrar o layout. */
.venue-hero-capa {
position: absolute;
right: -20px; top: 0;
width: 56%; max-width: 420px;
height: 100%;
object-fit: cover;
border-radius: 0 0 0 var(--radius-lg);
-webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 46%);
mask-image: linear-gradient(100deg, transparent 8%, #000 46%);
}
.venue-eyebrow {
display: flex; align-items: center; gap: 7px;
margin: 0 0 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.venue-eyebrow svg { width: 20px; height: 20px; }
.venue-eyebrow b { color: var(--brand-text); }
.venue-welcome h1 {
margin: 0;
font-size: clamp(27px, 6vw, 40px);
letter-spacing: -0.022em;
line-height: 1.12;
}
.venue-sub { margin: 12px 0 0; color: var(--muted); max-width: 30rem; }
/* ── As cinco portas ────────────────────────────────────────────────────── */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.door {
display: flex; align-items: flex-start; gap: 12px;
padding: 15px 14px; border-radius: var(--radius);
border: 1px solid transparent; background: var(--surface-2);
box-shadow: var(--shadow);
text-align: left;
transition: border-color 0.15s, transform 0.12s;
}
.door:hover { border-color: var(--brand); }
.door:active { transform: scale(0.99); }
.door--larga { grid-column: 1 / -1; align-items: center; }
.door-icon { flex: none; color: var(--brand-text); }
.door-icon svg { width: 25px; height: 25px; stroke-width: 1.5; }
.door-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.door-copy strong { font-size: 15px; font-weight: 650; line-height: 1.25; }
.door-copy span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.door-seta { width: 17px; height: 17px; color: var(--muted); flex: none; align-self: center; }
/* ── Os destaques do cardapio ───────────────────────────────────────────── */
.destaques { display: flex; flex-direction: column; gap: 12px; }
.destaques-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.destaques-head h2 { margin: 0; font-size: clamp(19px, 3.6vw, 23px); }
.destaques-head a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--brand-text); white-space: nowrap; }
.destaques-head a svg { width: 15px; height: 15px; }
/* Rola na horizontal em vez de quebrar: tres cartoes empilhados empurram o
campo de texto para fora da tela, e a fileira e justamente o que convida a
arrastar. O espacador vai no ultimo filho porque `padding-right` some em
container rolavel no Chromium. */
.destaques-trilho {
display: flex; gap: 10px;
overflow-x: auto; scrollbar-width: none;
margin: 0 -20px; padding: 2px 20px 4px;
scroll-snap-type: x proximate;
}
.destaques-trilho::-webkit-scrollbar { display: none; }
.destaque {
flex: none; width: 200px;
display: flex; flex-direction: column; gap: 7px;
padding: 0 0 12px; border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--border); background: var(--surface-2);
text-align: left; scroll-snap-align: start;
transition: border-color 0.15s;
}
.destaque:hover { border-color: var(--brand); }
.destaque-foto { width: 100%; height: 130px; object-fit: cover; display: block; }
.destaque-foto--vazia {
display: grid; place-items: center;
background: var(--brand-soft); color: var(--brand-text);
}
.destaque-foto--vazia svg { width: 30px; height: 30px; stroke-width: 1.2; }
.destaque-nome { padding: 0 12px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.destaque-rodape { padding: 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.destaque-preco { font-size: 14px; font-weight: 650; }
.destaque-selo {
font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
background: var(--brand-soft); color: var(--brand-text); white-space: nowrap;
}
.venue .suggestions { justify-content: flex-start; }
/* ── O cartao da historia, na conversa ──────────────────────────────────── */
.acao--historia {
display: flex; align-items: center; gap: 13px;
padding: 12px 14px 12px 12px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface-2);
box-shadow: var(--shadow); overflow: hidden;
}
.acao--historia:hover { text-decoration: none; border-color: var(--brand); }
.historia-mini-capa { width: 74px; height: 74px; border-radius: 10px; object-fit: cover; flex: none; }
.historia-mini-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.historia-mini-copy small {
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--brand-text); font-weight: 600;
}
.historia-mini-copy strong { font-family: var(--font-display); font-size: 16px; line-height: 1.2; }
.historia-mini-copy p {
margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.acao--historia > svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
/* ── O convite para ter conta ───────────────────────────────────────────── */
.acao--conta {
display: flex; flex-direction: column; gap: 10px;
padding: 16px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface-2);
box-shadow: var(--shadow);
}
.conta-form { display: flex; flex-direction: column; gap: 9px; }
.conta-campo { display: flex; flex-direction: column; gap: 4px; }
.conta-campo span { font-size: 12.5px; color: var(--muted); }
.conta-campo input {
padding: 9px 12px; border-radius: 10px;
border: 1px solid var(--border); background: var(--bg); color: inherit; font: inherit;
}
.conta-campo input:focus { outline: 0; border-color: var(--brand); }
.conta-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.conta-acoes .button { flex: 1 1 auto; justify-content: center; }
.conta-depois { align-self: flex-start; font-size: 13px; color: var(--muted); }
/* ── Conversas com estabelecimentos, no /app ────────────────────────────── */
.conversations--casas { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; flex: none; }
.conversations-titulo {
margin: 0 10px 4px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.conversations--casas .conversation-title { display: flex; flex-direction: column; gap: 1px; }
.conversations--casas .conversation-title small { font-size: 11.5px; color: var(--muted); }
/* ── Os cartoes dos fluxos guiados ──────────────────────────────────────── */
/* O que as quatro portas da tela de entrada entregam. Montados pelo SERVIDOR a
partir do cardapio real (`experience.service.js`): o modelo escreve a frase
em volta e nao decide nada do que esta aqui dentro. */
.acao--cartao {
display: flex; flex-direction: column; gap: 12px;
padding: 16px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface-2);
box-shadow: var(--shadow);
}
.cartao-cabeca { display: flex; flex-direction: column; gap: 3px; }
.cartao-titulo { margin: 0; font-size: 18px; }
.cartao-sub { margin: 0; font-size: 13.5px; color: var(--muted); }
.cartao-nota { margin: 0; font-size: 12.5px; color: var(--muted); }
.cartao-itens { list-style: none; margin: 0; padding: 0; }
/* Tres ou quatro pratos rolam na horizontal. Empilhados, o rodape com a soma —
que e a unica coisa acionavel do cartao — sairia da tela. */
.cartao-itens--trilho {
display: flex; gap: 10px;
overflow-x: auto; scrollbar-width: none;
margin: 0 -16px; padding: 2px 16px 4px;
scroll-snap-type: x proximate;
}
.cartao-itens--trilho::-webkit-scrollbar { display: none; }
.cartao-itens--lista { display: flex; flex-direction: column; gap: 10px; }
.cartao-item {
flex: none; width: 168px;
display: flex; flex-direction: column; gap: 4px;
padding: 0 0 12px; border-radius: 12px; overflow: hidden;
border: 1px solid var(--border); background: var(--bg);
scroll-snap-align: start;
}
.cartao-item > :not(.cartao-foto) { padding: 0 11px; }
.cartao-foto { width: 100%; height: 104px; object-fit: cover; display: block; }
.cartao-foto--vazia { background: var(--brand-soft); }
.cartao-papel {
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--muted); margin-top: 8px;
}
.cartao-nome { font-size: 14px; line-height: 1.25; }
.cartao-desc { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cartao-preco { font-size: 14px; font-weight: 650; margin-top: 2px; }
.cartao-selo {
align-self: flex-start; margin-top: 2px;
font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
background: var(--brand-soft); color: var(--brand-text);
}
.cartao-par {
padding: 11px 13px; border-radius: 12px;
border: 1px solid var(--border); background: var(--bg);
display: flex; flex-direction: column; gap: 4px;
}
.cartao-par-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* A soma e EXATA e do que esta no cardapio — nunca "estimativa", nunca faixa.
Prato sem preco fica de fora e e dito, como a comanda ja faz. */
.cartao-rodape {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 12px 13px; border-radius: 12px; background: var(--brand-soft);
}
.cartao-soma { display: flex; flex-direction: column; gap: 1px; }
.cartao-soma small { font-size: 11.5px; color: var(--muted); }
.cartao-soma strong { font-size: 21px; font-family: var(--font-display); }
.cartao-sem-preco { color: var(--warn); }
.cartao-rodape .button { flex: none; }
@media (max-width: 420px) {
.cartao-rodape { flex-direction: column; align-items: stretch; }
.cartao-rodape .button { justify-content: center; }
}
/* ── Telas de conteudo da casa: Sobre e Nossa historia ──────────────────── */
.venue-page {
min-height: 100dvh;
display: flex; flex-direction: column;
background: var(--bg);
padding-bottom: calc(76px + var(--safe-bottom));
}
.venue-page-head {
position: sticky; top: 0; z-index: 5;
display: flex; align-items: center; gap: 10px;
padding: calc(10px + var(--safe-top)) 18px 10px;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.venue-page-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.venue-page-body {
width: 100%; max-width: 46rem; margin: 0 auto;
padding: 22px 20px 30px;
display: flex; flex-direction: column; gap: 22px;
}
/* O botao de volta e fixo: as duas telas sao longas, e quem rolou ate o fim da
historia nao deveria precisar rolar de volta para voltar a conversar. */
.venue-voltar {
position: fixed;
left: 50%; transform: translateX(-50%);
bottom: calc(14px + var(--safe-bottom));
z-index: 10;
display: flex; align-items: center; gap: 10px;
width: min(calc(100% - 32px), 30rem);
padding: 14px 18px; border-radius: var(--radius);
background: var(--brand); color: var(--brand-ink);
font-size: 15px; font-weight: 600;
box-shadow: 0 10px 28px -12px rgb(0 0 0 / 0.45);
}
.venue-voltar:hover { text-decoration: none; }
.venue-voltar svg:last-child { margin-left: auto; }
/* ── Sobre ──────────────────────────────────────────────────────────────── */
.sobre-tagline { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.35; }
.sobre-meta { margin: 0; font-size: 13.5px; }
.sobre-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sobre-acoes .button { flex: 1 1 calc(50% - 8px); justify-content: center; }
.sobre-bloco { display: flex; flex-direction: column; gap: 6px; }
.sobre-bloco h2 {
font-family: var(--font); font-weight: 600; font-size: 12px;
text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0;
}
.sobre-bloco p { margin: 0; }
.sobre-bloco .hours { margin: 0; }
.sobre-historia {
display: flex; align-items: center; gap: 13px;
padding: 15px 16px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface-2);
}
.sobre-historia:hover { text-decoration: none; border-color: var(--brand); }
.sobre-historia > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sobre-historia strong { font-size: 15px; }
.sobre-historia span span { font-size: 12.5px; color: var(--muted); }
.sobre-historia > svg { width: 17px; height: 17px; color: var(--muted); }
/* ── Nossa historia ─────────────────────────────────────────────────────── */
.historia { width: 100%; }
.historia h1, .historia h2 { margin: 0; }
.historia-rotulo, .historia-eyebrow {
margin: 0 0 8px;
font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--brand-text);
}
.historia-capa { position: relative; display: flex; align-items: center; min-height: min(62vh, 480px); overflow: hidden; }
.historia-capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Texto claro sobre foto so se ha uma mascara que garanta o contraste: sem ela,
a manchete depende da foto que o dono subiu, e ele nao tem como saber disso. */
.historia-capa-copy {
position: relative; z-index: 1;
width: 100%; max-width: 46rem; margin: 0 auto;
padding: clamp(28px, 7vw, 56px) 20px;
}
.historia-capa:not(.historia-capa--sem-foto)::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgb(10 8 6 / 0.88) 0%, rgb(10 8 6 / 0.72) 42%, rgb(10 8 6 / 0.3) 100%);
}
.historia-capa:not(.historia-capa--sem-foto) .historia-capa-copy { color: #f7f2ea; z-index: 2; }
.historia-capa:not(.historia-capa--sem-foto) .historia-eyebrow { color: #e7d9c6; }
.historia-capa--sem-foto { background: var(--brand-soft); min-height: auto; }
.historia-capa h1 { font-size: clamp(31px, 7vw, 52px); line-height: 1.06; letter-spacing: -0.022em; max-width: 16ch; }
.historia-capa p { margin: 0 0 10px; max-width: 34rem; }
.historia-risco { width: 54px; height: 3px; border: 0; border-radius: 2px; background: var(--brand); margin: 20px 0 16px; }
.historia-capa:not(.historia-capa--sem-foto) .historia-risco { background: #e0874f; }
.historia-bloco {
width: 100%; max-width: 46rem; margin: 0 auto;
padding: clamp(28px, 6vw, 48px) 20px 0;
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 4vw, 34px);
align-items: center;
}
.historia-bloco--invertido .historia-bloco-texto { order: 2; }
.historia-bloco--sem-foto { grid-template-columns: 1fr; max-width: 40rem; }
.historia-bloco h2 { font-size: clamp(22px, 4.4vw, 31px); line-height: 1.15; margin-bottom: 12px; }
.historia-bloco p { margin: 0 0 12px; }
.historia-bloco p:last-child { margin-bottom: 0; }
.historia-bloco-foto { margin: 0; }
.historia-bloco-foto img {
width: 100%; height: 100%; max-height: 340px; object-fit: cover;
border-radius: var(--radius); display: block;
}
.historia-citacao {
width: 100%; max-width: 46rem; margin: 0 auto;
padding: clamp(24px, 5vw, 38px) 20px 0;
}
.historia-citacao p {
margin: 0; padding-left: 18px;
border-left: 3px solid var(--brand);
font-family: var(--font-display); font-style: italic;
font-size: clamp(19px, 3.6vw, 25px); line-height: 1.35;
color: var(--brand-text);
}
.historia-citacao footer { padding-left: 21px; margin-top: 9px; font-size: 13.5px; color: var(--muted); }
.historia-filosofia {
width: 100%; max-width: 46rem;
margin: clamp(28px, 6vw, 48px) auto 0;
padding: clamp(20px, 4vw, 30px);
display: flex; gap: 16px; align-items: flex-start;
background: var(--brand-soft); border-radius: var(--radius);
}
.historia-filosofia-icone { color: var(--brand-text); flex: none; }
.historia-filosofia-icone svg { width: 38px; height: 38px; stroke-width: 1.2; }
.historia-filosofia h2 { font-size: clamp(20px, 3.8vw, 26px); line-height: 1.2; margin: 0 0 10px; }
.historia-filosofia p:not(.historia-rotulo) { margin: 0 0 10px; }
.historia-filosofia p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
.venue-drawer-toggle { display: grid; place-items: center; }
.venue-head { padding-left: 14px; padding-right: 14px; gap: 8px; }
}
/* O rotulo so desaparece quando nao cabe MESMO. Um circulo sem legenda e um
enigma: "nossa historia" e uma promessa, e e a promessa que faz tocar. */
@media (max-width: 400px) {
.venue-head-link { width: 42px; font-size: 0; gap: 0; }
.venue-head-icon { width: 36px; height: 36px; }
.venue-head-icon svg { width: 18px; height: 18px; }
}
@media (max-width: 560px) {
.doors { grid-template-columns: 1fr; }
.door--larga { align-items: flex-start; }
/* A capa continua sangrando pela direita no celular, como nas telas de
referencia — e nao vira faixa por cima das portas. Uma faixa de 150px
empurra as cinco portas para fora da primeira tela, e as portas sao o
motivo desta tela existir: a foto e o cenario, nao o assunto.
Em troca, o texto encolhe e a manchete quebra em tres ou quatro linhas,
que e exatamente o que a referencia faz. */
.venue-hero { min-height: 172px; }
/* O limite vai na MANCHETE, nao no bloco: a linha de cima ("TableTap · seu
concierge gastronomico") e larga e nao disputa espaco com a foto, porque no
alto a mascara ja deixou a imagem transparente. Espremer as duas coisas
juntas quebrava aquela linha em duas. */
.venue-hero--com-capa .venue-hero-copy h1,
.venue-hero--com-capa .venue-sub { max-width: 61%; }
.venue-hero-capa {
width: 52%;
-webkit-mask-image: linear-gradient(105deg, transparent 4%, #000 52%);
mask-image: linear-gradient(105deg, transparent 4%, #000 52%);
}
.historia-bloco { grid-template-columns: 1fr; }
.historia-bloco--invertido .historia-bloco-texto { order: 0; }
.historia-filosofia { flex-direction: column; }
.sobre-acoes .button { flex-basis: 100%; }
}
/* ── Telas internas: backoffice e painel do parceiro ────────────────────── */
/* Mesmo vocabulário das páginas de conteúdo (.card, .field, .button), só que
numa largura que cabe tabela. Nada aqui é uma segunda folha de estilo. */
.wide { flex: 1; width: 100%; max-width: 76rem; margin: 0 auto; padding: 28px 20px 56px; }
.wide--form { max-width: 58rem; }
.manage-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.manage-head h1 { font-size: clamp(24px, 4.2vw, 33px); letter-spacing: -0.02em; margin: 0; }
.manage-head p { margin: 2px 0 0; }
.manage-head .eyebrow { margin: 0 0 4px; }
.manage-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.manage-nav a {
padding: 9px 14px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-size: 14px;
color: var(--muted);
}
.manage-nav a:hover { color: var(--text); text-decoration: none; }
.manage-nav a.is-active { color: var(--brand-text); border-bottom-color: var(--brand); font-weight: 600; }
/* O convite para ser avisado no celular vive na navegação, empurrado para a
direita: é uma ação, não uma seção, e não disputa com as abas. */
.manage-nav-acao {
margin: 0 0 3px auto; padding: 6px 12px; align-self: center;
font-size: 13px; color: var(--brand-text);
border: 1px solid var(--brand); border-radius: 999px; background: var(--brand-soft);
}
.manage-nav-acao:hover { background: var(--brand); color: var(--brand-ink); }
.manage-nav-acao:disabled { opacity: 0.6; cursor: progress; }
.notice {
padding: 11px 14px; border-radius: 10px; font-size: 14px; margin: 0 0 16px;
background: var(--brand-soft); color: var(--brand-text); border: 1px solid var(--brand);
}
.alert { margin: 0 0 16px; }
/* ── Números do painel ─────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stats--compact { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 6px; }
.stat {
display: flex; flex-direction: column; gap: 2px;
padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.stat-value { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.stat-label { font-size: 13px; color: var(--muted); }
.bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(120px, 13rem) 1fr auto; align-items: center; gap: 12px; font-size: 14px; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { display: block; height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.bar-value { font-weight: 600; font-variant-numeric: tabular-nums; }
/* ── Filtros e tabela ──────────────────────────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.toolbar input[type='search'] { flex: 1 1 16rem; min-width: 0; }
.toolbar input, .toolbar select {
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
background: var(--bg); color: inherit; font: inherit;
}
.toolbar input:focus, .toolbar select:focus { outline: 0; border-color: var(--brand); }
/* Tabela é o único elemento que pode ser mais largo que a tela — e rola sozinha. */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 42rem; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { font-family: var(--font); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface); }
.cell-sub { display: block; font-size: 12.5px; color: var(--muted); }
.cell-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 13.5px; }
.cell-actions a, .cell-actions .link-button { color: var(--brand-text); text-decoration: none; }
.cell-actions a:hover, .cell-actions .link-button:hover { text-decoration: underline; }
.pill {
display: inline-block; font-size: 12px; font-weight: 600;
padding: 2px 9px; border-radius: 999px;
background: var(--surface); color: var(--muted);
}
.pill--admin { background: var(--brand-soft); color: var(--brand-text); }
.pill--venue { background: rgb(6 33 29 / 0.09); color: var(--accent); }
.pill--active { background: rgb(23 105 77 / 0.13); color: var(--ok); }
.pill--paused { background: rgb(146 96 15 / 0.14); color: var(--warn); }
.pill--blocked { background: rgb(179 56 47 / 0.12); color: var(--danger); }
/* No verde profundo o selo de parceiro perderia o fundo: quem carrega o
contraste aqui e a areia, e o texto ja vem de --accent. */
:root[data-theme='dark'] .pill--venue { background: rgb(217 195 172 / 0.16); }
:root[data-theme='dark'] .pill--active { background: rgb(102 199 156 / 0.15); }
:root[data-theme='dark'] .pill--paused { background: rgb(224 176 106 / 0.15); }
:root[data-theme='dark'] .pill--blocked { background: rgb(239 128 121 / 0.14); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; font-size: 14px; }
.pager-total { margin-top: 14px; font-size: 13px; }
/* ── Formulários largos ────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.field--wide { grid-column: 1 / -1; }
.field select, .field textarea {
padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
background: var(--bg); color: inherit; font: inherit;
}
.field textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }
.field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand); }
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field--check input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--brand); }
.field--check span { font-size: 14px; color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.card--danger { border-color: rgb(179 56 47 / 0.35); }
.card--danger h2 { color: var(--danger); }
.button--danger { border-color: rgb(179 56 47 / 0.5); color: var(--danger); }
.button--danger:hover { background: rgb(179 56 47 / 0.1); border-color: var(--danger); }
/* ── O campo de foto ───────────────────────────────────────────────────── */
/* A miniatura do que esta no ar, o seletor e o "tirar". Cada um e um formulario
proprio — arquivo nao volta ao campo depois de um erro em outro lugar da
pagina, e perder a foto escolhida por causa de um titulo em branco e o tipo
de coisa que faz alguem desistir de cadastrar. */
.foto-campo {
display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
padding: 14px 0; border-top: 1px solid var(--border);
}
.foto-campo:first-of-type { border-top: 0; }
.foto-preview {
display: grid; place-items: center; flex: none;
width: 96px; height: 72px; border-radius: 10px; overflow: hidden;
background: var(--surface); color: var(--muted);
border: 1px solid var(--border);
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.foto-preview svg { width: 24px; height: 24px; }
.foto-campo-corpo { display: flex; flex-direction: column; gap: 7px; min-width: 14rem; flex: 1; }
.foto-campo-corpo strong { font-size: 14px; }
.foto-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foto-form input[type='file'] { font-size: 13px; max-width: 100%; }
.foto-form .button { padding: 7px 14px; font-size: 13.5px; }
.foto-remover { align-self: center; }
/* ── Cadastro da historia ──────────────────────────────────────────────── */
.historia-campo {
border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px 4px; margin: 0 0 12px;
}
.historia-campo legend {
padding: 0 7px; font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
/* ── Editor de cardápio ────────────────────────────────────────────────── */
.menu-editor { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 18px; align-items: start; }
.menu-editor > form { position: sticky; top: 16px; margin: 0; }
.menu-list { display: flex; flex-direction: column; gap: 16px; }
.menu-list .card { margin: 0; }
.menu-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.menu-item.is-off > div:first-child { opacity: 0.55; }
@media (max-width: 860px) {
.menu-editor { grid-template-columns: minmax(0, 1fr); }
.menu-editor > form { position: static; }
.wide { padding: 20px 14px 40px; }
.bars li { grid-template-columns: 1fr auto; }
.bars .bar { grid-column: 1 / -1; }
}
/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.app { grid-template-columns: minmax(0, 1fr); }
.sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 30;
width: min(84vw, var(--sidebar-w));
transform: translateX(-102%);
transition: transform 0.22s ease;
}
.app.is-open .sidebar { transform: translateX(0); }
.scrim {
display: block;
position: fixed;
inset: 0;
z-index: 20;
background: rgb(0 0 0 / 0.45);
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
}
.app.is-open .scrim { opacity: 1; pointer-events: auto; }
.icon-button, .sidebar-close { display: grid; place-items: center; }
.msg, .cards, .composer-area, .ask-location { padding-left: 14px; padding-right: 14px; }
.composer { padding-left: 14px; }
.thread { scroll-padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ─────────────────────────────────────────────────────────────────────────────
Painel do parceiro — o resumo (/painel).
Escrito para uma pessoa que pode não ser técnica, olhando no celular, no meio
do serviço: número grande primeiro, explicação embaixo, e nenhum gráfico que
dependa de JavaScript para existir. Tudo escala por `auto-fit`, então a mesma
folha serve o celular de 360px e o monitor do escritório sem breakpoint novo.
───────────────────────────────────────────────────────────────────────────── */
.periodos { display: flex; gap: 6px; margin: 0 0 20px; flex-wrap: wrap; }
.periodos a {
padding: 7px 14px; border-radius: 999px; font-size: 14px; color: var(--muted);
border: 1px solid var(--border); background: var(--surface-2);
}
.periodos a:hover { color: var(--text); text-decoration: none; }
.periodos a.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.kpi-valor {
font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.05;
color: var(--accent); margin: 0 0 2px;
}
.kpi-titulo { font-family: var(--font); font-size: 14px; font-weight: 600; margin: 0; letter-spacing: 0; }
.kpi-explica { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; line-height: 1.45; }
.kpi-delta { font-size: 12.5px; margin: 0; display: flex; align-items: center; gap: 5px; }
.kpi-delta.is-up { color: var(--ok); }
.kpi-delta.is-down { color: var(--danger); }
.kpi-delta.is-flat { color: var(--muted); }
/* `align-items: start`: cada cartão tem a altura do que tem dentro. Esticados
até a altura da linha, os gráficos curtos ficavam com um palmo de espaço em
branco embaixo — a grade fingindo simetria que o conteúdo não tem. */
.painel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.painel .card { margin-bottom: 14px; }
.painel-grid .card { margin-bottom: 0; }
.painel h2 { font-size: 17px; margin: 0 0 4px; }
.painel h3.sub { font-size: 14px; font-family: var(--font); font-weight: 600; margin: 20px 0 8px; }
/* O gráfico é uma faixa: a altura é fixa em CSS e o SVG estica para caber. */
.chart { width: 100%; height: 110px; margin-top: 14px; display: block; }
.eixo { list-style: none; display: flex; justify-content: space-between; padding: 0; margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
/* A mesma informação do gráfico, em tabela, para leitor de tela. Escondida da
vista, nunca de quem navega por áudio — por isso não é `display: none`. */
.tabela-oculta {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0; margin: -1px; padding: 0;
}
.semana, .assuntos, .funil { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.semana li { display: grid; grid-template-columns: 34px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.semana-dia { color: var(--muted); }
.semana-valor { text-align: right; color: var(--muted); }
.semana-barra, .assunto-barra, .funil-barra { display: block; height: 8px; background: var(--surface); border-radius: 5px; overflow: hidden; }
.semana-barra > span, .assunto-barra > span, .funil-barra > span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.assuntos li { display: grid; grid-template-columns: 1fr 1fr auto; grid-template-areas: 'nome barra valor' 'campo campo campo'; gap: 4px 10px; align-items: center; font-size: 13px; }
.assunto-nome { grid-area: nome; }
.assunto-barra { grid-area: barra; }
.assunto-valor { grid-area: valor; color: var(--muted); }
.assunto-campo { grid-area: campo; font-size: 11.5px; color: var(--muted); }
.assunto-barra > span { background: var(--brand); }
.funil li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.funil-valor { color: var(--muted); }
.cadastro-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.checklist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.checklist li { display: grid; gap: 2px; padding-left: 20px; position: relative; font-size: 14px; }
.checklist li::before {
content: ''; position: absolute; left: 0; top: 6px; width: 10px; height: 10px;
border-radius: 3px; border: 2px solid var(--brand);
}
.checklist .muted { font-size: 12.5px; }
.perguntas li { font-size: 14px; color: var(--text); }
.vazio { text-align: center; }
.observacoes { border-left: 3px solid var(--brand); }
.observacao { padding: 12px 0; border-top: 1px solid var(--border); }
.observacao:first-child { border-top: 0; padding-top: 4px; }
.observacao h3 { font-family: var(--font); font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }
.observacao p { font-size: 13.5px; margin: 0; }
.observacao .acao { margin-top: 6px; font-size: 13px; color: var(--brand-text); }
.observacao .fonte { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.rodape-obs { font-size: 11.5px; margin-top: 14px; }
@media (max-width: 560px) {
.kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { padding: 12px 14px; }
.kpi-valor { font-size: 27px; }
.kpi-explica { display: none; } /* no celular o título já basta; a explicação come a tela */
.assuntos li { grid-template-columns: 1fr auto; grid-template-areas: 'nome valor' 'barra barra' 'campo campo'; }
}
/* ─────────────────────────────────────────────────────────────────────────────
Ações dentro da conversa — reserva e pedido de retorno.
Ficam na largura da bolha do assistente porque são a conclusão da frase dele,
não um painel à parte. O grid de dois campos vira um por linha abaixo de
420px, que é onde a maioria vai preencher isto: um celular, sentado à mesa.
───────────────────────────────────────────────────────────────────────────── */
/* O bloco de ação entra na conversa pela mesma porta que o texto: `.msg` dá a
coluna e o respiro lateral, e o `.acao` fica alinhado com a fala em vez de
nascer colado na borda da tela. */
.msg--acao { display: flex; }
.acao {
align-self: flex-start;
max-width: min(520px, 100%);
margin: 4px 0 6px;
padding: 16px 18px;
border: 1px solid var(--border);
border-left: 3px solid var(--brand);
border-radius: 14px;
background: var(--surface-2);
}
.acao h3 { font-family: var(--font); font-size: 15px; font-weight: 600; margin: 0 0 4px; letter-spacing: 0; }
.acao-vaga { font-size: 13.5px; color: var(--ok); margin: 0 0 12px; }
.acao-nota { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.acao-aviso { font-size: 13px; color: var(--danger); margin: 8px 0 0; }
.acao-form { display: grid; gap: 12px; }
.acao-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acao-campo { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.acao-campo input {
font: inherit; font-size: 15px; color: var(--text);
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
/* 15px e não 14: abaixo de 16px o Safari no iPhone dá zoom ao focar o campo,
e a tela pula no meio de uma reserva. */
}
.acao-campo input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.acao-campo small { font-size: 11.5px; }
.acao-contato { display: grid; gap: 8px; }
.acao-conhecido {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
font-size: 13.5px; color: var(--text); margin: 0;
padding: 10px 12px; border-radius: 10px; background: var(--surface);
}
.acao--ok { border-left-color: var(--ok); }
.acao--ok p { font-size: 13.5px; margin: 2px 0 0; color: var(--muted); }
.acao-link { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--brand-text); }
@media (max-width: 420px) { .acao-grid { grid-template-columns: 1fr; } }
/* ── Microfone ────────────────────────────────────────────────────────────── */
.mic {
flex: none; width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--border); background: var(--bg); color: var(--muted);
display: grid; place-items: center; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.mic:hover { color: var(--text); border-color: var(--muted); }
.mic.is-listening { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.mic.is-listening .mic-icon { animation: mic-pulse 1.2s ease-in-out infinite; }
/* O desenho está em `voice.js`, numa viewBox de 24: aqui só o tamanho. Era
desenhado em CSS, e o arco da base caía fora do botão — sobrava uma pílula. */
.mic-icon { display: block; width: 18px; height: 18px; }
@keyframes mic-pulse { 50% { opacity: .45; } }
.mic-status { max-width: var(--thread-w); font-size: 12.5px; color: var(--muted); margin: 6px 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .mic.is-listening .mic-icon { animation: none; } }
/* ── Agenda: reservas e retornos ──────────────────────────────────────────── */
.agenda { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 2px; }
.agenda-item {
display: grid; align-items: center; gap: 4px 14px; padding: 12px 0;
border-top: 1px solid var(--border); font-size: 14px;
grid-template-columns: 62px minmax(0, 1fr) auto;
grid-template-areas: 'hora quem acoes' '. status acoes';
}
.agenda-item:first-child { border-top: 0; }
.agenda-item.is-pendente { background: var(--brand-soft); border-radius: 10px; padding: 12px; border-top-color: transparent; }
.agenda-hora { grid-area: hora; font-weight: 600; color: var(--accent); }
.agenda-quem { grid-area: quem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.agenda-quem .muted { font-size: 13px; }
.agenda-obs { flex-basis: 100%; font-size: 12.5px; }
.agenda-status { grid-area: status; font-size: 12.5px; color: var(--muted); }
.agenda-acoes { grid-area: acoes; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.button--small { padding: 7px 14px; font-size: 13px; }
@media (max-width: 560px) {
.agenda-item {
grid-template-columns: 62px minmax(0, 1fr);
grid-template-areas: 'hora quem' '. status' 'acoes acoes';
}
.agenda-acoes { justify-content: flex-start; margin-top: 8px; }
}
.acao-enderecos { display: grid; gap: 8px; margin: 10px 0; }
.acao-endereco {
text-align: left; font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.acao-endereco:hover { border-color: var(--brand); }
/* Texto que o leitor de tela precisa e a tela não. */
.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;
}
/* ── As mesas da casa ─────────────────────────────────────────────────────── */
.mesas {
border: 0; padding: 0; margin: 14px 0 6px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px;
}
.mesa-campo {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.mesa-campo:focus-within { border-color: var(--brand); }
.mesa-lugares { flex: 1; font-size: 13px; color: var(--muted); }
.mesa-campo input {
width: 46px; flex: none; text-align: center;
font: inherit; font-size: 15px; color: var(--text);
padding: 5px 4px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
}
.mesas-total { margin-top: 2px; }
/* ── O QR da mesa ─────────────────────────────────────────────────────────
A tela é um previsão do papel: o que aparece aqui é o que sai na impressora.
Por isso o cartão é dimensionado em milímetros — em pixel ele ficaria certo
no monitor e errado na folha, e a folha é o produto. */
.dicas-qr { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.dicas-qr li { padding-left: 18px; position: relative; }
.dicas-qr li::before { content: "·"; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }
.folha { display: grid; gap: 8mm; justify-content: center; margin: 24px 0; }
.folha--cartela { grid-template-columns: repeat(2, 85mm); }
.folha--cartaz { grid-template-columns: 170mm; }
.qr-cartao {
--casa: var(--accent);
--casa-ink: #fff;
box-sizing: border-box;
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 5mm 5mm 4mm; gap: 1.5mm;
background: var(--casa); color: var(--casa-ink);
border: 1px solid var(--border); border-radius: 4mm;
break-inside: avoid;
}
.qr-cartao-casa {
font-family: var(--font-display); font-weight: 600; font-size: 5mm; line-height: 1.15;
margin: 0; letter-spacing: 0.01em;
}
.qr-cartao-codigo {
background: #fff; border-radius: 2mm; padding: 2mm; margin: 1mm 0;
width: 38mm; height: 38mm;
}
.qr-cartao-codigo svg { display: block; width: 100%; height: 100%; }
.qr-cartao-mesa {
margin: -2mm 0 0; font-family: var(--font-display); font-size: 7mm; font-weight: 700; line-height: 1;
}
.qr-cartao-chamada { margin: 0; font-size: 3.6mm; font-weight: 600; }
.qr-cartao-texto { margin: 0; font-size: 3mm; line-height: 1.35; opacity: 0.85; max-width: 62mm; }
.qr-cartao-link {
margin: 1mm 0 0; font-size: 2.9mm; letter-spacing: 0.02em; opacity: 0.75;
word-break: break-all;
}
.qr-cartao-assinatura { margin: 0; font-size: 2.6mm; opacity: 0.6; }
.qr-cartao-assinatura strong { font-weight: 600; }
/* O cartaz é o mesmo cartão em outra escala — nada de segundo desenho para
manter em dia. */
.folha--cartaz .qr-cartao { padding: 18mm 12mm 12mm; gap: 4mm; border-radius: 6mm; }
.folha--cartaz .qr-cartao-casa { font-size: 11mm; }
.folha--cartaz .qr-cartao-codigo { width: 85mm; height: 85mm; padding: 4mm; border-radius: 3mm; }
.folha--cartaz .qr-cartao-chamada { font-size: 7mm; }
.folha--cartaz .qr-cartao-texto { font-size: 5mm; max-width: 120mm; }
.folha--cartaz .qr-cartao-link { font-size: 4.5mm; }
.folha--cartaz .qr-cartao-assinatura { font-size: 3.6mm; }
@media (max-width: 760px) {
.folha--cartela { grid-template-columns: 85mm; }
.folha--cartaz { grid-template-columns: min(100%, 170mm); }
}
/* Impresso sai só a folha: sem menu, sem instrução, sem a cor de fundo do
painel. `print-color-adjust` porque a cor da casa não é decoração aqui — um
cartão branco com um código no meio é um papel que ninguém identifica. */
@media print {
@page { margin: 8mm; }
.topbar, .nao-imprime, .notice, .alert { display: none !important; }
body { background: #fff; }
main.painel { padding: 0; margin: 0; max-width: none; }
.folha--cartela { grid-template-columns: repeat(2, 85mm); }
.folha { margin: 0; gap: 6mm; }
.qr-cartao {
border: 1px dashed rgb(0 0 0 / 0.25);
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.folha--cartaz .qr-cartao { border: 0; }
}
/* ── O que o TableTap guarda sobre você ───────────────────────────────────
Dentro da conversa, não numa tela de configuração: aparece no momento em que
a pessoa perguntou, que é o único em que ela se importa. */
.acao--perfil { border-left-color: var(--accent); }
.perfil-lista { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.perfil-item {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
font-size: 13.5px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.perfil-item:last-child { border-bottom: 0; padding-bottom: 0; }
.perfil-rotulo { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.perfil-valor { flex: 1; font-weight: 550; }
.perfil-vazio { font-size: 13.5px; color: var(--muted); }
.perfil-acoes { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.plano-bloqueado { border-left: 3px solid var(--brand); }
.plano-bloqueado h2 { margin-top: 0; }
/* O trecho que o parceiro cola no site dele: feito para ser selecionado inteiro
com um toque, e não para ser lido. */
.snippet {
margin: 8px 0 0; padding: 12px 14px; overflow-x: auto;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.snippet code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
/* ── Gráficos do relatório ────────────────────────────────────────────────
A altura mora aqui, e não no JavaScript: o Chart.js roda com
`maintainAspectRatio: false` justamente para obedecer à caixa, e assim o
gráfico acompanha o celular do dono sem uma segunda tabela de tamanhos.
A tabela de números é o que aparece quando não há JavaScript. Quando o
gráfico entra, ela ganha `.tabela-oculta` e continua no documento para quem
usa leitor de tela — um `