/* =================================================================
   Painel — mesmo mundo da loja, registro Operate.

   O que muda em relação à loja: escala tipográfica fixa em rem (nada de
   clamp), cor Restrained fora dos indicadores de estado, sem sequência
   de entrada na carga. A marca vive em detalhe preciso.

   O que NÃO muda: raio zero, rejunte de 3px, vidrado cerâmico, óxidos.
   ================================================================= */

.painel {
  background: var(--rejunte);
  color: var(--esmalte);
}

/* Registro Operate: tipografia fixa, sem tamanho fluido, e sempre da
   rampa do DESIGN.md. */
.painel .headline { font-size: var(--t-titulo-grande); }
.painel .headline-sub { font-size: var(--t-sub); }

/* `.ajuda` nasceu na loja para viver sobre esmalte (#4A423A). No painel
   ela também aparece sobre rejunte e sobre verde, onde dava 1,5:1 — não
   era "baixo contraste", era invisível. Sobre óxido escuro ela é
   tingida do verde; dentro de peça clara volta ao original. */
.painel .ajuda { color: var(--esmalte-sombra); }
.painel .bloco .ajuda,
.painel .pedido .ajuda,
.painel .painel-envelope > .face-cabeca .ajuda,
.painel .tabela .ajuda { color: var(--tinta-media); }
.painel .vazio .ajuda { color: var(--esmalte-sombra); }

/* -----------------------------------------------------------------
   Barra do painel
   ----------------------------------------------------------------- */

.painel-barra {
  position: sticky; top: 0; z-index: 100;
  background: var(--verde-esmalte);
  box-shadow: var(--vidrado-escuro);
}
.painel-barra-interna {
  max-width: 1480px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--md);
  padding: 10px var(--md); min-height: 64px; flex-wrap: wrap;
}

.painel-marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto;
}
/* Mesma marca redonda da loja: o painel é o mesmo mundo. */
.painel-selo {
  height: 40px; width: auto; flex: none;
  display: flex; align-items: center;
}
.painel-selo img { height: 100%; width: auto; max-width: none; }
.painel-marca b {
  display: block; font-size: var(--t-corpo); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.1;
}
.painel-marca-sub {
  display: block; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--esmalte-sombra);
}

.painel-abas { display: flex; gap: var(--junta); flex-wrap: wrap; }
.painel-aba {
  display: inline-flex; align-items: center;
  padding: 0 var(--md); min-height: 56px;
  background: var(--rejunte); color: var(--esmalte);
  text-decoration: none;
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s var(--saida), color 0.15s var(--saida);
}
.painel-aba:hover { background: var(--verde-claro); }
.painel-aba[aria-current="page"] { background: var(--forno); color: var(--tinta); }

.painel-eu { display: flex; align-items: center; gap: var(--sm); }
.painel-link-loja {
  color: var(--esmalte-sombra); font-size: var(--t-menor);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 56px;
}
.painel-link-loja:hover { color: var(--esmalte); }
.painel-sair {
  background: none; border: 0; cursor: pointer;
  color: var(--esmalte-sombra); font-family: inherit;
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0 var(--xs); min-height: 56px;
  display: inline-flex; align-items: center;
}
.painel-sair:hover { color: var(--esmalte); }

