/* PAINEL DO DONO — estrutura (redesign 2026-10, etapa 3).
   Paleta FIXA do painel (--p-*, em base.css), independente do tema do restaurante.
   - Celular (< 900px): cabeçalho fixo no topo + abas fixas no rodapé.
   - Computador (>= 900px): menu lateral de 236px + conteúdo.
   As telas em si (pedidos, cardápio, produto) ganham o visual novo nas etapas 4–6;
   até lá elas ainda usam partes do estilo.css. */

body.pagina-painel {
  background: var(--p-fundo);
  color: var(--p-texto);
  font-size: 15px;
}
.pagina-painel a { color: var(--p-destaque-forte); }

/* ---------- Logo (ou iniciais) ---------- */
.painel-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
}
.painel-logo-iniciais { background: var(--p-destaque); color: #fff; font: 800 15px/1 var(--fonte-titulo); }

/* ---------- Interruptor (switch) ---------- */
.form-pausa { margin: 0; }
.switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pilula);
  background: var(--switch-off);
  cursor: pointer;
  transition: background 0.15s;
}
.switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.switch[aria-checked='true'] { background: var(--verde); }
.switch[aria-checked='true'] span { transform: translateX(18px); }
.switch:focus-visible { outline: none; box-shadow: var(--p-foco); }
/* Área de toque de 44px sem aumentar o desenho. */
.switch::after { content: ''; position: absolute; inset: -9px -2px; }

/* ---------- Estrutura ---------- */
.painel-lateral { display: none; } /* só no computador */
.painel-principal { position: relative; min-width: 0; } /* referência para botões no canto do cabeçalho */

/* Cabeçalho (celular): fixo no topo, branco. */
.painel-cabecalho {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--p-superficie);
  border-bottom: 1px solid var(--p-borda);
}
.painel-titulos { flex: 1; min-width: 0; }
.painel-cabecalho h1 { margin: 0; font: 800 20px/1.15 var(--fonte-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-subtitulo { display: none; margin: 4px 0 0; font-size: 14px; color: var(--p-meta); }
.painel-status-movel { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.estado-aberto { color: var(--verde-texto); }
.estado-pausado, .estado-fora { color: var(--ambar-texto); }

/* Conteúdo: espaço embaixo para as abas do rodapé. */
.painel-conteudo { padding: 14px 14px calc(96px + env(safe-area-inset-bottom)); }
.painel-conteudo .painel { max-width: 960px; margin: 0; padding: 0; }
.painel-conteudo .painel > h2:first-child { margin-top: 4px; }

/* ---------- Abas no rodapé (celular) ---------- */
.abas-rodape {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(76px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--p-superficie);
  border-top: 1px solid var(--p-borda);
}
.abas-rodape > a, .aba-mais > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  color: var(--p-meta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.aba-mais > summary::-webkit-details-marker { display: none; }
/* Aba ativa: texto em destaque + traço de 22×4 acima. */
.abas-rodape [aria-current='page'] { color: var(--p-destaque); font-weight: 700; }
.abas-rodape [aria-current='page']::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 22px;
  height: 4px;
  margin-left: -11px;
  border-radius: 4px;
  background: var(--p-destaque);
}
.contador-aba {
  position: absolute;
  top: 10px;
  left: calc(50% + 14px);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pilula);
  background: var(--p-destaque);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
/* "Mais": menu que sobe a partir da aba. */
.aba-mais { position: relative; }
.aba-mais[open] > summary { color: var(--p-destaque); }
.menu-mais {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 8px);
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--p-borda);
  border-radius: var(--r-bloco);
  background: var(--p-superficie);
  box-shadow: 0 12px 28px -10px rgba(31, 26, 22, 0.35);
}
.menu-mais a, .menu-mais button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pequeno);
  background: none;
  color: var(--p-texto);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-mais a:hover, .menu-mais button:hover { background: var(--p-hover); }
.menu-mais form { margin: 0; }
.menu-mais button { color: var(--p-suave); }

/* =====================================================================
   COMPUTADOR (>= 900px): menu lateral + conteúdo
   ===================================================================== */
@media (min-width: 900px) {
  .painel-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
  .abas-rodape, .painel-pausa-movel, .painel-status-movel, .painel-cabecalho .painel-logo { display: none; }

  .painel-lateral {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    background: var(--p-superficie);
    border-right: 1px solid var(--p-borda);
    overflow-y: auto;
  }
  .painel-marca { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; }
  .painel-marca div { min-width: 0; }
  .painel-marca strong { display: block; font: 700 15px/1.2 var(--fonte-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .painel-marca small { font-size: 12px; color: var(--p-meta); }

  .painel-nav { display: flex; flex-direction: column; gap: 2px; }
  .painel-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--r-pequeno);
    color: var(--p-texto-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }
  .painel-nav a:hover { background: var(--p-hover); }
  .painel-nav a[aria-current='page'] { background: var(--p-destaque-suave); color: var(--p-destaque-forte); font-weight: 600; }
  .contador-nav {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: var(--r-pilula);
    background: var(--p-destaque);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
  }

  .painel-lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
  .cartao-pausa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--p-borda);
    border-radius: var(--r-bloco);
  }
  .cartao-pausa strong { display: block; font-size: 13px; font-weight: 700; }
  .cartao-pausa small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--p-meta); }
  .cartao-pausa-pausado, .cartao-pausa-fora { background: var(--ambar-fundo); border-color: #f1dcb4; }
  .cartao-pausa-pausado strong, .cartao-pausa-fora strong { color: var(--ambar-texto); }
  .switch { width: 40px; height: 24px; }
  .switch span { width: 18px; height: 18px; }
  .switch[aria-checked='true'] span { transform: translateX(16px); }

  .link-lateral {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--r-pequeno);
    background: none;
    color: var(--p-texto-2) !important;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .link-lateral:hover { background: var(--p-hover); }
  .link-sair { color: var(--p-meta) !important; }
  .painel-lateral-rodape form { margin: 0; }

  /* Cabeçalho vira só o título grande da página. */
  .painel-cabecalho { position: static; padding: 28px 32px 0; background: none; border: 0; }
  .painel-cabecalho h1 { font-size: 30px; font-weight: 800; white-space: normal; }
  .painel-subtitulo { display: block; }
  .painel-conteudo { padding: 20px 32px 40px; }
}

/* =====================================================================
   TELA DE PEDIDOS (etapa 4, telas 02/05 do handoff)
   ===================================================================== */
.painel-pedidos h2 { margin: 0; }
.painel-conteudo .painel-pedidos { max-width: 1240px; }

