/* Painel da loja (portal.zéca.delivery/painel): menu lateral claro, conteúdo branco, cartões leves. */
.painel-loja {
  --vermelho: #e30613;
  --vermelho-hover: #c40511;
  --rosa: #fdecec;
  --tinta: #3e3e3e;
  --suave: #717171;
  --clara: #a6a6a6;
  --linha: #dcdcdc;
  --linha-clara: #ececec;
  --lateral: #f5f5f5;
  --cinza-claro: #f2f2f2;
  --verde: #1f9d55;
  --verde-claro: #e7f6ed;
  --azul: #1a73b5;
  --azul-claro: #eaf4fb;
  --ambar: #9a5b00;
  --ambar-claro: #fff4dd;
  --sombra: 0 1px 4px rgba(0, 0, 0, .14);
  --raio: 6px;
  min-height: 100vh;
  background: #fff;
  font-size: 15px;
  color: var(--tinta);
}
.painel-loja :focus-visible { outline: 3px solid #ffb4b4; outline-offset: 2px; }

/* ---------- botões ---------- */
.painel-loja .btn { height: 42px; padding: 0 20px; border-radius: 4px; font-size: 15px; }
.painel-loja .btn-pequeno { height: 34px; padding: 0 14px; font-size: 13px; }
.painel-loja .btn-primario { background: var(--vermelho); }
.painel-loja .btn-primario:hover:not(:disabled) { background: var(--vermelho-hover); }
.btn-contorno { border: 1px solid var(--vermelho) !important; background: #fff; color: var(--vermelho); }
.btn-contorno:hover:not(:disabled) { background: #fff5f5; }
.btn-texto { padding: 0; border: 0; background: none; color: var(--vermelho); font-weight: 700; text-decoration: underline; cursor: pointer; }
.btn-texto:disabled { color: var(--clara); cursor: default; }
.btn-texto svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.btn-verde { background: var(--verde) !important; color: #fff; }

/* ---------- moldura: menu lateral ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  display: flex; flex-direction: column; width: 240px; overflow-y: auto; background: var(--lateral);
  scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent;
}
.lateral-topo { padding: 18px 12px 8px; text-align: center; }
.logo-zeca { display: block; width: 62px; height: auto; margin: 0 auto 10px; }

/* loja atual: logo + nome; o clique abre as lojas da conta */
.loja-wrap { position: relative; margin: 0 0 10px; }
.loja-atual {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 8px 8px 6px;
  border: 0; border-radius: 4px; background: #fff; box-shadow: var(--sombra); color: var(--tinta); text-align: left; cursor: pointer;
  transition: box-shadow .15s, background .15s;
}
.loja-atual:hover, .loja-atual[aria-expanded="true"] { box-shadow: 0 3px 12px rgba(0, 0, 0, .16); }
.loja-atual .txt { flex: 1; min-width: 0; }
.loja-atual b {
  display: -webkit-box; overflow: hidden; font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
  overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.loja-atual small { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--vermelho); }
.loja-atual > svg { flex: none; width: 18px; height: 18px; color: var(--suave); transition: transform .15s; }
.loja-atual[aria-expanded="true"] > svg { transform: rotate(180deg); }
/* logo redonda, com um anel branco e um contorno fino */
.logo-loja {
  display: grid; flex: none; place-items: center; width: 44px; height: 44px; overflow: hidden;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--linha);
}
.logo-loja:not(:has(img)) { background: var(--rosa); }
.logo-loja img { width: 100%; height: 100%; object-fit: cover; }
.logo-loja span { font-size: 15px; font-weight: 800; color: var(--vermelho); }
.logo-loja.pequeno { width: 34px; height: 34px; }
.logo-loja.pequeno span { font-size: 12px; }

.menu-lojas {
  position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 50; padding: 8px;
  border: 1px solid var(--linha-clara); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  text-align: left;
}
.titulo-menu-lojas { display: flex; justify-content: space-between; margin: 2px 6px 6px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); }
.titulo-menu-lojas small { font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.item-loja, .item-adicionar {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 6px;
  background: none; color: var(--tinta); font-size: 14px; text-align: left; text-decoration: none;
}
.item-loja { cursor: pointer; }
.item-loja:hover, .item-adicionar:hover { background: #f4f4f4; }
.item-loja .txt { flex: 1; min-width: 0; line-height: 1.25; }
.item-loja b { display: -webkit-box; overflow: hidden; font-weight: 700; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.item-loja small { display: block; overflow: hidden; font-size: 12px; color: var(--suave); text-overflow: ellipsis; white-space: nowrap; }
.item-loja > svg { flex: none; width: 18px; height: 18px; color: var(--vermelho); }
.item-loja.atual b { color: var(--vermelho); }
.item-loja.em-analise { cursor: default; }
.item-loja.em-analise:hover { background: none; }
.item-loja.em-analise .logo-loja { opacity: .55; }
.item-loja.em-analise small { color: var(--ambar); font-weight: 700; }
.item-adicionar { margin-top: 4px; border-top: 1px solid var(--linha-clara); border-radius: 0 0 6px 6px; padding-top: 10px; color: var(--vermelho); font-weight: 800; }
.item-adicionar > svg { flex: none; width: 34px; height: 34px; padding: 7px; border: 1px dashed var(--vermelho); border-radius: 6px; }
.item-adicionar small { display: block; font-size: 12px; font-weight: 600; color: var(--suave); }
.limite-lojas { margin: 4px 0 0; padding: 10px 6px 4px; border-top: 1px solid var(--linha-clara); font-size: 13px; color: var(--suave); }
.cartao-status {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 4px;
  background: #fff; box-shadow: var(--sombra); text-align: left; cursor: pointer;
}
.cartao-status > svg { flex: none; width: 20px; height: 20px; color: var(--suave); }
.cartao-status .txt { flex: 1; min-width: 0; line-height: 1.3; }
.cartao-status b { display: block; font-size: 14px; }
.cartao-status small { display: block; font-size: 12px; color: var(--suave); }
.cartao-status.aberta > svg { color: var(--verde); }
.cartao-status.aberta b { color: var(--verde); }
.cartao-status .interruptor { width: 38px; height: 22px; }
.cartao-status .interruptor span::after { width: 16px; height: 16px; }
.cartao-status .interruptor input:checked + span::after { transform: translateX(16px); }

.navegacao { display: flex; flex-direction: column; gap: 18px; padding: 10px 0 18px; }
.grupo-nav { display: flex; flex-direction: column; }
.navegacao a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 6px 16px 6px 22px;
  color: var(--tinta); font-size: 15px; text-decoration: none;
}
.navegacao a:hover { background: #ececec; }
.navegacao a[aria-current="page"] { background: #e8e8e8; color: var(--vermelho); font-weight: 700; }
.navegacao a[aria-current="page"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--vermelho); }
.navegacao svg { flex: none; width: 19px; height: 19px; }
.navegacao .bolinha {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
  border-radius: 99px; background: var(--vermelho); color: #fff; font-size: 12px; font-weight: 800;
}
.navegacao .bolinha.pulsa { animation: pulsar 1.2s ease-in-out infinite; }
/* mensagens de cliente sem ler (azul, para não confundir com pedido novo) */
.navegacao .bolinha-chat { background: #1565c0; }
.navegacao .bolinha:not([hidden]) + .bolinha-chat { margin-left: 4px; }
@keyframes pulsar { 50% { transform: scale(1.18); } }
.usuario { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding: 16px 18px 20px; border-top: 1px solid #e4e4e4; }
.usuario > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--suave); }
.usuario div { min-width: 0; font-size: 13px; line-height: 1.35; }
.usuario b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.usuario small { display: block; color: var(--suave); }
.usuario button { margin-top: 6px; font-size: 13px; }
.btn-recolher { display: none; }

/* ---------- menu recolhido (computador, só para quem escolher "Recolher menu") ----------
   Faixa com o logo do Zéca, a logo da loja, o ícone do status e os ícones das telas, todos na mesma coluna.
   Ela não abre por cima da tela: com o mouse num ícone aparece só o nome ao lado (.dica-menu).
   Só abre por cima enquanto o seletor de lojas estiver aberto ou para quem navega pelo teclado.
   O conteúdo de dentro continua com a largura do menu aberto; a faixa só "recorta" (nada pula de lugar). */
.dica-menu {
  position: fixed; z-index: 60; padding: 6px 10px; border-radius: 4px; background: #333; color: #fff;
  font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.dica-menu::before {
  content: ""; position: absolute; top: 50%; left: -5px; border: 5px solid transparent; border-left: 0;
  border-right-color: #333; transform: translateY(-50%);
}
@media (min-width: 901px) {
  .lateral { transition: width .2s ease, box-shadow .2s ease; }
  .principal { transition: margin-left .2s ease; }
  .btn-recolher {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; margin-top: auto; padding: 8px 16px 8px 22px;
    border: 0; border-top: 1px solid #e4e4e4; background: none; color: var(--suave); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
  }
  .btn-recolher:hover { background: #ececec; color: var(--tinta); }
  .btn-recolher svg { flex: none; width: 20px; height: 20px; }
  .btn-recolher + .usuario { margin-top: 0; border-top: 0; padding-top: 8px; }

  .compacto .lateral { width: 80px; overflow-x: hidden; }
  .compacto .principal { margin-left: 80px; }
  .compacto .lateral:is(:has(:focus-visible), :has(.menu-lojas:not([hidden]))) { width: 248px; box-shadow: 8px 0 28px rgba(0, 0, 0, .16); }
  .compacto .lateral > * { flex: none; width: 248px; }
  .compacto .lateral-topo { text-align: left; }
  .compacto .logo-zeca { width: 46px; margin: 0 0 12px 5px; }
  .compacto .navegacao a, .compacto .btn-recolher, .compacto .usuario { padding-left: 30px; }
  .compacto .cartao-status { padding-left: 18px; }
  /* faixa fechada: só os ícones (visibility também impede clicar no que está escondido, como o "Sair") */
  .compacto .lateral:not(:has(:focus-visible), :has(.menu-lojas:not([hidden]))) :is(.loja-atual .txt, .loja-atual > svg, .rotulo-nav, .cartao-status .txt, .cartao-status .interruptor, .usuario div, .btn-recolher span) { visibility: hidden; }
  .compacto .lateral:not(:has(:focus-visible), :has(.menu-lojas:not([hidden]))) { scrollbar-width: none; }
  .compacto .lateral:not(:has(:focus-visible), :has(.menu-lojas:not([hidden]))) :is(.loja-atual, .cartao-status) { background: transparent; box-shadow: none; }
  .compacto .lateral:not(:has(:focus-visible), :has(.menu-lojas:not([hidden]))) .navegacao .bolinha {
    position: absolute; top: 2px; left: 42px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px;
  }
  .compacto .lateral:not(:has(:focus-visible), :has(.menu-lojas:not([hidden]))) .navegacao .bolinha-chat { top: auto; bottom: 2px; margin-left: 0; }
}

.barra-movel { display: none; }
.cortina { display: none; }

/* ---------- conteúdo ---------- */
.principal { min-height: 100vh; margin-left: 240px; padding: 34px clamp(18px, 3vw, 48px) 80px; }
.pagina { max-width: 1120px; }
.titulo-pagina { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.titulo-pagina h1 { font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.titulo-pagina p { margin: 6px 0 0; color: var(--suave); }
.titulo-pagina .acoes-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.faixa-pedidos {
  position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: -34px calc(-1 * clamp(18px, 3vw, 48px)) 24px; padding: 12px clamp(18px, 3vw, 48px);
  background: var(--vermelho); color: #fff; font-weight: 700;
}
.faixa-pedidos svg { width: 20px; height: 20px; }
/* o navegador só libera o som depois de um clique: esta faixa pede o clique */
.aviso-som {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 18px; padding: 10px 14px;
  border: 1px solid #f0c36d; border-radius: 4px; background: var(--ambar-claro); color: var(--ambar);
  font-size: 14px; font-weight: 800; text-align: left; cursor: pointer;
}
.aviso-som[hidden] { display: none; }
.aviso-som svg { flex: none; width: 20px; height: 20px; }
.faixa-pedidos .btn { height: 34px; margin-left: auto; background: #fff; color: var(--vermelho); font-size: 14px; }

/* abas com sublinhado */
.abas-linha { display: flex; gap: 28px; margin-bottom: 26px; overflow-x: auto; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.abas-linha a, .abas-linha button {
  flex: none; padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--clara); font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.abas-linha a:hover, .abas-linha button:hover { color: var(--tinta); }
.abas-linha [aria-current="page"], .abas-linha [aria-selected="true"] { border-bottom-color: var(--vermelho); color: var(--vermelho); font-weight: 700; }
.abas-linha .n { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--vermelho); color: #fff; font-size: 12px; font-weight: 800; }

.cartao { margin-bottom: 18px; padding: 22px 24px; border-radius: var(--raio); background: #fff; box-shadow: var(--sombra); }
.cartao > h2, .cartao-cab h2 { font-size: 20px; font-weight: 800; }
.cartao > h2 small, .cartao-cab h2 small { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--suave); }
.cartao > .desc { margin: 4px 0 18px; color: var(--suave); font-size: 14px; }
.cartao-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.sem-sombra { box-shadow: none; border: 1px solid var(--linha-clara); }

.aviso-azul, .aviso-ambar, .aviso-verde, .aviso-vermelho {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 12px 16px;
  border: 1px solid; border-left-width: 4px; border-radius: 4px; font-size: 14px; font-weight: 700;
}
.aviso-azul { border-color: #9fd0f0; border-left-color: var(--azul); background: #fff; color: var(--azul); }
.aviso-ambar { border-color: #f1d49c; border-left-color: #d68a00; background: var(--ambar-claro); color: var(--ambar); }
.aviso-verde { border-color: #b7e2c6; border-left-color: var(--verde); background: var(--verde-claro); color: #166c3b; }
.aviso-vermelho { border-color: #f3b7b7; border-left-color: var(--vermelho); background: var(--rosa); color: #9b0b13; }
.aviso-azul svg, .aviso-ambar svg, .aviso-verde svg, .aviso-vermelho svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.aviso-azul p, .aviso-ambar p, .aviso-verde p, .aviso-vermelho p { margin: 2px 0 0; font-weight: 400; }
.aviso-azul a, .aviso-ambar a, .aviso-verde a, .aviso-vermelho a { color: inherit; }

.vazio-grande { max-width: 420px; margin: 30px auto; text-align: center; }
.vazio-grande .arte { display: block; width: 210px; height: auto; margin: 0 auto 16px; }
.vazio-grande h2 { margin-bottom: 8px; font-size: 22px; font-weight: 800; }
.vazio-grande p { margin: 0 0 20px; color: var(--suave); }
.carregando-pagina { padding: 60px 0; text-align: center; color: var(--suave); }
.carregando-pagina::before {
  content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid #e3e3e3;
  border-top-color: var(--vermelho); border-radius: 50%; animation: girar .8s linear infinite;
}

/* rótulos em caixa alta (filtros, como no portal) */
.rotulo-alto { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.painel-loja .entrada { height: 44px; border-color: var(--linha); border-radius: 4px; font-size: 15px; }
.painel-loja textarea.entrada { height: auto; }
.painel-loja .entrada:focus { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(227, 6, 19, .1); }
.painel-loja .rotulo small, .contador { font-weight: 400; color: var(--clara); }
.contador { display: block; margin-top: 4px; font-size: 12px; text-align: right; }
.opcional { font-style: italic; font-weight: 400; color: var(--clara); }
.filtros-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.filtros-linha .campo { flex: 1 1 160px; min-width: 140px; margin: 0; }
.filtros-linha .campo.estreito { flex: 0 1 150px; }

/* chave segmentada Pausar | Ativado */
.segmento { display: inline-flex; flex: none; overflow: hidden; border: 1px solid var(--linha); border-radius: 4px; background: #fff; }
.segmento button { height: 28px; padding: 0 12px; border: 0; background: none; color: var(--clara); font-size: 12px; cursor: pointer; }
.segmento button + button { border-left: 1px solid var(--linha); }
.segmento button[aria-pressed="true"] { background: var(--vermelho); color: #fff; font-weight: 700; }
.segmento button:not([aria-pressed="true"]):hover { color: var(--tinta); background: #fafafa; }
.segmento.grande button { height: 36px; padding: 0 16px; font-size: 14px; }

.etiqueta-status {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px;
  background: var(--cinza-claro); color: var(--suave); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.etiqueta-status.aguardando { background: var(--vermelho); color: #fff; }
.etiqueta-status.confirmado, .etiqueta-status.preparo { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta-status.saiu { background: var(--azul-claro); color: var(--azul); }
.etiqueta-status.entregue { background: var(--verde-claro); color: var(--verde); }
.etiqueta-status.cancelado { background: #ececec; color: #6b6b6b; }

.painel-loja span.estrelas { display: inline-flex; gap: 1px; color: #f5a623; vertical-align: middle; }
.estrelas svg { width: 16px; height: 16px; }
.painel-loja .estrelas .vazia { color: #d9d9d9; }

/* ---------- início ---------- */
.dicas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.dica {
  display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 14px 18px; border-radius: 10px;
  background: var(--cinza-claro); color: var(--tinta); text-decoration: none; transition: background .15s;
}
.dica:hover { background: #ebebeb; }
.dica .ilustra { display: grid; flex: none; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--vermelho); }
.dica .ilustra svg { width: 30px; height: 30px; }
.dica span { font-size: 15px; line-height: 1.35; }
.dica b { font-weight: 800; }

.acompanhamento { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }
.destaque-hoje {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 18px 0; border: 1px solid var(--linha);
  border-radius: 6px 6px 0 0; border-bottom: 4px solid var(--vermelho);
}
.metrica span { display: block; font-size: 14px; color: var(--suave); }
.metrica b { display: block; margin-top: 2px; font-size: 24px; font-weight: 800; }
.metrica b small { font-size: 14px; font-weight: 400; color: var(--suave); }
.metrica em { display: block; padding-bottom: 12px; font-size: 13px; font-style: normal; color: var(--suave); }
.coluna-metrica { padding: 16px 18px; border-left: 1px solid var(--linha-clara); }
.coluna-metrica span { display: block; font-size: 14px; color: var(--suave); }
.coluna-metrica b { display: block; margin-top: 6px; font-weight: 600; }
.coluna-metrica .estrelas { margin-top: 4px; }

.bloco-perf { padding: 18px 0; border-top: 1px solid var(--linha-clara); }
.bloco-perf:first-of-type { border-top: 0; padding-top: 4px; }
.bloco-perf h3 { margin-bottom: 14px; font-size: 20px; font-weight: 800; }
.bloco-perf h3 small { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--suave); }
.grade-perf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grade-perf .metrica b { font-size: 22px; }
.grade-perf .metrica em { padding: 0; font-weight: 700; color: var(--tinta); }
.duas-perf { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.duas-perf > .bloco-perf:last-child { padding-left: 28px; border-left: 1px solid var(--linha-clara); }
.duas-perf > .bloco-perf { border-top: 1px solid var(--linha-clara); padding-top: 18px; }
.pilula-meta {
  display: inline-block; margin: 6px 0; padding: 4px 12px; border-radius: 99px; background: var(--cinza-claro);
  font-size: 13px; font-weight: 800; color: var(--suave);
}
.pilula-meta.bom { background: var(--verde-claro); color: var(--verde); }
.pilula-meta.ruim { background: var(--rosa); color: var(--vermelho); }
.meta { display: block; font-size: 12px; color: var(--suave); }
.meta b { display: inline; margin: 0; font-size: 12px; color: var(--tinta); }

.comparar { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 14px; }
.comparar span { display: block; font-size: 13px; color: var(--suave); }
.comparar b { font-size: 18px; font-weight: 800; }
.comparar .atual b { color: var(--vermelho); }
.comparar .anterior b { color: var(--clara); }
.comparar p { max-width: 260px; margin: 0; font-size: 13px; color: var(--clara); }
.barras14 { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 10px; border-bottom: 1px solid var(--linha); }
.barras14 .dia { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.barras14 .barra { width: 70%; max-width: 26px; min-height: 2px; border-radius: 3px 3px 0 0; background: #d9d9d9; }
.barras14 .atual .barra { background: var(--vermelho); }
.barras14 .valor { margin-bottom: 4px; font-size: 11px; font-weight: 800; color: var(--suave); }
.eixo14 { display: flex; gap: 6px; }
.eixo14 span { flex: 1; min-width: 0; padding-top: 6px; font-size: 11px; text-align: center; color: var(--suave); }

.dois-cartoes { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.chips-horario { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 4px; background: var(--cinza-claro); font-size: 13px; }
.numero-grande { font-size: 32px; font-weight: 800; }

/* ---------- pedidos ---------- */
.colunas-pedidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.coluna-pedidos h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 16px; font-weight: 800; }
.coluna-pedidos h2 .n { padding: 1px 8px; border-radius: 99px; background: #e8e8e8; font-size: 12px; }
.coluna-pedidos .nada { padding: 18px; border: 1px dashed var(--linha); border-radius: 6px; font-size: 14px; color: var(--clara); text-align: center; }
.cartao-pedido {
  display: block; width: 100%; margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--linha-clara); border-radius: 6px;
  background: #fff; box-shadow: var(--sombra); text-align: left; cursor: pointer;
}
.cartao-pedido:hover { border-color: #cfcfcf; }
.cartao-pedido.novo { border-color: var(--vermelho); box-shadow: 0 0 0 2px rgba(227, 6, 19, .15); }
.cartao-pedido .topo-pedido { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-pedido .num { font-size: 17px; font-weight: 800; }
.cartao-pedido .cli { margin-left: 6px; font-size: 14px; color: var(--suave); }
.cartao-pedido .itens { margin: 6px 0; font-size: 14px; color: var(--tinta); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cartao-pedido .rodape-pedido { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 13px; color: var(--suave); }
.cartao-pedido .rodape-pedido b { color: var(--tinta); font-size: 15px; }
.cartao-pedido .prazo { margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--vermelho); }
.cartao-pedido .atrasado { color: var(--vermelho); font-weight: 800; }
.cartao-pedido .botoes-pedido { display: flex; gap: 8px; margin-top: 12px; }
.cartao-pedido .botoes-pedido .btn { flex: 1; height: 36px; padding: 0 10px; font-size: 14px; }
.cartao-pedido .topo-direita { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cartao-pedido .btn-imprimir { width: 30px; height: 30px; border: 1px solid var(--linha); border-radius: 4px; color: var(--tinta); }
/* pedido de retirada no balcão */
.etiqueta-retirada {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: #fff4e0; color: #8a4b00;
  font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; vertical-align: 1px;
}
.tipo-retirada { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: #8a4b00; font-size: 14px; font-weight: 700; }
.tipo-retirada .etiqueta-retirada { margin-left: 0; }
/* chat e ligação com o cliente (no cartão e na gaveta do pedido) */
.btn-chat-pedido {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 10px;
  border: 1px solid #cfe0f5; border-radius: 4px; background: #f2f7fd; color: #0d47a1; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
}
.btn-chat-pedido:hover { background: #e3eefb; }
.btn-chat-pedido svg { flex: none; width: 18px; height: 18px; }
.btn-chat-pedido .n-chat {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
  border-radius: 99px; background: #1565c0; color: #fff; font-size: 12px; font-weight: 800;
}
.gaveta-cab .btn-chat-pedido { margin-top: 14px; }
/* impressão: botões na gaveta do pedido e janela de configuração */
.acoes-impressao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.acoes-impressao .btn-texto { font-size: 14px; }
.config-impressao > .rotulo { margin: 4px 0 8px; font-weight: 800; }
.config-impressao > .rotulo ~ .rotulo { margin-top: 18px; }
.config-impressao .radio-bloco, .config-impressao .check { margin-bottom: 10px; }
.config-impressao .campo { margin-top: 16px; }
.config-impressao .aviso-azul { margin-top: 14px; font-size: 13px; }
.config-impressao .aviso-azul a { color: inherit; font-weight: 700; }

.resumo-busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin: 6px 0 16px; }
.resumo-busca .periodo { display: flex; align-items: center; gap: 14px; }
.resumo-busca .periodo span { display: block; font-size: 13px; color: var(--suave); }
.resumo-busca .periodo b { font-size: 16px; font-weight: 600; }
.resumo-busca .periodo svg { width: 18px; height: 18px; color: var(--clara); }
.tabela-loja { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-loja th { padding: 10px 12px; border-bottom: 1px solid var(--linha); font-size: 13px; text-align: left; color: var(--suave); white-space: nowrap; }
.tabela-loja td { padding: 12px; border-bottom: 1px solid var(--linha-clara); vertical-align: top; }
.tabela-loja tbody tr { cursor: pointer; }
.tabela-loja tbody tr:hover td { background: #fafafa; }
.tabela-loja td small { display: block; color: var(--suave); }
.tabela-loja .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.caixa-tabela { overflow-x: auto; }

/* gaveta de pedido */
.bloco-gaveta { padding: 16px 0; border-bottom: 1px solid var(--linha-clara); }
.bloco-gaveta:first-child { padding-top: 0; }
.bloco-gaveta h3 { margin-bottom: 8px; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); }
.bloco-gaveta p { margin: 0 0 4px; }
.item-pedido { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; padding: 8px 0; }
.item-pedido .qtd { font-weight: 800; }
.item-pedido small { display: block; color: var(--suave); }
.item-pedido .obs { color: var(--ambar); font-weight: 700; }
.linha-total { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.linha-total.total { margin-top: 6px; font-size: 17px; font-weight: 800; }
.linha-tempo { margin: 0; padding: 0; list-style: none; }
.linha-tempo li { position: relative; padding: 0 0 12px 22px; font-size: 14px; }
.linha-tempo li::before { content: ""; position: absolute; top: 5px; left: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); }
.linha-tempo li::after { content: ""; position: absolute; top: 16px; bottom: 0; left: 8px; width: 1px; background: var(--linha); }
.linha-tempo li:last-child::after { display: none; }
.linha-tempo small { color: var(--suave); }

/* ---------- avaliações ---------- */
.titulo-periodo { margin-bottom: 4px; font-size: 22px; font-weight: 600; }
.sub-periodo { margin: 0 0 22px; font-weight: 700; color: var(--clara); }
.duas-colunas-av { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.duas-colunas-av .cartao { border: 1px solid var(--linha-clara); box-shadow: none; }
.duas-colunas-av h2 { margin-bottom: 18px; font-size: 22px; font-weight: 400; }
.nota-media { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linha-clara); }
.nota-media b { font-size: 38px; font-weight: 300; }
.nota-media .estrelas svg { width: 20px; height: 20px; }
.distribuicao { margin: 14px 0 0; padding: 0; list-style: none; }
.distribuicao li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; }
.distribuicao .estrela { color: #f5a623; font-weight: 700; }
.distribuicao .trilho { height: 8px; border-radius: 99px; background: var(--cinza-claro); overflow: hidden; }
.distribuicao .trilho i { display: block; height: 100%; border-radius: inherit; background: #f5a623; }
.polegares { display: flex; gap: 22px; margin-top: 14px; font-size: 15px; }
.polegares span { display: inline-flex; align-items: center; gap: 6px; }
.polegares svg { width: 20px; height: 20px; }
.polegares .bom svg { color: var(--verde); }
.polegares .ruim svg { color: var(--vermelho); }
.lista-avaliacoes { display: grid; gap: 14px; }
.avaliacao { padding: 18px 20px; border: 1px solid var(--linha-clara); border-radius: 6px; }
.avaliacao .cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.avaliacao .cab small { color: var(--suave); }
.avaliacao .comentario { margin: 0 0 8px; font-size: 15px; }
.avaliacao .sem-comentario { margin: 0 0 8px; color: var(--clara); font-style: italic; }
.avaliacao .itens-av { font-size: 13px; color: var(--suave); }
.resposta-loja { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--vermelho); border-radius: 0 4px 4px 0; background: var(--cinza-claro); font-size: 14px; }
.resposta-loja b { display: block; margin-bottom: 2px; font-size: 13px; }
.form-resposta { margin-top: 12px; }
.form-resposta .botoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ---------- financeiro ---------- */
.periodo-vendas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 22px; }
.periodo-vendas select {
  width: auto; height: auto; padding: 0 28px 0 0; border: 0; background-position: right 4px center; background-color: transparent;
  color: var(--vermelho); font-size: 22px; font-weight: 700; box-shadow: none !important;
}
.grade-fin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.cartao-fin { padding: 18px 20px; border: 1px solid var(--linha-clara); border-radius: 6px; }
.cartao-fin span { display: block; font-size: 14px; color: var(--suave); }
.cartao-fin b { display: block; margin-top: 4px; font-size: 24px; font-weight: 800; }
.cartao-fin small { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); }
.cartao-fin.principal-fin { border-color: transparent; background: var(--cinza-claro); }
.cartao-fin.principal-fin b { font-size: 30px; color: var(--vermelho); }
.formas { margin: 0; padding: 0; list-style: none; }
.formas li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 0; font-size: 14px; }
.formas .trilho { height: 8px; overflow: hidden; border-radius: 99px; background: var(--cinza-claro); }
.formas .trilho i { display: block; height: 100%; background: var(--vermelho); }
.formas b { font-variant-numeric: tabular-nums; }
.detalhes-loja { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.detalhes-loja dt { color: var(--suave); font-size: 14px; }
.detalhes-loja dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- cardápio ---------- */
.barra-cardapio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.barra-cardapio .direita { margin-left: auto; }
.barra-cardapio .btn svg { width: 16px; height: 16px; }
.busca-cardapio { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
.campo-busca { position: relative; }
.campo-busca svg { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; color: var(--vermelho); transform: translateY(-50%); pointer-events: none; }
.campo-busca .entrada { padding-left: 40px; }
.categoria-card { margin-bottom: 20px; padding: 0 20px 18px; border: 1px solid var(--linha-clara); border-radius: 6px; background: #fff; }
.categoria-card.pausada .linha-item { opacity: .55; }
.categoria-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 0 16px; }
.categoria-topo h2 { flex: 1; min-width: 0; font-size: 21px; font-weight: 800; overflow-wrap: break-word; }
.categoria-topo h2 small { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--suave); }
.categoria-card.recolhida .corpo-categoria { display: none; }
.categoria-card.recolhida .btn-recolher svg { transform: rotate(180deg); }
.btn-recolher svg, .btn-kebab svg { width: 20px; height: 20px; }
.btn-recolher { color: var(--vermelho) !important; }
.btn-recolher svg { transform: rotate(0); transition: transform .15s; }
.cab-itens { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px 40px; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); font-size: 14px; font-weight: 700; }
.cab-itens span:first-child { padding-left: 52px; }
.linha-item { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px 40px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha-clara); }
.linha-item.inativa { background: #fafafa; }
.linha-item.arrastando { opacity: .4; }
.linha-item.alvo-acima { box-shadow: inset 0 3px 0 var(--vermelho); }
.linha-item.alvo-abaixo { box-shadow: inset 0 -3px 0 var(--vermelho); }
.info-celula { display: flex; align-items: center; gap: 6px; min-width: 0; }
.info-item { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.grade-perf.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-perf.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alca { display: none; flex: none; color: var(--clara); cursor: grab; }
.alca svg { width: 20px; height: 20px; }
.reordenando .alca { display: block; }
.miniatura { position: relative; display: grid; flex: none; place-items: center; width: 72px; height: 58px; overflow: visible; border-radius: 4px; background: var(--cinza-claro); }
.miniatura img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.miniatura.sem-foto { border: 1.5px dashed #c9c9c9; background: #fff; color: #c9c9c9; }
.miniatura.sem-foto svg { width: 22px; height: 22px; }
.miniatura.sem-foto::after { content: "!"; position: absolute; top: -7px; left: -7px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 800; }
.texto-item { min-width: 0; }
.texto-item b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.texto-item p { margin: 2px 0 0; overflow: hidden; font-size: 13px; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.marcas-item { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.marcas-item span { padding: 1px 7px; border-radius: 99px; background: var(--rosa); font-size: 11px; font-weight: 700; color: var(--vermelho); }
.preco-item { text-align: right; }
.preco-item s { display: block; font-size: 12px; color: var(--clara); }
.preco-item b { display: inline-block; min-width: 92px; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 4px; font-weight: 600; text-align: right; }
.setas-ordem { display: none; gap: 2px; }
.reordenando .setas-ordem { display: inline-flex; }
.adicionar-item { margin-top: 16px; }
.btn-kebab { color: var(--tinta) !important; }
.menu-flutuante {
  position: absolute; z-index: 60; min-width: 190px; padding: 6px 0; border-radius: 6px; background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.menu-flutuante button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: 0; background: none; font-size: 14px; text-align: left; cursor: pointer; }
.menu-flutuante button:hover { background: var(--cinza-claro); }
.menu-flutuante button.perigo { color: var(--vermelho); }
.menu-flutuante svg { width: 17px; height: 17px; }

/* ---------- gaveta lateral (item do cardápio, pedido) ---------- */
dialog.gaveta {
  position: fixed; inset: 0 0 0 auto; width: min(720px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0;
  padding: 0; border: 0; border-radius: 0; box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
}
dialog.gaveta[open] { display: flex; flex-direction: column; animation: entrar-gaveta .2s ease-out; }
@keyframes entrar-gaveta { from { transform: translateX(40px); opacity: .4; } }
dialog.gaveta::backdrop { background: rgba(255, 255, 255, .6); backdrop-filter: grayscale(1); }
.gaveta-cab { padding: 22px 28px 0; }
.gaveta-cab .linha1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gaveta-cab h2 { font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.gaveta-cab .abas-linha { margin: 12px 0 0; gap: 22px; }
.gaveta-cab .abas-linha button { font-size: 15px; padding-bottom: 8px; }
.gaveta-corpo { flex: 1; padding: 22px 28px; overflow-y: auto; }
.gaveta-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 28px; border-top: 1px solid var(--linha-clara); background: #fff; }
.gaveta-rodape .erro { flex: 1 1 100%; margin: 0; text-align: right; }
.btn-fechar-x { color: var(--vermelho) !important; }
.btn-fechar-x svg { width: 24px; height: 24px; }

.escolha-tipo { display: grid; gap: 14px; }
.cartao-escolha {
  display: flex; align-items: center; gap: 22px; padding: 26px 24px; border: 1px solid var(--linha); border-radius: 4px;
  background: #fff; text-align: left; cursor: pointer;
}
.cartao-escolha:hover { border-color: var(--vermelho); }
.cartao-escolha svg { flex: none; width: 40px; height: 40px; color: var(--vermelho); }
.cartao-escolha b { display: block; font-size: 17px; }
.cartao-escolha span { font-size: 14px; color: var(--suave); }

.detalhes-item { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
.caixa-foto {
  display: grid; place-items: center; gap: 10px; min-height: 230px; padding: 16px; border: 1.5px dashed #c9c9c9; border-radius: 6px;
  text-align: center; color: var(--clara); transition: border-color .15s, background .15s;
}
.caixa-foto.sobre { border-color: var(--vermelho); background: #fff7f7; }
.caixa-foto img { display: block; max-width: 100%; max-height: 190px; border-radius: 4px; object-fit: cover; }
.caixa-foto svg.ilustra-foto { width: 64px; height: 64px; }
.caixa-foto .botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.regras-foto { margin: 8px 0 0; font-size: 12px; color: var(--suave); }
.regras-foto b { color: var(--tinta); }
.selo-dica { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--rosa); font-size: 11px; font-weight: 800; color: var(--vermelho); }
.linha-preco { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.linha-preco .campo { width: 170px; margin: 0; }
.selo-desconto { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 4px; background: var(--verde-claro); color: var(--verde); font-weight: 800; }
.opcoes-radio-linha { display: grid; gap: 10px; }
.radio-bloco { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.radio-bloco input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--vermelho); }
.radio-bloco small { display: block; color: var(--suave); }
.cartao-cinza { padding: 18px 20px; border-radius: 6px; background: var(--cinza-claro); }
.grupo-comp { margin-top: 16px; padding: 18px; border: 1px solid var(--linha); border-radius: 6px; }
.grupo-comp .cab-grupo { display: flex; align-items: flex-start; gap: 8px; }
.grupo-comp .cab-grupo .campo { flex: 1; margin: 0; }
.grupo-comp .regras-grupo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 14px 0; }
.grupo-comp .regras-grupo .campo { width: 110px; margin: 0; }
.opcao-comp { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto 34px; align-items: start; gap: 8px; padding: 10px 0; border-top: 1px solid var(--linha-clara); }
.opcao-comp .entrada { height: 40px; font-size: 14px; }
.opcao-comp .desc-op { margin-top: 6px; }
.opcao-comp .segmento { margin-top: 6px; }
.botoes-linha { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lista-classif { display: grid; gap: 4px; }
.lista-classif label { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.lista-classif input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--vermelho); }
.lista-classif small { display: block; color: var(--suave); }
.linha-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 6px; background: var(--cinza-claro); font-weight: 700; cursor: pointer; }
.sub-bebida { margin: 6px 0 10px 30px; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.dia-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dia-chip span { display: inline-grid; place-items: center; min-width: 52px; height: 36px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 99px; font-size: 14px; cursor: pointer; }
.dia-chip input:checked + span { border-color: var(--vermelho); background: var(--vermelho); color: #fff; font-weight: 700; }
.dia-chip input:focus-visible + span { outline: 3px solid #ffb4b4; outline-offset: 2px; }
.horas-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.horas-linha .entrada { width: 130px; }

/* ---------- horários ---------- */
.grade-semana { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
.grade-semana .cab-dia { padding: 0 4px 10px; text-align: center; }
.grade-semana .cab-dia b { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.grade-semana .cab-dia span { display: inline-block; padding: 4px 10px; border: 1px solid #b7dfc6; border-radius: 99px; font-size: 12px; color: var(--suave); white-space: nowrap; }
.grade-semana .cab-dia span.fechado { border-color: var(--linha); color: var(--clara); }
.regua { position: relative; height: 480px; }
.regua span { position: absolute; right: 8px; font-size: 11px; color: var(--suave); transform: translateY(-50%); }
.coluna-dia { position: relative; height: 480px; border: 1px solid var(--linha); border-left: 0; background: repeating-linear-gradient(#fff 0 39px, #f3f3f3 39px 40px); cursor: copy; }
.coluna-dia:first-of-type { border-left: 1px solid var(--linha); border-radius: 6px 0 0 6px; }
.coluna-dia.ultima { border-radius: 0 6px 6px 0; }
.bloco-horario {
  position: absolute; left: 4px; right: 4px; display: flex; align-items: flex-start;
  min-height: 18px; padding: 4px 6px; overflow: hidden; border: 0; border-radius: 3px;
  background: #d9efdc; color: #3b6e46; font-size: 11px; text-align: left; cursor: pointer;
}
.bloco-horario:hover { background: #c7e7cc; }
.bloco-horario.continua { border-top: 2px dashed #9fcca7; }
.legenda-grade { margin: 10px 0 0; font-size: 13px; color: var(--suave); }
.pausas-mes h3 { margin: 22px 0 8px; font-size: 20px; font-weight: 800; }
.linha-pausa { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px auto 40px; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linha-clara); }
.linha-pausa b { display: block; }
.linha-pausa small { display: block; color: var(--suave); }
.linha-pausa .quando { text-align: right; }
.linha-pausa .quando b { font-size: 15px; }
.linha-pausa svg.seta { width: 20px; height: 20px; color: var(--suave); }
.linha-feriado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 0; border-bottom: 1px solid var(--linha-clara); }
.linha-feriado .data-f { width: 92px; }
.linha-feriado .data-f b { display: block; font-size: 18px; }
.linha-feriado .data-f small { color: var(--suave); }
.linha-feriado .nome-f { flex: 1; min-width: 160px; font-weight: 700; }

/* ---------- formas de pagamento, entrega, perfil ---------- */
.destaque-pagamento { position: relative; overflow: hidden; }
.destaque-pagamento h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.destaque-pagamento h2 svg { width: 20px; height: 20px; color: var(--vermelho); }
.grupo-pagamento { padding: 18px 0; border-top: 1px solid var(--linha-clara); }
.topo-grupo-pag { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.grupo-pagamento h3 { margin: 0; font-size: 16px; font-weight: 800; }
.grade-bandeiras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.marca-pag { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.marca-pag:hover { border-color: #c9c9c9; }
.marca-pag:has(input:checked) { border-color: var(--vermelho); background: #fff7f7; }
.marca-pag:has(input:focus-visible) { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.marca-pag input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--vermelho); }
.marca-pag span { min-width: 0; font-weight: 600; }
/* logo da forma de pagamento (SVG 48x32 em /assets/bandeiras) */
.bandeira-img { display: inline-block; flex: none; width: 48px; height: 32px; vertical-align: middle; }
.bandeira-img.mini { width: 36px; height: 24px; }
.forma-com-logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
p.forma-com-logo { display: flex; gap: 10px; }
.salvar-fixo { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 0; background: linear-gradient(transparent, #fff 35%); }
.salvar-fixo .erro { margin: 0 auto 0 0; }

.valor-entrega { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.valor-entrega b { font-size: 34px; font-weight: 800; }

.capa-perfil { position: relative; width: min(560px, 100%); margin-bottom: 64px; }
.capa-perfil .capa { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 1; overflow: hidden; border: 1px solid var(--linha); border-radius: 8px; background: #ececec; color: var(--clara); }
.capa-perfil .capa img { width: 100%; height: 100%; object-fit: cover; }
.capa-perfil .logo {
  position: absolute; left: 50%; bottom: -54px; display: grid; place-items: center; width: 116px; height: 116px; overflow: hidden;
  border: 4px solid #fff; border-radius: 50%; background: var(--vermelho); color: #fff; font-size: 34px; font-weight: 900;
  box-shadow: var(--sombra); transform: translateX(-50%);
}
.capa-perfil .logo img { width: 100%; height: 100%; object-fit: cover; }
.capa-perfil .trocar { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.capa-perfil .trocar svg { width: 15px; height: 15px; }
.capa-perfil .trocar-capa { top: 10px; right: 10px; }
.capa-perfil .trocar-logo { bottom: -54px; left: calc(50% + 46px); width: 36px; height: 36px; padding: 0; justify-content: center; }
.nome-perfil { margin: 0 0 18px; font-size: 30px; font-weight: 800; }
.campo-copiar { display: flex; align-items: center; gap: 12px; max-width: 560px; }
.campo-copiar .entrada { flex: 1; }
.campo-largo { max-width: 560px; }

/* ---------- diálogos ---------- */
.painel-loja dialog:not(.gaveta) { width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 8px; color: var(--tinta); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.painel-loja dialog::backdrop { background: rgba(30, 30, 30, .45); }
.painel-loja dialog form { margin: 0; }
.dlg-pequeno { width: min(420px, calc(100% - 24px)) !important; }
.dlg-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 4px 24px; }
.dlg-cab h2 { font-size: 20px; font-weight: 700; }
.dlg-corpo { max-height: calc(100dvh - 190px); padding: 16px 24px 20px; overflow: auto; }
.dlg-corpo > h2 { margin-bottom: 8px; font-size: 20px; font-weight: 800; }
.dlg-corpo > p { margin: 0 0 14px; color: var(--suave); }
.dlg-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; }
.dlg-rodape .btn { min-width: 120px; }

/* ---------- celular e tablet ---------- */
@media (max-width: 1100px) {
  .acompanhamento { grid-template-columns: 1fr 1fr; }
  .destaque-hoje { grid-column: 1 / -1; }
  .coluna-metrica:nth-child(2) { border-left: 0; }
  .grade-perf { grid-template-columns: 1fr 1fr; }
  .colunas-pedidos { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lateral { transform: translateX(-100%); transition: transform .2s; box-shadow: none; }
  .menu-aberto .lateral { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .2); }
  .menu-aberto .cortina { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(0, 0, 0, .35); }
  .barra-movel {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px;
    border-bottom: 1px solid var(--linha-clara); background: #fff;
  }
  .barra-movel img { width: 34px; height: auto; }
  .barra-movel b { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .barra-movel .pilula { flex: none; padding: 4px 10px; border-radius: 99px; background: #ececec; font-size: 12px; font-weight: 800; color: var(--suave); }
  .barra-movel .pilula.aberta { background: var(--verde-claro); color: var(--verde); }
  .principal { margin-left: 0; padding-top: 22px; }
  .faixa-pedidos { top: 56px; margin-top: -22px; }
  .dicas { grid-template-columns: 1fr; gap: 10px; }
  .dica { min-height: 72px; }
  .dica .ilustra { width: 46px; height: 46px; }
  .dois-cartoes, .duas-colunas-av, .duas-perf { grid-template-columns: 1fr; }
  .duas-perf > .bloco-perf:last-child { padding-left: 0; border-left: 0; }
  .grade-fin { grid-template-columns: 1fr 1fr; }
  .grade-bandeiras { grid-template-columns: 1fr 1fr; }
  .detalhes-item { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .titulo-pagina h1 { font-size: 25px; }
  .acompanhamento { grid-template-columns: 1fr; }
  .coluna-metrica { border-left: 0; border-top: 1px solid var(--linha-clara); }
  .grade-perf { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .grade-fin { grid-template-columns: 1fr; }
  .grade-bandeiras { grid-template-columns: 1fr; }
  .cab-itens { display: none; }
  .linha-item { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "info menu" "preco status"; row-gap: 8px; }
  .linha-item .info-celula { grid-area: info; }
  .grade-perf.tres { grid-template-columns: 1fr; }
  .linha-item .preco-item { grid-area: preco; text-align: left; }
  .linha-item .status-item { grid-area: status; justify-self: end; }
  .linha-item .menu-item { grid-area: menu; }
  .linha-item .preco-item b { min-width: 0; padding: 0; border: 0; }
  .categoria-card { padding: 0 14px 14px; }
  .categoria-topo h2 { flex: 1 1 100%; overflow-wrap: break-word; }
  .busca-cardapio { grid-template-columns: 1fr; }
  .miniatura { width: 60px; height: 50px; }
  .cartao { padding: 18px 16px; }
  .detalhes-loja { grid-template-columns: 1fr; gap: 2px; }
  .detalhes-loja dd { margin-bottom: 10px; }
  .grade-semana { grid-template-columns: 30px repeat(7, minmax(0, 1fr)); }
  .grade-semana .cab-dia b { font-size: 12px; }
  .grade-semana .cab-dia span { padding: 2px 4px; font-size: 10px; white-space: normal; }
  .bloco-horario { left: 1px; right: 1px; padding: 2px; font-size: 9px; }
  .linha-pausa { grid-template-columns: minmax(0, 1fr) 40px; }
  .linha-pausa .quando, .linha-pausa svg.seta { grid-column: 1; text-align: left; }
  .gaveta-cab, .gaveta-corpo, .gaveta-rodape { padding-left: 16px; padding-right: 16px; }
  .gaveta-cab h2 { font-size: 22px; }
  .opcao-comp { grid-template-columns: minmax(0, 1fr) 96px 34px; }
  .opcao-comp .segmento { grid-column: 1 / -1; justify-self: start; }
  .tabela-loja .col-opcional { display: none; }
  .filtros-linha .campo { flex-basis: 100%; }
}

/* ---------- promoções ---------- */
.linha-promo { display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px auto auto 40px; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linha-clara); }
.linha-promo:last-child { border-bottom: 0; }
.selo-promo { display: grid; place-items: center; min-height: 58px; padding: 6px 8px; border: 2px dashed var(--vermelho); border-radius: 8px; background: #fff7f7; color: var(--vermelho); font-size: 14px; font-weight: 900; text-align: center; line-height: 1.15; }
.info-promo b { display: block; font-size: 16px; }
.info-promo small { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); }
.info-promo .codigo { display: inline; padding: 1px 6px; border-radius: 4px; background: var(--cinza-claro); color: var(--tinta); font-family: monospace; font-size: 13px; }
.uso-promo b { display: block; font-size: 17px; }
.uso-promo small { font-size: 12px; color: var(--suave); }
.tipos-promo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tipo-promo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-promo span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--linha); border-radius: 6px; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; }
.tipo-promo i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cinza-claro); color: var(--vermelho); font-style: normal; font-weight: 900; }
.tipo-promo i svg { width: 20px; height: 20px; }
.tipo-promo input:checked + span { border-color: var(--vermelho); background: #fff7f7; color: var(--vermelho); }
.tipo-promo input:focus-visible + span { outline: 3px solid #ffb4b4; outline-offset: 2px; }

/* ---------- desempenho e conquistas ---------- */
.var { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 800; }
.var svg { width: 14px; height: 14px; }
.var.bom { color: var(--verde); }
.var.ruim { color: var(--vermelho); }
.var.igual { color: var(--suave); font-weight: 600; }
.nivel-conquistas { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.trofeu-grande { display: grid; flex: none; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff4dd; color: #d68a00; }
.trofeu-grande svg { width: 40px; height: 40px; }
.trilho-largo { height: 10px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: var(--cinza-claro); }
.trilho-largo i { display: block; height: 100%; border-radius: inherit; background: var(--vermelho); }
.trilho-largo.pequeno { height: 6px; margin-top: auto; }
.grade-conquistas, .grade-servicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.conquista, .servico { display: flex; flex-direction: column; gap: 6px; min-height: 190px; padding: 18px; border: 1px solid var(--linha-clara); border-radius: 8px; background: #fff; }
.conquista b, .servico b { font-size: 16px; }
.conquista p, .servico p { flex: 1; margin: 0; font-size: 13px; color: var(--suave); }
.conquista small { font-size: 12px; color: var(--suave); }
.conquista .etiqueta-status { align-self: flex-start; }
.medalha { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cinza-claro); color: var(--clara); }
.medalha svg { width: 24px; height: 24px; }
.medalha.pequena { width: 36px; height: 36px; background: var(--rosa); color: var(--vermelho); }
.medalha.pequena svg { width: 19px; height: 19px; }
.conquista.feita { border-color: #f1d49c; background: linear-gradient(180deg, #fffaf0, #fff 60%); }
.conquista.feita .medalha { background: #ffe9b8; color: #c47f00; }
.servico .medalha { background: var(--rosa); color: var(--vermelho); }
.servico .btn { align-self: flex-start; }

/* ---------- chamados, guia e políticas ---------- */
.linha-chamado { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--linha-clara); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.linha-chamado:last-child { border-bottom: 0; }
.linha-chamado:hover b { color: var(--vermelho); }
.linha-chamado b { display: block; }
.linha-chamado small { display: block; overflow: hidden; color: var(--suave); text-overflow: ellipsis; white-space: nowrap; }
.quando-ch { font-size: 13px; color: var(--suave); white-space: nowrap; }
.mensagem { max-width: 85%; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: var(--cinza-claro); }
.mensagem.loja { margin-left: auto; border-radius: 12px 12px 4px 12px; background: #fff1f1; }
.mensagem b { font-size: 13px; }
.mensagem small { margin-left: 8px; font-size: 12px; color: var(--suave); }
.mensagem p { margin: 6px 0 0; white-space: pre-wrap; }
.guia details { border-bottom: 1px solid var(--linha-clara); }
.guia summary { padding: 16px 4px; font-size: 16px; font-weight: 700; cursor: pointer; }
.guia summary:hover { color: var(--vermelho); }
.guia p { margin: 0 4px 16px; color: var(--tinta); line-height: 1.55; }
.guia code { display: inline-block; margin: 4px 0; padding: 6px 8px; border-radius: 4px; background: var(--cinza-claro); font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.grade-politicas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.lista-politica { margin: 14px 0 0; padding-left: 18px; }
.lista-politica li { margin-bottom: 8px; line-height: 1.5; }
@media (max-width: 900px) {
  .linha-promo { grid-template-columns: 96px minmax(0, 1fr) 40px; }
  .linha-promo .uso-promo, .linha-promo .etiqueta-status { grid-column: 2; }
  .linha-promo .segmento { grid-column: 2; justify-self: start; }
  .grade-politicas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tipos-promo { grid-template-columns: 1fr; }
  .linha-chamado { grid-template-columns: minmax(0, 1fr) auto; }
  .quando-ch { display: none; }
}

/* ---------- adicionar loja (o mesmo cadastro do site de parceiros) ---------- */
.form-nova-loja { max-width: 880px; }
.form-nova-loja .aviso-azul, .enviado-nova-loja { overflow-wrap: anywhere; }
.form-nova-loja .cartao > h2 { margin-bottom: 14px; font-size: 18px; }
.form-nova-loja .cartao > h2:has(+ .desc) { margin-bottom: 0; }
.form-nova-loja fieldset { margin: 4px 0 14px; padding: 0; border: 0; }
.linha-cnpj { display: flex; align-items: flex-end; gap: 10px; max-width: 560px; }
.linha-cnpj .campo { flex: 1; }
.linha-cnpj .btn { flex: none; margin-bottom: 14px; }
.caixa-receita { padding: 14px 16px; border: 1px solid var(--linha); border-radius: 8px; background: #fafafa; font-size: 14px; }
.receita-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.caixa-receita .detalhes { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.caixa-receita dt { color: var(--suave); }
.caixa-receita dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.aviso-cnpj { margin: 10px 0 0; color: var(--vermelho); font-weight: 700; }
.grade-cep { grid-template-columns: 170px 1fr; }
.grade-numero { grid-template-columns: 120px 1fr 1fr; }
.check-espaco { margin: 4px 0 12px; }
.check a { color: var(--vermelho); font-weight: 700; }
.opcoes-radio { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.campo .erro-campo, .check .erro-campo { display: block; margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--vermelho); }
.check .erro-campo { flex-basis: 100%; margin-left: 28px; }
.check:has(.erro-campo) { flex-wrap: wrap; }
.check:has(.erro-campo) > span { flex: 1 1 0; min-width: 0; }
.entrada.campo-endereco[readonly], select.campo-endereco:disabled { background: #f7f7f7; color: var(--suave); }
.enviado-nova-loja { max-width: 640px; padding: 34px 28px; text-align: center; }
.enviado-nova-loja .selo-ok { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); }
.enviado-nova-loja .selo-ok svg { width: 30px; height: 30px; }
.enviado-nova-loja h2 { font-size: 22px; }
.enviado-nova-loja p { margin: 10px 0; }
.enviado-nova-loja .btn { margin-top: 14px; }
@media (max-width: 640px) {
  .grade-cep, .grade-numero { grid-template-columns: 1fr; }
  .linha-cnpj { flex-direction: column; align-items: stretch; }
  .linha-cnpj .btn { margin-top: -4px; }
}