/* ============================================================================
   PAINEL DO CLIENTE  —  CHROME + LAYOUT (Fase P0)
   ----------------------------------------------------------------------------
   Estilo do admin novo e amigavel do cliente. Consome os tokens --peb-* de
   client-panel-tokens.css (dois temas, seletor sol/lua). Regras do projeto:
   sem !important, sem estilo inline, cartao com DEGRAU de cor SOBRE o painel,
   icones via CSS mask (nao <img>+filter, que deixa 59 icones invisiveis no
   escuro — ver reference_editor_temas), mobile-first.
   ========================================================================== */

.cp-html { height: 100%; }

/* Reset de box-model escopado ao painel: sem ele, width:100% + padding estoura a
   viewport (cp-main dava 422px em 390 → scroll horizontal no mobile). */
.cp-body *, .cp-body *::before, .cp-body *::after { box-sizing: border-box; }

.cp-body {
  margin: 0;
  min-height: 100%;
  background: var(--peb-workspace);
  color: var(--peb-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.cp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Icones (CSS mask; herdam a cor via currentColor) -------------------- */
.cp-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--cp-icon) no-repeat center / contain;
  mask: var(--cp-icon) no-repeat center / contain;
}
.cp-icon--message  { --cp-icon: url("/assets/icons/message-circle.svg"); }
.cp-icon--leads    { --cp-icon: url("/assets/icons/file-text.svg"); }
.cp-icon--media    { --cp-icon: url("/assets/icons/image.svg"); }
.cp-icon--metrics  { --cp-icon: url("/assets/icons/chart-bar.svg"); }
.cp-icon--lgpd     { --cp-icon: url("/assets/icons/shield-check.svg"); }
.cp-icon--edit     { --cp-icon: url("/assets/icons/edit.svg"); }
.cp-icon--home     { --cp-icon: url("/assets/icons/layout.svg"); }
.cp-icon--sun      { --cp-icon: url("/assets/icons/sun.svg"); }
.cp-icon--moon     { --cp-icon: url("/assets/icons/moon.svg"); }
.cp-icon--logout   { --cp-icon: url("/assets/icons/logout.svg"); }
.cp-icon--user     { --cp-icon: url("/assets/icons/user.svg"); }
.cp-icon--team     { --cp-icon: url("/assets/icons/users-group.svg"); }
/* Cartoes do "Vamos comecar" (VAL-JOR-011). Mesmos arquivos que o mockup M3
   usa; `globe` e o link.svg porque nao ha globo no acervo. */
.cp-icon--utensils     { --cp-icon: url("/assets/icons/utensils.svg"); }
.cp-icon--car          { --cp-icon: url("/assets/icons/car.svg"); }
.cp-icon--whatsapp     { --cp-icon: url("/assets/icons/whatsapp.svg"); }
.cp-icon--globe        { --cp-icon: url("/assets/icons/link.svg"); }
.cp-icon--mail         { --cp-icon: url("/assets/icons/mail.svg"); }
.cp-icon--search       { --cp-icon: url("/assets/icons/search.svg"); }
.cp-icon--check        { --cp-icon: url("/assets/icons/check.svg"); }
.cp-icon--check-circle { --cp-icon: url("/assets/icons/check-circle.svg"); }
.cp-icon--arrow-right  { --cp-icon: url("/assets/icons/arrow-right.svg"); }
/* Ajuda contextual (VAL-JOR-013). Nao ha "life-buoy" no acervo; o info-circle
   e o mesmo simbolo que o mockup M3 usa na faixa de contexto. */
.cp-icon--help          { --cp-icon: url("/assets/icons/info.svg"); }
/* Pedido online (VAL-ORD-002/003/004): como o dono recebe, quando abre e ate
   onde entrega. O caminhao entra no chrome (e nao na folha da tela) porque e a
   navegacao do painel que o desenha, em toda tela. */
.cp-icon--money         { --cp-icon: url("/assets/icons/tag.svg"); }
.cp-icon--clock         { --cp-icon: url("/assets/icons/clock.svg"); }
.cp-icon--truck         { --cp-icon: url("/assets/icons/truck.svg"); }
.cp-icon--chevron-down  { --cp-icon: url("/assets/icons/chevron-down.svg"); }
/* Comanda e desfazer (20/09/2026): o cartão fechado do quadro mostra as
   ações só como ícone, e estas duas não tinham um. Não há impressora no
   acervo; o papel (`file-text`) é o que a comanda é. */