/* Botão "Som de pedido novo": linha de 48px no celular; pílula no canto do título no computador. */
.botao-som {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 0 16px;
  border: 1px solid var(--p-borda);
  border-radius: var(--r-bloco);
  background: var(--p-superficie);
  color: var(--p-texto);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.botao-som-estado { padding: 4px 10px; border-radius: var(--r-pilula); background: var(--p-chip); color: var(--p-suave); font-size: 12px; font-weight: 700; }
.botao-som[aria-pressed='true'] .botao-som-estado { background: var(--verde-fundo); color: var(--verde-texto); }
.botao-som.aguardando .botao-som-estado { background: var(--ambar-fundo); color: var(--ambar-texto); }
.botao-som:focus-visible { outline: none; box-shadow: var(--p-foco); }

/* Notificações: convite = faixa escura; depois, uma linha discreta. */
.caixa-push {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--p-borda);
  border-radius: var(--r-bloco);
  background: var(--p-superficie);
  font-size: 13px;
  color: var(--p-suave);
}
.caixa-push p { flex: 1 1 220px; margin: 0; }
.caixa-push-botoes { display: flex; gap: 8px; }
.caixa-push button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--p-destaque-borda);
  border-radius: var(--r-botao);
  background: var(--p-superficie);
  color: var(--p-destaque);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.caixa-push-convite { padding: 18px 20px; border: 0; border-radius: 16px; background: var(--p-escuro); color: #fff; font-size: 14px; }
.caixa-push-convite .caixa-push-botoes { flex: 1 1 100%; }
.caixa-push-convite [data-acao] { flex: 1; min-height: 44px; border: 0; background: #fff; color: var(--p-texto); }
.caixa-push-convite [data-dispensar] { min-height: 44px; border: 0; background: none; color: #d9d0c6; }

/* Títulos de seção: "Em andamento 2" / "Finalizados recentes". */
.titulo-secao { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px !important; font: 700 18px var(--fonte-titulo); }
.titulo-conta { font: 600 13px var(--fonte-texto); color: var(--p-meta); }

.pedidos-grade { display: flex; flex-direction: column; gap: 28px; }
.pedidos-cards { display: grid; gap: 14px; }

.pedidos-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 40px 20px;
  border: 1.5px dashed var(--p-tracejado);
  border-radius: var(--r-card);
  text-align: center;
}
.pedidos-vazio strong { font: 700 16px var(--fonte-titulo); }
.pedidos-vazio span { font-size: 14px; color: var(--p-meta); }
.so-com-som { display: none; }
.som-ligado .so-com-som { display: inline; }

/* ---------- Cartão de pedido ---------- */
.pedido-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--p-borda);
  border-radius: var(--r-card);
  background: var(--p-superficie);
  scroll-margin-top: 80px;
}
.pedido-card p { margin: 0; }
/* Pedido NOVO: anel âmbar (chama atenção até alguém aceitar). */
.pedido-card.status-novo { border-color: transparent; box-shadow: 0 0 0 2px #e9a23b, 0 10px 24px -12px rgba(233, 162, 59, 0.6); }

.pedido-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pedido-numero { font: 800 21px/1 var(--fonte-titulo); }
.pedido-hora { margin-left: auto; font-size: 12px; color: var(--p-meta); }

.selo { padding: 3px 9px; border-radius: var(--r-pilula); font-size: 11px; font-weight: 700; white-space: nowrap; }
.selo-novo { background: var(--st-novo-f); color: var(--st-novo-t); }
.selo-aceito { background: var(--st-aceito-f); color: var(--st-aceito-t); }
.selo-saiu { background: var(--st-saiu-f); color: var(--st-saiu-t); }
.selo-concluido { background: var(--st-concluido-f); color: var(--st-concluido-t); }
.selo-cancelado { background: var(--st-cancelado-f); color: var(--st-cancelado-t); }

.pedido-quem { display: flex; flex-direction: column; gap: 2px; }
.pedido-cliente { font-size: 15px; color: var(--p-suave); }
.pedido-cliente strong { font-weight: 600; color: var(--p-texto); }
.pedido-endereco { font-size: 13px; color: var(--p-suave); }

.pedido-itens { padding: 10px 12px; border-radius: var(--r-botao); background: var(--p-lista); }
.pedido-itens ul { list-style: none; margin: 0; padding: 0; }
.pedido-itens li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.pedido-itens li > span:last-child { color: var(--p-suave); white-space: nowrap; }
.pedido-itens b { font-weight: 700; }
.pedido-taxa { color: var(--p-suave); }
.pedido-obs { margin-top: 6px !important; padding-top: 8px; border-top: 1px dashed var(--p-tracejado); font-size: 13px; font-weight: 600; color: var(--ambar-texto); }

.pedido-rodape { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pedido-pagamento { font-size: 13px; color: var(--p-suave); }
.pedido-total { font: 800 18px var(--fonte-titulo); }

/* Ações: principal (cheia), secundária (contorno), Cancelar (discreto), WhatsApp (contorno verde). */
.pedido-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pedido-acoes form { margin: 0; }
.pedido-acoes button, .acao-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-botao);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.acao-principal { flex: 1 1 0; min-width: 96px; }
.acao-principal button { border: 0; background: var(--p-destaque); color: #fff; }
.acao-principal button:hover { background: var(--p-destaque-forte); }
.acao-secundaria { flex: 1 1 0; min-width: 96px; }
.acao-secundaria button { border: 1.5px solid var(--p-destaque-borda); background: var(--p-superficie); color: var(--p-destaque); }
.acao-cancelar button { width: auto; padding: 0 12px; border: 1.5px solid var(--p-borda); background: var(--p-superficie); color: var(--p-meta); font-weight: 600; }
.acao-whatsapp { width: auto; padding: 0 12px; border: 1.5px solid #cfe5d6; background: var(--p-superficie); color: var(--verde-texto) !important; }
.pedido-acoes button:disabled { opacity: 0.6; cursor: wait; }
.pedido-acoes button:focus-visible, .acao-whatsapp:focus-visible { outline: none; box-shadow: var(--p-foco); }

/* ---------- Finalizados (lista compacta; tocar abre o cartão) ---------- */
.lista-finalizados { overflow: hidden; border: 1px solid var(--p-borda); border-radius: var(--r-card); background: var(--p-superficie); }
.finalizado + .finalizado { border-top: 1px solid var(--p-divisor); }
.finalizado summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; cursor: pointer; list-style: none; }
.finalizado summary::-webkit-details-marker { display: none; }
.finalizado summary:hover { background: var(--p-hover); }
.finalizado-numero { font: 800 15px var(--fonte-titulo); }
.finalizado-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.finalizado-info strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finalizado-info small { font-size: 12px; color: var(--p-meta); }
.finalizado[open] summary { background: var(--p-hover); }
.finalizado .pedido-card { margin: 0 10px 10px; border-color: var(--p-divisor); }
.finalizados-vazio { margin: 0; padding: 18px; border: 1px solid var(--p-borda); border-radius: var(--r-card); background: var(--p-superficie); font-size: 13px; color: var(--p-meta); }

/* Faixa do alarme: no celular fica acima das abas do rodapé. */
.faixa-alarme {
  position: fixed;
  z-index: 30;
  left: 12px;
  right: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  min-height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: #b3361a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 12px 24px -8px rgba(31, 26, 22, 0.5);
  cursor: pointer;
  animation: piscar 1s ease-in-out infinite;
}
@keyframes piscar { 50% { background: #8f2a12; } }
@media (prefers-reduced-motion: reduce) { .faixa-alarme { animation: none; } }

/* ---------- Pedidos no computador ---------- */
@media (min-width: 900px) {
  /* Som: pílula no canto do título. */
  .botao-som { position: absolute; top: 32px; right: 32px; width: auto; min-height: 40px; margin: 0; border-radius: var(--r-pilula); }
  /* Modo suporte: a faixa roxa ocupa o topo; o botão desce para não cobrir "Sair do modo suporte". */
  .painel-principal:has(> .faixa-suporte) .botao-som { top: calc(32px + var(--altura-faixa-suporte)); }
  .caixa-push-convite { flex-wrap: nowrap; padding: 16px 20px; }
  .caixa-push-convite .caixa-push-botoes { flex: none; }
  .caixa-push-convite [data-acao] { flex: none; min-height: 40px; padding: 0 18px; }

  .pedidos-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .pedido-numero { font-size: 22px; }
  .pedido-card { padding: 18px; }
  .faixa-alarme { left: auto; right: 32px; bottom: 24px; width: 420px; }
}
/* Em andamento em 2 colunas só em tela larga (entre 900 e 1200, uma coluna). */
@media (min-width: 1200px) {
  .pedidos-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* =====================================================================
   GESTÃO DO CARDÁPIO (etapa 5, telas 03/06 do handoff)
   ===================================================================== */

/* Cabeçalho "com ações" (celular): mostra o resumo em vez do status e some com a pausa. */
.painel-cabecalho.com-acoes .painel-status-movel,
.painel-cabecalho.com-acoes .painel-pausa-movel { display: none; }
.painel-cabecalho.com-acoes .painel-subtitulo { display: block; margin-top: 2px; font-size: 12px; }
.painel-cabecalho.com-acoes { padding-right: 150px; } /* espaço para o botão "Nova categoria" */

/* Botões genéricos do painel (novo visual). */
.botao-cheio, .botao-contorno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-botao);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.botao-cheio { border: 0; background: var(--p-destaque); color: #fff !important; }
.botao-cheio:hover { background: var(--p-destaque-forte); }
.botao-contorno { border: 1px solid var(--p-borda-input); background: var(--p-superficie); color: var(--p-texto) !important; }
.botao-contorno:hover { background: var(--p-hover); }
.botao-pequeno { min-height: 32px; padding: 0 12px; font-size: 13px; }
.botao-cheio:focus-visible, .botao-contorno:focus-visible, .botao-quadrado:focus-visible { outline: none; box-shadow: var(--p-foco); }

/* Topo: "Nova categoria" no cabeçalho (celular) e "+ Novo produto" flutuante. */
.cardapio-acoes .botao-contorno { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 16; min-height: 40px; padding: 0 14px; }
.botao-novo-produto {
  position: fixed;
  z-index: 19;
  right: 14px;
  bottom: calc(90px + env(safe-area-inset-bottom));
  min-height: 52px;
  padding: 0 20px;
  border-radius: 16px;
  font-size: 15px;
  box-shadow: 0 10px 20px -6px rgba(198, 61, 28, 0.55);
}
.painel-cardapio { padding-bottom: 64px; } /* o botão flutuante não cobre o último produto */

.cardapio-ajuda { max-width: 720px; margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--p-suave); }
.cardapio-ajuda strong { color: var(--p-texto); }

.cardapio-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  border: 1.5px dashed var(--p-tracejado);
  border-radius: var(--r-card);
  text-align: center;
}
.cardapio-vazio strong { font: 700 17px var(--fonte-titulo); }
.cardapio-vazio span { font-size: 14px; color: var(--p-meta); }
.cardapio-vazio .botao-cheio { margin-top: 8px; }

/* Índice das categorias: botões que rolam para o lado (celular). */
.cardapio-indice {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 -14px 14px;
  padding: 0 14px 2px;
  scrollbar-width: none;
}
.cardapio-indice::-webkit-scrollbar { display: none; }
.cardapio-indice-titulo { display: none; }
.cardapio-indice a {
  flex: none;
  padding: 8px 14px;
  border-radius: var(--r-pilula);
  background: var(--p-chip);
  color: var(--p-texto) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cardapio-indice a span { margin-left: 4px; font-size: 11px; opacity: 0.7; }

.cardapio-categorias { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Cartão de categoria ---------- */
.cat-card { border: 1px solid var(--p-borda); border-radius: var(--r-card); background: var(--p-superficie); scroll-margin-top: 80px; }
.cat-cabecalho { display: flex; align-items: center; gap: 8px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--p-divisor); }
.cat-cabecalho h2 { margin: 0 !important; font: 700 18px var(--fonte-titulo); overflow-wrap: anywhere; }
.cat-conta { padding: 2px 9px; border-radius: var(--r-pilula); background: var(--p-chip); color: var(--p-suave); font-size: 12px; font-weight: 700; }
.cat-botoes { display: none; margin-left: auto; gap: 6px; align-items: center; }
.cat-botoes form { margin: 0; }
.botao-quadrado {
  width: 32px;
  height: 32px;
  border: 1px solid var(--p-borda-input);
  border-radius: var(--r-pequeno);
  background: var(--p-superficie);
  color: var(--p-texto);
  font-size: 15px;
  cursor: pointer;
}
.botao-quadrado:disabled { opacity: 0.35; cursor: default; }

/* Menu "···" (celular). */
.cat-menu { position: relative; margin-left: auto; }
.cat-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  border: 1px solid var(--p-borda-input);
  border-radius: var(--r-pequeno);
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  list-style: none;
}
.cat-menu summary::-webkit-details-marker { display: none; }
/* Abre como folha a partir da base da tela (por cima das abas), com fundo escurecido.
   O fundo é o próprio <summary> esticado: tocar nele fecha o menu. */
.cat-menu[open] summary::before { content: ''; position: fixed; inset: 0; z-index: 40; background: rgba(31, 26, 22, 0.55); cursor: default; }
.menu-flutuante {
  position: fixed;
  z-index: 41;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--p-superficie);
  box-shadow: 0 -12px 28px -10px rgba(31, 26, 22, 0.35);
}
.menu-flutuante form { margin: 0; }
.menu-flutuante a, .menu-flutuante button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pequeno);
  background: none;
  color: var(--p-texto) !important;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-flutuante a, .menu-flutuante button { min-height: 52px; }
.menu-flutuante a:hover, .menu-flutuante button:hover { background: var(--p-hover); }
.menu-flutuante button:disabled { opacity: 0.4; cursor: default; }
.botao-apagar, .menu-flutuante .botao-apagar { color: var(--perigo) !important; }

.cat-vazia { margin: 0; padding: 14px 18px; font-size: 13px; color: var(--p-meta); }

/* ---------- Linha de produto ---------- */
.linha-produto { display: flex; align-items: center; gap: 12px; padding: 12px 14px; scroll-margin-top: 80px; }
.linha-produto + .linha-produto { border-top: 1px solid var(--p-divisor); }
.linha-produto-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit !important; text-decoration: none; }
.linha-miniatura { flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--p-tracejado);
  color: var(--p-meta);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.linha-textos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-textos strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-textos small { display: none; font-size: 13px; color: var(--p-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-preco-movel { font-size: 14px; font-weight: 700; }
.linha-preco { display: none; min-width: 84px; text-align: right; font-size: 15px; font-weight: 700; }
.linha-produto-link:hover strong { color: var(--p-destaque-forte); }

.form-disponivel { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
.rotulo-disponivel { min-width: 64px; font-size: 11px; font-weight: 700; text-align: center; color: var(--verde-texto); }
.linha-seta { display: none; color: var(--p-meta) !important; font-size: 20px; text-decoration: none; }

/* Esgotado: miniatura, nome e preço apagados; rótulo cinza. */
.linha-produto.esgotado .linha-produto-link, .linha-produto.esgotado .linha-preco { opacity: 0.5; }
.linha-produto.esgotado .rotulo-disponivel { color: var(--p-meta); }

.cat-adicionar {
  display: block;
  padding: 14px 18px;
  border-top: 1px solid var(--p-divisor);
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: #fcfaf7;
  color: var(--p-destaque) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cat-adicionar:hover { background: var(--p-destaque-suave); }

/* ---------- Janelas (Nova categoria / Renomear): abrem com #id na URL (:target), sem JS ---------- */
.janela { display: none; position: fixed; inset: 0; z-index: 40; align-items: flex-end; justify-content: center; }
.janela:target { display: flex; }
.janela-fundo { position: absolute; inset: 0; background: rgba(31, 26, 22, 0.55); }
.janela-caixa {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--p-superficie);
}
.janela-caixa h2 { margin: 0 0 14px !important; font: 800 20px var(--fonte-titulo); }
.janela-form { display: flex; flex-direction: column; gap: 6px; }
.janela-form label { font-size: 14px; font-weight: 600; }
.janela-form input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--p-borda-input);
  border-radius: var(--r-botao);
  font-size: 16px; /* iPhone não dá zoom */
  color: var(--p-texto);
}
.janela-form input:focus { outline: none; border-color: var(--p-destaque); box-shadow: var(--p-foco); }
.janela-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.janela-perigo { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--p-divisor); }
.janela-perigo form { margin: 0; }
.janela-perigo .botao-apagar {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--perigo-borda-suave);
  border-radius: var(--r-botao);
  background: var(--perigo-fundo);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Cardápio no computador ---------- */
