/* Fontes servidas pelo próprio site (pasta fontes/, licença OFL). As duas são variáveis:
   um arquivo só cobre todos os pesos. Só o alfabeto latino, que já tem os acentos do português */
@font-face {
  font-family: "Fraunces";
  src: url("fontes/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("fontes/nunito-sans-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* Paleta de pizzaria: molho de tomate, manjericão, queijo e massa */
:root {
  color-scheme: light dark;
  --fundo: #fbf4e8;
  --opacidade-fundo: 0.13;
  --cartao: #fffdf8;
  --cartao-2: #f7ecdb;
  --texto: #2b1d14;
  --texto-suave: #6f5b4c;
  --borda: #ead9c0;
  --primaria: #c8372d;
  --primaria-forte: #a82a21;
  --primaria-texto: #ffffff;
  --topo: #c8372d;
  --queijo: #f2b84b;
  --manjericao: #3f7d3a;
  --sucesso: #2f7a35;
  --sucesso-forte: #25622a;
  --perigo: #b3261e;
  --xadrez: #c8372d;
  --xadrez-claro: #fffdf8;
  --sombra: 0 1px 2px rgb(60 30 10 / 0.06), 0 8px 24px rgb(60 30 10 / 0.08);
  --selo-admin: #fde7c8;
  --selo-admin-texto: #8a4b0a;
  --selo-normal: #efe4d3;
  --selo-normal-texto: #5b4a3d;
  --status-pendente: #fbe7b5;
  --status-pendente-texto: #7a5300;
  --status-cancelado: #f7d6d3;
  --status-cancelado-texto: #a12a21;
  --status-ok: #dcefd8;
  --status-ok-texto: #2f6a2b;
  /* Status que a pizzaria muda no painel: no forno (laranja) e a caminho (azul). A faixa é a cor forte do topo da comanda */
  --status-preparando: #fde0c5;
  --status-preparando-texto: #8a3a0a;
  --faixa-preparando: #e07a2f;
  --status-rota: #dce7f7;
  --status-rota-texto: #1f4e8c;
  --faixa-rota: #3f7fbf;
  /* O + e a faixa dos tamanhos do cardápio do painel: o vermelho da casa bem clarinho, com o texto num vermelho que dá leitura */
  --adicionar: #f9e4df;
  --adicionar-texto: #a82a21;
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  /* A curva das animações do painel: sai rápido e assenta devagar, como os movimentos do vídeo do pin */
  --movimento: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #17110d;
    --opacidade-fundo: 0.07;
    --cartao: #221914;
    --cartao-2: #2c211a;
    --texto: #f5e9da;
    --texto-suave: #bda792;
    --borda: #3b2c22;
    --primaria: #e0503d;
    --primaria-forte: #c63f2e;
    --primaria-texto: #ffffff;
    --topo: #6e1f17;
    --manjericao: #82c275;
    --sucesso: #3c8a37;
    --sucesso-forte: #33772f;
    --perigo: #f07466;
    --xadrez: #a8352a;
    --xadrez-claro: #2a1e18;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
    --selo-admin: #4a3216;
    --selo-admin-texto: #f7cf98;
    --selo-normal: #33271f;
    --selo-normal-texto: #d6c4b2;
    --status-pendente: #4a3a12;
    --status-pendente-texto: #f5d27a;
    --status-cancelado: #4d1d19;
    --status-cancelado-texto: #ff9f94;
    --status-ok: #1f3a1d;
    --status-ok-texto: #9fd895;
    --status-preparando: #4d2c14;
    --status-preparando-texto: #f8b98a;
    --faixa-preparando: #ef8a45;
    --status-rota: #1b2d47;
    --status-rota-texto: #a8c8f3;
    --faixa-rota: #5b95d1;
    --adicionar: #3d211b;
    --adicionar-texto: #ff9f94;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Fundo de pizzas: camada fixa e bem clarinha atrás de tudo, para não brigar com os cards.
   Para usar uma foto, troque o arquivo em url(...) por exemplo por "fundo.jpg" e aumente o tamanho. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("fundo-pizza.svg") 0 0 / 320px 320px repeat;
  opacity: var(--opacidade-fundo);
  pointer-events: none;
}

[hidden] { display: none !important; }

/* O SVG com o desenho da pizza só guarda o símbolo: não ocupa espaço na página */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Sem JavaScript nenhuma tela aparece, então fica só este aviso */
.sem-js, .emoldurado { max-width: 420px; margin: 48px auto; padding: 0 16px; text-align: center; font-weight: 600; }

h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--fonte-titulo); font-weight: 800; }
h1 { font-size: 2.1rem; color: var(--primaria); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

.subtitulo { margin: 2px 0 0; color: var(--texto-suave); font-size: 0.92rem; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--sombra);
}

/* Faixa de toalha xadrez */
.toalha {
  height: 12px;
  background: repeating-conic-gradient(var(--xadrez) 0 25%, var(--xadrez-claro) 0 50%) 0 0 / 12px 12px;
}

/* ---------- tela de acesso ---------- */

.acesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.acesso-cartao {
  width: 100%;
  max-width: 400px;
  padding: 0;
  overflow: hidden;
}
/* No celular a marca fica em cima dos formulários; na tela larga, do lado (veja o @media mais abaixo) */
.acesso-colunas { display: grid; }
.acesso-lado { display: grid; gap: 18px; padding: 24px 24px 0; }
.acesso-conteudo { display: grid; gap: 18px; padding: 18px 24px 24px; }
.acesso-foto, .acesso-chamada { display: none; }
/* Celular e CPF lado a lado no cadastro. As dicas embaixo têm tamanhos diferentes: sem o "start", o campo da
   dica mais curta esticaria até a altura do outro */
.acesso .linha-campos { align-items: start; }
/* Nome e e-mail: um embaixo do outro no celular, lado a lado na tela larga */
.acesso .campos-largos { grid-template-columns: minmax(0, 1fr); }
.acesso-marca { display: grid; justify-items: center; text-align: center; gap: 4px; }
.slogan {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.pizza-grande { width: 92px; height: 92px; margin-bottom: 6px; animation: girar 60s linear infinite; }
.pizza-media { width: 64px; height: 64px; }
.pizza-pequena { width: 34px; height: 34px; }

@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pizza-grande { animation: none; } }

/* Tela larga: o cartão fica deitado. A marca vai para a esquerda, em cima da foto do forno (a mesma da página
   inicial), e os formulários para a direita */
@media (min-width: 880px) {
  .acesso-cartao { max-width: 940px; }
  .acesso-colunas { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .acesso-lado {
    position: relative;
    isolation: isolate; /* a foto e a sombra ficam atrás do texto sem sair desta coluna */
    align-content: space-between;
    padding: 28px;
    color: #fff;
  }
  .acesso-foto { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
  /* Sombra sobre a foto, mais forte embaixo, onde ficam o nome e o slogan: assim o texto branco fica legível */
  .acesso-lado::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgb(20 10 5 / 0.5), rgb(20 10 5 / 0.1) 35%, rgb(20 10 5 / 0.85));
  }
  .acesso-lado .voltar-inicio, .acesso-lado .voltar-inicio:hover { color: #fff; }
  .acesso-lado .acesso-marca { justify-items: start; text-align: left; }
  .acesso-lado .pizza-grande { width: 64px; height: 64px; }
  .acesso-lado h1 { color: #fff; font-size: 2.6rem; }
  .acesso-lado .slogan { color: rgb(255 255 255 / 0.85); }
  .acesso-chamada { display: block; margin: 8px 0 0; font-size: 1.05rem; color: rgb(255 255 255 / 0.92); }
  .acesso-conteudo { align-content: center; padding: 32px; }
  .acesso .campos-largos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.abas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--cartao-2);
  border-radius: 999px;
}
.aba {
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  padding: 8px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.aba.ativa { background: var(--primaria); color: var(--primaria-texto); }

/* ---------- formulários e botões ---------- */

.formulario { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); }
input, select {
  font: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 9px 11px;
  min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--primaria); outline-offset: -1px; }
/* Campo só de leitura (o CPF já salvo, na Minha conta): borda tracejada e fundo de cartão, como o preço da pizza */
input[readonly] { border-style: dashed; background: var(--cartao-2); cursor: default; }

.dica { margin: 0; font-size: 0.85rem; color: var(--texto-suave); }
.dica-campo { font-size: 0.8rem; font-weight: 400; color: var(--texto-suave); }

/* Botão com cara de link: "Esqueci minha senha", "Voltar para o login", "Pedir outro link" */
.botao-link {
  justify-self: center;
  padding: 2px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primaria);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.botao-link:hover { color: var(--primaria-forte); }

/* Aviso dentro do cartão de login: sessão que terminou ou saída confirmada */
.aviso-acesso {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--status-pendente);
  color: var(--status-pendente-texto);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

/* "Continuar com o Google" embaixo dos formulários, separado deles por um "ou" com um traço de cada lado */
.acesso-google { display: grid; gap: 14px; }
.separador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--borda); }
/* Quem desenha o botão é o script do Google, um pouco depois de a área aparecer: a altura do botão
   "large" fica reservada para o cartão não pular. O color-scheme claro deixa o fundo do iframe transparente
   também no modo escuro (sem ele, o navegador pinta um retângulo branco atrás do botão preto) */
.botao-google { display: flex; justify-content: center; min-height: 40px; color-scheme: light; }
/* Até o botão de verdade (o iframe) carregar, o script do Google mostra um botão provisório na própria página.
   O CSS desse provisório vem numa tag <style> que a CSP do index.html bloqueia, e sem ele o "G" do Google
   ocupa a largura toda do cartão por alguns segundos. Ele fica escondido: a altura reservada acima segura o lugar */
.botao-google [role="button"] { display: none; }

.acesso-privacidade { text-align: center; font-size: 0.8rem; }
.acesso-privacidade a, .rodape-conteudo a { color: inherit; text-underline-offset: 2px; }
.acesso-privacidade a:hover, .rodape-conteudo a:hover { color: var(--primaria); }