.cp-icon--receipt       { --cp-icon: url("/assets/icons/file-text.svg"); }
.cp-icon--undo          { --cp-icon: url("/assets/icons/rotate-left.svg"); }
/* Sino de pedido novo (VAL-ORD-010). Nao ha sino no acervo de 144 icones; o
   alert.svg e o simbolo de "olha isto agora", que e o que o sino diz. */
.cp-icon--bell          { --cp-icon: url("/assets/icons/alert.svg"); }
/* Retirada na loja (VAL-ORD-011). Faz par com o caminhao da entrega: no cartao
   do pedido o icone e a primeira coisa lida, antes do rotulo. */
.cp-icon--store         { --cp-icon: url("/assets/icons/store.svg"); }
/* Base compartilhada (2026-08): sem a variavel `--cp-icon` a mascara nao casa e
   o icone vira um QUADRADO CHEIO de currentColor. Estes sete estavam declarados
   so em arquivos de tela (team, orders), entao qualquer tela nova que os usasse
   mostrava o quadrado. Lugar deles e aqui, junto do `.cp-icon`. */
.cp-icon--x             { --cp-icon: url("/assets/icons/x.svg"); }
.cp-icon--zap           { --cp-icon: url("/assets/icons/zap.svg"); }
.cp-icon--alert         { --cp-icon: url("/assets/icons/alert.svg"); }
/* Estava declarado so em `client-panel-menu-photo.css`, e o painel inicial nao
   carrega aquele arquivo — a observacao discreta do cartao viraria o quadrado
   cheio descrito acima. Mesmo motivo dos sete de cima, mesmo lugar. */
.cp-icon--info          { --cp-icon: url("/assets/icons/info.svg"); }
.cp-icon--flame         { --cp-icon: url("/assets/icons/flame.svg"); }
.cp-icon--eye           { --cp-icon: url("/assets/icons/eye.svg"); }
.cp-icon--eye-off       { --cp-icon: url("/assets/icons/eye-off.svg"); }
.cp-icon--copy          { --cp-icon: url("/assets/icons/copy.svg"); }
.cp-icon--calendar      { --cp-icon: url("/assets/icons/calendar.svg"); }
.cp-icon--link          { --cp-icon: url("/assets/icons/link.svg"); }
.cp-icon--plus          { --cp-icon: url("/assets/icons/plus.svg"); }
.cp-icon--sparkles      { --cp-icon: url("/assets/icons/sparkles.svg"); }
.cp-icon--palette       { --cp-icon: url("/assets/icons/palette.svg"); }
.cp-icon--arrow-left    { --cp-icon: url("/assets/icons/arrow-left.svg"); }
/* "O que esta no ar" (modulo de recorrencia, 2026-08). O megafone e o simbolo
   de anuncio; entra no chrome porque e a navegacao do painel que o desenha, em
   toda tela — mesma razao do caminhao da entrega. */
.cp-icon--megaphone     { --cp-icon: url("/assets/icons/megaphone.svg"); }
.cp-icon--percent       { --cp-icon: url("/assets/icons/percent.svg"); }
.cp-icon--star          { --cp-icon: url("/assets/icons/star.svg"); }
.cp-icon--heart         { --cp-icon: url("/assets/icons/heart.svg"); }
.cp-icon--image         { --cp-icon: url("/assets/icons/image.svg"); }
.cp-icon--trash         { --cp-icon: url("/assets/icons/delete.svg"); }
.cp-icon--refresh       { --cp-icon: url("/assets/icons/refresh.svg"); }
/* Valonel Balcão (22/09/2026): a entrada "Aplicativo do balcão" da navegação e o botão de baixar. */
.cp-icon--monitor       { --cp-icon: url("/assets/icons/monitor.svg"); }
.cp-icon--download      { --cp-icon: url("/assets/icons/download.svg"); }

/* O sol aparece no tema escuro (clique -> claro); a lua no tema claro. */
.cp-theme-toggle .cp-icon--moon { display: none; }
:root[data-peb-theme="light"] .cp-theme-toggle .cp-icon--sun  { display: none; }
:root[data-peb-theme="light"] .cp-theme-toggle .cp-icon--moon { display: inline-block; }

/* ---- Shell -------------------------------------------------------------- */
.cp-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.cp-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--peb-glass-panel);
  border-bottom: 1px solid var(--peb-glass-line);
}

.cp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--peb-text-title);
  text-decoration: none;
  font-size: 1.05rem;
}