.painel-marca-texto { min-width: 0; }
.painel-marca b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 46vw;
}
.painel-selo img { width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------------------
   Aviso de preço provisório

   Uma linha e uma ação. A versão anterior listava um botão por produto
   aqui, em toda tela do painel: dez peças de larguras diferentes,
   ragged, e o alerta virava o assunto da página.
   ----------------------------------------------------------------- */
.alerta-preco {
  display: flex; align-items: center; gap: var(--md); flex-wrap: wrap;
  background: var(--brasa); color: var(--esmalte);
  box-shadow: var(--vidrado);
  padding: var(--md);
  margin-bottom: var(--md);
}
.alerta-preco p { margin: 0; flex: 1 1 260px; max-width: 62ch; font-size: var(--t-desc); }
.alerta-preco strong { display: block; font-size: var(--t-corpo); }
.alerta-preco .botao { flex: none; box-shadow: none; }

/* Marca do preço provisório na linha do cardápio. */
.marca-provisorio {
  display: inline-block; padding: 4px 8px; margin-top: 4px;
  background: var(--brasa); color: var(--esmalte);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* -----------------------------------------------------------------
   Telefone: a navegação desce para o rodapé
   ----------------------------------------------------------------- */

.painel-barra-inferior { display: none; }

@media (max-width: 820px) {
  /* A barra de cima vira uma linha só: marca e sair. As abas quebravam
     em duas fileiras e, somadas ao "Ver a loja", faziam ~230px de
     cabeçalho FIXO — mais de um terço da tela de quem opera com o
     celular na bancada. */
  .painel-barra { position: static; }
  .painel-barra-interna { flex-wrap: nowrap; min-height: 56px; gap: var(--sm); }
  .painel-abas { display: none; }
  .painel-link-loja { display: none; }

  .painel-barra-inferior {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--junta);
    position: sticky; bottom: 0; z-index: 90;
    background: var(--rejunte);
  }
  .painel-aba-baixo {
    display: flex; align-items: center; justify-content: center;
    min-height: 60px; text-decoration: none;
    background: var(--verde-esmalte); color: var(--esmalte);
    font-size: var(--t-micro); font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    box-shadow: var(--vidrado-escuro);
  }
  .painel-aba-baixo[aria-current="page"] {
    background: var(--forno); color: var(--tinta);
    box-shadow: var(--vidrado);
  }
  .painel-corpo { padding-bottom: var(--md); }

  .alerta-preco { flex-direction: column; align-items: stretch; }
  .alerta-preco .botao { width: 100%; }
}

/* Âncoras não podem aterrissar debaixo da barra fixa. */
#trabalho, #parede { scroll-margin-top: 80px; }
@media (max-width: 820px) { #trabalho, #parede { scroll-margin-top: 0; } }

/* -----------------------------------------------------------------
   Corpo
   ----------------------------------------------------------------- */

.painel-corpo { padding-bottom: var(--xxl); }
.painel-envelope { max-width: 1480px; margin: 0 auto; padding: var(--lg) var(--md); }
.painel-estreito { max-width: 860px; }
@media (max-width: 720px) { .painel-envelope { padding: var(--md) var(--sm); } }

.migalha { margin: 0 0 var(--md); font-size: var(--t-menor); }
.migalha a { color: var(--esmalte-sombra); text-decoration: underline; text-underline-offset: 3px; }
.migalha a:hover { color: var(--esmalte); }

.face-cabeca {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--md); flex-wrap: wrap; margin-bottom: var(--md);
}

/* -----------------------------------------------------------------
   Fita de estado — o dia inteiro numa varredura
   ----------------------------------------------------------------- */

.fita {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--junta); background: var(--rejunte);
  margin-bottom: var(--lg);
}
.fita-item {
  background: var(--verde-esmalte);
  box-shadow: var(--vidrado-escuro);
  padding: var(--md);
  display: grid; gap: 6px; align-content: start;
}
.fita-rotulo {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--esmalte-sombra);
}
.fita-valor {
  font-size: var(--t-preco); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--esmalte);
}
/* "Aberta"/"Fechada" é palavra, não número: um degrau abaixo para não
   competir com as contagens ao lado. */
.fita-valor-texto { font-size: var(--t-sub); }

/* No telefone a tarefa vem antes do resumo: seis blocos empilhados
   somam meia tela e empurrariam o primeiro pedido para baixo da dobra.
   Em registro Operate isso é inaceitável. */
@media (max-width: 720px) {
  .pagina-balcao { display: flex; flex-direction: column; }
  .pagina-balcao > .balcao { order: 1; }
  .pagina-balcao > .fita { order: 2; margin: var(--lg) 0 0; }
  .fita { grid-template-columns: repeat(2, 1fr); }
}

/* Só o que exige ação recebe óxido. Cor é estado, não decoração. */
.fita-alerta { background: var(--forno); box-shadow: var(--vidrado); }
.fita-alerta .fita-rotulo, .fita-alerta .fita-valor { color: var(--tinta); }
.fita-atencao { background: var(--ocre); box-shadow: var(--vidrado); }
.fita-atencao .fita-rotulo, .fita-atencao .fita-valor { color: var(--tinta); }

/* -----------------------------------------------------------------
   O balcão: duas faces
   ----------------------------------------------------------------- */

.balcao {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: var(--lg); align-items: start;
}
@media (max-width: 1080px) { .balcao { grid-template-columns: 1fr; } }

/* Cercadura: o mesmo arremate da loja fecha e abre as faces do painel.
   O DESIGN.md é explícito — a separação entre dois trechos é uma
   cercadura, não um vão. Espaço em branco não é o instrumento de
   hierarquia deste sistema. */