.botao {
  font: inherit;
  font-weight: 700;
  border: 1px solid var(--borda);
  background: var(--cartao);
  color: var(--texto);
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.botao:hover:not(:disabled) { border-color: var(--texto-suave); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }
/* Link com cara de botão: "Painel do admin" e "Voltar para a loja" */
a.botao { display: inline-block; text-align: center; text-decoration: none; }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
.botao.primario:hover:not(:disabled) { background: var(--primaria-forte); border-color: var(--primaria-forte); }
.botao.perigo { color: var(--perigo); }
.botao.perigo:hover:not(:disabled) { border-color: var(--perigo); background: var(--status-cancelado); }
.botao.sucesso { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.botao.sucesso:hover:not(:disabled) { background: var(--sucesso-forte); border-color: var(--sucesso-forte); }
.botao.pequeno { padding: 5px 12px; font-size: 0.85rem; }
.botao.fantasma { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.5); }
.botao.fantasma:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); border-color: #fff; }

/* ---------- topo ---------- */

.topo { background: var(--topo); color: #fff; }
.topo-conteudo, .painel {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 16px;
}
.topo-conteudo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 1.4rem/1 var(--fonte-titulo);
}

/* ---------- painel ---------- */

/* minmax(0, 1fr) impede que a tabela estique a página no celular; ela rola dentro do cartão */
.painel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 28px; padding-bottom: 48px; }

.secao-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cartao > h2 { margin-bottom: 12px; }
.linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Lembrete da conta sem celular ou CPF, em cima dos pedidos. No celular, o botão desce para baixo do texto */
.lembrete-dados {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--status-pendente);
  color: var(--status-pendente-texto);
}
.lembrete-dados strong { font: 800 1.1rem var(--fonte-titulo); }
.lembrete-dados p { margin: 2px 0 0; font-size: 0.92rem; font-weight: 600; }

/* As abas do painel são os títulos das telas: o Cardápio, o Acompanhar e, depois do traço, uma para cada status dos
   pedidos, com quantos tem em cada. A aberta fica escura, com um traço vermelho embaixo, e as outras ficam clarinhas.
   A fileira fica presa no alto da tela quando a página rola e, no celular, rola para o lado em vez de quebrar.
   O painel do admin usa a mesma fileira, com links no lugar dos botões: cada aba de lá tem o endereço dela */
.telas-painel {
  position: sticky;
  top: -1px; /* presa, a fileira fica 1 px para fora da tela: é assim que o app.js percebe que ela grudou */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: -10px; /* a tela aberta fica mais perto das abas do que o espaço normal do painel */
  padding-top: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--borda);
}
/* Presa no alto, ganha o fundo da página e uma sombra embaixo, para os cards passarem por trás sem se misturar */
.telas-painel.presa { background: var(--fundo); box-shadow: 0 10px 16px -14px rgb(60 30 10 / 0.45); }
.telas-painel :is(button, a) {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 12px;
  border: 0;
  background: none;
  color: var(--texto-suave);
  /* Do tamanho que as 8 abas de antes do Acompanhar (o Cardápio e os 7 status, quando há pedido em todos) cabiam no
     computador sem rolar. Com o Acompanhar, a fileira pode rolar um pouco para o lado quando há pedido em quase todos */
  font: 800 clamp(1.05rem, 1.5vw, 1.1rem)/1.15 var(--fonte-titulo);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.telas-painel :is(button, a):hover, .telas-painel :is(button, a)[aria-current="page"] { color: var(--texto); }
.telas-painel :is(button, a)[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--primaria);
}
/* O contorno do foco fica para dentro: a fileira rola para o lado e cortaria o que passasse da borda */
.telas-painel :is(button, a):focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; border-radius: 6px; }
.telas-divisor { flex: none; width: 1px; height: 24px; margin-bottom: 10px; background: var(--borda); }
.tela-qtd {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cartao-2);
  color: var(--texto-suave);
  font: 800 0.78rem/1.4 "Nunito Sans", system-ui, sans-serif;
  text-align: center;
}
.tela-qtd:empty { display: none; } /* até a lista de pedidos chegar */
.telas-painel :is(button, a)[aria-current="page"] .tela-qtd { background: var(--primaria); color: var(--primaria-texto); }
/* Com pedido em andamento, o número do Acompanhar (e o dos Pedidos, no admin) fica verde, aberto ou não, para chamar o
   olho. No admin, insumo abaixo do mínimo deixa o número do Estoque vermelho, como o selo da linha */
.telas-painel :is(button, a).em-andamento .tela-qtd { background: var(--status-ok); color: var(--status-ok-texto); }
.telas-painel a.em-alerta .tela-qtd { background: var(--status-cancelado); color: var(--status-cancelado-texto); }

/* ---------- filtros em pílula (Dia, Mês e Ano no painel do admin) ---------- */

.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--cartao);
  color: var(--texto-suave);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.filtro:hover { border-color: var(--texto-suave); }
.filtro-qtd {
  min-width: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--cartao-2);
  color: var(--texto);
  font-size: 0.78rem;
  text-align: center;
}
.filtro[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--cartao); }
.filtro[aria-pressed="true"] .filtro-qtd { background: rgb(255 255 255 / 0.18); color: inherit; }

.filtro:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* ---------- comandas (cards de pedido) ---------- */

.comandas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.comanda {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
/* Faixa de cor no topo indica o status */
.comanda::before { content: ""; height: 6px; background: var(--queijo); }
.comanda.status-cancelado::before { background: var(--borda); }
.comanda.status-finalizado::before, .comanda.status-entregue::before { background: var(--manjericao); }
.comanda.status-preparando::before { background: var(--faixa-preparando); }
.comanda.status-em-rota-de-entrega::before { background: var(--faixa-rota); }

.comanda-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 10px;
}
.comanda-sub { margin: 2px 0 0; font-size: 0.85rem; color: var(--texto-suave); }

.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: var(--status-ok);
  color: var(--status-ok-texto);
}
.status-pendente .status { background: var(--status-pendente); color: var(--status-pendente-texto); }
.status-cancelado .status { background: var(--status-cancelado); color: var(--status-cancelado-texto); }
.status-preparando .status { background: var(--status-preparando); color: var(--status-preparando-texto); }
.status-em-rota-de-entrega .status { background: var(--status-rota); color: var(--status-rota-texto); }
/* Entregue é o fim do caminho: o mesmo verde, só que cheio */
.status-entregue .status { background: #2f6a2b; color: #fff; }

/* Andamento da entrega na comanda (do "No forno" em diante): bolinhas ligadas por uma linha.
   O ::before de cada etapa é a bolinha, e o ::after é a linha que vem da etapa anterior */
.etapas-entrega {
  list-style: none;
  margin: 0 16px 12px;
  padding: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px dashed var(--borda);
  color: var(--texto-suave);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.etapas-entrega li { position: relative; display: grid; justify-items: center; gap: 4px; }
.etapas-entrega li::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--borda);
  border-radius: 50%;
  background: var(--cartao);
}
.etapas-entrega li + li::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--borda);
}
.etapas-entrega li.feita::before,
.etapas-entrega li.atual::before { border-color: var(--manjericao); background: var(--manjericao); }
.etapas-entrega li.feita::after,
.etapas-entrega li.atual::after { background: var(--manjericao); }
.etapas-entrega li.atual { color: var(--texto); }
.etapas-entrega li.atual::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--manjericao) 25%, transparent); }

.comanda-itens { list-style: none; margin: 0; padding: 0 16px; }
.item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "foto info preco";
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--borda);
}
/* No pedido aberto, o −, o + e o Remover ganham uma linha só deles, embaixo da foto, do nome e do preço.
   Na coluna do preço, os três espremeriam o nome do sabor no celular */
.item.editavel { grid-template-areas: "foto info preco" "acoes acoes acoes"; }
.item-foto { grid-area: foto; }
.item-info { grid-area: info; }
.item-preco { grid-area: preco; text-align: right; }
.item-acoes { grid-area: acoes; justify-self: end; display: flex; align-items: center; gap: 6px; }
.botao.mudar-qtd { padding: 3px 10px; border-radius: 999px; }
.item:last-child { border-bottom: 0; }
/* Foto redonda do sabor com a quantidade num selo no canto */
.item-foto { position: relative; width: 46px; height: 46px; }
.item-foto img, .item-foto svg { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.item-qtd {
  position: absolute;
  right: -7px;
  bottom: -5px;
  min-width: 26px;
  padding: 1px 5px;
  border: 2px solid var(--cartao);
  border-radius: 999px;
  background: var(--primaria);
  color: var(--primaria-texto);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.item-info { display: grid; min-width: 0; }
.item-info strong { line-height: 1.25; overflow-wrap: anywhere; }
.item-info small { color: var(--texto-suave); font-size: 0.78rem; }
.item-preco { font-weight: 700; white-space: nowrap; }
.botao.remover {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border-color: transparent;
  background: var(--status-cancelado);
  color: var(--status-cancelado-texto);
  font-size: 0.78rem;
}
.botao.remover svg { width: 14px; height: 14px; flex: none; }
.botao.remover:hover:not(:disabled) { background: var(--perigo); border-color: var(--perigo); color: #fff; }

.comanda-vazia { margin: 0; padding: 6px 16px 14px; color: var(--texto-suave); font-style: italic; }

/* O que foi escolhido no finalizar (entrega, pagamento e observação): o rótulo à esquerda e o texto à direita */
.comanda-entrega {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 16px 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--borda);
  font-size: 0.85rem;
}
.comanda-entrega dt { color: var(--texto-suave); font-weight: 700; }
.comanda-entrega dd { margin: 0; overflow-wrap: anywhere; }

.comanda-rodape {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding: 12px 16px 16px;
  border-top: 2px dashed var(--borda);
  background: var(--cartao-2);
}
.comanda-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; line-height: 1.1; }
.comanda-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comanda-acoes .botao { padding-block: 8px; }
.comanda-acoes .cancelar { grid-column: 1 / -1; }
.comanda-total span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-suave); font-weight: 700; }
.comanda-total strong { font: 800 1.35rem var(--fonte-titulo); }

/* Pedido cancelado ganha um "carimbo" */
.comanda.status-cancelado .comanda-itens,
.comanda.status-cancelado .comanda-vazia,
.comanda.status-cancelado .comanda-total { opacity: 0.55; }
.comanda.status-cancelado::after {
  content: "CANCELADO";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  padding: 2px 14px;
  border: 3px solid var(--perigo);
  border-radius: 8px;
  color: var(--perigo);
  font: 800 1.3rem var(--fonte-titulo);
  letter-spacing: 0.12em;
  opacity: 0.7;
  pointer-events: none;
}