.cp-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cp-user {
  display: none;
  color: var(--peb-text-muted);
  font-size: 0.9rem;
}
@media (min-width: 640px) { .cp-user { display: inline; } }

.cp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 0.6rem;
  border: 1px solid var(--peb-line);
  background: var(--peb-surface);
  color: var(--peb-text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cp-iconbtn:hover { background: var(--peb-surface-2); border-color: var(--peb-line-hover); }
.cp-iconbtn:focus-visible {
  outline: 2px solid var(--peb-accent);
  outline-offset: 2px;
}
.cp-iconbtn--text {
  width: auto;
  padding: 0 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---- Navegacao de areas (mobile-first, rolagem horizontal) --------------- */
.cp-nav {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  background: var(--peb-glass-panel);
  border-bottom: 1px solid var(--peb-glass-line);
  scrollbar-width: thin;
}

/* A29: no celular esta faixa não cabe inteira (medido pela P24: 930px de
   itens em 390px de tela — sete pílulas, ~133px cada) e o navegador não
   desenha barra de rolagem visível por padrão, então "Quem te procurou",
   "Equipe", "Privacidade" e "Ajuda" ficavam fora sem nenhum sinal. A régua já
   escolheu rolagem (não quebrar em duas linhas — ver o comentário do
   `panel_nav.php`); aqui só falta o AVISO de que há mais pílula depois da
   borda. 2rem (32px) é cerca de um quarto de uma pílula média — corta o
   suficiente para avisar sem esconder um item inteiro. Só no celular: no
   desktop a faixa cabe inteira e a máscara não teria o que cortar. */
@media (max-width: 640px) {
  .cp-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
  }
}
.cp-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  color: var(--peb-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cp-nav-link:hover { color: var(--peb-text-title); background: var(--peb-surface); }
.cp-nav-link--active {
  color: var(--peb-accent-ink);
  background: var(--peb-accent);
}
.cp-nav-link--active:hover { color: var(--peb-accent-ink); background: var(--peb-accent-strong); }

/* ---- Conteudo ----------------------------------------------------------- */
.cp-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* O miolo de 960px é feito para LER: formulário, texto, uma coluna de cartões.
   Quadro é outra coisa — ali largura é quantos pedidos cabem lado a lado sem
   rolar, e o limite de leitura espremia as cinco colunas de /painel/pedidos a
   ~170px, quebrando o endereço palavra por palavra (print do dono, 20/09/2026).

   Quem pede a tela larga é a TELA, pelo `mainWide` que o controller passa — não
   o CSS alcançando o shell de longe. O padrão continua sendo o miolo estreito,
   que é o certo para todo o resto do painel. */
.cp-main--wide {
  max-width: none;
  padding-inline: 1.5rem;
}

@media (max-width: 640px) {
  .cp-main--wide { padding-inline: 1rem; }
}

.cp-welcome { margin-bottom: 1.5rem; }
.cp-welcome__title {
  margin: 0 0 0.25rem;
  color: var(--peb-text-title);
  font-size: 1.5rem;
  font-weight: 700;
}
.cp-welcome__subtitle { margin: 0; color: var(--peb-text-muted); }
.cp-today { margin: 0 0 1.5rem; }
.cp-today__title { margin: 0 0 .75rem; color: var(--peb-text-title); font-size: 1.1rem; }

/* ---- Grade de atalhos --------------------------------------------------- */
.cp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) { .cp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .cp-grid { grid-template-columns: repeat(3, 1fr); } }

.cp-tile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--peb-line);
  background: var(--peb-surface);       /* DEGRAU acima do painel */
  color: var(--peb-text);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
a.cp-tile:hover {
  background: var(--peb-surface-2);
  border-color: var(--peb-line-hover);
  transform: translateY(-2px);
}
a.cp-tile:focus-visible { outline: 2px solid var(--peb-accent); outline-offset: 2px; }

.cp-tile--soon { opacity: 0.85; }

.cp-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cp-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--peb-accent-soft);
  color: var(--peb-accent-text);
}
.cp-tile__icon .cp-icon { width: 1.4rem; height: 1.4rem; }

.cp-tile__title {
  margin: 0;
  color: var(--peb-text-title);
  font-size: 1.05rem;
  font-weight: 700;
}
.cp-tile__desc { margin: 0; color: var(--peb-text-muted); font-size: 0.9rem; }

.cp-badge {
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--peb-surface-muted);
  color: var(--peb-text-invert);
}