.cercadura-painel { height: 24px; overflow: hidden; margin-bottom: var(--junta); }
.cercadura-painel svg { width: 100%; height: 100%; display: block; }
.cercadura-painel-fim { margin: var(--junta) 0 0; transform: scaleY(-1); }

/* -----------------------------------------------------------------
   Pedidos
   ----------------------------------------------------------------- */

.pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--junta); }

.pedido {
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  display: grid;
}

/* A peça mudou de situação e ainda não foi vista. Fica acesa até
   alguém confirmar — não pisca e some. */
.pedido-aceso { box-shadow: var(--vidrado), 0 0 0 4px var(--forno); }

.pedido-topo {
  display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap;
  padding: var(--sm) var(--md);
  background: var(--esmalte-fosco);
  border-bottom: 3px solid rgba(20,16,12,0.10);
}
.pedido-estado {
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  background: var(--verde-esmalte); color: var(--esmalte);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pedido-novo .pedido-estado { background: var(--forno); color: var(--tinta); }
.pedido-preparando .pedido-estado { background: var(--ocre); color: var(--tinta); }
.pedido-saiu .pedido-estado { background: var(--brasa); color: var(--esmalte); }
.pedido-estado-entregue { background: var(--verde-claro); }
.pedido-estado-cancelado { background: var(--tinta-fraca); }
.estado-grande { font-size: var(--t-label); padding: 10px var(--md); }

.pedido-codigo {
  font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pedido-hora, .pedido-modo {
  font-size: var(--t-menor); color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}
.pedido-modo { margin-left: auto; }
.pedido-visto { margin-left: var(--xs); }

.pedido-corpo { padding: var(--md); display: grid; gap: var(--sm); }
.pedido-cliente { margin: 0; display: flex; gap: var(--sm); flex-wrap: wrap; align-items: baseline; }
.pedido-cliente b { font-size: var(--t-titulo); }
.pedido-zap { color: var(--brasa); text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-menor); }

.pedido-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pedido-itens li { font-size: var(--t-corpo); }
.pedido-itens b { font-variant-numeric: tabular-nums; }
.pedido-obs {
  display: block; font-size: var(--t-menor); color: var(--tinta-media);
  padding-left: var(--md);
}

.pedido-endereco { margin: 0; font-size: var(--t-desc); color: var(--tinta-media); }
.pedido-encomenda, .pedido-recado {
  margin: 0; padding: 10px var(--sm);
  background: var(--esmalte-fosco); color: var(--tinta);
  font-size: var(--t-desc);
}
.pedido-encomenda { background: var(--ocre); font-weight: 700; }

.pedido-pagamento {
  margin: 0; font-size: var(--t-desc); color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}
.pedido-pagamento b { font-size: var(--t-titulo); color: var(--brasa); }

/* Ações secundárias acima e separadas: o botão que avança o pedido não
   pode ter nada colado nele. Um toque torto mudava o estado. */
.pedido-secundarias {
  display: flex; gap: var(--sm); flex-wrap: wrap;
  padding: 0 var(--md) var(--sm);
}

.pedido-acoes {
  display: flex; gap: var(--junta);
  padding: var(--sm) var(--md) var(--md);
  border-top: 2px solid rgba(20,16,12,0.10);
  flex-wrap: wrap;
}
.pedido-acoes .botao { box-shadow: none; }

/* O desfazer mora dentro do próprio aviso da ação que acabou de
   acontecer — onde o erro nasce, e não numa tela de histórico. */
.aviso-desfazer { margin-left: auto; }
.aviso p { margin: 0; }

/* -----------------------------------------------------------------
   A parede de controle
   ----------------------------------------------------------------- */

.grade-controle { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--junta); }

.controle {
  display: grid; grid-template-columns: 64px 1fr auto;
  align-items: center; gap: var(--sm);
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: var(--sm);
}
.controle-fechado { background: var(--verde-esmalte); color: var(--esmalte-sombra); box-shadow: var(--vidrado-escuro); }
.controle-fechado b { color: var(--esmalte); }

.controle-face { width: 64px; height: 64px; overflow: hidden; display: block; }
.controle-face img { width: 100%; height: 100%; object-fit: cover; }
/* Peça fechada com foto: mesmo tratamento da loja, para o painel mostrar
   exatamente o que o cliente vai ver. */
.controle-fechado .controle-face img { filter: grayscale(0.7) brightness(0.55); }
.controle-face svg { width: 100%; height: 100%; }