/* "Ver pedido", da barra do cardápio, sobe até a comanda (abaixo das abas, que ficam presas no alto da tela), e
   ela ganha um contorno vermelho que some devagar, para o olho achar ela */
.comanda { scroll-margin-top: 72px; }
.comanda.em-foco { outline: 3px solid transparent; outline-offset: 3px; animation: em-foco 1.8s ease-out; }
@keyframes em-foco { 0%, 35% { outline-color: var(--primaria); } }

.vazio { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--texto-suave); }
.vazio p { margin: 0; }
.vazio .botao { margin-top: 8px; }

/* ---------- aba Acompanhar ---------- */

/* Quando a lista chegou pela última vez e o "Atualizar agora", no canto do topo da aba */
.acompanhar-hora { display: flex; align-items: center; gap: 10px; color: var(--texto-suave); font-size: 0.85rem; font-weight: 600; }

/* Um card por pedido, com a cara da comanda (a faixa de cor do status em cima). Com um pedido só, ele pega a
   largura toda */
.acompanhamentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; }
/* O que a etapa de agora quer dizer: o ícone num círculo da cor do status, que pulsa devagar enquanto o pedido não
   chega, e o rótulo e a frase do lado */
.acompanhamento-agora { display: flex; align-items: center; gap: 14px; padding: 2px 16px 14px; }
.acompanhamento-agora strong { font: 800 1.2rem var(--fonte-titulo); }
.acompanhamento-agora p { margin: 2px 0 0; color: var(--texto-suave); font-size: 0.92rem; }
.acompanhamento-icone {
  --icone-cor: var(--status-ok-texto);
  --icone-fundo: var(--status-ok);
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--icone-fundo);
  color: var(--icone-cor);
}
.acompanhamento-icone svg { width: 26px; height: 26px; }
.status-preparando .acompanhamento-icone { --icone-cor: var(--status-preparando-texto); --icone-fundo: var(--status-preparando); }
.status-em-rota-de-entrega .acompanhamento-icone { --icone-cor: var(--status-rota-texto); --icone-fundo: var(--status-rota); }
.acompanhamento:not(.status-entregue) .acompanhamento-icone { animation: pulsar 2.4s ease-in-out infinite; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--icone-fundo) 60%, transparent); } }
/* No Acompanhar as etapas ficam um pouco maiores que na comanda: são o assunto da tela */
.acompanhamento .etapas-entrega { padding-top: 14px; font-size: 0.8rem; }
.acompanhamento-rodape { margin: 0; padding: 0 16px 14px; color: var(--texto-suave); font-size: 0.85rem; overflow-wrap: anywhere; }

/* O último entregue fica embaixo dos pedidos em andamento, com o título pequeno */
.acompanhar-entregue { display: grid; gap: 10px; margin-top: 24px; }
.acompanhar-entregue .rotulo-grupo { margin: 0; font-family: inherit; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .acompanhamento:not(.status-entregue) .acompanhamento-icone { animation: none; }
}

/* ---------- diálogo de adicionar pizza ---------- */

.dialogo {
  width: min(600px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--cartao);
  color: var(--texto);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
  overflow: hidden;
}
.dialogo::backdrop { background: rgb(30 15 5 / 0.55); backdrop-filter: blur(2px); }
.dialogo form, .dialogo-caixa { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }

.dialogo-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 12px;
}
/* Título com o nome de alguém ou de um insumo: um nome comprido quebra a linha em vez de empurrar o × para fora */
.dialogo-topo > div { min-width: 0; }
.dialogo-topo h2 { overflow-wrap: anywhere; }
.botao.fechar { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; }

/* minmax(0, 1fr): nada de dentro (uma lista, os botões de página) alarga o diálogo além da tela */
.dialogo-corpo { overflow-y: auto; padding: 4px 20px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rotulo-grupo {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Os radios ficam escondidos; o card inteiro é clicável */
.pilula input, .sabor input, .endereco input { position: absolute; opacity: 0; pointer-events: none; }

.opcoes-tamanho { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pilula {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 10px 6px;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  background: var(--cartao);
  color: var(--texto);
  font-size: 0.95rem;
  cursor: pointer;
}
.pilula span { font-weight: 800; }
.pilula small { color: var(--texto-suave); font-size: 0.75rem; font-weight: 600; }

.opcoes-sabor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sabor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  background: var(--cartao);
  cursor: pointer;
  scroll-margin-block: 12px; /* respiro quando o diálogo rola até o sabor que veio do cardápio do painel */
}
.sabor-foto { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--cartao-2); }
.sabor-texto { display: grid; flex: 1; min-width: 0; }
.sabor-texto strong { color: var(--texto); font-size: 0.95rem; }
.sabor-texto small { color: var(--texto-suave); font-size: 0.76rem; font-weight: 400; line-height: 1.3; }
.sabor-preco { color: var(--primaria); font-weight: 800; white-space: nowrap; font-size: 0.9rem; }

.pilula:hover, .sabor:hover, .endereco:hover { border-color: var(--texto-suave); }
.pilula:has(input:checked), .sabor:has(input:checked), .endereco:has(input:checked) {
  border-color: var(--primaria);
  background: color-mix(in srgb, var(--primaria) 9%, var(--cartao));
}
.pilula:has(input:focus-visible), .sabor:has(input:focus-visible), .endereco:has(input:focus-visible) {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contador {
  display: flex;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  background: var(--fundo);
}
.contador button {
  width: 40px;
  border: 0;
  background: var(--cartao-2);
  color: var(--texto);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}
.contador input { flex: 1; width: 100%; border: 0; border-radius: 0; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Preço da pizza escolhida: só leitura, com o mesmo tamanho do campo de quantidade ao lado */
.campo-leitura { display: grid; gap: 4px; font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); }
.campo-leitura output {
  padding: 9px 11px;
  border: 1px dashed var(--borda);
  border-radius: 10px;
  background: var(--cartao-2);
  color: var(--texto);
  font-weight: 800;
}

.erro-inline {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--status-cancelado);
  color: var(--status-cancelado-texto);
  font-size: 0.88rem;
  font-weight: 600;
}

.dialogo-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 2px dashed var(--borda);
  background: var(--cartao-2);
}
/* Diálogo de trocar senha: mais estreito e com os botões à direita */
.dialogo.dialogo-estreito { width: min(420px, calc(100% - 32px)); }
.dialogo-estreito .dialogo-rodape { justify-content: flex-end; }

.dialogo-total { display: grid; line-height: 1.1; }
.dialogo-total span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-suave); font-weight: 700; }
.dialogo-total strong { font: 800 1.5rem var(--fonte-titulo); color: var(--primaria); }

@media (max-width: 520px) {
  .opcoes-tamanho { grid-template-columns: repeat(2, 1fr); }
  .opcoes-sabor { grid-template-columns: minmax(0, 1fr); }
  .linha-campos { grid-template-columns: 1fr; }
}

/* ---------- diálogo de finalizar o pedido ---------- */

/* Os endereços da conta: cada um é um card clicável, como os sabores, com o Editar do lado de fora do card */
.enderecos, .opcoes-endereco { display: grid; gap: 8px; }
.endereco-opcao { display: flex; align-items: center; gap: 8px; }
.endereco {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  background: var(--cartao);
  cursor: pointer;
}
.endereco-texto { display: grid; }
.endereco-texto strong { color: var(--texto); font-size: 0.95rem; overflow-wrap: anywhere; }
.endereco-texto small { font-size: 0.8rem; font-weight: 400; overflow-wrap: anywhere; }
.botao.novo-endereco { justify-self: start; }
/* Na Minha conta o endereço só aparece, sem escolha: o card não é clicável, e quem edita é o Editar do lado */
.endereco.endereco-salvo { cursor: default; }
.endereco.endereco-salvo:hover { border-color: var(--borda); }

/* PIX, Cartão e Dinheiro lado a lado, como os tamanhos da pizza */
.opcoes-pagamento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ---------- minha conta: o painel do ícone de usuário ---------- */

/* O painel fica preso embaixo do ícone de usuário (ao lado do "Olá"), alinhado pela direita com ele: o app.js mede o
   ícone e passa a posição no --conta-topo e no --conta-direita. A altura vai até perto do pé da tela, e o que passar rola
   por dentro, com o topo (quem é) e o pé (o Excluir conta e o Sair) parados. No celular, ele pega a largura toda,
   menos 16 px de cada lado */
.dialogo.dialogo-conta {
  --conta-altura: calc(100dvh - var(--conta-topo, 72px) - 16px);
  position: fixed;
  inset: var(--conta-topo, 72px) max(16px, var(--conta-direita, 16px)) auto auto;
  margin: 0;
  width: min(400px, calc(100% - 32px));
  max-width: none; /* sem o limite do navegador (100% - 6px - 2em), que deixaria o lado esquerdo mais largo no celular */
  max-height: var(--conta-altura);
  transform-origin: top right;
}
.dialogo-conta :is(form, .dialogo-caixa) { max-height: var(--conta-altura); }
/* O fundo é mais claro que o dos outros diálogos e sem desfoque: é um menu, e a página continua à vista atrás */
.dialogo-conta::backdrop { background: rgb(30 15 5 / 0.3); backdrop-filter: none; }
/* Abre descendo do ícone */
.dialogo-conta[open] { animation: descer 0.18s ease-out; }
.dialogo-conta[open]::backdrop { animation: aparecer 0.18s ease-out; }
@keyframes descer { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }

/* Quem é: as iniciais num círculo vermelho, o nome, o e-mail mascarado e o perfil, separados do resto pela linha
   tracejada da comanda */
.conta-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 20px;
  border-bottom: 2px dashed var(--borda);
}
.conta-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primaria);
  color: var(--primaria-texto);
  font: 800 1.25rem/1 var(--fonte-titulo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 16%, var(--cartao));
}
.conta-quem { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 2px; }
.conta-quem h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.conta-email { margin: 0; color: var(--texto-suave); font-size: 0.88rem; overflow-wrap: anywhere; }
.conta-quem .selo { margin-top: 4px; }
.conta-topo .botao.fechar { align-self: flex-start; }