@media (min-width: 900px) {
  .painel-cabecalho.com-acoes { padding-right: 32px; }
  .cardapio-acoes { position: absolute; top: 32px; right: 32px; display: flex; gap: 10px; }
  .cardapio-acoes .botao-contorno { position: static; min-height: 44px; padding: 0 18px; }
  .botao-novo-produto { position: static; min-height: 44px; padding: 0 18px; border-radius: var(--r-botao); font-size: 14px; box-shadow: none; }
  .painel-cardapio { padding-bottom: 0; }
  .painel-conteudo .painel-cardapio { max-width: 1240px; }

  .cardapio-grade { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; }
  .cardapio-indice { position: sticky; top: 24px; flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .cardapio-indice-titulo { display: block; padding: 4px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-meta); }
  .cardapio-indice a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: var(--r-pequeno); background: none; font-size: 14px; font-weight: 500; white-space: normal; }
  .cardapio-indice a:hover { background: var(--p-superficie); }

  .cat-botoes { display: flex; }
  .cat-menu { display: none; }
  .cat-cabecalho { padding: 14px 18px; }

  .linha-produto { padding: 12px 18px; gap: 14px; }
  .linha-miniatura { width: 52px; height: 52px; }
  .linha-textos small { display: block; }
  .linha-preco-movel { display: none; }
  .linha-preco { display: block; }
  .form-disponivel { flex-direction: row; gap: 10px; }
  .rotulo-disponivel { text-align: left; font-size: 12px; }
  .linha-seta { display: block; padding: 0 2px; }

  .janela { align-items: center; padding: 24px; }
  .janela-caixa { border-radius: 20px; padding: 24px; }
}

