/* ════════════════════════════════════════════════════════════════════════
   operacao.css — estilos do cockpit "Ao vivo" + filas + modais da torre de
   operação (app/pages/admin/operacao.php).

   Extraído do <style> inline da página (mais leve + cacheável) e alinhado ao
   design system DelyGO:
     • Acentos de IDENTIDADE (antes índigo/azul hardcoded) → var(--primary),
       que o header.php reescreve para a cor de marca de cada loja.
     • Cores SEMÂNTICAS de status mantidas (verde = pronto, vermelho =
       urgência/cancelar, âmbar = pausa/SLA) — comunicam estado, não marca.
     • Estrutura via tokens: var(--border), var(--radius), var(--shadow-*),
       var(--transition).
     • Grid do pulse fluido (auto-fit) + foco visível em todos os alvos
       interativos + respeito a prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Banner unificado de alertas operacionais — caixa única tipo "avisos" ── */
/* Card neutro (como os demais): cada item carrega a própria cor de nível, em vez
   de um fundo vermelho fixo que destoava quando o aviso era só âmbar. */
.dash-alert-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-sm);
}
/* O seletor de classe vence o [hidden] do UA stylesheet; sem isto a barra de
   alertas continua renderizando vazia (borda/padding/sombra) quando não há
   nenhum alerta. */