/* Cada parte (os atalhos, o celular e o CPF, os endereços) com uma linha fina entre elas e, nas de campos, o título
   pequeno em cima.
   O overscroll-behavior faz a rolagem parar no fim do painel, sem passar para a página de trás */
.dialogo-corpo.conta-corpo { gap: 0; padding: 16px 20px 18px; overscroll-behavior: contain; }
.conta-secao { display: grid; gap: 10px; }
.conta-secao + .conta-secao { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borda); }
.conta-secao > .rotulo-grupo { margin: 0; font-family: inherit; line-height: 1.4; }
.botao.conta-salvar { justify-self: end; }

/* Os atalhos da conta: a linha inteira é o botão, com o ícone num quadradinho à esquerda e a setinha à direita.
   A margem negativa deixa o fundo do hover passar um pouco das bordas, e os ícones ficam alinhados com os campos */
.conta-secao.conta-opcoes { gap: 2px; }
.conta-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline: -8px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--texto);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
.conta-opcao:hover:not(:disabled) { background: var(--cartao-2); }
.conta-opcao:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
.conta-opcao:disabled { opacity: 0.45; cursor: not-allowed; }
.conta-opcao-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primaria) 10%, var(--cartao));
  color: var(--primaria);
}
.conta-opcao-icone svg { width: 19px; height: 19px; }
.conta-opcao-texto { flex: 1; min-width: 0; }
.conta-seta { flex: none; width: 18px; height: 18px; color: var(--texto-suave); }

/* O pé: o Excluir conta num canto e o Sair no outro (o space-between do .dialogo-rodape), cada um com o ícone na frente */
.conta-rodape { padding-block: 12px; }
.conta-rodape .botao { display: inline-flex; align-items: center; gap: 6px; }
.conta-rodape svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .dialogo-conta[open], .dialogo-conta[open]::backdrop { animation: none; }
}

/* ---------- diálogo de confirmação ---------- */

/* A pergunta antes de uma ação (o confirmar() do comum.js). A cor segue o tipo: verde para finalizar
   e reativar, vermelho para cancelar, remover e desativar, e o vermelho da casa para o resto */
.dialogo.dialogo-confirmar { width: min(400px, calc(100% - 32px)); }
.dialogo-confirmar[open] { animation: surgir 0.2s ease-out; }
.dialogo-confirmar[open]::backdrop { animation: aparecer 0.2s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(12px) scale(0.96); } }

.confirmar-corpo {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 24px 22px;
  overflow-y: auto;
  text-align: center;
}
.confirmar-corpo h2 { font-size: 1.4rem; overflow-wrap: anywhere; }

/* Ícone num círculo, com um halo da mesma cor em volta */
.confirmar-icone {
  --icone-cor: var(--primaria);
  --icone-fundo: color-mix(in srgb, var(--primaria) 12%, var(--cartao));
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--icone-fundo);
  color: var(--icone-cor);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--icone-fundo) 45%, transparent);
}
.confirmar-icone svg { width: 30px; height: 30px; }
.dialogo-confirmar[data-tipo="sucesso"] .confirmar-icone { --icone-cor: var(--status-ok-texto); --icone-fundo: var(--status-ok); }
.dialogo-confirmar[data-tipo="perigo"] .confirmar-icone { --icone-cor: var(--status-cancelado-texto); --icone-fundo: var(--status-cancelado); }

.confirmar-texto { margin: 0; max-width: 34ch; color: var(--texto-suave); }
/* Selo com o que a ação atinge: "3 pizzas · R$ 129,70", o tamanho da pizza, o e-mail da conta */
.confirmar-detalhe {
  margin: 8px 0 0;
  padding: 4px 14px;
  border: 1px dashed var(--borda);
  border-radius: 999px;
  background: var(--cartao-2);
  font-size: 0.9rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Os dois botões dividem a largura. Se não couberem lado a lado (celular estreito), o wrap-reverse
   põe a ação em cima e o Voltar embaixo */
.confirmar-rodape { flex-wrap: wrap-reverse; gap: 8px; }
.confirmar-rodape .botao { flex: 1 1 0; padding-block: 10px; }
/* Aqui o botão de perigo é cheio, e não só contornado: é a resposta principal da pergunta */
.dialogo-confirmar .botao.perigo { background: #b3261e; border-color: #b3261e; color: #fff; }
.dialogo-confirmar .botao.perigo:hover:not(:disabled) { background: #8f1f18; border-color: #8f1f18; }

@media (prefers-reduced-motion: reduce) {
  .dialogo-confirmar[open], .dialogo-confirmar[open]::backdrop { animation: none; }
}

/* ---------- página inicial ---------- */

/* O topo fica preso no alto, para Entrar e Criar conta estarem sempre à mão */
.topo.fixo { position: sticky; top: 0; z-index: 10; }
.topo-acoes { display: flex; gap: 8px; }
.botao.claro { background: #fff; border-color: #fff; color: #a82a21; }
.botao.claro:hover:not(:disabled) { background: #fbe9e6; border-color: #fbe9e6; }
.botao.grande { padding: 11px 22px; font-size: 1rem; }

.inicio {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}
/* "Ver os sabores" desce até a seção sem ela ficar escondida atrás do topo */
.inicio-secao { scroll-margin-top: 84px; }

.inicio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 32px;
  padding-top: 48px;
}
.inicio-hero h1 { margin-top: 10px; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--texto); }
.inicio-hero h1 span { color: var(--primaria); }
.hero-sub { margin: 16px 0 24px; max-width: 52ch; font-size: 1.08rem; color: var(--texto-suave); }

/* Foto do forno: moldura clara, levemente inclinada, com um selo no canto */
.hero-foto { position: relative; justify-self: center; width: min(100%, 400px); margin: 0; }
.hero-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 6px solid var(--cartao);
  border-radius: 28px;
  box-shadow: 0 22px 50px rgb(60 30 10 / 0.28);
  transform: rotate(2deg);
}
.hero-selo {
  position: absolute;
  left: -12px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--cartao);
  color: var(--texto);
  font-weight: 800;
  box-shadow: var(--sombra);
  transform: rotate(-3deg);
}

.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.destaque { display: grid; gap: 8px; align-content: start; }
.destaque svg {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primaria) 12%, var(--cartao));
  color: var(--primaria);
}
.destaque p, .passo p, .info p { margin: 0; color: var(--texto-suave); font-size: 0.92rem; }

.secao-cabeca { display: grid; gap: 4px; margin-bottom: 18px; }
.secao-cabeca h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }

/* Vitrine dos sabores da página inicial: a toalha xadrez em cima e um card com foto para cada pizza.
   O clip corta os cantos como o hidden, mas sem virar uma caixa de rolagem */
.vitrine { padding: 0; overflow: hidden; overflow: clip; }
.vitrine-sabores {
  list-style: none;
  margin: 0;
  padding: 18px 24px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}
.prato {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--cartao);
  box-shadow: 0 1px 2px rgb(60 30 10 / 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}
.prato:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
/* A foto fica num "quadro" 4:3; sem foto (sabor novo no banco), aparece o desenho da pizza */
.prato-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cartao-2);
}
.prato-foto picture { display: block; width: 100%; height: 100%; }
.prato-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.prato:hover .prato-foto img { transform: scale(1.05); }
.prato-foto svg { width: 46%; height: 46%; }
/* O nome e o preço em cima e a descrição embaixo */
.prato-texto { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.prato-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prato-linha strong { font: 800 1.12rem/1.2 var(--fonte-titulo); }
.prato-texto small { color: var(--texto-suave); font-size: 0.88rem; line-height: 1.35; }
.vitrine-preco { color: var(--primaria); font-weight: 800; white-space: nowrap; }
.vitrine-escolha { padding: 16px 24px 0; }

@media (prefers-reduced-motion: reduce) {
  .prato, .prato-foto img { transition: none; }
  .prato:hover, .prato:hover .prato-foto img { transform: none; }
}
.vitrine-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 24px 18px;
  border-top: 2px dashed var(--borda);
  background: var(--cartao-2);
}
.vitrine-rodape p { margin: 0; color: var(--texto-suave); font-size: 0.9rem; }

/* ---------- alto do painel: o "Olá" e o ícone de usuário ---------- */

/* Como no app de entrega do pin: o "Olá, Pedro!" grande, com o nome no vermelho da casa, e embaixo o endereço de
   entrega, que abre a Minha conta. Na mesma linha, à direita, o ícone de usuário */
.painel-saudacao { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.saudacao-texto { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.saudacao { margin: 0; font: 800 clamp(1.7rem, 4vw, 2.2rem)/1.1 var(--fonte-titulo); overflow-wrap: anywhere; }
.saudacao span { color: var(--primaria); }
.saudacao-endereco {
  display: grid;
  justify-items: start;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.saudacao-endereco .rotulo-grupo { margin: 0; font-size: 0.7rem; }
.saudacao-endereco-linha { display: flex; align-items: center; gap: 2px; min-width: 0; }
.saudacao-endereco strong { overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--primaria); text-underline-offset: 4px; }
.saudacao-endereco svg { flex: none; width: 18px; height: 18px; color: var(--primaria); }
.saudacao-endereco:hover strong { color: var(--primaria); }
.saudacao-endereco:focus-visible { outline: 2px solid var(--primaria); outline-offset: 4px; border-radius: 6px; }
/* Minha conta: o ícone de usuário num círculo de 48 px, no vermelho da casa sobre o vermelho clarinho. O desenho ocupa
   o botão todo, e o overflow corta o círculo do corpo no redondo da borda: são os ombros */
.botao.botao-usuario {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--adicionar);
  border-radius: 50%;
  background: var(--adicionar);
  color: var(--primaria);
  overflow: hidden;
}
.botao-usuario svg { width: 100%; height: 100%; }
/* No hover e com a Minha conta aberta, o círculo ganha o contorno vermelho */
.botao.botao-usuario:hover:not(:disabled), .botao.botao-usuario[aria-expanded="true"] { border-color: var(--primaria); }

/* ---------- cardápio do painel, no jeito dos apps de entrega ---------- */

/* Os tamanhos numa faixa vermelha clarinha, como as categorias do app: cada um é um círculo com o desenho da pizza,
   que cresce do menor para o maior (o --escala que o app.js passa), com o nome e as fatias embaixo. O escolhido
   fica com o círculo cheio, contornado de vermelho e um pouco acima dos outros */
.vitrine-lista .vitrine-escolha { padding: 14px 8px 12px; border-radius: 22px; background: var(--adicionar); }
.vitrine-lista .opcoes-tamanho { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.vitrine-lista .pilula { padding: 0; border: 0; background: none; color: var(--texto-suave); }
.vitrine-lista .pilula:has(input:checked) { background: none; color: var(--texto); }
.vitrine-lista .pilula:has(input:focus-visible) { outline: none; }
.tamanho-circulo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cartao) 50%, transparent);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tamanho-circulo svg { width: calc(40% + var(--escala, 1) * 45%); height: calc(40% + var(--escala, 1) * 45%); }
.pilula:hover .tamanho-circulo { background: var(--cartao); }
.pilula:has(input:checked) .tamanho-circulo {
  background: var(--cartao);
  box-shadow: 0 0 0 2px var(--primaria), 0 8px 16px rgb(60 30 10 / 0.18);
  transform: translateY(-2px);
}
.pilula:has(input:focus-visible) .tamanho-circulo { outline: 2px solid var(--primaria); outline-offset: 4px; }