/* =====================================================================
   EDITAR / NOVO PRODUTO (etapa 6, telas 04/07 do handoff)
   ===================================================================== */

/* Cabeçalho: "‹" voltar (celular), migalhas (computador), dois títulos. */
.painel-voltar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -8px;
  border-radius: var(--r-pequeno);
  color: var(--p-texto) !important;
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
}
.painel-cabecalho.com-voltar .painel-logo { display: none; }
.migalhas { display: none; }
.titulo-pc { display: none; }
.painel-subtitulo-movel { margin: 2px 0 0; font-size: 12px; color: var(--p-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-cabecalho.com-voltar { padding-right: 14px; }
.so-pc { display: none !important; }

/* Sem abas no rodapé (a tela tem a barra de Salvar no lugar). */
.sem-abas .abas-rodape { display: none; }
.sem-abas .painel-conteudo { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* Destaque rápido quando um item muda de lugar (categoria ou produto). */
@keyframes destacar { from { box-shadow: 0 0 0 3px var(--p-destaque-borda); } to { box-shadow: 0 0 0 3px transparent; } }
.mexeu { animation: destacar 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .mexeu { animation: none; } }

.produto-grade { display: flex; flex-direction: column; gap: 14px; }
.produto-principal, .produto-lateral { display: contents; } /* celular: uma coluna, foto primeiro */
.cartao-foto { order: 1; }
.form-produto { order: 2; }
.posicao { order: 3; }
.zona-perigo { order: 4; }
.cartao-previa { order: 5; }

.cartao { padding: 18px 16px; border: 1px solid var(--p-borda); border-radius: var(--r-card); background: var(--p-superficie); }
.cartao h2 { margin: 0 0 14px !important; font: 700 17px var(--fonte-titulo); }
.cartao-ajuda { margin: -8px 0 12px; font-size: 13px; color: var(--p-meta); }
.aviso-ambar { margin-top: 0; padding: 8px 10px; border-radius: var(--r-pequeno); background: var(--ambar-fundo); color: var(--ambar-texto); }

/* Campos */
.form-produto { display: flex; flex-direction: column; gap: 14px; }
.campo-painel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-painel label { font-size: 13px; font-weight: 700; }
.rotulo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rotulo-linha h2 { margin: 0 0 12px !important; }
.rotulo-extra { font-size: 12px; color: var(--p-meta); }
.campo-painel input, .campo-painel select, .campo-painel textarea, .campo-dinheiro {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--p-borda-input);
  border-radius: var(--r-botao);
  background: var(--p-superficie);
  color: var(--p-texto);
  font-size: 16px; /* iPhone não dá zoom */
}
.campo-painel textarea { min-height: 92px; resize: vertical; line-height: 1.4; }
.campo-painel input:focus, .campo-painel select:focus, .campo-painel textarea:focus, .campo-dinheiro:focus-within {
  outline: none;
  border-color: var(--p-destaque);
  box-shadow: var(--p-foco);
}
.campo-dinheiro { display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.campo-dinheiro span { color: var(--p-meta); font-weight: 600; }
.campo-dinheiro input { min-height: 42px; padding: 0; border: 0 !important; box-shadow: none !important; font-weight: 700; }
.campos-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.painel-produto .erro-campo { margin: 0; color: var(--perigo); font-size: 13px; font-weight: 600; }
.campo-painel [aria-invalid='true'], .campo-dinheiro:has([aria-invalid='true']) { border-color: var(--perigo); }

/* Posição na categoria */
.lista-posicao { list-style: none; margin: 0; padding: 0; }
.lista-posicao li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: var(--r-pequeno); font-size: 15px; }
.lista-posicao li + li { margin-top: 2px; }
.posicao-numero { min-width: 20px; color: var(--p-desabilitado); font-weight: 600; }
.posicao-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lista-posicao li.atual { background: var(--p-destaque-suave); color: var(--p-destaque-forte); font-weight: 600; }
.posicao-botoes { display: flex; gap: 6px; }
.posicao-botoes form { margin: 0; }
.posicao-botoes .botao-quadrado { width: 44px; height: 36px; border-color: var(--p-destaque-borda); color: var(--p-destaque); }

/* Zona de perigo */
.zona-perigo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--perigo-borda-suave);
  border-radius: var(--r-card);
  background: var(--perigo-fundo);
}
.zona-perigo strong { color: var(--perigo-forte); font-size: 15px; }
.zona-perigo p { margin: 2px 0 0; font-size: 13px; color: var(--p-suave); }
.zona-perigo form { margin: 0; }
.botao-perigo-contorno {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1.5px solid var(--perigo-borda);
  border-radius: var(--r-botao);
  background: var(--p-superficie);
  color: var(--perigo);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* Foto */
.painel-produto .form-foto { display: block; margin: 0; } /* o estilo.css antigo (tela Loja) usa flex aqui */
.campo-arquivo { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } /* escondido, mas o <label> abre */
.area-foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  overflow: hidden;
  border: 1.5px dashed var(--p-tracejado);
  border-radius: var(--r-bloco);
  background: var(--p-lista);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.area-foto:hover, .area-foto.arrastando { border-color: var(--p-destaque); background: var(--p-destaque-suave); }
.campo-arquivo:focus-visible + .area-foto, .area-foto:has(+ .campo-arquivo:focus-visible) { box-shadow: var(--p-foco); }
.area-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area-foto.tem-foto { border-style: solid; border-color: var(--p-borda); }
.area-foto.tem-foto .area-foto-vazia { display: none; }
.area-foto.enviando::after { content: 'Enviando...'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.75); font-weight: 700; }
.area-foto-vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; text-align: center; }
.area-foto-mais { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--p-destaque-suave); color: var(--p-destaque); font-size: 22px; }
.area-foto-vazia strong { font-size: 14px; }
.area-foto-vazia small { max-width: 260px; font-size: 12px; line-height: 1.4; color: var(--p-meta); }
.botao-enviar-foto { margin-top: 10px; }
.foto-andamento { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--verde-texto); }
.foto-botoes { display: flex; gap: 8px; margin-top: 10px; }
.foto-botoes form { margin: 0; }
.foto-botoes .botao-pequeno { min-height: 36px; }
.dica-foto { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-pequeno); background: var(--ambar-fundo); color: var(--ambar-texto); font-size: 13px; }
.painel-produto #erro-foto { margin-top: 8px; }