.dash-alert-card[hidden] { display: none; }
.dash-alert-item {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: #1f2937;
  font-size: 14px; line-height: 1.4;
  padding: 9px 12px; border-radius: 10px;
  border-left: 3px solid transparent;
}
a.dash-alert-item { transition: filter var(--transition); }
a.dash-alert-item:hover { filter: brightness(.97); }
a.dash-alert-item:hover .dash-alert-item__msg { text-decoration: underline; }
a.dash-alert-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Ícone em badge tonalizado por nível (espelha os chips do "Ao vivo"). */
.dash-alert-item__icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.dash-alert-item__body { flex: 1; min-width: 0; }
.dash-alert-item__label { font-weight: 800; text-transform: uppercase; letter-spacing: .2px; }
.dash-alert-item__msg   { font-weight: 700; }
.dash-alert-item__cta   { font-weight: 500; color: #6b7280; }
.dash-alert-item--critical { background: #fef2f2; border-left-color: #dc2626; }
.dash-alert-item--critical .dash-alert-item__icon  { background: #fee2e2; color: #dc2626; }
.dash-alert-item--critical .dash-alert-item__label { color: #dc2626; }
.dash-alert-item--warning  { background: #fffbeb; border-left-color: #d97706; }
.dash-alert-item--warning  .dash-alert-item__icon  { background: #fef3c7; color: #b45309; }
.dash-alert-item--warning  .dash-alert-item__label { color: #b45309; }

/* ── Card "Ao vivo" — tema claro (override do gradiente escuro do style.css) ── */
.dash-ops {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: #111827;
}
/* Barra superior na cor de marca da loja (antes índigo fixo). */
.dash-ops::before { background: linear-gradient(90deg, var(--primary), var(--primary-hover)); }
.dash-ops__title  { color: #374151; font-size: 12px; }
.dash-ops__meta   { color: #9ca3af; }

/* Grid do pulse fluido: acompanha a largura disponível (2 col no celular →
   até 7–8 em telas largas) em vez das 3 colunas fixas do style.css. */
.dash-ops__pulse,
.dash-ops__pulse[data-cols="2"] {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dash-ops__pulse-chip {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.dash-ops__pulse-icon  { background: var(--primary-soft); color: var(--primary); border-radius: 8px; }
.dash-ops__pulse-label { color: #94a3b8; font-size: 10px; letter-spacing: .06em; }
.dash-ops__pulse-value { color: #0f172a; line-height: 1.15; }
.dash-ops__pulse-frac  { color: #9ca3af; font-size: 12px; font-weight: 500; }
.dash-ops__pulse-hint  { color: #9ca3af; }
a.dash-ops__pulse-chip:hover {
  background: #f3f4f6; border-color: #d1d5db;
  transform: translateY(-1px);
}
a.dash-ops__pulse-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Chips de status com destaque para valores críticos (semântico). */
.dash-ops__pulse-chip.is-alert { background: #fef2f2; border-color: #fecaca; }
.dash-ops__pulse-chip.is-alert .dash-ops__pulse-icon  { background: #fee2e2; color: #dc2626; }
.dash-ops__pulse-chip.is-alert .dash-ops__pulse-value { color: #dc2626; }
.dash-ops__pulse-chip.is-alert .dash-ops__pulse-label { color: #ef4444; }
.dash-ops__pulse-chip.is-warn  { background: #fffbeb; border-color: #fde68a; }
.dash-ops__pulse-chip.is-warn  .dash-ops__pulse-icon  { background: #fef3c7; color: #d97706; }
.dash-ops__pulse-chip.is-warn  .dash-ops__pulse-value { color: #d97706; }
.dash-ops__pulse-chip.is-warn  .dash-ops__pulse-label { color: #f59e0b; }

/* Chip clicável (rola até a fila correspondente). */
.dash-ops__pulse-chip.is-clickable { cursor: pointer; }
.dash-ops__pulse-chip.is-clickable:hover {
  background: #f3f4f6; border-color: #d1d5db; transform: translateY(-1px);
}
.dash-ops__pulse-chip.is-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Flash de destaque na fila alvo após o clique no chip. */
.op-flash { animation: opFlash 1.2s ease-out; }
@keyframes opFlash {
  0%   { box-shadow: 0 0 0 3px rgba(37, 99, 235, .45); }
  100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .op-flash { animation: none; }
}

/* ── Hero: toque de marca + relógio responsivo + botões ───────────────────── */
/* Halo sutil da cor de marca no canto superior esquerdo (atrás da saudação) —
   dá identidade ao topo sem poluir o fundo branco. primary-soft = 8% da marca. */
.dash-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(130% 125% at 0% 0%, var(--primary-soft), transparent 42%),
    #fff;
}
/* Botões de status da loja: compactos, sem estilo inline no markup. */
.dash-hero__shop form { margin: 0; }
.dash-hero__shop .btn { padding: 8px 14px; font-size: 13px; }
/* CTA "Assinar PRO" do banner de trial (antes com estilo inline). */
.dash-trial__cta { padding: 8px 16px; font-size: 13px; }
/* No mobile o relógio deixa de sumir e vira uma linha compacta "HH:MM · DIA". */
@media (max-width: 860px) {
  .dash-hero__clock {
    display: flex; flex-direction: row; align-items: baseline; gap: 8px;
    justify-self: start;
  }
  .dash-hero__clock-time { font-size: 30px; }
  .dash-hero__clock-date { margin-top: 0; }
}

/* ── Hero: estado pausado (âmbar semântico) + modal de pausa ──────────────── */
.dash-hero__shop-status--paused {
  background: #fef3c7; color: #92400e; border-color: #fcd34d;
}
.dash-hero__shop-status--paused .dot { background: #f59e0b; }
.dash-pause-modal {
  border: 0; border-radius: 16px; padding: 0; max-width: 460px; width: 92%;
  box-shadow: 0 24px 48px rgba(15,23,42,.2);
}
.dash-pause-modal::backdrop { background: rgba(15,23,42,.55); backdrop-filter: blur(4px); }
.dash-pause-form { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dash-pause-form h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.dash-pause-form h3 i { color: #f59e0b; }
.dash-pause-form p { margin: 0; color: #6b7280; font-size: 14px; line-height: 1.4; }
.dash-pause-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dash-pause-opt { position: relative; cursor: pointer; }
.dash-pause-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dash-pause-opt span {
  display: block; padding: 14px 8px; text-align: center; border-radius: 10px;
  border: 2px solid var(--border); font-weight: 600; transition: all var(--transition);
}
.dash-pause-opt input:checked + span {
  background: #fef3c7; border-color: #f59e0b; color: #92400e;
}
.dash-pause-opt:hover span { border-color: #d1d5db; }
.dash-pause-opt input:checked + span:hover { border-color: #f59e0b; }
.dash-pause-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.dash-pause-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* ── "Gerenciar pedidos": link discreto no header do "Ao vivo" ────────────── */
/* (antes era um bloco .op-actions próprio que pesava entre o Ao vivo e as filas) */
/* O header precisa poder quebrar (title em cima, meta+link embaixo) e o card
   encolher no grid — senão o link nowrap empurra o min-content além do viewport
   e causa overflow horizontal no mobile. */
.dash-ops { min-width: 0; }
.dash-ops__head { flex-wrap: wrap; gap: 6px 12px; }
.dash-ops__head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.dash-ops__manage {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.dash-ops__manage:hover { color: var(--primary-hover); gap: 8px; }
.dash-ops__manage:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.dash-ops__manage i { font-size: 14px; }
/* Botão de som (alerta de novo pedido): ligado = primário; mudo = cinza. */
.dash-sound-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--primary); font-size: 15px; cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.dash-sound-btn:hover { background: #f8fafc; }
.dash-sound-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dash-sound-btn.is-muted { color: #9ca3af; }
/* Botão de modo quiosque (tela cheia) — ativo fica preenchido na cor da marca. */
.dash-kiosk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: #6b7280; font-size: 15px; cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.dash-kiosk-btn:hover { background: #f8fafc; color: #374151; }
.dash-kiosk-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dash-kiosk-btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* A11y (#13): conteúdo só para leitores de tela (região live de anúncios). */
.op-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* O atributo [hidden] precisa vencer o `display` definido nessas classes — senão
   o navegador exibe o elemento mesmo com hidden (regra de classe do autor ganha
   da regra [hidden]{display:none} do user-agent). */
.op-undo-toast[hidden],
.op-queues-empty[hidden] { display: none !important; }

/* Desfazer rápido (#12) — toast fixo no rodapé com barra de tempo (12s). */
.op-undo-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 95; display: inline-flex; align-items: center; gap: 12px;
  max-width: 92vw; padding: 12px 16px; border-radius: 12px; overflow: hidden;
  background: #1f2937; color: #fff; font-size: 14px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45);
}
.op-undo-toast__icon { color: #34d399; font-size: 16px; flex-shrink: 0; }
.op-undo-toast__msg  { font-weight: 600; }
.op-undo-toast__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: transparent; border: 1px solid rgba(255, 255, 255, .4); color: #fff;
  padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background var(--transition);
}
.op-undo-toast__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.op-undo-toast__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.op-undo-toast__btn:disabled { opacity: .5; cursor: not-allowed; }
.op-undo-toast__bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--primary); transform-origin: left;
  animation: opUndoBar 12s linear forwards;
}
@keyframes opUndoBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .op-undo-toast__bar { animation: none; } }

/* Modo quiosque: esconde o cromo do admin (topbar/menu/overlay) para o tablet
   fixo de operação mostrar só a torre. Espelha o antigo dashboard-tv-mode. */
body.op-kiosk .sidebar,
body.op-kiosk .sidebar-overlay,
body.op-kiosk .admin-mobile-topbar { display: none !important; }
body.op-kiosk .admin-layout,
body.op-kiosk .admin-layout.is-compact,
body.op-kiosk .admin-layout.is-drawer-only { grid-template-columns: 1fr !important; }
body.op-kiosk .admin-main { padding: 16px 22px !important; }

/* A <section class="grid"> que envolve o cockpit usa coluna implícita `auto`
   (dimensionada por max-content). Um grid aninhado com max-width grande estica
   essa coluna além do viewport → overflow horizontal. Fixar a coluna em
   minmax(0,1fr) força os filhos a respeitar a largura disponível. Só vale nesta
   página (operacao.css não carrega em outras). */
section.grid { grid-template-columns: minmax(0, 1fr); }

/* ── Torre: filas operacionais lado a lado ────────────────────────────────── */
/* Agrupa aceite/despacho/retirada/servir. auto-fill (não auto-fit) mantém as
   trilhas de ~560px mesmo com uma única fila visível — ela não estica para a
   largura toda. 2 colunas a partir de ~840px de container, 1 abaixo.
   minmax(min(100%, 400px), …) evita overflow horizontal no celular. */
.op-queues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: 16px;
  align-items: start;
  min-width: 0;
  max-width: 1136px; /* 2×560 + 16 de gap */
}
/* As filas já têm max-width:560px; dentro do grid cada uma preenche sua trilha
   (≤560) e fica ancorada ao início da célula, sem vãos. */
.op-queues > .op-dispatch { width: 100%; }

/* Estado vazio da torre — ocupa a largura toda do grid e fica centralizado. */
.op-queues-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 32px 16px; text-align: center;
  background: var(--surface); border: 1px dashed var(--border); border-radius: 14px;
  color: #6b7280;
}
.op-queues-empty > i { font-size: 30px; color: #10b981; margin-bottom: 4px; }
.op-queues-empty__title { font-size: 15px; font-weight: 700; color: #374151; }
.op-queues-empty__sub { font-size: 13px; }

/* ── Filas (despacho / aceite / retirada / servir) ────────────────────────── */
.op-dispatch {
  max-width: 560px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.op-dispatch__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.op-dispatch__title { font-weight: 700; color: #111827; }
.op-dispatch__title i { color: #f59e0b; margin-right: 6px; }
.op-dispatch__count {
  font-size: 12px; font-weight: 700; color: #92400e;
  background: #fef3c7; border-radius: 999px; padding: 2px 9px;
}
/* Em volume alto a lista não cresce sem limite: cabe ~5-6 itens e rola por
   dentro (a contagem total fica no cabeçalho da fila). Mantém a torre compacta. */
.op-dispatch__list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: min(440px, 60vh); overflow-y: auto;
  scrollbar-width: thin; scrollbar-gutter: stable;
}
.op-dispatch__list::-webkit-scrollbar { width: 8px; }
.op-dispatch__list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; }
.op-dispatch__list::-webkit-scrollbar-thumb:hover { background: #b6bcc4; }
.op-dispatch-item {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  padding: 10px 12px; border: 1px solid #eef0f3; border-radius: var(--radius); background: #fafafa;
}
.op-dispatch-item.is-urgent { border-color: #fecaca; background: #fef2f2; }
.op-dispatch-item__info { min-width: 0; }
.op-dispatch-item__num { font-weight: 700; color: #111827; display: flex; align-items: center; gap: 8px; }
.op-dispatch-item__time { font-size: 11px; font-weight: 600; color: #9ca3af; }
.op-dispatch-item.is-urgent .op-dispatch-item__time { color: #dc2626; }
.op-dispatch-item__name { font-size: 13px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-dispatch-item__total { font-weight: 700; color: #111827; text-align: right; white-space: nowrap; }
.op-dispatch-item__unpaid { font-size: 11px; font-weight: 600; color: #b45309; }
/* Countdown de SLA da etapa (etaTag): folgado/quase/estourado. */
.op-dispatch-item__eta { margin-top: 3px; }
.op-eta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
}
.op-eta i { font-size: 10px; }
.op-eta--ok   { background: #ecfdf5; color: #047857; }
.op-eta--soon { background: #fffbeb; color: #b45309; }
.op-eta--over { background: #fef2f2; color: #b91c1c; }
.op-dispatch-item__action { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.op-dispatch-item__select {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px;
  border: 1px solid #d1d5db; border-radius: 9px; background: var(--surface); color: #111827;
}
.op-dispatch-item__select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.op-dispatch-item__btn {
  flex-shrink: 0; padding: 8px 14px; font-size: 13px; font-weight: 600;
  border: 0; border-radius: 9px; background: #10b981; color: #fff; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.op-dispatch-item__btn:hover:not(:disabled) { background: #059669; }
.op-dispatch-item__btn:active:not(:disabled) { transform: translateY(1px); }
.op-dispatch-item__btn:focus-visible { outline: 2px solid #047857; outline-offset: 2px; }
.op-dispatch-item__btn:disabled { opacity: .6; cursor: not-allowed; }
.op-dispatch-item__msg { grid-column: 1 / -1; font-size: 12px; color: #dc2626; }

/* Fila de aceite — head em vermelho (urgência) e botão "Conferir" na cor de
   marca, ocupando a linha toda da ação (sem select). */
.op-accept .op-dispatch__title i { color: #dc2626; }
/* A fila de aceite é prioritária: cresce com o conteúdo em vez de criar scroll
   interno, pra o atendente ver todos os pedidos novos de uma vez. */
.op-accept .op-dispatch__list { max-height: none; overflow-y: visible; }
/* Badge "NOVO" + destaque do item ainda não conferido na fila de aceite. */
.op-new-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 4px;
  background: #2563eb; color: #fff;
  animation: opNewPulse 1.6s ease-in-out infinite;
}
.op-dispatch-item.is-new { box-shadow: inset 3px 0 0 #2563eb; }
.op-dispatch-item.is-new.is-urgent { box-shadow: inset 3px 0 0 #dc2626; }
@keyframes opNewPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .op-new-badge { animation: none; }
}
.op-accept .op-dispatch__count { color: #b91c1c; background: #fee2e2; }
.op-accept .op-dispatch-item__action .op-dispatch-item__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--primary);
}
.op-accept .op-dispatch-item__action .op-dispatch-item__btn:hover:not(:disabled) { background: var(--primary-hover); }
.op-accept .op-dispatch-item__action .op-dispatch-item__btn:focus-visible { outline-color: var(--primary); }
/* Aceite rápido (#9): "Aceitar" em verde (ação positiva rápida) e "Conferir"
   como secundário (ghost) quando os dois aparecem juntos. */
.op-accept .op-dispatch-item__action .op-quick-accept-btn { background: #10b981; }
.op-accept .op-dispatch-item__action .op-quick-accept-btn:hover:not(:disabled) { background: #059669; }
.op-accept .op-dispatch-item__action .op-quick-accept-btn:focus-visible { outline-color: #047857; }
.op-accept .op-dispatch-item__action .op-dispatch-item__btn--ghost {
  background: var(--surface); color: #374151; border: 1px solid var(--border);
}
.op-accept .op-dispatch-item__action .op-dispatch-item__btn--ghost:hover:not(:disabled) {
  background: #f3f4f6; color: #111827;
}

/* Filas de conclusão presencial (retirada / servir) — head/contagem em verde
   e botão de ação ocupando a linha toda. O verde do botão já vem do base. */
.op-ready .op-dispatch__title i { color: #10b981; }
.op-ready .op-dispatch__count { color: #047857; background: #d1fae5; }
.op-ready .op-dispatch-item__action .op-dispatch-item__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}

/* #16b — "Aguardando retirada": despachados que o entregador ainda não retirou.
   Estado NORMAL = informativo (azul/slate): o pedido foi designado mas não saiu
   de fato. Quando há item atrasado (.op-await--late), o head fica âmbar/alerta.
   Itens individuais atrasados usam .is-urgent (vermelho) do base. */
.op-await .op-dispatch__title i { color: #60a5fa; }
.op-await .op-dispatch__count { color: #1d4ed8; background: #dbeafe; }
.op-await .op-dispatch-item__name i { color: #94a3b8; margin-right: 2px; }
/* variante alerta: pelo menos um pedido passou do SLA */
.op-await.op-await--late { border-color: #fcd34d; box-shadow: 0 0 0 1px #fcd34d inset; }
.op-await.op-await--late .op-dispatch__title i { color: #d97706; }
.op-await.op-await--late .op-dispatch__count { color: #92400e; background: #fef3c7; }
.op-await .op-dispatch-item.is-urgent .op-dispatch-item__name i { color: #d97706; }
.op-await .op-dispatch-item__action .op-dispatch-item__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #475569;
}
.op-await .op-dispatch-item__action .op-dispatch-item__btn:hover:not(:disabled) { background: #334155; }
.op-await .op-dispatch-item.is-urgent .op-dispatch-item__action .op-dispatch-item__btn { background: #d97706; }
.op-await .op-dispatch-item.is-urgent .op-dispatch-item__action .op-dispatch-item__btn:hover:not(:disabled) { background: #b45309; }
.op-await .op-dispatch-item__action .op-dispatch-item__btn:focus-visible { outline-color: #1d4ed8; }
/* "Entreguei ao entregador": confirmação positiva da retirada → verde, distinto
   do "Reverter" (slate). Mantém o verde mesmo quando o item está atrasado. */
.op-await .op-dispatch-item__action .op-await-confirm-btn,
.op-await .op-dispatch-item.is-urgent .op-dispatch-item__action .op-await-confirm-btn { background: #16a34a; }
.op-await .op-dispatch-item__action .op-await-confirm-btn:hover:not(:disabled),
.op-await .op-dispatch-item.is-urgent .op-dispatch-item__action .op-await-confirm-btn:hover:not(:disabled) { background: #15803d; }
.op-await .op-dispatch-item__action .op-await-confirm-btn:focus-visible { outline-color: #047857; }

/* Selo "Aguardando entregador confirmar": ponto âmbar pulsante deixa óbvio que
   o pedido está parado esperando o entregador confirmar a retirada no app.
   Atrasado (.is-late) → vermelho estático, sem pulso (alerta, não expectativa). */
.op-await-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1;
  background: #fef3c7; color: #92400e;
}
.op-await-badge__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #d97706; animation: opAwaitPulse 1.6s ease-out infinite;
}
.op-await-badge.is-late { background: #fee2e2; color: #991b1b; }
.op-await-badge.is-late .op-await-badge__dot { background: #dc2626; animation: none; }
/* Avisou: entregador a caminho → azul pulsante = call-to-action pro atendente
   entregar a sacola e confirmar a retirada no balcão. */
.op-await-badge.is-acked { background: #dbeafe; color: #1e40af; }
.op-await-badge.is-acked .op-await-badge__dot { background: #2563eb; animation: opAckPulse 1.6s ease-out infinite; }
@keyframes opAwaitPulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}
@keyframes opAckPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@media (prefers-reduced-motion: reduce) { .op-await-badge__dot { animation: none; } }

/* Fila de produção (só-leitura) — head/contagem em laranja (mesma família do
   chip "Em produção" do pulse) e pill de etapa por item. */
.op-production .op-dispatch__title i { color: #f97316; }
.op-production .op-dispatch__count { color: #c2410c; background: #ffedd5; }
.op-prod-stage {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.op-prod-stage--accepted { background: #e0e7ff; color: #4338ca; }
.op-prod-stage--cooking  { background: #ffedd5; color: #c2410c; }

/* Badge de modalidade — espelha .od-modality-tag do kanban (orders-board.css)
   para manter cor/ícone idênticos entre o cockpit e o quadro de pedidos. */
.op-modality-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; padding: 2px 6px;
  border-radius: 4px; width: fit-content;
}
.op-modality-tag--delivery { background: #eff6ff; color: #1d4ed8; }
.op-modality-tag--pickup   { background: #f5f3ff; color: #6d28d9; }
.op-modality-tag--dinein   { background: #f0fdf4; color: #15803d; }

/* ── Modal de conferência do aceite ───────────────────────────────────────── */
.op-accept-modal {
  border: 0; border-radius: 16px; padding: 0; width: min(440px, 94vw);
  box-shadow: 0 24px 60px -12px rgba(15,23,42,.35); color: #111827;
}
.op-accept-modal::backdrop { background: rgba(15,23,42,.55); backdrop-filter: blur(4px); }
/* Modal de atalhos de teclado (#10). */
.op-shortcuts-list { list-style: none; margin: 0; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.op-shortcuts-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #374151; }
.op-shortcuts-list kbd {
  flex-shrink: 0; min-width: 34px; text-align: center;
  background: #f3f4f6; border: 1px solid #d1d5db; border-bottom-width: 2px;
  border-radius: 6px; padding: 3px 8px; font-family: inherit; font-weight: 700; font-size: 12px; color: #111827;
}
.op-accept-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid #f1f3f5;
}
.op-accept-modal__head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.op-accept-modal__close {
  border: 0; background: transparent; font-size: 24px; line-height: 1;
  color: #9ca3af; cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.op-accept-modal__close:hover { color: #111827; }
.op-accept-modal__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.op-accept-modal__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.op-accept-row { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; }
.op-accept-row__label { flex-shrink: 0; color: #6b7280; font-weight: 600; min-width: 78px; }
.op-accept-row__value { color: #111827; font-weight: 600; }
.op-accept-row__value.is-warn { color: #b45309; }
.op-accept-items { border-top: 1px solid #f1f3f5; padding-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.op-accept-items__line { display: flex; gap: 8px; font-size: 14px; }
.op-accept-items__qty { font-weight: 800; color: var(--primary); flex-shrink: 0; }
.op-accept-items__obs { color: #9ca3af; font-size: 12px; font-style: italic; }
/* #bebidas — selo "servir já" nos itens de bar/balcão (não esperam a cozinha) */
.op-item-serve {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: #0369a1; background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.28); border-radius: 999px;
  padding: 1px 7px; vertical-align: middle;
}
.op-item-serve i { font-size: 11px; }
.op-accept-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid #f1f3f5; padding-top: 10px; font-size: 15px;
}
.op-accept-total strong { font-size: 18px; }
/* Taxa de serviço na conta da mesa: subtotal + taxa em tom suave, total a pagar
   herda .op-accept-total. O checkbox isenta a taxa no fechamento. */
.op-table-fee .op-accept-row__value { color: #374151; }
.op-table-fee-waive {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 13px; color: #6b7280; cursor: pointer;
}
.op-table-fee-waive input { width: 16px; height: 16px; cursor: pointer; }
/* Dividir a conta: input do nº de pessoas + valor por pessoa calculado. */
.op-table-split {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f3f5;
}
.op-table-split__label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; }
.op-table-split__label input {
  width: 64px; padding: 6px 8px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; font-size: 14px; text-align: center;
}
.op-table-split__per { font-size: 15px; font-weight: 700; color: #111827; }
.op-accept-modal__msg { padding: 0 18px; font-size: 13px; color: #dc2626; font-weight: 600; }
/* Ações do aceite: coluna (botão "Aprovar e imprimir" full-width no topo quando
   há impressão) + linha com Cancelar/Aprovar. Sem impressão, só a linha aparece. */
.op-accept-modal__actions { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
.op-accept-modal__actions-row { display: flex; gap: 10px; }
.op-accept-modal__btn--approve-print { flex: none; width: 100%; }
.op-accept-modal__btn {
  flex: 1; padding: 11px 14px; font-size: 14px; font-weight: 700;
  border: 0; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--transition), opacity var(--transition), transform var(--transition);
}
.op-accept-modal__btn:active:not(:disabled) { transform: translateY(1px); }
.op-accept-modal__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.op-accept-modal__btn:disabled { opacity: .6; cursor: default; }
.op-accept-modal__btn--cancel { background: #fee2e2; color: #b91c1c; }
.op-accept-modal__btn--cancel:hover:not(:disabled) { background: #fecaca; }
.op-accept-modal__btn--cancel:focus-visible { outline-color: #dc2626; }
.op-accept-modal__btn--approve { background: #10b981; color: #fff; }
.op-accept-modal__btn--approve:hover:not(:disabled) { background: #059669; }
.op-accept-modal__btn--approve:focus-visible { outline-color: #047857; }

/* Modal "Pedidos da mesa" — reusa .op-accept-modal; cada pedido num bloco. */
.op-table-order {
  border: 1px solid #eef0f2; border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.op-table-order__head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.op-table-order__num { font-weight: 800; color: #111827; }
.op-table-order__status {
  background: var(--primary-soft); color: var(--primary); padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.op-table-order__time { margin-left: auto; color: #9ca3af; font-size: 12px; }
.op-table-order__foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #f1f3f5; padding-top: 6px; font-size: 12px; color: #6b7280;
}
.op-table-order__foot strong { font-size: 14px; color: #111827; }
.op-table-modal__print { background: var(--primary-soft); color: var(--primary); }
.op-table-modal__print:hover:not(:disabled) { filter: brightness(.96); }

/* ── Grid principal: visão geral (1 coluna, largura contida) ──────────────── */
.op-main-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 560px; }

/* ── Sidebar (conteúdo principal — sempre visível) ────────────────────────── */
.op-sidebar { display: flex; flex-direction: column; gap: 12px; }
.op-sidebar-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
/* Entregadores no topo: largura total para o grid de chips aproveitar o espaço
   horizontal (vários entregadores por linha). */
.op-couriers-top { max-width: none; }
.op-sidebar-section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; font-size: 13px; font-weight: 700; color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.op-sidebar-section__head i { color: #9ca3af; margin-right: 4px; }
.op-sidebar-section__badge {
  background: #f3f4f6; color: #374151;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
/* Card de Entregadores em alerta: sem ninguém livre, header/badge em vermelho
   + faixa de aviso no topo da lista. */
.op-sidebar-section.is-alert { border-color: #fca5a5; }
.op-sidebar-section.is-alert .op-sidebar-section__head { background: #fef2f2; color: #b91c1c; }
.op-sidebar-section.is-alert .op-sidebar-section__head i { color: #dc2626; }
.op-sidebar-section.is-alert .op-sidebar-section__badge { background: #fee2e2; color: #b91c1c; }
.op-couriers-warn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; font-size: 12px; font-weight: 600;
  color: #b91c1c; background: #fef2f2; border-bottom: 1px solid #fee2e2;
}
.op-couriers-warn i { flex-shrink: 0; }
.op-couriers-warn a { color: inherit; text-decoration: underline; }

/* Mesas */
.op-table-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-top: 1px solid #f1f3f5;
  transition: background var(--transition);
}
.op-table-row:hover { background: #fafbfc; }
.op-table-info {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; background: none; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer; border-radius: 6px; transition: color var(--transition);
}
.op-table-info strong { font-size: 13px; color: #111827; display: flex; align-items: center; gap: 5px; }
.op-table-info__chev { font-size: 10px; color: #c4c9d0; transition: transform var(--transition), color var(--transition); }
.op-table-info:hover strong { color: var(--primary); }
.op-table-info:hover .op-table-info__chev { color: var(--primary); transform: translateX(2px); }
.op-table-info:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.op-table-meta { font-size: 11px; color: #9ca3af; }
.op-table-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.op-table-total { font-size: 13px; font-weight: 700; color: #111827; }
.op-table-form { margin: 0; }
.op-table-close-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); font-size: 12px; font-weight: 600; color: #374151;
  cursor: pointer; transition: all var(--transition);
}
.op-table-close-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.op-table-close-btn:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }

/* Entregadores — grid compacto (vários por linha) em vez de lista 1-por-linha. */
.op-couriers-stats { display: inline-flex; align-items: center; gap: 6px; }
.op-couriers-stat {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.op-couriers-stat--free   { background: #d1fae5; color: #047857; }
.op-couriers-stat--pickup { background: #fef3c7; color: #b45309; }  /* despachado, não retirou */
.op-couriers-stat--route  { background: #dbeafe; color: #1d4ed8; }  /* retirou, em trânsito */
.op-couriers-stat--off    { background: #f3f4f6; color: #9ca3af; }

.op-couriers-grid {
  display: grid; gap: 8px; padding: 12px 14px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.op-couriers-offgrid { padding-top: 0; }
.op-courier-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-size: 13px; min-width: 0;
  transition: background var(--transition);
}
.op-courier-item:hover { background: #fafbfc; }
.op-courier-name {
  flex: 1; min-width: 0; font-weight: 600; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Pill de status (substitui o antigo dot + texto "· livre"): mais escaneável. */
.op-courier-pill {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
}
.op-courier-pill--free   { background: #d1fae5; color: #047857; }
.op-courier-pill--pickup { background: #fef3c7; color: #b45309; }  /* despachado, não retirou */
.op-courier-pill--route  { background: #dbeafe; color: #1d4ed8; }  /* retirou, em trânsito */
.op-courier-pill--off    { background: #f3f4f6; color: #9ca3af; }

/* Toggle "+N offline": recolhe os offline quando a frota é grande. */
.op-couriers-offtoggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 8px 14px; border: 0; border-top: 1px solid #f1f3f5;
  background: none; color: #6b7280; font-size: 12px; font-weight: 600;
  cursor: pointer; text-align: left; transition: color var(--transition);
}
.op-couriers-offtoggle:hover { color: #374151; }
.op-couriers-offtoggle i { font-size: 11px; }
.op-couriers-offtoggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ── SLA drawer (sempre off-canvas) ───────────────────────────────────────── */
.op-sla-side {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw); background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 32px -12px rgba(15, 23, 42, .25);
  padding: 18px 16px; overflow-y: auto; z-index: 90;
  transform: translateX(100%); transition: transform .25s ease;
}
.op-sla-side.is-open { transform: translateX(0); }
.op-sla-drawer-btn {
  position: fixed; left: 16px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 0; border-radius: 999px;
  background: #ef4444; color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 8px 24px -6px rgba(239, 68, 68, .55); z-index: 80; cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.op-sla-drawer-btn:active { transform: translateY(1px); }
.op-sla-drawer-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; box-shadow: 0 0 0 4px rgba(239,68,68,.45); }
.op-sla-drawer-badge {
  background: rgba(255,255,255,.25); padding: 2px 8px; border-radius: 999px; font-size: 12px;
}
.op-sla-drawer-btn.is-ok { background: #10b981; box-shadow: 0 8px 24px -6px rgba(16, 185, 129, .45); }
.op-sla-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; margin-bottom: 12px;
  font-weight: 700; font-size: 14px;
}
.op-sla-head i { color: #f59e0b; margin-right: 6px; }
.op-sla-count { background: #fef3c7; color: #92400e; padding: 2px 10px; border-radius: 999px; font-size: 12px; }
.op-sla-list { display: flex; flex-direction: column; gap: 8px; }
.op-sla-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: #fff7ed; border: 1px solid #fdba74; text-decoration: none; color: inherit; cursor: pointer;
  transition: background var(--transition);
}
.op-sla-item:hover { background: #ffedd5; }
.op-sla-item:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.op-sla-item--danger { background: #fee2e2; border-color: #f87171; }
.op-sla-item--danger:hover { background: #fecaca; }
.op-sla-item__num { font-weight: 700; min-width: 56px; font-size: 13px; }
.op-sla-item__info { flex: 1; min-width: 0; }
.op-sla-item__name { font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-sla-item__status { font-size: 12px; color: #6b7280; }
.op-sla-item__time { font-size: 13px; font-weight: 700; color: #b91c1c; }
.op-sla-empty { display: none; padding: 16px 12px; color: #16a34a; font-size: 13px; text-align: center; }
.op-sla-empty i { font-size: 18px; margin-right: 4px; }
.op-sla-empty.is-visible { display: block; }

/* ── Acessibilidade: respeita quem prefere menos movimento ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dash-ops__live-dot { animation: none; }
  .dash-ops__pulse-chip:hover,
  .op-dispatch-item__btn:active,
  .op-accept-modal__btn:active,
  .op-sla-drawer-btn:active { transform: none; }
  .op-sla-side { transition: none; }
}