:root {
	--tinta: #14204A;
	--tinta-suave: #4A5578;
	--amarelo: #FFC93C;
	--amarelo-forte: #F2B000;
	--papel: #FFFFFF;
	--fundo: #F4F6FB;
	--linha: #DFE3EE;
	--tomate: #E8452C;
	--verde: #1A9A5B;
	--fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif;
	--fonte-texto: "Figtree", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--fonte-texto); font-size: 1rem; line-height: 1.5; color: var(--tinta); background: var(--fundo); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--fonte-titulo); letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amarelo-forte); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999px; font: 600 1rem/1 var(--fonte-texto); text-decoration: none; cursor: pointer; white-space: nowrap; }
.botao:disabled { opacity: .6; cursor: progress; }
.botao-amarelo { background: var(--amarelo); color: var(--tinta); }
.botao-amarelo:hover { background: var(--amarelo-forte); }
.botao-escuro { background: var(--tinta); color: var(--papel); }
.botao-claro { background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); }
.botao-perigo { background: var(--tomate); color: var(--papel); }
.botao-cheio { width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
.botao-texto { background: none; border: 0; padding: .5rem 0; font: 600 1rem var(--fonte-texto); color: var(--tinta-suave); cursor: pointer; }
.botao-pequeno { min-height: 2.25rem; padding: 0 .875rem; font-size: .9375rem; }

.marca { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; font: 700 1.25rem/1 var(--fonte-titulo); }
.marca b { font-weight: 800; }
.marca-clara { color: var(--papel); }
.marca-quadrado { width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: var(--amarelo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2' fill='%2314204A'/%3E%3C/svg%3E") center / 58% no-repeat; flex: none; }

.campo { display: grid; gap: .375rem; }
.campo > span { font-weight: 600; font-size: .9375rem; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 3rem; padding: .625rem .875rem; border: 1.5px solid var(--linha); border-radius: .75rem; font: 1rem var(--fonte-texto); color: var(--tinta); background: var(--papel); }
.campo textarea { min-height: 5rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); }
.campo [aria-invalid="true"] { border-color: var(--tomate); background: #FFF6F4; }
.campos-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (width < 34rem) { .campos-dupla { grid-template-columns: 1fr; } }

.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 50; translate: -50% 1rem; max-width: min(92vw, 28rem); padding: .875rem 1.25rem; border-radius: .875rem; background: var(--tinta); color: var(--papel); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s ease, translate .2s ease; }
.toast[data-tipo="erro"] { background: var(--tomate); }
.toast[data-tipo="ok"] { background: var(--verde); }
.toast.visivel { opacity: 1; translate: -50% 0; }

/* Acesso: cadastro e login */
.acesso { min-height: 100dvh; display: grid; grid-template-columns: minmax(18rem, 30rem) 1fr; background: var(--papel); }
@media (width < 52rem) { .acesso { grid-template-columns: 1fr; } }
.acesso-lado { display: grid; align-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--tinta); color: var(--papel); }
.acesso-lado h1 { font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem); font-weight: 800; }
.acesso-lado p { margin-top: 1rem; font-size: 1.1875rem; color: rgb(255 255 255 / .75); max-width: 26ch; }
.acesso-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; font-weight: 600; }
.acesso-lista li::before { content: ""; display: inline-block; width: .625rem; height: .625rem; margin-right: .625rem; border-radius: 50%; background: var(--amarelo); }
@media (width < 52rem) { .acesso-lista { display: none; } .acesso-lado { gap: 1rem; } }
.acesso-form { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.acesso-form form { width: min(100%, 30rem); display: grid; gap: 1rem; }
.acesso-form h2 { font-size: 2rem; font-weight: 800; margin-bottom: .25rem; }
.passo { display: grid; gap: 1rem; }
.passo-indice { font-weight: 600; color: var(--tinta-suave); font-size: .9375rem; }
.passo-ajuda { color: var(--tinta-suave); margin-top: -.5rem; }
.acesso-rodape { text-align: center; color: var(--tinta-suave); font-size: .9375rem; }
.nichos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.nicho { display: grid; justify-items: start; gap: .625rem; padding: 1rem; border: 2px solid var(--linha); border-radius: 1rem; background: var(--papel); font: 700 1rem/1.2 var(--fonte-titulo); color: var(--tinta); text-align: start; cursor: pointer; }
.nicho[aria-checked="true"] { border-color: var(--tinta); background: #FFF8E3; }
.nicho-icone { width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: var(--amarelo); }

/* Painel */
.painel { min-height: 100dvh; display: grid; grid-template-columns: 15.5rem 1fr; }
@media (width < 60rem) { .painel { grid-template-columns: 1fr; } }
.lateral { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 1rem; background: var(--tinta); color: var(--papel); overflow-y: auto; }
@media (width < 60rem) { .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; } }
.lateral-nome { padding: .75rem; border-radius: .875rem; background: rgb(255 255 255 / .08); }
.lateral-nome b { display: block; font: 700 1rem/1.2 var(--fonte-titulo); }
.lateral-nome small { color: rgb(255 255 255 / .65); }
.menu-lateral { display: grid; gap: .25rem; }
@media (width < 60rem) { .menu-lateral { display: flex; flex-wrap: wrap; } .lateral-nome { display: none; } }
.menu-lateral a { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: .75rem; text-decoration: none; font-weight: 600; color: rgb(255 255 255 / .78); }
.menu-lateral a:hover { background: rgb(255 255 255 / .08); color: var(--papel); }
.menu-lateral a[aria-current="page"] { background: var(--amarelo); color: var(--tinta); }
.menu-lateral svg { width: 1.25rem; height: 1.25rem; flex: none; }
.lateral-rodape { margin-top: auto; display: grid; gap: .5rem; }
.lateral-rodape a { color: rgb(255 255 255 / .65); text-decoration: none; font-size: .9375rem; padding: .25rem .75rem; }

.conteudo { padding: clamp(1rem, 3vw, 2.25rem); display: grid; align-content: start; gap: 1.5rem; min-width: 0; }
.faixa-master { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 1rem; border-radius: .875rem; background: var(--amarelo); font-weight: 600; }
.cabecalho { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cabecalho h1 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 800; }
.cabecalho p { color: var(--tinta-suave); margin-top: .375rem; }

.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 1.25rem; padding: clamp(1rem, 2.5vw, 1.5rem); min-width: 0; }
.cartao h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cartao-topo h2 { margin: 0; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grade-3 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; align-items: start; }
@media (width < 72rem) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.numero { background: var(--papel); border: 1px solid var(--linha); border-radius: 1.25rem; padding: 1.125rem 1.25rem; }
.numero b { display: block; font: 800 clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem)/1.05 var(--fonte-titulo); }
.numero small { color: var(--tinta-suave); font-weight: 500; }
.numero-destaque { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.numero-destaque small { color: rgb(255 255 255 / .7); }

.ativacao { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.25rem; background: var(--tinta); color: var(--papel); }
@media (width < 46rem) { .ativacao { grid-template-columns: 1fr; } }
.ativacao h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 800; }
.ativacao p { color: rgb(255 255 255 / .75); margin-top: .5rem; max-width: 52ch; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vazio { padding: 2rem 1rem; text-align: center; color: var(--tinta-suave); }
.vazio b { display: block; color: var(--tinta); font: 700 1.125rem var(--fonte-titulo); margin-bottom: .25rem; }

.ao-vivo { display: grid; grid-template-columns: auto 1fr auto; gap: .875rem; align-items: center; padding: .875rem 1rem; border-radius: 1rem; background: var(--fundo); animation: entra-linha .3s ease-out; }
@keyframes entra-linha { from { opacity: 0; translate: 0 -.25rem; } }
.ao-vivo-ponto { width: .75rem; height: .75rem; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgb(26 154 91 / .5); }
@media (prefers-reduced-motion: no-preference) { .ao-vivo-ponto { animation: pulsa 1.6s ease-out infinite; } }
@keyframes pulsa { to { box-shadow: 0 0 0 .5rem rgb(26 154 91 / 0); } }
.ao-vivo b { display: block; }
.ao-vivo small { color: var(--tinta-suave); }
.ao-vivo time { font: 600 .9375rem var(--fonte-texto); font-variant-numeric: tabular-nums; }

.tabela { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabela th { text-align: start; font-weight: 600; color: var(--tinta-suave); padding: .5rem .75rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: .75rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela-rolagem { overflow-x: auto; }
.etiqueta { display: inline-flex; align-items: center; padding: .25rem .625rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; background: var(--fundo); white-space: nowrap; }
.etiqueta-amarela { background: var(--amarelo); }
.etiqueta-verde { background: #DDF5E8; color: #0E6B3D; }
.etiqueta-vermelha { background: #FDE3DE; color: #A42A16; }
.etiqueta-escura { background: var(--tinta); color: var(--papel); }

.pedido { display: grid; gap: .5rem; padding: 1rem; border-radius: 1rem; border: 1px solid var(--linha); background: var(--papel); animation: entra-linha .3s ease-out; }
.pedido-topo { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.pedido-topo b { font: 800 1.125rem var(--fonte-titulo); }
.pedido-itens { margin: 0; padding-left: 1.125rem; color: var(--tinta-suave); }
.pedido-rodape { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; font-weight: 600; }
.pedidos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }

.categoria { display: grid; gap: .75rem; }
.categoria + .categoria { margin-top: 1.5rem; }
.categoria-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.categoria-topo h3 { font-size: 1.25rem; font-weight: 700; }
.produto { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .875rem 1rem; border-radius: 1rem; background: var(--fundo); }
.produto b { display: block; }
.produto small { color: var(--tinta-suave); }
.produto-preco { font-weight: 700; font-variant-numeric: tabular-nums; }
.produto.inativo { opacity: .55; }
.chave { position: relative; width: 2.75rem; height: 1.625rem; border-radius: 999px; background: var(--linha); border: 0; cursor: pointer; flex: none; }
.chave::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--papel); transition: translate .15s ease; }
.chave[aria-checked="true"] { background: var(--verde); }
.chave[aria-checked="true"]::after { translate: 1.125rem 0; }
.icone-botao { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; border: 0; background: transparent; color: var(--tinta-suave); cursor: pointer; }
.icone-botao:hover { background: var(--linha); color: var(--tinta); }
.icone-botao svg { width: 1.125rem; height: 1.125rem; }

dialog.janela { width: min(94vw, 32rem); padding: 0; border: 0; border-radius: 1.25rem; color: var(--tinta); box-shadow: 0 30px 60px -20px rgb(20 32 74 / .4); }
dialog.janela::backdrop { background: rgb(20 32 74 / .45); }
.janela form { display: grid; gap: 1rem; padding: 1.5rem; }
.janela h2 { font-size: 1.375rem; font-weight: 800; }
.janela-acoes { display: flex; justify-content: flex-end; gap: .75rem; margin-top: .5rem; }

.numeros-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (width < 80rem) { .numeros-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (width < 40rem) { .numeros-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legenda { display: flex; gap: 1rem; font-weight: 600; font-size: .9375rem; }
.legenda span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .375rem; border-radius: 3px; vertical-align: -1px; }
.legenda-ligacoes::before { background: var(--tinta); }
.legenda-pedidos::before { background: var(--amarelo-forte); }
.grafico-minuto { position: relative; height: clamp(16rem, 32vh, 24rem); }
.formulario { display: grid; gap: 1.25rem; }
.formulario-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (width < 64rem) { .formulario-grade { grid-template-columns: 1fr; } }
.formulario-secao { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.formulario-secao h3 { font-size: 1.0625rem; font-weight: 700; }
.formulario-acoes { display: flex; justify-content: flex-end; }

.ia-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.25rem; align-items: start; }
@media (width < 72rem) { .ia-layout { grid-template-columns: 1fr; } }
.ia-coluna { display: grid; gap: 1.25rem; }
.ia-vozes { position: sticky; top: 1rem; }
.ajuste { display: grid; gap: .375rem; }
.ajuste-topo { display: flex; justify-content: space-between; }
.ajuste output { font-weight: 700; font-variant-numeric: tabular-nums; }
.ajuste small, .ajuste-chave small { color: var(--tinta-suave); }
.ajuste input[type=range] { width: 100%; accent-color: var(--tinta); }
.ajuste-chave { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ajuste-chave small { display: block; }
.vozes-titulo { font-size: 1rem; font-weight: 700; color: var(--tinta-suave); margin: 1rem 0 .625rem; }
.vozes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .625rem; }
.voz { display: flex; align-items: center; gap: .75rem; padding: .625rem; border: 2px solid var(--linha); border-radius: 1rem; background: var(--papel); }
.voz.escolhida, .voz-outra.escolhida { border-color: var(--tinta); background: #FFF8E3; }
.voz-nome { flex: 1; display: grid; text-align: start; background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta); font: inherit; min-width: 0; }
.voz-nome small { color: var(--tinta-suave); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; }
.voz-tocar { position: relative; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; border: 0; background: var(--tinta); cursor: pointer; }
.voz-tocar span { position: absolute; left: 55%; top: 50%; translate: -50% -50%; border-left: .6rem solid var(--papel); border-block: .4rem solid transparent; }
.voz-tocar.tocando span, #tocar-outra.tocando { border: 0; }
.voz-tocar.tocando span { width: .7rem; height: .7rem; left: 50%; background: var(--amarelo); }
.voz-tocar.carregando { background: var(--tinta-suave); cursor: progress; }
.voz-outra { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: end; padding: .75rem; border: 2px solid var(--linha); border-radius: 1rem; }

.conexao { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .75rem; background: rgb(255 255 255 / .06); font-size: .875rem; font-weight: 600; color: rgb(255 255 255 / .75); }
.conexao-ponto { width: .625rem; height: .625rem; border-radius: 50%; background: var(--amarelo); flex: none; }
body[data-tempo-real="on"] .conexao-ponto { background: #2BD17E; box-shadow: 0 0 0 0 rgb(43 209 126 / .6); }
@media (prefers-reduced-motion: no-preference) { body[data-tempo-real="on"] .conexao-ponto { animation: pulsa-verde 2s ease-out infinite; } }
@keyframes pulsa-verde { to { box-shadow: 0 0 0 .5rem rgb(43 209 126 / 0); } }
body[data-tempo-real="off"] .conexao-ponto { background: var(--tomate); }

.testar-cardapio { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; padding: 1.25rem 1.5rem; border-radius: 1.25rem; background: var(--papel); border: 2px solid var(--amarelo); }
@media (width < 46rem) { .testar-cardapio { grid-template-columns: 1fr; } }
.testar-cardapio h2 { font-size: 1.25rem; font-weight: 800; }
.testar-cardapio p { margin-top: .375rem; color: var(--tinta-suave); max-width: 70ch; }
.testar-cardapio a:not(.botao) { color: var(--tinta); }
.testar-icone { position: relative; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--amarelo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2' fill='%2314204A'/%3E%3C/svg%3E") center / 50% no-repeat; }
.grafico-caixa { position: relative; height: 16rem; }
.barras li { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: .625rem .875rem; border-radius: .75rem; background: var(--fundo); overflow: hidden; }
.barras li span, .barras li b { position: relative; z-index: 1; }
.barras li i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: rgb(255 201 60 / .45); }