/* Prévia */
.previa-fundo { padding: 10px; border-radius: var(--r-bloco); background: var(--p-chip); }
.previa-produto { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-bloco); background: #fff; }
.previa-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.previa-textos strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.previa-textos small { font-size: 12px; line-height: 1.35; color: var(--p-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.previa-preco { font-size: 14px; font-weight: 700; color: var(--p-destaque); }
.previa-foto { flex: none; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.previa-foto.sem-foto { display: flex; }
.previa-foto.sem-foto[hidden] { display: none; }

/* Barra de salvar (fixa embaixo). Celular: no lugar das abas. */
.barra-salvar {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: calc(84px + env(safe-area-inset-bottom));
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--p-borda);
  background: var(--p-superficie);
}
.barra-status { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--p-meta); }
.barra-status.nao-salvo { color: var(--ambar-texto); }
.barra-salvar .botao-cheio { min-height: 48px; padding: 0 24px; font-size: 15px; }

@media (min-width: 900px) {
  .painel-voltar { display: none; }
  .painel-cabecalho.com-voltar .painel-logo { display: none; }
  .migalhas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; font-size: 13px; color: var(--p-meta); }
  .migalhas a { color: var(--p-meta) !important; text-decoration: none; }
  .migalhas a:hover { color: var(--p-destaque-forte) !important; }
  .migalhas [aria-current] { color: var(--p-texto); }
  .titulo-pc { display: inline; }
  .titulo-movel, .painel-subtitulo-movel { display: none; }
  .so-pc { display: inline-flex !important; }
  .so-movel { display: none !important; }
  .sem-abas .painel-conteudo { padding-bottom: 110px; }

  .painel-conteudo .painel-produto { max-width: 1100px; }
  .produto-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .produto-principal, .produto-lateral { display: flex; flex-direction: column; gap: 20px; }
  .cartao { padding: 22px; }
  .campos-lado { grid-template-columns: 200px 1fr; }
  .area-foto { height: 200px; }
  .zona-perigo { flex-direction: row; align-items: center; justify-content: space-between; padding: 18px 22px; }
  .botao-perigo-contorno { width: auto; min-height: 40px; }

  /* Barra de salvar só sobre a área do conteúdo (o menu lateral tem 236px). */
  .barra-salvar { left: 236px; min-height: 0; padding: 14px 32px; }
  .barra-salvar .botao-cheio, .barra-salvar .botao-contorno { min-height: 44px; }
}

/* =====================================================================
   ACABAMENTO: avisos, Horário, Loja e Entrar (o estilo.css antigo saiu)
   ===================================================================== */

/* Avisos depois de uma ação ("Produto salvo.", erros). */
.aviso-ok, .aviso-erro {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--r-botao);
  font-size: 14px;
  font-weight: 600;
}
.aviso-ok { border: 1px solid #cfe5d6; background: var(--verde-fundo); color: var(--verde-texto); }
.aviso-erro { border: 1px solid var(--perigo-borda-suave); background: var(--perigo-fundo); color: var(--perigo-forte); }

/* Barra de salvar em telas COM abas no rodapé (celular): fica logo acima delas. */
@media (max-width: 899px) {
  .painel-app:not(.sem-abas) .barra-salvar { bottom: calc(76px + env(safe-area-inset-bottom)); min-height: 0; padding: 12px 14px; }
  /* Horários embaixo do nome do dia, ocupando a largura toda (não sai da tela). */
  .dia-linha:has(.dia-nome input:checked) .dia-turnos { flex-basis: 100%; }
  .dia-linha .turno { width: 100%; }
  .dia-linha .turno input { flex: 1; min-width: 0; }
  .dia-linha .segundo-turno[open] { width: 100%; }
}
.painel-horario { padding-bottom: 90px; } /* a barra de Salvar não cobre o fim da página */

/* ---------- Horário ---------- */
.painel-conteudo .painel-horario { max-width: 760px; }
.painel-horario .cartao + .cartao, .form-horario > * + * { margin-top: 14px; }
.situacao-agora { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 14px 16px; }
.situacao-agora .ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.situacao-agora.agora-fechado .ponto { background: #a3612f; }
.situacao-agora strong { font-size: 15px; }
.situacao-agora p { margin: 2px 0 0; font-size: 13px; color: var(--p-suave); }

.modo-horario { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.opcao-grande {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 1.5px solid var(--p-borda-input);
  border-radius: var(--r-bloco);
  background: var(--p-superficie);
  cursor: pointer;
}
.opcao-grande:has(input:checked) { border-color: var(--p-destaque); background: var(--p-destaque-suave); }
.opcao-grande input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--p-destaque); }
.opcao-grande strong { display: block; font-size: 15px; }
.opcao-grande small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--p-meta); }

.aviso-sempre { display: none; margin: -4px 0 12px; padding: 8px 10px; border-radius: var(--r-pequeno); background: var(--ambar-fundo); color: var(--ambar-texto); font-size: 13px; }
.form-horario:has(input[value='sempre']:checked) .aviso-sempre { display: block; }
.form-horario:has(input[value='sempre']:checked) .dia-linha { opacity: 0.45; }

.dia-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--p-divisor); }
.dia-nome { display: flex; align-items: center; gap: 10px; min-width: 120px; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.dia-nome input { width: 22px; height: 22px; margin: 0; accent-color: var(--p-destaque); }
.dia-turnos { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.dia-fechado { display: none; font-size: 14px; color: var(--p-meta); }
/* Dia desmarcado: some com os horários e mostra "Fechado". */
.dia-linha:not(:has(.dia-nome input:checked)) .turno,
.dia-linha:not(:has(.dia-nome input:checked)) .segundo-turno { display: none; }
.dia-linha:not(:has(.dia-nome input:checked)) .dia-fechado { display: inline; }
.turno { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--p-meta); }
.turno input {
  min-height: 42px;
  padding: 0 10px;
  border: 1.5px solid var(--p-borda-input);
  border-radius: var(--r-botao);
  background: var(--p-superficie);
  color: var(--p-texto);
  font-size: 16px;
}
.turno input:focus { outline: none; border-color: var(--p-destaque); box-shadow: var(--p-foco); }
.segundo-turno summary { font-size: 13px; font-weight: 600; color: var(--p-destaque); cursor: pointer; list-style: none; min-height: 32px; display: flex; align-items: center; }
.segundo-turno summary::-webkit-details-marker { display: none; }
.segundo-turno[open] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.segundo-turno[open] summary { color: var(--p-meta); }

/* ---------- Loja ---------- */
.painel-conteudo .painel-loja { max-width: 1000px; }
.loja-grade { display: grid; gap: 14px; }
.form-imagem-loja { margin: 0; }
.area-capa { height: auto; aspect-ratio: 3 / 1; } /* sem altura mínima: junto com o 3:1 ela forçaria largura mínima */
.area-logo { width: 160px; height: 160px; border-radius: 24px; }
.cartao-foto-loja .foto-botoes:empty { display: none; }

/* ---------- Entrar ---------- */
.entrar { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px; }
.rodape-legal { display: flex; justify-content: center; gap: 8px; font-size: 12px; color: var(--p-meta); }
.rodape-legal a { color: var(--p-meta) !important; }
.entrar-caixa { width: 100%; max-width: 400px; padding: 28px 24px; border: 1px solid var(--p-borda); border-radius: 22px; background: var(--p-superficie); }
.entrar-marca { display: block; width: 48px; height: 48px; border-radius: 14px; }
.entrar h1 { margin: 16px 0 4px; font: 800 26px var(--fonte-titulo); }
.entrar-sub { margin: 0 0 20px; font-size: 14px; color: var(--p-suave); }
.entrar-form { display: flex; flex-direction: column; gap: 14px; }
.entrar-form .botao-cheio { min-height: 50px; margin-top: 4px; font-size: 15px; }

@media (min-width: 900px) {
  .loja-grade { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .area-logo { width: 100%; height: auto; aspect-ratio: 1; }
}

/* =====================================================================
   CLIENTES (ranking + quem aceita promoções)
   ===================================================================== */
.painel-conteudo .painel-clientes { max-width: 1000px; }
.clientes-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.numero { display: flex; flex-direction: column; gap: 2px; padding: 14px; }
.numero strong { font: 800 24px/1 var(--fonte-titulo); }
.numero span { font-size: 12px; color: var(--p-meta); }

.clientes-filtros { display: flex; gap: 6px; overflow-x: auto; margin: 0 -14px 14px; padding: 0 14px 2px; scrollbar-width: none; }
.clientes-filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none;
  padding: 9px 14px;
  border-radius: var(--r-pilula);
  background: var(--p-chip);
  color: var(--p-texto) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.filtro[aria-current] { background: var(--p-texto); color: #fff !important; }
.filtro-promo[aria-current] { background: var(--verde-texto); }

.lista-clientes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--p-borda); border-radius: var(--r-card); background: var(--p-superficie); overflow: hidden; }
.cliente { display: grid; grid-template-columns: 28px 1fr; gap: 6px 10px; align-items: start; padding: 14px; }
.cliente + .cliente { border-top: 1px solid var(--p-divisor); }
.cliente-posicao { grid-row: span 3; font: 800 16px var(--fonte-titulo); color: var(--p-desabilitado); }
.cliente-quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.cliente-quem strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.cliente-quem small { font-size: 13px; color: var(--p-meta); }
.selo-promo { padding: 2px 8px; border-radius: var(--r-pilula); background: var(--verde-fundo); color: var(--verde-texto); font-size: 11px; font-weight: 700; }
.cliente-numeros { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--p-suave); }
.cliente-numeros b { color: var(--p-texto); }
.cliente-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cliente-acoes form { margin: 0; }
.cliente-acoes .acao-whatsapp { min-height: 36px; font-size: 13px; }