/* ---- Mensagens flash ---------------------------------------------------- */
.cp-flash {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  font-size: 0.92rem;
}
.cp-flash--success {
  color: var(--peb-success-text);
  background: var(--peb-success-soft);
  border-color: var(--peb-success-line);
}
.cp-flash--error {
  color: var(--peb-danger-text);
  background: var(--peb-danger-soft);
  border-color: var(--peb-danger-border);
}
/* Aviso e notícia (21/10/2026): eram só da tela de foto do cardápio; agora
   valem em todo o painel (Uso de IA: "Compra cancelada", "Ainda não recebemos"). */
.cp-flash--warning, .cp-flash--notice {
  color: var(--peb-accent-text);
  background: var(--peb-accent-soft);
  border-color: var(--peb-accent);
}
/* O recado de "salvo" com o Desfazer dentro, à direita (M7, lote 2; conserto
   do A3, D4: um desenho só em toda tela). Botão e "×" com 44 px, contorno na
   cor do texto do recado (claro e escuro) e dentro da região anunciada. */
.cp-desfazer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.cp-desfazer__t { flex: 1 1 16rem; margin: 0; }
.cp-desfazer__antes { font-size: 0.85rem; }
.cp-desfazer__form { margin: 0; }
.cp-desfazer__btn,
.cp-desfazer__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  border-radius: 0.6rem;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cp-desfazer__btn { padding: 0.45rem 0.9rem; border: 1px solid currentColor; background: transparent; }
.cp-desfazer__fechar { min-width: 44px; margin: -0.35rem -0.5rem -0.35rem 0; padding: 0; border: 0; background: transparent; }
.cp-desfazer__fechar[hidden] { display: none; }
.cp-desfazer__btn:hover,
.cp-desfazer__fechar:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.cp-desfazer__btn:focus-visible,
.cp-desfazer__fechar:focus-visible { outline: 2px solid var(--peb-accent); outline-offset: 2px; }
.cp-desfazer__btn:disabled { opacity: 0.6; cursor: progress; }
/* No cardápio, o recado nasce dentro do prato tocado (D2). */
[data-cpm-item] > .cp-desfazer { margin: 0.75rem 0 0; }

/* ---- Rodape ------------------------------------------------------------- */
.cp-foot {
  padding: 1rem;
  text-align: center;
  color: var(--peb-text-muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--peb-chrome-line);
  background: var(--peb-glass-panel);
}

/* ============================================================================
   LOGIN
   ============================================================================ */
.cp-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}
.cp-auth-card {
  width: 100%;
  max-width: 26rem;
  padding: 1.75rem;
  border-radius: 1rem;
  border: 1px solid var(--peb-line);
  background: var(--peb-surface);         /* cartao acima do fundo workspace */
}
.cp-auth-head { text-align: center; margin-bottom: 1.25rem; }
.cp-auth-head__title { margin: 0 0 0.25rem; color: var(--peb-text-title); font-size: 1.4rem; font-weight: 700; }
.cp-auth-head__subtitle { margin: 0; color: var(--peb-text-muted); font-size: 0.92rem; }

.cp-form { display: flex; flex-direction: column; gap: 1rem; }
.cp-field { display: flex; flex-direction: column; gap: 0.35rem; }
.cp-label { color: var(--peb-text-title); font-size: 0.9rem; font-weight: 600; }
.cp-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid var(--peb-line);
  background: var(--peb-glass-panel);
  color: var(--peb-text-title);
  font-size: 0.95rem;
}
.cp-input:focus {
  outline: 2px solid var(--peb-accent);
  outline-offset: 1px;
  border-color: var(--peb-accent);
}
.cp-error { color: var(--peb-danger-text); font-size: 0.8rem; }

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.cp-btn--primary { background: var(--peb-accent); color: var(--peb-accent-ink); width: 100%; }
.cp-btn--primary:hover { background: var(--peb-accent-strong); }
/* Secundario da faixa de ajuda (VAL-JOR-013): mesma altura do primario, peso
   visual menor. Nao herda a largura total — na faixa os dois botoes convivem. */
.cp-btn--ghost {
  background: transparent;
  color: var(--peb-text-title);
  border-color: var(--peb-chrome-line);
}
.cp-btn--ghost:hover { background: var(--peb-surface-2); }
.cp-btn:focus-visible { outline: 2px solid var(--peb-accent); outline-offset: 2px; }

.cp-auth-foot { margin-top: 1.25rem; text-align: center; color: var(--peb-text-muted); font-size: 0.8rem; }