/* Os sabores um embaixo do outro (dois por linha na tela larga), cada um num card deitado, como os restaurantes do
   app: a foto quadrada de cantos redondos à esquerda, o texto no meio e o + redondo à direita */
.vitrine-lista .vitrine-sabores { padding: 18px 0 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 12px; }
.prato-lista {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--borda);
  border-radius: 20px;
  background: var(--cartao);
  box-shadow: 0 1px 2px rgb(60 30 10 / 0.05);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.prato-lista:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.prato-lista-foto {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--cartao-2);
}
.prato-lista-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prato-lista-foto svg { width: 72%; height: 72%; }
.prato-lista-texto { display: grid; gap: 2px; min-width: 0; }
.prato-lista-texto strong { font: 800 1.1rem/1.2 var(--fonte-titulo); }
.prato-lista-texto small { color: var(--texto-suave); font-size: 0.84rem; line-height: 1.35; }
/* O tamanho escolhido numa etiqueta, como o tempo de entrega do app, e o preço do lado */
.prato-lista-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.prato-tamanho {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cartao-2);
  color: var(--texto-suave);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.prato-tamanho:empty { display: none; }
/* O + fica no vermelho clarinho e enche de vermelho quando o mouse passa no card */
.prato-mais {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--adicionar);
  color: var(--adicionar-texto);
  font: 800 1.4rem/1 "Nunito Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.prato-lista:hover .prato-mais { background: var(--primaria); color: var(--primaria-texto); }
.prato-mais:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.vitrine-lista .vitrine-nota { margin: 0; color: var(--texto-suave); font-size: 0.85rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .prato-lista, .tamanho-circulo { transition: none; }
  .prato-lista:hover, .pilula:has(input:checked) .tamanho-circulo { transform: none; }
}
@media (max-width: 520px) {
  .prato-lista { gap: 12px; padding-right: 12px; }
  .prato-lista-foto { width: 72px; height: 72px; border-radius: 14px; }
}

/* A barra do pedido que recebe as pizzas: presa no pé da tela no cardápio e no detalhe de um sabor (como a sacola dos
   apps de entrega) e, no fim da página, logo embaixo do conteúdo */
.cardapio-pedido {
  position: sticky;
  bottom: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100% - 32px, 560px);
  margin: 0 auto 18px;
  padding: 10px 10px 10px 12px;
  border-radius: 999px;
  background: var(--topo);
  color: #fff;
  box-shadow: 0 8px 24px rgb(30 15 5 / 0.3);
}
.cardapio-pedido-texto { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cardapio-pedido-texto strong { overflow: hidden; font: 800 1.1rem var(--fonte-titulo); white-space: nowrap; text-overflow: ellipsis; }
.cardapio-pedido-texto small { font-size: 0.85rem; opacity: 0.9; }
.cardapio-pedido .botao { padding-inline: 18px; border-radius: 999px; }
/* As fotos das pizzas do pedido, redondas e uma por cima da outra, separadas pela borda da cor da barra; o "+N"
   fica num círculo branco. Pedido sem pizza fica com o desenho da pizza */
.cardapio-pedido-fotos { display: flex; flex: none; align-items: center; }
.cardapio-pedido-fotos > * {
  flex: none;
  width: 38px;
  height: 38px;
  border: 2px solid var(--topo);
  border-radius: 50%;
  object-fit: cover;
}
.cardapio-pedido-fotos > * + * { margin-left: -14px; }
.cardapio-pedido-mais { display: grid; place-items: center; background: #fff; color: #a82a21; font-size: 0.75rem; font-weight: 800; }
/* No celular a barra pega a largura toda e as fotos ficam menores, para o "Pedido #14" e o total caberem do lado */
@media (max-width: 520px) {
  .cardapio-pedido { width: 100%; gap: 10px; }
  .cardapio-pedido .botao { padding-inline: 14px; }
  .cardapio-pedido-fotos > * { width: 32px; height: 32px; }
  .cardapio-pedido-fotos > * + * { margin-left: -16px; }
}

/* ---------- detalhe de um sabor ---------- */

/* No detalhe, a tela fica só para o sabor, como no vídeo do pin: o "Olá", o lembrete e as abas saem */
.painel.no-detalhe > :is(.painel-saudacao, .lembrete-dados, .telas-painel) { display: none; }

/* Como a tela da direita do vídeo: o "← Voltar" em cima; a foto grande e redonda com a ficha do lado; e o nome, o
   preço, os textos, os tamanhos e o "Adicionar ao pedido" embaixo. No computador, a foto e a ficha ficam numa coluna
   e o resto na outra (o @media mais abaixo) */
.sabor-detalhe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.detalhe-topo { display: flex; }
.detalhe-voltar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: -8px;
  padding: 6px 14px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.detalhe-voltar svg { width: 22px; height: 22px; }
.detalhe-voltar:hover { background: var(--cartao-2); color: var(--texto); }
.detalhe-voltar:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* A foto inteira e redonda, com a ficha do lado, os dois juntos no meio da tela. A foto fica com pouco mais da metade
   da largura da tela (até 400 px), para o nome, o preço e o "Adicionar" caberem na primeira tela do celular, e encolhe
   com o tamanho escolhido (o --tamanho-foto que o app.js passa: o maior tamanho tem a foto inteira). A ficha é como o
   peso, as calorias e as pessoas do vídeo: o rótulo pequeno em cima e o valor embaixo */
.detalhe-vitrine {
  display: grid;
  grid-template-columns: minmax(0, min(400px, 58vw)) auto;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.detalhe-foto { transform: scale(var(--tamanho-foto, 1)); }
.detalhe-foto img, .detalhe-foto svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 28px 50px -20px rgb(60 30 10 / 0.55);
}
.detalhe-ficha { display: grid; gap: 18px; margin: 0; padding-right: 6px; }
.detalhe-ficha dt { color: var(--texto-suave); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.detalhe-ficha dd { margin: 2px 0 0; font: 800 1.15rem/1.2 var(--fonte-titulo); }

/* O nome grande, o preço no vermelho da casa, os ingredientes em destaque e o texto do sabor mais clarinho */
.detalhe-texto { display: grid; gap: 10px; }
.detalhe-texto h2 { font-size: clamp(1.9rem, 6vw, 2.5rem); }
.detalhe-preco { justify-self: start; color: var(--primaria); font: 800 1.6rem var(--fonte-titulo); }
.detalhe-ingredientes { margin: 0; font-weight: 700; }
.detalhe-descricao { margin: 0; max-width: 52ch; color: var(--texto-suave); }
.detalhe-texto fieldset { margin-top: 8px; }
.sabor-detalhe .opcoes-tamanho { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
/* A quantidade e o botão lado a lado. O botão leva o total e uma sombra da cor dele, como o "Add to cart" do vídeo */
.detalhe-acoes { display: flex; gap: 10px; margin-top: 10px; }
.detalhe-acoes .contador { flex: none; width: 120px; }
.botao.detalhe-adicionar {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 1rem;
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--primaria) 80%, transparent);
}

@media (min-width: 860px) {
  .sabor-detalhe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .detalhe-topo { grid-column: 1 / -1; }
}

/* ---------- animações do painel, tiradas do vídeo do pin ---------- */

/* Os movimentos: subir aparecendo (a cascata), vir da direita (a faixa dos tamanhos), pipocar (crescer passando um
   pouco do tamanho), rodar (a pizza que gira, como o donut do vídeo), a barra do pedido subindo, a folha do diálogo, a
   linha das etapas se enchendo, o destaque do pedido que mudou de etapa, a cortina entre as abas e as barras do gráfico
   do admin crescendo */
@keyframes subir-entrando { from { opacity: 0; transform: translateY(18px); } }
@keyframes vir-da-direita { from { opacity: 0; transform: translateX(56px); } }
@keyframes pipocar { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } }
@keyframes rodar { from { transform: rotate(-180deg) scale(0.7); } }
@keyframes barra-subindo { from { opacity: 0; transform: translateY(calc(100% + 24px)); } }
@keyframes subir-folha { from { opacity: 0; transform: translateY(48px); } }
@keyframes encher { from { transform: scaleX(0); } }
@keyframes crescer { from { transform: scaleY(0); } }
@keyframes destaque-mudou { 0%, 45% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--manjericao) 40%, transparent), var(--sombra); } }
@keyframes foto-chegando { from { opacity: 0; transform: translateX(-45%) rotate(-150deg) scale(0.75); } }
@keyframes girar-um-pouco { from { transform: rotate(-60deg); } }
@keyframes pulo { 40% { transform: scale(1.15); } }
/* A cortina diz o começo e o fim com inset(): de "none" para um inset() o navegador não faz o caminho, só troca na
   metade. O corte começa (e termina) no pé da tela do aparelho: o --corte-antes e o --corte-depois são o quanto da tela
   velha e da nova passa dele (o marcarCorte do app.js) */
@keyframes cortina-sobe {
  from { clip-path: inset(0 0 var(--corte-antes, 0px) 0 round 0 0 28px 28px); }
  to { clip-path: inset(0 0 100% 0 round 0 0 28px 28px); }
}
@keyframes cortina-desce {
  from { clip-path: inset(0 0 100% 0 round 0 0 28px 28px); }
  to { clip-path: inset(0 0 var(--corte-depois, 0px) 0 round 0 0 28px 28px); }
}