@media (min-width: 900px) {
  .clientes-filtros { margin: 0 0 14px; padding: 0; flex-wrap: wrap; overflow: visible; }
  .cliente { grid-template-columns: 32px minmax(0, 1fr) 200px 270px; align-items: center; gap: 14px; padding: 14px 18px; } /* colunas fixas: todas as linhas alinham */
  .cliente-posicao { grid-row: auto; }
  .cliente-numeros { flex-direction: column; gap: 2px; }
  .cliente-acoes { justify-content: flex-end; flex-wrap: nowrap; }
}

/* =====================================================================
   QR CODE: cartão na aba Loja + página de impressão
   ===================================================================== */
.cartao-qr .qr-conteudo { display: flex; flex-direction: column; gap: 14px; }
.qr-previa { width: 160px; height: 160px; padding: 8px; border: 1px solid var(--p-borda); border-radius: var(--r-bloco); background: #fff; }
.qr-previa svg { display: block; width: 100%; height: 100%; }
.qr-endereco { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.qr-endereco code { padding: 6px 10px; border-radius: var(--r-pequeno); background: var(--p-chip); font-size: 13px; overflow-wrap: anywhere; }
.qr-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-mesas { padding-top: 14px; border-top: 1px solid var(--p-divisor); }
.qr-mesas h3 { margin: 0 0 4px; font: 700 15px var(--fonte-titulo); }
.qr-mesas form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.qr-mesas label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.qr-mesas input { width: 90px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--p-borda-input); border-radius: var(--r-botao); font-size: 16px; }
.qr-mesas input:focus { outline: none; border-color: var(--p-destaque); box-shadow: var(--p-foco); }

@media (min-width: 900px) {
  .cartao-qr .qr-conteudo { flex-direction: row; align-items: flex-start; }
  .qr-previa { flex: none; }
  .qr-lado { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .loja-grade .cartao-qr { grid-column: 1 / -1; }
}

/* ---------- Página de impressão ---------- */
.impressao-barra {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--p-borda);
  background: var(--p-superficie);
  font-size: 14px;
  color: var(--p-suave);
}
.impressao-barra span { flex: 1; text-align: center; }
.impressao { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 12px 60px; }
.cartaz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 190mm;
  min-height: 270mm;
  padding: 18mm 14mm;
  border: 1px solid var(--p-borda);
  border-radius: 18px;
  background: #fff;
  color: #1f1a16;
  text-align: center;
  break-inside: avoid;
}
.cartaz-topo { display: flex; align-items: center; gap: 14px; }
.cartaz-logo { width: 22mm; height: 22mm; border-radius: 6mm; object-fit: cover; }
.cartaz-iniciais { display: flex; align-items: center; justify-content: center; background: var(--destaque); color: var(--destaque-texto); font: 800 10mm/1 var(--fonte-titulo); }
.cartaz-nome { font: 800 12mm/1.1 var(--fonte-titulo); }
.cartaz-mesa { padding: 2mm 7mm; border-radius: 999px; background: var(--destaque); color: var(--destaque-texto); font: 800 9mm/1.2 var(--fonte-titulo); }
.cartaz-chamada { margin: 4mm 0 0; font: 700 8mm/1.2 var(--fonte-titulo); color: var(--destaque); }
.cartaz-qr { width: 120mm; max-width: 100%; aspect-ratio: 1; }
.cartaz-qr svg { display: block; width: 100%; height: 100%; }
.cartaz-instrucao { margin: 0; font-size: 5mm; font-weight: 600; }
.cartaz-endereco { margin: 0; font-size: 4mm; color: #6b625a; overflow-wrap: anywhere; }

/* Por mesa: cartões menores, 2 por folha A4. */
.impressao-mesas .cartaz { min-height: 128mm; padding: 8mm 10mm; gap: 6px; }
.impressao-mesas .cartaz-logo { width: 13mm; height: 13mm; border-radius: 4mm; }
.impressao-mesas .cartaz-iniciais { font-size: 6mm; }
.impressao-mesas .cartaz-nome { font-size: 7mm; }
.impressao-mesas .cartaz-mesa { font-size: 7mm; }
.impressao-mesas .cartaz-chamada { margin-top: 1mm; font-size: 5.5mm; }
.impressao-mesas .cartaz-qr { width: 70mm; }
.impressao-mesas .cartaz-instrucao { font-size: 4mm; }
.impressao-mesas .cartaz-endereco { font-size: 3.2mm; }

@page { size: A4; margin: 10mm; }
@media print {
  body.pagina-painel { background: #fff; }
  .impressao-barra { display: none; }
  .impressao { display: block; padding: 0; }
  .cartaz { max-width: none; min-height: 275mm; margin: 0; border: 0; border-radius: 0; page-break-after: always; }
  .impressao-mesas .cartaz { min-height: 0; height: 136mm; border: 1px dashed #bbb; border-radius: 0; page-break-after: auto; }
  .impressao-mesas .cartaz:nth-child(2n) { page-break-after: always; }
  .cartaz:last-child { page-break-after: auto; }
  /* Cores do tema também no papel (navegadores tiram fundos por padrão). */
  .cartaz-mesa, .cartaz-iniciais { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.qr-mesas .cartao-ajuda { margin: 4px 0 0; }
.qr-mesas .cartao-ajuda + .cartao-ajuda { margin-top: 8px; }
.qr-mesas form + .cartao-ajuda { margin-top: 8px; }
.cartaz-topo { flex-wrap: wrap; justify-content: center; }
@media screen and (max-width: 600px) {
  /* Abrindo a página de impressão no celular: tudo menor na TELA (no papel continua igual). */
  .cartaz { min-height: 0; padding: 24px 14px; }
  .cartaz-nome { font-size: 26px; }
  .cartaz-chamada { font-size: 20px; }
}

/* =====================================================================
   ENTREGA E PAGAMENTO
   ===================================================================== */
.painel-conteudo .painel-entrega { max-width: 760px; padding-bottom: 90px; }
.form-entrega > * + * { margin-top: 14px; }
.opcoes-marcar { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.opcao-grande input[type='checkbox'] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--p-destaque); }
.form-entrega .erro-campo { margin: 10px 0 0; color: var(--perigo); font-size: 13px; font-weight: 600; }
.secao-taxa .modo-horario { margin-bottom: 14px; }
/* Taxa só com "Entrega" marcada; fixa OU lista de bairros conforme o modo. */
.form-entrega:not(:has(input[name='tipo_entrega']:checked)) .secao-taxa { display: none; }
.aviso-sem-entrega { display: none; }
.form-entrega:not(:has(input[name='tipo_entrega']:checked)) .aviso-sem-entrega { display: block; }
.form-entrega:has(input[name='taxa_modo'][value='bairro']:checked) .taxa-fixa { display: none; }
.form-entrega:has(input[name='taxa_modo'][value='fixa']:checked) .taxa-bairros { display: none; }
.taxa-fixa { max-width: 240px; }
.lista-bairros { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.linha-bairro { display: grid; grid-template-columns: minmax(0, 1fr) 130px 36px; gap: 8px; align-items: center; }
.linha-bairro[hidden] { display: none; }
.linha-bairro > input {
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--p-borda-input);
  border-radius: var(--r-botao);
  font-size: 16px;
  color: var(--p-texto);
  min-width: 0;
}
.linha-bairro .campo-dinheiro { min-height: 44px; }
.linha-bairro input:focus { outline: none; border-color: var(--p-destaque); box-shadow: var(--p-foco); }
.linha-bairro .campo-dinheiro input { min-height: 40px; width: 100%; min-width: 0; }

/* ---------- Editor de adicionais (tela do produto) ---------- */
.cartao-adicionais { order: 2; }
.lista-grupos { display: flex; flex-direction: column; gap: 12px; }
.lista-grupos:empty { display: none; }
.grupo-adicional { margin: 0; padding: 14px; border: 1px solid var(--p-borda); border-radius: var(--r-bloco); background: var(--p-lista); }
.grupo-adicional[hidden], .linha-opcao[hidden] { display: none; }
.grupo-topo { display: flex; gap: 8px; align-items: center; }
.grupo-nome, .linha-opcao > input:not([type='hidden']) {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--p-borda-input);
  border-radius: var(--r-botao);
  background: #fff;
  font-size: 16px;
  color: var(--p-texto);
}
.grupo-nome { font-weight: 700; }
.grupo-nome:focus, .linha-opcao input:focus, .grupo-regras input[type='number']:focus { outline: none; border-color: var(--p-destaque); box-shadow: var(--p-foco); }
.grupo-regras { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 10px 0; font-size: 14px; }
.grupo-regras .marcar { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; cursor: pointer; }
.grupo-regras .marcar input { width: 20px; height: 20px; margin: 0; accent-color: var(--p-destaque); }
.grupo-regras .ate { display: flex; align-items: center; gap: 8px; color: var(--p-suave); }
.grupo-regras input[type='number'] { width: 64px; min-height: 40px; padding: 0 8px; border: 1.5px solid var(--p-borda-input); border-radius: var(--r-botao); font-size: 16px; }
.lista-opcoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.linha-opcao { display: grid; grid-template-columns: minmax(0, 1fr) 120px 36px; gap: 8px; align-items: center; }
.linha-opcao .campo-dinheiro { min-height: 44px; padding: 0 10px; }
.linha-opcao .campo-dinheiro span { font-size: 13px; white-space: nowrap; }
.linha-opcao .campo-dinheiro input { width: 100%; min-width: 0; min-height: 40px; }
.grupo-novo { margin-top: 12px; }
.grupo-novo summary { font-size: 14px; font-weight: 700; color: var(--p-destaque); cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.grupo-novo[open] summary { margin-bottom: 8px; }
.cartao-adicionais [data-adicionar-grupo] { margin-top: 12px; }
.cartao-adicionais .erro-campo { margin: 0 0 10px; }
.item-adicionais { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--p-suave); }
@media (max-width: 599px) {
  /* Celular: nome da opção com a linha toda; preço embaixo. */
  .linha-opcao { grid-template-columns: minmax(0, 1fr) 36px; row-gap: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--p-tracejado); }
  .linha-opcao > input:not([type='hidden']) { grid-column: 1; grid-row: 1; }
  .linha-opcao .campo-dinheiro { grid-column: 1; grid-row: 2; max-width: 170px; }
  .linha-opcao [data-remover-opcao] { grid-column: 2; grid-row: 1; }
}

/* =====================================================================
   CADASTRO (e link "Criar meu cardápio grátis" no Entrar)
   ===================================================================== */
.cadastro .entrar-caixa { max-width: 460px; }
.entrar-trocar { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--p-suave); }
.entrar-trocar a { font-weight: 700; }
.entrar .erro-campo { margin: 0; color: var(--perigo); font-size: 13px; font-weight: 600; }
.entrar .campo-painel [aria-invalid='true'] { border-color: var(--perigo); }
.dica-campo { margin: 0; font-size: 12px; color: var(--p-meta); }
.dica-campo.slug-livre { color: var(--verde-texto); font-weight: 700; }
.dica-campo.slug-ocupado { color: var(--perigo); font-weight: 700; }
.campo-endereco {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 0 0 12px;
  border: 1.5px solid var(--p-borda-input);
  border-radius: var(--r-botao);
  background: #fff;
  overflow: hidden;
}
.campo-endereco:focus-within { border-color: var(--p-destaque); box-shadow: var(--p-foco); }
.campo-endereco span { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--p-meta); }
.campo-painel .campo-endereco input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px 0 2px; border: 0; box-shadow: none; font-weight: 700; }
.campo-endereco:has([aria-invalid='true']) { border-color: var(--perigo); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.aceite input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--p-destaque); }
.aceite-erro { color: var(--perigo-forte); }