.controle-info { display: grid; gap: 2px; min-width: 0; }
.controle-info b { font-size: var(--t-corpo); }
.controle-estado {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta-media);
}
/* Ocre sobre verde = 4,19:1 e reprova. A loja ja tinha corrigido esta
   mesma combinacao; o painel nao tinha herdado. */
.controle-fechado .controle-estado { color: var(--esmalte-sombra); }

.chave {
  border: 0; cursor: pointer;
  padding: 0 var(--md); min-height: 56px;
  background: var(--esmalte-fosco); color: var(--tinta);
  box-shadow: var(--vidrado);
  font-family: inherit; font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s var(--saida);
}
.chave:hover { background: var(--ocre); }
.chave-ligada { background: var(--forno); color: var(--tinta); }
.chave-ligada:hover { background: var(--ocre); }

/* -----------------------------------------------------------------
   Vazios que ensinam
   ----------------------------------------------------------------- */

.vazio {
  background: var(--verde-esmalte); color: var(--esmalte-sombra);
  box-shadow: var(--vidrado-escuro);
  padding: var(--xl) var(--lg);
  display: grid; gap: var(--sm); justify-items: start;
}
.vazio .titulo, .vazio h2, .vazio h3 { color: var(--esmalte); margin: 0; }
.vazio p { margin: 0; max-width: 52ch; }
.vazio a { color: var(--esmalte); text-decoration: underline; text-underline-offset: 3px; }
.vazio .botao { margin-top: var(--xs); }

/* -----------------------------------------------------------------
   Tabelas
   ----------------------------------------------------------------- */

/* A tabela rola na horizontal em telefone. A sombra na borda direita é
   a única pista de que existe mais coisa fora da tela — sem ela, a
   coluna de ações ("Editar", "Tirar") simplesmente não é encontrada. */
.tabela-rolagem {
  overflow-x: auto; background: var(--esmalte); box-shadow: var(--vidrado);
  background-image: linear-gradient(to right, rgba(11,42,38,0.18), transparent 24px),
                    linear-gradient(to left,  rgba(11,42,38,0.18), transparent 24px);
  background-attachment: local, local, scroll, scroll;
}
.aviso-rolagem {
  display: none; margin: 0 0 var(--xs);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--esmalte-sombra);
}
@media (max-width: 820px) { .aviso-rolagem { display: block; } }
.tabela {
  width: 100%; border-collapse: collapse;
  background: var(--esmalte); color: var(--tinta);
  font-size: var(--t-desc);
}
.tabela th, .tabela td {
  text-align: left; padding: var(--sm) var(--md);
  border-bottom: 2px solid rgba(20,16,12,0.10);
  vertical-align: middle;
}
/* Sem `position: sticky`: dentro de um contêiner com overflow-x o sticky
   vertical nunca ativa, e mesmo ativando ficaria sob a barra do painel.
   Era código que fingia resolver o cabeçalho de lista longa. */
.tabela thead th {
  background: var(--esmalte-fosco);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-media);
}
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .numero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-fechada { background: var(--esmalte-fosco); }

.celula-produto { display: flex; align-items: center; gap: var(--sm); }
.celula-produto .controle-face { width: 48px; height: 48px; flex: none; }
.celula-sub {
  display: block; font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.04em; color: var(--tinta-media); text-transform: none;
}
.sem-foto { color: var(--brasa); font-weight: 700; }