/* A foto que voa do diálogo até a barra do pedido (o voarParaABarra do app.js): presa na tela, por cima de tudo, e
   sem pegar clique */
.foto-voando { position: fixed; z-index: 20; margin: 0; border-radius: 50%; object-fit: cover; pointer-events: none; box-shadow: 0 10px 24px rgb(60 30 10 / 0.3); }

/* Só para quem não pediu menos movimento no sistema: para os outros, nada daqui vale e tudo aparece parado. As
   classes .entrando e .trocando o app.js liga só por um instante (o animarUmaVez), e a cortina entre as abas e o voo
   da foto também conferem o pediuMenosMovimento() do app.js */
@media (prefers-reduced-motion: no-preference) {
  /* O alto do painel entra primeiro: o ícone de usuário pipoca e o "Olá" e o endereço sobem */
  .painel-saudacao.entrando .botao-usuario { animation: pipocar 0.45s var(--movimento) both; }
  .painel-saudacao.entrando .saudacao { animation: subir-entrando 0.45s var(--movimento) both; }
  .painel-saudacao.entrando :is(.saudacao-endereco, .saudacao-hoje) { animation: subir-entrando 0.45s 0.08s var(--movimento) both; }

  /* 1) O cardápio: a faixa dos tamanhos vem da direita e os sabores sobem um depois do outro (o --ordem que o app.js
     passa; a espera para em 0,6 s, para a lista grande não demorar). Em cada card, a foto pipoca e o texto vem da
     direita logo depois */
  #painel-cardapio.entrando .vitrine-escolha { animation: vir-da-direita 0.5s 0.05s var(--movimento) both; }
  .prato-lista { --atraso: calc(0.15s + min(var(--ordem, 0) * 0.06s, 0.6s)); }
  #painel-cardapio.entrando .prato-lista { animation: subir-entrando 0.45s var(--atraso) var(--movimento) both; }
  #painel-cardapio.entrando .prato-lista-foto { animation: pipocar 0.5s var(--atraso) var(--movimento) both; }
  #painel-cardapio.entrando .prato-lista-texto { animation: vir-da-direita 0.45s calc(var(--atraso) + 0.08s) var(--movimento) both; }

  /* 2) Trocar de tamanho: a pizza do círculo escolhido gira, e o tamanho e o preço de cada card sobem de novo em
     cascata */
  .pilula:has(input:checked) .tamanho-circulo svg { animation: rodar 0.7s var(--movimento); }
  #vitrine-painel.trocando .prato-lista-info { animation: subir-entrando 0.35s min(var(--ordem, 0) * 0.04s, 0.4s) var(--movimento) both; }

  /* 3) A cortina (o comCortina do app.js): a tela de agora sobe e se recolhe, e só depois a nova desce do alto, como
     as folhas do vídeo. As telas não têm fundo (só os cards têm), então uma não pode passar por cima da outra: elas se
     misturariam. Na troca de aba, a cortina pega a tela da aba: as quatro têm o mesmo nome de transição porque só uma
     aparece por vez. Na ida e na volta do detalhe de um sabor (o .cortina-no-painel), ela pega o painel inteiro, que
     ganha e perde o "Olá" e as abas. O mix-blend-mode normal tira a mistura de cores da troca padrão do navegador.
     No painel do admin, a cortina pega a aba aberta (o .aba-painel), que também aparece uma por vez */
  #painel-cardapio, #painel-acompanhar, #painel-pedidos, #painel-sabor, .aba-painel { view-transition-name: tela-do-painel; }
  .cortina-no-painel :is(#painel-cardapio, #painel-acompanhar, #painel-pedidos, #painel-sabor) { view-transition-name: none; }
  .cortina-no-painel .painel { view-transition-name: tela-do-painel; }
  ::view-transition-group(tela-do-painel) { animation: none; }
  ::view-transition-old(tela-do-painel), ::view-transition-new(tela-do-painel) { mix-blend-mode: normal; }
  ::view-transition-old(tela-do-painel) { animation: cortina-sobe 0.25s cubic-bezier(0.5, 0, 0.75, 0) both; }
  ::view-transition-new(tela-do-painel) { animation: cortina-desce 0.4s 0.25s var(--movimento) both; }

  /* 4) O diálogo de adicionar pizza sobe como uma folha, e o conteúdo vem em sequência: o título, os tamanhos, os
     sabores, a quantidade e o rodapé. A foto do sabor escolhido gira, como o donut do vídeo */
  #dialogo-item[open] { animation: subir-folha 0.45s var(--movimento); }
  #dialogo-item[open]::backdrop { animation: aparecer 0.3s ease-out; }
  #dialogo-item[open] :is(.dialogo-topo, .dialogo-corpo > *, .dialogo-rodape) { animation: subir-entrando 0.4s var(--movimento) both; }
  #dialogo-item[open] .dialogo-corpo > :nth-child(1) { animation-delay: 0.06s; }
  #dialogo-item[open] .dialogo-corpo > :nth-child(2) { animation-delay: 0.12s; }
  #dialogo-item[open] .dialogo-corpo > :nth-child(3) { animation-delay: 0.18s; }
  #dialogo-item[open] .dialogo-rodape { animation-delay: 0.24s; }
  .sabor:has(input:checked) .sabor-foto { animation: rodar 0.7s var(--movimento); }

  /* 5) Os botões afundam um pouco quando são apertados, como o "Add to cart" do vídeo */
  .botao { transition: background-color 0.15s, border-color 0.15s, transform 0.1s; }
  .prato-mais { transition: background-color 0.15s, color 0.15s, transform 0.1s; }
  .botao:active:not(:disabled), .prato-mais:active { transform: scale(0.96); }

  /* 6) A barra do pedido sobe do pé da tela quando aparece. O voo da foto até ela e o pulinho são do app.js
     (o voarParaABarra) */
  .cardapio-pedido { animation: barra-subindo 0.5s var(--movimento); }

  /* 7) O Acompanhar: os cards sobem um depois do outro, e em cada um a linha das etapas se enche da primeira até a de
     agora, com cada bolinha pipocando quando a linha chega nela (o --etapa que o app.js passa). O pedido que mudou de
     etapa (o .mudou) ganha um contorno verde que some devagar, e a linha e o ícone dele se animam de novo */
  .acompanhamento { --atraso: calc(0.15s + min(var(--ordem, 0) * 0.08s, 0.48s)); }
  .acompanhamento.mudou { --atraso: 0s; animation: destaque-mudou 1.6s ease-out; }
  #painel-acompanhar.entrando .acompanhamento { animation: subir-entrando 0.45s var(--atraso) var(--movimento) both; }
  :is(#painel-acompanhar.entrando, .acompanhamento.mudou) .etapas-entrega :is(li.feita, li.atual)::before {
    animation: pipocar 0.35s calc(var(--atraso) + 0.25s + var(--etapa, 0) * 0.18s) var(--movimento) both;
  }
  :is(#painel-acompanhar.entrando, .acompanhamento.mudou) .etapas-entrega :is(li.feita, li.atual)::after {
    transform-origin: left center;
    animation: encher 0.2s calc(var(--atraso) + 0.07s + var(--etapa, 0) * 0.18s) ease-out both;
  }
  .acompanhamento.mudou .acompanhamento-icone { animation: pipocar 0.5s var(--movimento); }
  .acompanhamento.mudou:not(.status-entregue) .acompanhamento-icone { animation: pipocar 0.5s var(--movimento), pulsar 2.4s ease-in-out 0.5s infinite; }

  /* 8) O detalhe de um sabor, como a tela do donut no vídeo: a foto entra da esquerda girando; a ficha vem da direita,
     um item depois do outro; e o nome, o preço, os textos, os tamanhos e o botão sobem em sequência, depois dela (o
     --ordem de cada um vem do :nth-child, logo abaixo do @media) */
  #painel-sabor.entrando .detalhe-foto > * { animation: foto-chegando 0.85s var(--movimento) both; }
  #painel-sabor.entrando .detalhe-ficha > div { animation: vir-da-direita 0.45s calc(0.3s + var(--ordem, 0) * 0.08s) var(--movimento) both; }
  #painel-sabor.entrando .detalhe-texto > * { animation: subir-entrando 0.45s calc(0.5s + var(--ordem, 0) * 0.07s) var(--movimento) both; }
  /* Trocar de tamanho no detalhe: a foto cresce ou diminui devagar, girando um pouco, e o preço dá um pulo */
  .detalhe-foto { transition: transform 0.5s var(--movimento); }
  #painel-sabor.trocando .detalhe-foto > * { animation: girar-um-pouco 0.6s var(--movimento); }
  #painel-sabor.trocando .detalhe-preco { animation: pulo 0.4s var(--movimento); }

  /* 9) O painel do admin, com os mesmos movimentos da loja: o alto entra como o 1 (o .painel-saudacao é o mesmo) e a
     troca de aba vem com a cortina do 3. A aba que abre sobe em cascata, uma parte depois da outra: o topo, os filtros
     ou os cartões dos números, e as tabelas. As linhas de uma tabela sobem uma depois da outra quando a lista é outra (o
     trocarLinhas do admin.js passa o --ordem), e as barras do gráfico crescem da base quando os números chegam */
  .aba-painel.entrando > * { animation: subir-entrando 0.45s 0.08s var(--movimento) both; }
  .aba-painel.entrando > :nth-child(2) { animation-delay: 0.14s; }
  .aba-painel.entrando > :nth-child(3) { animation-delay: 0.2s; }
  .aba-painel.entrando > :nth-child(n+4) { animation-delay: 0.26s; }
  .aba-painel.entrando > .cards-resumo { animation: none; }
  .aba-painel.entrando .card-resumo { animation: subir-entrando 0.45s 0.14s var(--movimento) both; }
  .aba-painel.entrando .card-resumo:nth-child(2) { animation-delay: 0.19s; }
  .aba-painel.entrando .card-resumo:nth-child(3) { animation-delay: 0.24s; }
  .aba-painel.entrando .card-resumo:nth-child(4) { animation-delay: 0.29s; }
  .aba-painel.entrando .card-resumo:nth-child(5) { animation-delay: 0.34s; }
  tbody.entrando > tr { animation: subir-entrando 0.4s calc(0.1s + min(var(--ordem, 0) * 0.035s, 0.5s)) var(--movimento) both; }
  .grafico.entrando .grafico-barra {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: crescer 0.6s calc(0.15s + min(var(--ordem, 0) * 0.02s, 0.6s)) var(--movimento) both;
  }

  /* Os diálogos do admin sobem como a folha do 4, com o conteúdo em sequência. A pergunta antes de uma ação e a conta
     já têm a animação delas */
  .pagina-admin .dialogo:not(.dialogo-confirmar, .dialogo-conta)[open] { animation: subir-folha 0.45s var(--movimento); }
  .pagina-admin .dialogo:not(.dialogo-confirmar, .dialogo-conta)[open]::backdrop { animation: aparecer 0.3s ease-out; }
  .pagina-admin .dialogo:not(.dialogo-confirmar, .dialogo-conta)[open] :is(.dialogo-topo, .dialogo-corpo > *, .dialogo-rodape) {
    animation: subir-entrando 0.4s var(--movimento) both;
  }
  .pagina-admin .dialogo[open] .dialogo-corpo > :nth-child(1) { animation-delay: 0.06s; }
  .pagina-admin .dialogo[open] .dialogo-corpo > :nth-child(2) { animation-delay: 0.1s; }
  .pagina-admin .dialogo[open] .dialogo-corpo > :nth-child(3) { animation-delay: 0.14s; }
  .pagina-admin .dialogo[open] .dialogo-corpo > :nth-child(n+4) { animation-delay: 0.18s; }
  .pagina-admin .dialogo[open] .dialogo-rodape { animation-delay: 0.22s; }
}
/* A vez de cada parte do detalhe na sequência de entrada (o 8 de cima) */
:is(.detalhe-ficha, .detalhe-texto) > :nth-child(2) { --ordem: 1; }
:is(.detalhe-ficha, .detalhe-texto) > :nth-child(3) { --ordem: 2; }
.detalhe-texto > :nth-child(4) { --ordem: 3; }
.detalhe-texto > :nth-child(5) { --ordem: 4; }
.detalhe-texto > :nth-child(6) { --ordem: 5; }
.detalhe-texto > :nth-child(7) { --ordem: 6; }

/* Como pedir: o número de cada passo vem do contador do CSS */
.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  counter-reset: passo;
}
.passo { counter-increment: passo; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-content: start; }
.passo::before {
  content: counter(passo);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primaria);
  color: var(--primaria-texto);
  font: 800 1.2rem var(--fonte-titulo);
}

.avaliacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.avaliacao { margin: 0; display: grid; gap: 10px; align-content: start; }
.avaliacao blockquote { margin: 0; font-size: 1rem; }
.avaliacao figcaption { color: var(--texto-suave); font-weight: 700; font-size: 0.9rem; }
.estrelas { color: var(--queijo); font-size: 1.05rem; letter-spacing: 2px; }
.estrela-apagada { color: var(--borda); }

.informacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.info { display: grid; gap: 2px; }
.info .rotulo-grupo { margin-bottom: 4px; }
.info strong { font: 800 1.2rem var(--fonte-titulo); }

/* Chamada final: faixa vermelha como o topo */
.chamada {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px 20px;
  border-radius: 16px;
  background: var(--topo);
  color: #fff;
  text-align: center;
  box-shadow: var(--sombra);
}
.chamada h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
.chamada p { margin: 0 0 8px; opacity: 0.9; }

.rodape-conteudo {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 16px 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--texto-suave);
  font-size: 0.88rem;
}

/* Créditos das fotos: fechado por padrão, abre com um clique */
.creditos {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 28px;
  color: var(--texto-suave);
  font-size: 0.82rem;
}
.creditos summary { width: fit-content; cursor: pointer; font-weight: 700; }
.creditos ul { margin: 8px 0; padding-left: 18px; display: grid; gap: 3px; }
.creditos p { margin: 0; }
.creditos a { color: inherit; text-underline-offset: 2px; }
.creditos a:hover { color: var(--primaria); }

/* Volta da tela de acesso para a página inicial, no canto do cartão */
.botao-link.voltar-inicio { justify-self: start; padding: 0; font-size: 0.85rem; text-decoration: none; }
.botao-link.voltar-inicio:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .inicio { gap: 40px; }
  .inicio-hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .hero-foto { order: -1; width: min(100%, 260px); }
}

/* Celular: cada sabor da página inicial vira uma linha, com a foto à esquerda (como nos apps de entrega). A foto é
   quadrada e, quando o texto é mais alto, estica junto com ele */
@media (max-width: 520px) {
  .vitrine-sabores { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 14px 18px; }
  .vitrine-escolha { padding: 14px 14px 0; }
  .prato { grid-template-rows: none; grid-template-columns: 96px minmax(0, 1fr); }
  .prato-foto { aspect-ratio: auto; min-height: 96px; }
  .prato-texto { padding: 10px 12px; }
  .prato-linha strong { font-size: 1.02rem; }
  .prato-texto small { font-size: 0.82rem; }
}

/* Celular estreito: a marca e os dois botões do topo cabem na mesma linha */
@media (max-width: 420px) {
  .topo.fixo .marca { font-size: 1.15rem; gap: 8px; }
  .topo.fixo .pizza-pequena { width: 28px; height: 28px; }
  .topo-acoes .botao { padding: 6px 10px; font-size: 0.85rem; }
}

/* ---------- tabela de usuários ---------- */

/* O position: relative prende aqui dentro o que for absoluto na tabela (o .so-leitor do título "Ações");
   sem ele, a última coluna esticaria a página inteira no celular, e não só a área que rola */
.tabela-rolagem { overflow-x: auto; position: relative; }
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); font-weight: 800; }
td:last-child { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--cartao-2); }

.selo {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--selo-normal);
  color: var(--selo-normal-texto);
}
.selo.admin { background: var(--selo-admin); color: var(--selo-admin-texto); }

/* Texto só para leitor de tela (ex.: o título "Ações" da coluna de botões) */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- painel do admin (admin.html) ---------- */

a.marca { color: inherit; text-decoration: none; }
.marca-area {
  padding-left: 10px;
  border-left: 1px solid rgb(255 255 255 / 0.45);
  font: 700 0.85rem/1.2 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* O alto do painel é o mesmo da loja (o .painel-saudacao): embaixo do "Olá", no lugar do "Entregar em", vai a data de
   hoje em Brasília, com o rótulo pequeno em cima. As abas também são as da loja (o .telas-painel) */
.saudacao-hoje { display: grid; justify-items: start; margin: 0; }
.saudacao-hoje .rotulo-grupo { margin: 0; font-size: 0.7rem; }
/* A conta do admin só tem o Sair no pé: ele fica no canto direito, como na Minha conta da loja */
.conta-rodape > :only-child { margin-left: auto; }

/* A linha da tabela que mudou (o pedido que trocou de status, a conta que virou admin, o saldo novo do insumo) ganha um
   fundo verde que some devagar, como o pedido que mudou de etapa no Acompanhar da loja (o trocarLinhas do admin.js) */
tr.mudou > td { animation: linha-mudou 1.8s ease-out; }
@keyframes linha-mudou { 0%, 35% { background-color: color-mix(in srgb, var(--manjericao) 20%, transparent); } }

/* Aba que ainda depende de rotas do back */
.em-breve { display: grid; justify-items: center; gap: 10px; padding: 32px 20px; text-align: center; color: var(--texto-suave); }
.em-breve p { margin: 0; max-width: 52ch; }
.em-breve strong { color: var(--texto); }
.em-breve a { color: var(--primaria); }

.tabela-cartao { padding: 6px 10px; }
.selo.ativa { background: var(--status-ok); color: var(--status-ok-texto); }
.selo.desativada { background: var(--status-cancelado); color: var(--status-cancelado-texto); }
tr.desativada td { color: var(--texto-suave); }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }

/* Filtros das listas do painel: cada campo com o rótulo em cima, numa fileira que quebra no celular */
.filtros-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
}
.filtros-admin label { flex: 1 1 150px; }
.filtros-admin .filtro-largo { flex: 2 1 240px; }
.filtros-admin .caixa-marcar {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  padding-block: 9px;
  color: var(--texto);
  cursor: pointer;
}
.caixa-marcar input { width: 18px; height: 18px; margin: 0; accent-color: var(--primaria); }

/* Anterior · Página N · Próxima, embaixo da tabela */
.paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  color: var(--texto-suave);
  font-size: 0.9rem;
  font-weight: 700;
}
.vazio-tabela { margin: 0; padding: 20px 10px; text-align: center; color: var(--texto-suave); }
.celula-dupla { display: grid; line-height: 1.3; }
.celula-dupla small { color: var(--texto-suave); font-size: 0.8rem; }

/* Detalhe de um pedido: o selo do status na mesma linha do cliente e da data */
.detalhe-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }

/* Estoque: o insumo abaixo do mínimo ganha uma marca vermelha na borda da linha */
.selo.alerta { background: var(--status-cancelado); color: var(--status-cancelado-texto); }
tr.abaixo-do-minimo td:first-child { box-shadow: inset 4px 0 0 var(--perigo); font-weight: 700; }

/* Movimentar um insumo: Entrada, Saída e Ajuste lado a lado, como os tamanhos da pizza na loja */
.opcoes-tipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opcoes-tipo .pilula { padding-inline: 4px; }
.opcoes-tipo .pilula small { text-align: center; line-height: 1.25; }
/* Prévia do saldo: só leitura, como o preço da pizza; fica vermelha quando a saída passa do saldo */
.previa-saldo {
  margin: 0;
  padding: 9px 11px;
  border: 1px dashed var(--borda);
  border-radius: 10px;
  background: var(--cartao-2);
  font-weight: 700;
}
.previa-saldo.alerta { border-color: transparent; background: var(--status-cancelado); color: var(--status-cancelado-texto); }
/* Botão no canto esquerdo do rodapé, longe do Voltar e do Salvar (o Desativar da edição de um insumo) */
.dialogo-rodape .a-esquerda { margin-right: auto; }