/* =====================================================================
   BIBLIOTECA DE ADICIONAIS (aba Adicionais) e caixinhas na tela do produto
   ===================================================================== */
.painel-conteudo .painel-adicionais-pagina { max-width: 900px; }
.grupo-card .cat-conta { font-weight: 600; }
.grupo-card .grupo-botoes { display: flex; } /* aqui os botões aparecem também no celular */
.linha-opcao-lista { display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.linha-opcao-lista + .linha-opcao-lista { border-top: 1px solid var(--p-divisor); }
.opcao-lista-nome { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.opcao-lista-preco { font-size: 14px; font-weight: 700; color: var(--p-suave); white-space: nowrap; }
.linha-opcao-lista.esgotado .opcao-lista-nome, .linha-opcao-lista.esgotado .opcao-lista-preco { opacity: 0.45; text-decoration: line-through; }
.linha-opcao-lista.esgotado .rotulo-disponivel { color: var(--p-meta); }
.grupo-uso { margin: 0; padding: 12px 18px; border-top: 1px solid var(--p-divisor); background: #fcfaf7; border-radius: 0 0 var(--r-card) var(--r-card); font-size: 13px; color: var(--p-meta); }
@media (max-width: 899px) {
  .grupo-card .cat-cabecalho { flex-wrap: wrap; }
  .grupo-card .grupo-botoes { margin-left: 0; width: 100%; }
}

/* Página do grupo */
.painel-conteudo .painel-grupo { max-width: 760px; padding-bottom: 90px; }
.form-grupo > * + *, .painel-grupo > .zona-perigo { margin-top: 14px; }
.painel-grupo .grupo-adicional { border: 0; padding: 0; background: none; }
.painel-grupo [data-remover-grupo] { display: none !important; } /* um grupo por página */
.produtos-categoria { margin: 0 0 14px; padding: 0; border: 0; }
.produtos-categoria legend { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font: 700 15px var(--fonte-titulo); }
.link-marcar { padding: 0; border: 0; background: none; color: var(--p-destaque); font-size: 12px; font-weight: 600; cursor: pointer; }
.marcar-produto { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.marcar-produto input { width: 20px; height: 20px; margin: 0; accent-color: var(--p-destaque); }

/* Tela do produto: caixinhas dos grupos */
.lista-grupos-marcar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.grupo-marcar { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--p-borda-input); border-radius: var(--r-bloco); cursor: pointer; }
.grupo-marcar:has(input:checked) { border-color: var(--p-destaque); background: var(--p-destaque-suave); }
.grupo-marcar input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--p-destaque); }
.grupo-marcar strong { display: block; font-size: 15px; }
.grupo-marcar small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--p-meta); }
.cartao-adicionais .rotulo-extra { font-weight: 600; color: var(--p-destaque) !important; text-decoration: none; }