.marca-estado {
  display: inline-block; padding: 4px 8px;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.marca-fechado { background: var(--verde-esmalte); color: var(--esmalte); }

.acoes-celula { display: flex; gap: var(--xs); flex-wrap: wrap; align-items: center; }

.campo-tabela {
  width: 108px; border: 0; border-radius: 0;
  background: var(--esmalte-fosco); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: 12px; min-height: 56px;
  font-family: inherit; font-size: var(--t-desc); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.campo-tabela:focus-visible { outline: 3px solid var(--forno); }
.campo-tabela-largo { width: 220px; }
.campo-tabela-curto { width: 80px; }

/* -----------------------------------------------------------------
   Botão miúdo — ação secundária de linha
   ----------------------------------------------------------------- */

.botao-miudo {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  background: var(--esmalte-fosco); color: var(--tinta);
  /* 56px e nao 44: a Tere opera isto com a mao na massa. */
  padding: 0 var(--md); min-height: 56px;
  box-shadow: var(--vidrado);
  font-family: inherit; font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s var(--saida), color 0.15s var(--saida);
}
.botao-miudo:hover { background: var(--ocre); }
/* Foco de teclado sobre peça clara: esmalte sobre esmalte dá 1,2:1.
   Toda ação clara do painel usa o contorno de brasa. */
.botao-miudo:focus-visible, .chave:focus-visible,
.botao-esmalte:focus-visible, .fechados > summary:focus-visible {
  outline: 3px solid var(--brasa); outline-offset: 2px;
}
/* Destrutivo tem que parecer destrutivo: peca de brasa cheia, nao
   texto colorido a 11,5px que da 4,37:1. */
.botao-miudo-perigo { background: var(--brasa); color: var(--esmalte); }
.botao-miudo-perigo:hover { background: #8E2E0B; color: var(--esmalte); }
.botao-miudo-aceso { background: var(--forno); }


/* -----------------------------------------------------------------
   Formulários do painel
   ----------------------------------------------------------------- */

.formulario { display: grid; gap: var(--junta); margin-top: var(--md); }

.bloco {
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: var(--lg);
  display: grid; gap: var(--md);
}
.bloco > .titulo { margin: 0; }
.bloco > .titulo + * { margin-top: 0; }
@media (max-width: 720px) { .bloco { padding: var(--md); } }

.campo-legenda {
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-media); padding: 0;
}

.caixinha {
  display: flex; align-items: center; gap: var(--sm);
  min-height: 56px; cursor: pointer;
  font-size: var(--t-corpo);
}
.caixinha input[type="checkbox"] {
  width: 32px; height: 32px; flex: none; margin: 0;
  accent-color: var(--forno); cursor: pointer;
}
/* Caixinha sem texto ao lado (coluna "Atende" da tabela de bairros):
   o alvo passa a ser a etiqueta inteira, nao o quadradinho. */
.caixinha-so-caixa { justify-content: center; min-width: 56px; min-height: 56px; }

.linha-form {
  display: flex; gap: var(--sm); align-items: flex-end; flex-wrap: wrap;
}
.linha-form .campo { flex: 1; min-width: 180px; }
.campo-curto { flex: 0 0 120px !important; min-width: 120px !important; }

.acoes-formulario { display: flex; gap: var(--junta); flex-wrap: wrap; align-items: center; }
.acoes-fixas { margin-top: var(--junta); }

.dado-grande { margin: 0; font-size: var(--t-sub); font-weight: 700; }

.lista-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sm); }
.lista-itens li {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: var(--sm); align-items: baseline;
  padding-bottom: var(--sm);
  border-bottom: 2px solid rgba(20,16,12,0.10);
}
.lista-itens li:last-child { border-bottom: 0; padding-bottom: 0; }
.item-qtd {
  font-size: var(--t-sub); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--brasa);
}

.acao-principal { margin: var(--md) 0; }

/* Horários */
.horarios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--xs); }
.horario {
  display: flex; align-items: center; gap: var(--md); flex-wrap: wrap;
  padding-bottom: var(--xs);
  border-bottom: 2px solid rgba(20,16,12,0.08);
}
.horario:last-child { border-bottom: 0; }
.horario .caixinha { min-width: 160px; }
.horario-faixa { display: flex; align-items: center; gap: var(--sm); font-size: var(--t-menor); color: var(--tinta-media); }
.horario-faixa input[type="time"] {
  border: 0; border-radius: 0;
  background: var(--esmalte-fosco); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: 12px; min-height: 56px;
  font-family: inherit; font-size: var(--t-desc);
  font-variant-numeric: tabular-nums;
}
.horario-faixa input[type="time"]:focus-visible { outline: 3px solid var(--forno); }

/* Foto */
.foto-editor { display: grid; grid-template-columns: 160px 1fr; gap: var(--md); align-items: start; }
@media (max-width: 620px) { .foto-editor { grid-template-columns: 1fr; } }
.foto-previa {
  width: 160px; height: 160px; overflow: hidden; display: block;
  box-shadow: var(--vidrado);
}
.foto-previa img, .foto-previa svg { width: 100%; height: 100%; object-fit: cover; }
.foto-controles { display: grid; gap: var(--sm); }
.foto-controles input[type="file"] {
  background: var(--esmalte-fosco); box-shadow: var(--vidrado);
  padding: var(--sm); min-height: 56px; width: 100%;
  font-family: inherit; font-size: var(--t-desc); border: 0;
}

/* Fotos extras do carrossel ---------------------------------------- */