/* Histórico de um insumo: a borda da esquerda tem a cor do tipo, como a dos pedidos de um usuário tem a do status */
.filtro-historico { justify-self: start; min-width: 180px; }
.dialogo-corpo .paginacao { margin-top: 0; column-gap: 8px; }
.movimentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.movimento {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-left: 6px solid var(--borda);
  border-radius: 12px;
  background: var(--cartao);
}
.movimento.tipo-entrada { border-left-color: var(--manjericao); }
.movimento.tipo-saida { border-left-color: var(--perigo); }
.movimento.tipo-ajuste { border-left-color: var(--faixa-rota); }
.movimento-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.movimento-topo div { display: grid; min-width: 0; }
.movimento-topo small { color: var(--texto-suave); font-size: 0.82rem; }
.movimento-qtd { font: 800 1.05rem var(--fonte-titulo); white-space: nowrap; }
.movimento-qtd.mais { color: var(--status-ok-texto); }
.movimento-qtd.menos { color: var(--status-cancelado-texto); }
.movimento-motivo { margin: 0; color: var(--texto-suave); font-size: 0.88rem; overflow-wrap: anywhere; }

/* Visão geral: um cartão para cada número da casa. O valor vai na fonte do texto, e não na serifada dos
   títulos: número grande em fonte de enfeite fica difícil de ler */
/* No computador, duas fileiras: os três faturamentos em cima e as duas contagens embaixo. No celular, o de hoje
   ocupa a largura toda e os outros vão de dois em dois; na tela bem estreita, um por linha */
.cards-resumo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.card-resumo { grid-column: span 2; }
.card-resumo.contagem { grid-column: span 3; }
@media (max-width: 760px) {
  .cards-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-resumo, .card-resumo.contagem { grid-column: span 1; }
  .card-resumo:first-child { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .cards-resumo { grid-template-columns: minmax(0, 1fr); }
}
/* O tamanho do valor acompanha a largura do cartão (cqi), para "R$ 22.515,90" caber inteiro, sem quebrar no meio */
.card-resumo { display: grid; align-content: start; gap: 2px; padding: 14px 16px; container-type: inline-size; }
.card-rotulo { color: var(--texto-suave); font-size: 0.85rem; font-weight: 700; }
.card-valor { font-size: clamp(1.05rem, 13cqi, 2rem); font-weight: 800; line-height: 1.2; white-space: nowrap; }
.card-valor.longo { font-size: clamp(1rem, 9.5cqi, 2rem); } /* R$ 1.234.567,89 */
.card-detalhe { color: var(--texto-suave); font-size: 0.8rem; }
.card-detalhe a { color: var(--primaria); font-weight: 700; }
/* Insumo faltando: a marca vermelha na borda, como a linha do estoque, e o texto "Hora de repor" ao lado */
.card-resumo.alerta { box-shadow: inset 4px 0 0 var(--perigo), var(--sombra); }

/* Gráfico de vendas: barras finas na cor dos preços da casa, grade em linhas finas e recuadas,
   e a dica com o valor por cima da barra. Enquanto os números novos chegam, o desenho antigo fica mais claro */
.grafico-cartao { padding: 16px 16px 10px; transition: opacity 0.2s; }
.grafico-cartao.atualizando { opacity: 0.55; }
.grafico-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.grafico-topo h3 { font-size: 1.15rem; }
.filtro.sem-qtd { padding-inline: 14px; }
.grafico { position: relative; min-height: 260px; }
.grafico-svg { display: block; overflow: visible; }
.grafico-svg:focus-visible { outline: 2px solid var(--primaria); outline-offset: 4px; border-radius: 6px; }
.grafico-grade { stroke: var(--borda); stroke-width: 1; }
.grafico-base { stroke: var(--texto-suave); stroke-width: 1; opacity: 0.6; }
.grafico-eixo { fill: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico-barra { fill: var(--primaria); pointer-events: none; }
.grafico-barra.ativa { fill: var(--primaria-forte); }
.grafico-alvo { fill: transparent; }
.grafico-vazio {
  position: absolute;
  inset: 38% 0 auto;
  margin: 0;
  text-align: center;
  color: var(--texto-suave);
  font-weight: 600;
  pointer-events: none;
}
.grafico-dica {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--cartao);
  box-shadow: var(--sombra);
  color: var(--texto-suave);
  font-size: 0.82rem;
  white-space: nowrap;
  pointer-events: none;
}
.grafico-dica strong { color: var(--texto); font-size: 1rem; }
.grafico-tabela { margin-top: 6px; }
.grafico-tabela summary { padding: 6px 0; color: var(--texto-suave); font-size: 0.88rem; font-weight: 700; cursor: pointer; }
th.numero, td.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* Financeiro: a tabela dos sabores tem o título dentro do cartão; a sobra negativa (venda abaixo do custo) fica vermelha */
.cartao-cabecalho { padding: 10px 10px 4px; }
.cartao-cabecalho h3 { font-size: 1.15rem; }
td.negativo { color: var(--perigo); font-weight: 700; }
#aba-financeiro .cartao + .cartao { margin-top: 16px; }
#cartao-financeiro { transition: opacity 0.2s; }
#cartao-financeiro.atualizando { opacity: 0.55; }
tfoot td { border-top: 2px solid var(--borda); font-weight: 800; }

/* Detalhe de um pedido: os itens um embaixo do outro, com o preço da linha à direita */
.dialogo.dialogo-medio { width: min(480px, calc(100% - 32px)); }
.detalhe-itens { list-style: none; margin: 0; padding: 0; }
/* Cada item: o texto, o preço da linha e, no pedido pendente, o botão Remover (a coluna some quando não há) */
.detalhe-itens li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--borda);
}
.detalhe-itens li:last-child { border-bottom: 0; }
.detalhe-itens div { display: grid; min-width: 0; }
.detalhe-itens strong { overflow-wrap: anywhere; }
.detalhe-itens small { color: var(--texto-suave); font-size: 0.82rem; }
.detalhe-itens span { font-weight: 800; white-space: nowrap; }
/* O bloco de entrega da comanda também aparece no detalhe: ali o diálogo já dá o espaço dos lados */
.dialogo-corpo .comanda-entrega { margin: 0; }

/* Pedido pendente no detalhe: o admin escolhe sabor, tamanho e quantidade e põe a pizza no pedido */
.pizza-admin {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--borda);
  border-radius: 12px;
  background: var(--cartao-2);
}
.pizza-admin-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
.pizza-admin-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .pizza-admin-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pizza-admin-campos label:first-child { grid-column: 1 / -1; }
}

/* Diálogo com os pedidos de um usuário: a borda da esquerda tem a cor do status, como o topo das comandas */
.pedidos-usuario { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pedido-usuario {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-left: 6px solid var(--queijo);
  border-radius: 12px;
  background: var(--cartao);
}
.pedido-usuario.status-finalizado, .pedido-usuario.status-entregue { border-left-color: var(--manjericao); }
.pedido-usuario.status-cancelado { border-left-color: var(--borda); }
.pedido-usuario.status-preparando { border-left-color: var(--faixa-preparando); }
.pedido-usuario.status-em-rota-de-entrega { border-left-color: var(--faixa-rota); }
.pedido-usuario-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pedido-usuario-topo div { display: grid; }
.pedido-usuario-topo small { color: var(--texto-suave); font-size: 0.82rem; }
.pedido-usuario-rodape { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.88rem; }
.pedido-usuario-rodape span { color: var(--texto-suave); overflow-wrap: anywhere; }
.pedido-usuario-rodape strong { font: 800 1.05rem var(--fonte-titulo); white-space: nowrap; }

/* ---------- aviso flutuante ---------- */

.aviso {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--texto);
  color: var(--cartao);
  font-weight: 600;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
}
.aviso.erro { background: #b3261e; color: #fff; }
.aviso.ok { background: #2f6a2b; color: #fff; }
/* Com a barra do pedido na tela (no cardápio e no detalhe de um sabor), o aviso sobe para ficar em cima dela. Ele só
   tem texto, então o toque passa através dele: o "Adicionar" embaixo continua funcionando enquanto ele aparece */
body:has(#tela-painel:not([hidden]) #cardapio-pedido:not([hidden])) .aviso { bottom: 92px; }
.aviso { pointer-events: none; }

/* ---------- tela de carregamento ---------- */

/* Escondida por padrão; o comum.js abre com togglePopover quando a API demora */
.carregando { display: none; }
.carregando:popover-open {
  display: grid;
  place-items: center;
  /* O navegador dá ao popover um tamanho "do conteúdo", com borda e fundo próprios; aqui ele cobre a tela toda */
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 16px;
  border: 0;
  background: rgb(30 15 5 / 0.5);
  backdrop-filter: blur(3px);
  animation: aparecer 0.2s ease-out;
}

/* Cartão no meio da tela, no mesmo estilo do login e do diálogo (com a faixa xadrez em cima) */
.carregando-caixa {
  width: min(260px, 100%);
  overflow: hidden;
  border-radius: 18px;
  background: var(--cartao);
  color: var(--texto);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
}
.carregando-conteudo { display: grid; justify-items: center; gap: 4px; padding: 22px 20px 20px; text-align: center; }
.carregando-conteudo strong { margin-top: 10px; font: 800 1.2rem var(--fonte-titulo); }
.carregando-conteudo small { color: var(--texto-suave); font-size: 0.85rem; }

.pizza-carregando {
  width: 72px;
  height: 72px;
  animation: girar 1.2s linear infinite;
  filter: drop-shadow(0 4px 10px rgb(60 30 10 / 0.25));
}
@keyframes aparecer { from { opacity: 0; } }

/* Para quem pediu menos movimento no sistema: a pizza gira devagar e a tela aparece sem efeito */
@media (prefers-reduced-motion: reduce) {
  .pizza-carregando { animation-duration: 4s; }
  .carregando:popover-open { animation: none; }
}

/* ---------- política de privacidade (privacidade.html) ---------- */

.pagina-texto { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; display: grid; gap: 16px; }
.pagina-texto h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.pagina-texto h2 { font-size: 1.15rem; }
.pagina-texto .cartao { display: grid; gap: 10px; }
.pagina-texto p, .pagina-texto ul { margin: 0; }
.pagina-texto ul { padding-left: 20px; display: grid; gap: 4px; }
.pagina-texto a { color: var(--primaria); text-underline-offset: 2px; }
.pagina-texto a:hover { color: var(--primaria-forte); }