/* Faixa do MODO SUPORTE (admin dentro do painel de um restaurante). */
.painel-principal { --altura-faixa-suporte: 56px; }
.faixa-suporte { min-height: var(--altura-faixa-suporte); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 16px; background: #5b2e91; color: #fff; font-size: 14px; }
.faixa-suporte form { margin: 0; }
.faixa-suporte button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--r-botao); background: transparent; color: #fff; font-weight: 700; cursor: pointer; }

/* =================== ADMIN (/admin) — barra escura para não confundir com o painel do restaurante =================== */
.adm-topo { position: sticky; top: 0; z-index: 10; background: var(--p-escuro); color: #fff; }
.adm-topo-linha { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 12px 16px 6px; }
.adm-marca { font: 800 18px var(--fonte-titulo); color: #fff !important; text-decoration: none; }
.adm-marca span, .adm-selo { padding: 2px 8px; border-radius: var(--r-pilula); background: var(--p-destaque); color: #fff; font: 700 11px var(--fonte-texto); text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.adm-quem { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #cfc6bd; }
.adm-topo form { margin: 0; }
.adm-sair { min-height: 34px; padding: 0 12px; border: 1px solid #5a514a; border-radius: var(--r-pequeno); background: transparent; color: #fff; font-weight: 600; cursor: pointer; }
.adm-abas { display: flex; gap: 4px; max-width: 1100px; margin: 0 auto; padding: 0 10px; overflow-x: auto; }
.adm-abas a { padding: 10px 12px; border-bottom: 3px solid transparent; color: #cfc6bd !important; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.adm-abas a[aria-current='page'] { border-bottom-color: var(--p-destaque); color: #fff !important; }
.adm-conteudo { max-width: 1100px; margin: 0 auto; padding: 18px 16px 48px; }
main.adm-pagina > * + * { margin-top: 14px; }
.adm-titulo, .adm-detalhe-topo h1 { margin: 0; font: 800 24px var(--fonte-titulo); }
.adm-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.adm-numeros div { padding: 14px; border: 1px solid var(--p-borda); border-radius: var(--r-bloco); background: var(--p-superficie); }
.adm-numeros strong { display: block; font: 800 24px var(--fonte-titulo); overflow-wrap: anywhere; }
.adm-numeros span { font-size: 13px; color: var(--p-meta); }
.adm-cadastro { font-size: 14px; color: var(--p-suave); }
.adm-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-filtros input, .adm-filtros select { min-height: 44px; padding: 0 12px; border: 1px solid var(--p-borda-input); border-radius: var(--r-botao); background: var(--p-superficie); font: inherit; color: inherit; }
.adm-filtros input { flex: 1 1 220px; min-width: 0; }
.adm-filtros .botao-contorno { min-height: 44px; }
.adm-vazio { padding: 24px; border: 1px dashed var(--p-tracejado); border-radius: var(--r-card); text-align: center; color: var(--p-suave); }
.adm-conta { font-size: 13px; color: var(--p-meta); }
.adm-lista, .adm-convites, .adm-registro { margin: 0; padding: 0; list-style: none; border: 1px solid var(--p-borda); border-radius: var(--r-card); background: var(--p-superficie); overflow: hidden; }
.adm-lista li + li, .adm-convites li + li, .adm-registro li + li { border-top: 1px solid var(--p-divisor); }
.adm-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 16px; color: var(--p-texto) !important; text-decoration: none; }
.adm-linha:hover { background: var(--p-hover); }
.adm-linha-nome { min-width: 0; }
.adm-linha-nome strong { font-size: 16px; }
.adm-linha-nome small { display: block; margin-top: 2px; overflow-wrap: anywhere; font-size: 13px; color: var(--p-meta); }
.adm-linha-dados { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; color: var(--p-suave); }
.adm-etiqueta { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pilula); background: var(--p-chip); color: var(--p-suave); font-size: 12px; font-weight: 700; vertical-align: middle; }
.adm-bloqueado, .etiqueta-cancelado { background: var(--perigo-fundo); color: var(--perigo-forte); border: 1px solid var(--perigo-borda-suave); }
.adm-ativo, .etiqueta-aberto { background: var(--verde-fundo); color: var(--verde-texto); }
.etiqueta-usado { background: var(--st-aceito-f); color: var(--st-aceito-t); }
.adm-voltar { font-size: 14px; font-weight: 600; text-decoration: none; }
.adm-detalhe-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-detalhe-topo .adm-etiqueta { margin: 0; }
.adm-detalhe { max-width: 760px; }
.adm-dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.adm-dados dt { font-weight: 700; color: var(--p-suave); }
.adm-dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.adm-dono { display: block; }
.adm-dono small { color: var(--p-meta); }
.adm-form-bloquear { display: flex; flex-direction: column; gap: 10px; }
.adm-form-bloquear input { min-height: 44px; padding: 0 12px; border: 1px solid var(--p-borda-input); border-radius: var(--r-botao); font: inherit; }
.adm-form-convite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.adm-form-convite .campo-painel { flex: 1 1 260px; }
.adm-form-convite .adm-campo-dias { flex: 0 0 120px; }
.adm-form-convite .botao-cheio { min-height: 46px; }
.adm-convite { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.adm-convite > small { font-size: 13px; color: var(--p-meta); }
.adm-convite p { margin: 0; font-size: 14px; }
.convite-novo { background: var(--p-destaque-suave); }
.convite-cancelado, .convite-vencido { opacity: 0.7; }
.adm-convite-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.adm-convite-topo .adm-etiqueta { margin: 0; }
.adm-copiar { display: flex; gap: 8px; }
.adm-copiar input { flex: 1; min-width: 0; min-height: 42px; padding: 0 10px; border: 1px solid var(--p-borda-input); border-radius: var(--r-pequeno); background: var(--p-lista); font: 13px ui-monospace, monospace; color: var(--p-texto); }
.adm-copiar .botao-contorno { min-height: 42px; }
.adm-convite form { margin: 0; }
.adm-link-perigo { padding: 4px 0; border: 0; background: none; color: var(--perigo); font-size: 13px; font-weight: 600; cursor: pointer; }
.adm-registro li { display: grid; grid-template-columns: 120px 1fr auto; gap: 4px 14px; padding: 12px 16px; font-size: 14px; }
.adm-registro time { color: var(--p-meta); font-size: 13px; }
.adm-registro small { display: block; overflow-wrap: anywhere; color: var(--p-suave); font-size: 13px; }
.adm-registro-quem { color: var(--p-meta) !important; }
@media (max-width: 599px) {
  .adm-registro li { grid-template-columns: 1fr; }
  .adm-quem { display: none; }
  .adm-topo-linha { justify-content: space-between; }
}
@media (min-width: 700px) {
  .adm-bloquear { flex-direction: row; align-items: flex-end; }
  .adm-bloquear > div { flex: 1; }
  .adm-form-bloquear { flex: 1; flex-direction: row; align-items: flex-end; }
  .adm-form-bloquear .campo-painel { flex: 1; }
  .adm-bloquear .botao-perigo-contorno { width: auto; }
}

/* Minha conta */
.painel-conta { max-width: 560px; }
.painel-conta > * + * { margin-top: 14px; }
.painel-conta .erro-campo { margin: 0; color: var(--perigo); font-size: 13px; font-weight: 600; }
.conta-dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.conta-dados dt { font-weight: 700; color: var(--p-suave); }
.conta-dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .conta-dados { grid-template-columns: 1fr; gap: 2px; } .conta-dados dd { margin-bottom: 8px; } }
@media (min-width: 900px) {
  /* Uma linha só no computador (altura fixa: o botão de som fica logo abaixo dela). */
  .faixa-suporte { flex-wrap: nowrap; height: var(--altura-faixa-suporte); }
  .faixa-suporte span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .faixa-suporte button { white-space: nowrap; }
}