.fotos-extras {
  border-top: 3px solid rgba(20,16,12,0.10);
  padding-top: var(--md);
  display: grid; gap: var(--sm);
}
.grade-fotos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--junta);
}
.grade-fotos li {
  position: relative;
  background: var(--verde-esmalte);
  box-shadow: var(--vidrado);
  overflow: hidden;
}
.grade-fotos img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.foto-sumida {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 1/1; padding: var(--sm);
  color: var(--esmalte-sombra); font-size: var(--t-micro);
}
/* A caixa de tirar fica sobre a foto, com fundo sólido: sobre imagem
   clara um texto tingido some. */
.caixinha-tirar {
  position: absolute; left: 0; right: 0; bottom: 0;
  min-height: 44px; padding: 0 var(--xs);
  background: rgba(11,42,38,0.88); color: var(--esmalte);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.caixinha-tirar input[type="checkbox"] { width: 24px; height: 24px; }

/* Nota reservada: o que é interno e não sai daqui. */
.nota-reservada {
  background: var(--brasa); color: var(--esmalte);
  box-shadow: var(--vidrado);
  padding: var(--md); margin-bottom: var(--md);
}
.nota-reservada p { margin: 0; max-width: 64ch; font-size: var(--t-desc); }

/* Blocos recolhidos */
.fechados { margin-top: var(--md); }
.fechados > summary {
  cursor: pointer; padding: var(--md);
  background: var(--verde-esmalte); color: var(--esmalte);
  box-shadow: var(--vidrado-escuro);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  min-height: 56px; display: flex; align-items: center;
}
.fechados > summary:hover { background: var(--verde-claro); }
.pedidos-fechados { list-style: none; margin: var(--junta) 0 0; padding: 0; display: grid; gap: var(--junta); }
.pedidos-fechados li {
  display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap;
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: var(--sm) var(--md); min-height: 56px;
}
.pedidos-fechados a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.pedidos-fechados b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------
   Entrada
   ----------------------------------------------------------------- */

.entrada {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--junta); background: var(--rejunte);
  min-height: calc(100vh - 64px);
}
@media (max-width: 820px) { .entrada { grid-template-columns: 1fr; } }
.entrada-peca { overflow: hidden; }
@media (max-width: 820px) { .entrada-peca { height: 120px; } }
.entrada-peca svg { width: 100%; height: 100%; }
.entrada-caixa {
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: var(--xxl) var(--xl);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 620px) { .entrada-caixa { padding: var(--lg) var(--md); } }

/* A foto sobreviveu ao erro de validação e continua pendurada. */
.nota-guardada {
  margin: 0; padding: var(--sm) var(--md);
  background: var(--ocre); color: var(--tinta);
  box-shadow: var(--vidrado);
  font-size: var(--t-desc);
}
.entrada-caixa .campos { margin-top: var(--md); }

/* -----------------------------------------------------------------
   Movimento — Operate: estado, nunca coreografia
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* A peça acesa respira devagar até alguém dizer que viu.
     Só o PRIMEIRO aceso pulsa. Com três pedidos, a coluna inteira
     piscando não informava nada e cansava a periferia da visão de quem
     está trabalhando. Os demais ficam com o anel estático — presentes,
     não gritando. */
  .pedido-aceso { box-shadow: var(--vidrado), 0 0 0 4px var(--forno); }
  .pedido-aceso:first-of-type { animation: aceso 2.4s ease-in-out infinite; }
  @keyframes aceso {
    0%, 100% { box-shadow: var(--vidrado), 0 0 0 4px var(--forno); }
    50%      { box-shadow: var(--vidrado), 0 0 0 4px var(--ocre); }
  }

  /* O pedido acabou de mudar de lugar na lista. Ele não some e
     reaparece: chega assentando na posição nova, para o olho seguir
     o movimento em vez de procurar de novo. */
  .pedido { animation: pedido-assenta 0.3s var(--saida) both; }
  @keyframes pedido-assenta {
    from { opacity: 0.6; transform: translateY(6px); }
    to   { opacity: 1;   transform: none; }
  }

  /* A chave da parede: a peça fecha e esfria na frente de quem tocou.
     É o mesmo gesto que o cliente vai ver na loja. */
  .controle { transition: background 0.28s var(--saida), color 0.28s var(--saida); }
  .controle-face svg, .controle-face img { transition: filter 0.35s var(--saida); }

  .chave { transition: background 0.15s var(--saida), transform 0.1s var(--saida); }
  .chave:active { transform: translateY(1px); }

  .botao-miudo:active, .painel-aba:active { transform: translateY(1px); }
}

@media (prefers-reduced-motion: reduce) {
  .pedido, .pedido-aceso, .controle { animation: none; transition: none; }
}