/* ---- Convite de equipe ------------------------------------------------- */
.cp-invite {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  padding: 1.25rem;
  border: 1px solid var(--peb-line);
  border-radius: 0.9rem;
  background: var(--peb-surface);
}
.cp-invite-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--peb-text-muted);
  font-size: 0.72rem;
  text-align: center;
}
.cp-invite-progress li {
  padding: 0.35rem 0.2rem;
  border-bottom: 3px solid var(--peb-line);
}
.cp-invite-progress li.is-active { color: var(--peb-text-title); border-color: var(--peb-accent); }
.cp-invite-step { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.cp-invite-step legend { margin-bottom: 0.75rem; color: var(--peb-text-title); font-size: 1.1rem; font-weight: 700; }
.cp-invite-schedule { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-invite-schedule .cp-field:last-child { grid-column: 1 / -1; }
.cp-invite-summary { margin: 0; padding: 1rem; border-radius: 0.7rem; background: var(--peb-surface-muted); color: var(--peb-text-title); }
.cp-invite-actions { display: flex; justify-content: flex-end; gap: 0.75rem; }
.cp-invite-actions .cp-btn--primary { width: auto; }
@media (max-width: 559px) {
  .cp-invite { padding: 1rem; }
  .cp-invite-progress { grid-template-columns: 1fr; text-align: left; }
  .cp-invite-progress li { display: none; }
  .cp-invite-progress li.is-current { display: block; }
  .cp-invite-schedule { grid-template-columns: 1fr; }
  .cp-invite-schedule .cp-field:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-tile, a.cp-tile:hover, .cp-iconbtn, .cp-nav-link, .cp-btn { transition: none; transform: none; }
}

/* ---- Privacidade do cliente --------------------------------------------- */
.cp-note {
  margin: 0 0 1rem;
  color: var(--peb-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.cp-note strong { color: var(--peb-text-title); }
.cp-note code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: var(--peb-glass-panel);
  border: 1px solid var(--peb-line);
  font-size: 0.85em;
}
.cp-policy {
  min-height: 22rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}
.cp-policy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.cp-policy-actions .cp-note { margin: 0; flex: 1 1 16rem; }

/* ---- Sino de pedido novo (VAL-ORD-010) ---------------------------------- */
/* Fica na topbar, ao lado do tema e do sair, porque o dono precisa ver o
   pedido chegar de QUALQUER tela — quando o pedido cai ele esta no cardapio,
   nao na tela de pedidos. */
.cp-orderbell {
  position: relative;
  display: inline-flex;
}

.cp-orderbell__btn { position: relative; }

/* O numero cavalga a borda do botao: e o que faz o olho pegar sem precisar
   ler. Fora do fluxo para nao empurrar o icone. */
.cp-orderbell__count {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--peb-danger, #dc2626);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}
/* Zero nao vira bolinha vermelha permanente: alarme que nunca apaga e alarme
   que se ignora. */
.cp-orderbell__count--zero { display: none; }

.cp-orderbell__drop {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  width: min(20rem, calc(100vw - 2rem));
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--peb-line);
  border-radius: 0.75rem;
  background: var(--peb-surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
}

/* No celular a gaveta nao pode se pendurar no sino: o sino fica no meio da
   topbar (tema e sair vem depois dele), entao um `right: 0` relativo a ele joga
   320px de gaveta 51px para FORA da tela pela esquerda — medido em 390px.
   Aqui ela passa a se ancorar na janela, com a mesma folga dos dois lados. */
@media (max-width: 30rem) {
  .cp-orderbell__drop {
    position: fixed;
    top: 4.25rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

.cp-orderbell__empty {
  margin: 0;
  color: var(--peb-text-muted);
  font-size: 0.9rem;
}

.cp-orderbell__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-orderbell__item {
  border-bottom: 1px solid var(--peb-line);
  font-size: 0.92rem;
}
.cp-orderbell__item:last-child { border-bottom: 0; }

/* O aviso passou a ser um link de verdade (VAL-ORD-010, 21/08/2026): clicar
   levava a nada, porque o item era só texto num `<li>`. O padding sai do
   `<li>` para o link, que fica com a linha inteira como área de clique. */
.cp-orderbell__link {
  display: block;
  padding: 0.55rem 0.4rem;
  margin: 0 -0.4rem;
  border-radius: 0.35rem;
  color: inherit;
  text-decoration: none;
}
.cp-orderbell__link:hover { background: var(--peb-surface-2); }
.cp-orderbell__link:focus-visible { outline: 2px solid var(--peb-accent); outline-offset: -2px; }