/* Identidade visual do orquestrador — régie de transmissão, não dashboard corporativo.
   Ver _shared/observability/design.md pra intenção completa por trás de cada escolha.
   Paleta é fixa (não adicionar matiz nova) — profundidade/textura vêm só de opacidade
   e sombra sobre essas mesmas cores. */

:root {
  --ink: #08090B;
  --panel: #101216;
  --panel-2: #151820;
  --amber: #F5A623;
  --amber-2: #FFCB6B;
  --ok: #22C55E;
  --err: #C1554A;
  --texto: #EDEFF2;
  --texto-fraco: #8A909C;
  --borda: #22262F;

  /* Derivados das mesmas cores acima (alpha only) — dão profundidade sem introduzir
     matiz nova. */
  --sombra: rgba(0, 0, 0, 0.45);
  --sombra-forte: rgba(0, 0, 0, 0.6);
  --realce: rgba(237, 239, 242, 0.04);
  --amber-glow: rgba(245, 166, 35, 0.28);
  --amber-tenue: rgba(245, 166, 35, 0.1);
  --ok-tenue: rgba(34, 197, 94, 0.12);
  --err-tenue: rgba(193, 85, 74, 0.12);

  --fonte-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --fonte-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio: 10px;
  --raio-peq: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--texto);
  font-family: var(--fonte-sans);
}

/* Vinheta muito sutil — tira a chapada do fundo plano sem virar textura chamativa. */
body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(232, 163, 61, 0.04), transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 110%, rgba(0, 0, 0, 0.5), transparent 60%),
    var(--ink);
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ─────────────────────────────────────────────────────────
   Faixa de tally — assinatura visual: luz de estado + timecode
   ao vivo, como o cabeçalho de um switcher de transmissão.
   ───────────────────────────────────────────────────────── */
.tally {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(180deg, var(--panel), var(--ink));
  border-bottom: 1px solid var(--borda);
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 var(--realce) inset;
}

.tally-esquerda {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.tally-ponto {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--texto-fraco);
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow 0.3s ease;
}
.tally-ponto.rodando {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-tenue), 0 0 8px var(--amber-glow);
  animation: pulsar 1.6s ease-in-out infinite;
}
.tally-ponto.erro {
  background: var(--err);
  box-shadow: 0 0 0 3px var(--err-tenue), 0 0 8px rgba(193, 85, 74, 0.35);
}
.tally-ponto.ocioso { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tenue); }

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.tally-timecode {
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────
   Layout geral
   ───────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  height: calc(100vh - 2.6rem);
}

.menu-lateral {
  width: 4.6rem;
  background: var(--panel);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 0.75rem;
  gap: 0.15rem;
}
.menu-lateral a {
  position: relative;
  color: var(--texto-fraco);
  text-decoration: none;
  font-family: var(--fonte-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.55rem 0.25rem;
  transition: color 0.15s ease, background 0.15s ease;
}
.menu-lateral a::before {
  content: attr(data-glifo);
  font-size: 0.95rem;
  opacity: 0.9;
}
.menu-lateral a::after {
  /* trilho de canal ativo — como o seletor de canal de uma mesa de mixagem */
  content: '';
  position: absolute;
  left: 0; top: 0.4rem; bottom: 0.4rem;
  width: 2px;
  background: transparent;
  transition: background 0.15s ease;
}
.menu-lateral a:hover { color: var(--texto); background: var(--realce); }
.menu-lateral a.ativo { color: var(--amber); }
.menu-lateral a.ativo::after { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }

.separador-menu {
  height: 1px;
  margin: 0.3rem 0.6rem;
  background: var(--borda);
}

/* Portal do Cliente não é "ainda não construído" como as outras — é decisão de
   negócio em aberto. Tracejado em vez de sólido comunica isso sem precisar de
   texto extra no menu (só no estado vazio da página). */
.menu-em-aberto { opacity: 0.6; border: 1px dashed transparent; }
.menu-em-aberto:hover { opacity: 1; border-color: var(--borda); background: transparent; }

.conteudo-principal {
  flex: 1;
  overflow: auto;
  padding: 1.5rem;
}

/* ─────────────────────────────────────────────────────────
   Split fixo: chat + status
   ───────────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.25rem;
  height: 100%;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* Painel — bezel de equipamento: sombra externa (afunda no fundo) + realce interno
   sutil (borda superior "pega luz") + cantos de viewfinder (assinatura visual). */
.painel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-shadow:
    0 1px 0 var(--realce) inset,
    0 8px 24px -12px var(--sombra);
}
.painel::before, .painel::after,
.painel > .canto-a, .painel > .canto-b { content: ''; }

/* Cantos de viewfinder: quatro marcas em L nos vértices do painel — motivo de
   régie/câmera, sharp/técnico de propósito, em contraste com o raio suave do painel. */
.painel { --canto: 14px; }
.painel::before,
.painel::after {
  position: absolute;
  width: var(--canto);
  height: var(--canto);
  pointer-events: none;
  opacity: 0.55;
}
.painel::before {
  top: 8px; left: 8px;
  border-top: 1.5px solid var(--texto-fraco);
  border-left: 1.5px solid var(--texto-fraco);
}
.painel::after {
  bottom: 8px; right: 8px;
  border-bottom: 1.5px solid var(--texto-fraco);
  border-right: 1.5px solid var(--texto-fraco);
}

.painel h2 {
  font-family: var(--fonte-mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--texto-fraco);
  margin: 0 0 0.85rem 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.estado-vazio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-fraco);
  font-family: var(--fonte-mono);
  font-size: 0.82rem;
  text-align: center;
  opacity: 0.75;
}

/* ─────────────────────────────────────────────────────────
   Chat — mensagens como fita de canal (channel strip): uma
   lasca de cor na borda indica quem falou, sem depender só
   do alinhamento esquerda/direita.
   ───────────────────────────────────────────────────────── */
.chat-corpo {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  padding-right: 0.25rem;
}

.msg { max-width: 88%; }
.msg-voce { align-self: flex-end; }
.msg-orquestrador { align-self: flex-start; }

.msg-rotulo {
  font-size: 0.68rem;
  color: var(--texto-fraco);
  font-family: var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
  padding-left: 0.6rem;
}
.msg-voce .msg-rotulo { text-align: right; padding-right: 0.6rem; padding-left: 0; }

.msg-corpo {
  border-radius: var(--raio-peq);
  padding: 0.55rem 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
  font-size: 0.92rem;
  border-left: 2px solid transparent;
}
.msg-voce .msg-corpo {
  background: var(--panel-2);
  border: 1px solid var(--borda);
  border-right: 2px solid var(--amber);
}
.msg-orquestrador .msg-corpo {
  background: var(--ink);
  border: 1px solid var(--borda);
  border-left: 2px solid var(--texto-fraco);
}

/* ─────────────────────────────────────────────────────────
   Card de confirmação de plano — trata como aviso de "ao vivo em
   breve": borda superior em tracejado âmbar/escuro (fita de
   marcação de estúdio), nunca decorativo demais.
   ───────────────────────────────────────────────────────── */
.card-plano {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 0.9rem 0.9rem 0.8rem;
  margin-bottom: 0.85rem;
  background: var(--panel-2);
  overflow: hidden;
}
.card-plano::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    -45deg, var(--amber) 0 8px, transparent 8px 16px
  );
  opacity: 0.7;
}
.card-plano-titulo {
  font-family: var(--fonte-mono);
  color: var(--amber);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  margin-bottom: 0.6rem;
}

/* Bloco "o que foi pedido" — mesma gramática visual do detalhe de pedido em
   triagem (.pedido-detalhe/.pedido-campo), pra quem confirma ver o pedido
   original (instruções, material de referência, plataforma/broll/música) em
   vez de só o plano técnico. Separado do plano por rótulo + régua fina —
   nunca aparece pra job sem pedido de cliente associado (ex.: via chat). */
.card-plano-secao {
  font-family: var(--fonte-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  opacity: 0.8;
  margin: 0 0 0.5rem;
}
.card-plano .pedido-detalhe {
  padding: 0 0 0.85rem;
  border-top: none;
  margin-top: 0;
}
.card-plano-divisor {
  border-top: 1px dashed var(--borda);
  margin: 0 0 0.7rem;
}

.card-plano ol {
  margin: 0 0 0.75rem 1.2rem;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.6;
}
.card-plano-acoes { display: flex; gap: 0.5rem; }

/* ─────────────────────────────────────────────────────────
   Botões — bevel de botão físico de console: sombra dupla
   (externa funda + realce no topo) e "afunda" ao clicar.
   ───────────────────────────────────────────────────────── */
.botao {
  border: none;
  border-radius: var(--raio-peq);
  padding: 0.55rem 1rem;
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 4px 10px -4px var(--sombra);
}
.botao:hover { filter: brightness(1.08); }
.botao:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0.25); }

.botao-primario { background: var(--amber); color: var(--ink); }
.botao-ok { background: var(--ok); color: var(--ink); }
.botao-err { background: var(--err); color: var(--ink); }

/* ─────────────────────────────────────────────────────────
   Barra de progresso — Status ao vivo (dado real: passo/total)
   ───────────────────────────────────────────────────────── */
.progresso-bloco { padding: 0.35rem 0 0.1rem; }
.progresso-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  margin-bottom: 0.55rem;
}
.progresso-linha .rotulo { display: flex; align-items: center; gap: 0.5rem; }
.progresso-linha .contagem { color: var(--texto-fraco); font-size: 0.75rem; }

.progresso-trilho {
  height: 6px;
  border-radius: 3px;
  background: var(--panel-2);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.progresso-preenchimento {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), #f0b962);
  box-shadow: 0 0 8px var(--amber-glow);
  transition: width 0.4s ease;
}

/* ─────────────────────────────────────────────────────────
   Formulário de comando
   ───────────────────────────────────────────────────────── */
.campo {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: var(--panel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-tenue);
  outline: none;
}
.campo::placeholder { color: var(--texto-fraco); opacity: 0.8; }

.linha-envio { display: flex; gap: 0.5rem; }
.linha-envio .campo { flex: 1; font-family: var(--fonte-sans); font-size: 0.92rem; }

.select-maquina {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--panel-2);
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}

.link-atualizar {
  display: inline-block;
  margin-top: 0.65rem;
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.link-atualizar:hover { color: var(--amber); }

/* ─────────────────────────────────────────────────────────
   Total de custo (página Custo) — o número que importa, grande
   e no topo, como um contador de estúdio.
   ───────────────────────────────────────────────────────── */
.total-custo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--panel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
}
.total-custo-rotulo {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.total-custo-valor {
  font-family: var(--fonte-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────
   Tabelas (Fila) — dado real, sem enfeite; status vira pílula
   colorida porque status já carrega significado em todo o resto
   da interface (mesma linguagem da tally).
   ───────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--borda);
}
th {
  color: var(--texto-fraco);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: var(--realce); }

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pilula::before {
  content: '';
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}
.pilula-running { color: var(--amber); background: var(--amber-tenue); }
.pilula-done { color: var(--ok); background: var(--ok-tenue); }
.pilula-erro { color: var(--err); background: var(--err-tenue); }
.pilula-neutro { color: var(--texto-fraco); background: var(--realce); }

/* ─────────────────────────────────────────────────────────
   Painel (cockpit) — bloco de ação em destaque, badge de
   contagem na navegação e sub-seções dentro do bloco.
   ───────────────────────────────────────────────────────── */
.badge-nav {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  min-width: 1rem;
  padding: 0.02rem 0.28rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.badge-acao {
  display: inline-block;
  min-width: 1.2rem;
  margin-left: 0.45rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
  text-align: center;
}
.painel-atencao {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-tenue), 0 6px 20px var(--sombra);
}
.painel-atencao > h2 { color: var(--amber); }
.sub-secao {
  margin: 1.15rem 0 0.55rem;
  font-family: var(--fonte-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sub-secao .cont {
  min-width: 1.1rem;
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: var(--realce);
  color: var(--texto);
  font-size: 0.7rem;
  text-align: center;
}
.sub-secao .sub-nota {
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--texto-fraco);
}

/* ─────────────────────────────────────────────────────────
   Fila unificada de pedidos (Painel) — uma linha por pedido em
   vez de 3 tabelas separadas por status. O tipo (triagem/erro/
   manual) vira só a cor da pílula, não uma seção com layout
   próprio. Cada linha expande (nativo <details>, sem JS) pra
   mostrar instruções/plataforma/b-roll/etc. sem poluir a linha
   fechada — várias podem ficar abertas ao mesmo tempo.
   ───────────────────────────────────────────────────────── */
.fila-pedidos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--borda);
  border-radius: var(--raio-peq);
  overflow: hidden;
}

.pedido-item { background: var(--panel-2); }

.pedido-cabecalho {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  transition: background 0.15s ease;
}
.pedido-cabecalho::-webkit-details-marker { display: none; }
.pedido-cabecalho::before {
  content: '▸';
  color: var(--texto-fraco);
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
details[open] > .pedido-cabecalho::before { content: '▾'; }
.pedido-cabecalho:hover { background: var(--realce); }

.pedido-cliente {
  font-family: var(--fonte-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto);
  flex-shrink: 0;
}
.pedido-produto {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  color: var(--texto-fraco);
  flex-shrink: 0;
  white-space: nowrap;
}
.pedido-resumo {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pedido-tempo {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  color: var(--texto-fraco);
  opacity: 0.75;
  flex-shrink: 0;
}
.pedido-acoes {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.pedido-detalhe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem 1.5rem;
  padding: 0 0.8rem 0.9rem calc(0.8rem + 1rem);
  border-top: 1px solid var(--borda);
  margin-top: -1px;
}
.pedido-campo.campo-largo { grid-column: 1 / -1; }
.pedido-campo .rotulo {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  opacity: 0.75;
  margin-top: 0.7rem;
  margin-bottom: 0.15rem;
}
.pedido-campo .valor {
  display: block;
  font-size: 0.82rem;
  color: var(--texto);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .pedido-cabecalho { flex-wrap: wrap; }
  .pedido-resumo { flex-basis: 100%; order: 5; }
}

/* ─────────────────────────────────────────────────────────
   Abas do Portal do Cliente — "Novo pedido" x "Meus pedidos"
   separam a ação mais frequente (pedir) da lista/histórico,
   que só cliente que já pediu algo precisa ver. Badge mostra
   quantos pedidos estão em andamento sem precisar abrir a aba.
   ───────────────────────────────────────────────────────── */
.portal-abas {
  display: flex;
  gap: 1.5rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--borda);
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
}
.portal-abas a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--texto-fraco);
  padding-bottom: 0.55rem;
  border-bottom: 2px solid transparent;
}
.portal-abas a:hover { color: var(--amber); text-decoration: none; }
.portal-abas a.ativa { color: var(--amber); border-bottom-color: var(--amber); }
.portal-abas-badge {
  background: var(--amber-tenue);
  color: var(--amber);
  border-radius: 20px;
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem;
}

/* Banner de aviso na aba "Novo pedido" quando há pedido em andamento —
   só um link fino, não repete a lista inteira (isso fica só em "Meus
   pedidos") pra não poluir a tela de quem só quer pedir algo novo. */
.aviso-em-andamento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--panel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 0.65rem 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.82rem;
}
.aviso-em-andamento a { color: var(--amber); white-space: nowrap; }

/* Cabeçalho de bloco em "Meus pedidos" (Em andamento / Concluídos / Não
   seguiu adiante) — mesma cor da tally daquele bloco, reforça o agrupamento
   sem precisar de mais elemento visual. */
.bloco-titulo::before {
  content: '●';
  font-size: 0.6em;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.bloco-titulo-aguardando::before { color: var(--texto-fraco); }
.bloco-titulo-rodando::before { color: var(--amber); }
.bloco-titulo-ocioso::before { color: var(--ok); }
.bloco-titulo-erro::before { color: var(--err); }

/* ─────────────────────────────────────────────────────────
   Cardápio (Portal do Cliente) — cartão compacto, conteúdo
   alinhado à esquerda: badge de ícone, nome do item, descrição
   curta do produto, preço em arkoras no canto (mesma moeda do
   saldo). Estado selecionado usa a borda âmbar do resto do
   sistema.
   ───────────────────────────────────────────────────────── */
.cardapio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
}

.cardapio-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  text-align: left;
  padding: 0.95rem 0.9rem 0.85rem;
  background: var(--panel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.cardapio-item:hover { border-color: var(--texto-fraco); }
.cardapio-item:active { transform: translateY(1px); }

.cardapio-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cardapio-item.selecionado {
  border-color: var(--amber);
  background: var(--amber-tenue);
  box-shadow: 0 0 0 1px var(--amber), 0 0 12px var(--amber-glow);
}

.cardapio-icone-badge {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.4rem;
  border-radius: var(--raio-peq);
  background: var(--amber-tenue);
  color: var(--amber);
  margin-bottom: 0.3rem;
}
.cardapio-icone-badge svg { width: 100%; height: 100%; }

.cardapio-nome {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto);
}

.cardapio-descricao {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--texto-fraco);
}

.cardapio-preco {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.disco-mini {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 28%, var(--amber-2), var(--amber) 62%, #a86e18 100%);
  color: var(--ink);
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 0.45rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}

.cardapio-item-info {
  cursor: default;
}
.cardapio-item-info:hover { border-color: var(--borda); }

/* ─────────────────────────────────────────────────────────
   Moeda de arkoras — saldo como badge no canto, não painel
   próprio. Disco amarelo com "A$" centralizado, mesmo espírito
   de ficha/moeda de estúdio (prop de cena, não ícone de app).
   ───────────────────────────────────────────────────────── */
.moeda-arkoras {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.7rem 0.2rem 0.25rem;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--borda);
}
.moeda-arkoras .disco {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 28%, var(--amber-2), var(--amber) 62%, #a86e18 100%);
  color: var(--ink);
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 3px rgba(0,0,0,0.35);
}
.moeda-arkoras .valor {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────
   Envio de arquivos — dois dropzones lado a lado, mesmo peso
   visual (insumo principal e referência são igualmente fáceis
   de entender, um não é "menos importante" que o outro na tela).
   ───────────────────────────────────────────────────────── */
.grid-arquivos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) {
  .grid-arquivos { grid-template-columns: 1fr; }
}

.dropzone {
  position: relative;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.4rem 1rem;
  text-align: center;
  border: 1.5px dashed var(--borda);
  border-radius: var(--raio-peq);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.arrastando {
  border-color: var(--amber);
  background: var(--amber-tenue);
}
.dropzone svg {
  width: 2rem;
  height: 2rem;
  color: var(--texto-fraco);
  transition: color 0.15s ease;
}
.dropzone:hover svg, .dropzone.arrastando svg { color: var(--amber); }
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone-titulo {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto);
}
.dropzone .instrucao {
  font-size: 0.78rem;
  color: var(--texto-fraco);
  line-height: 1.4;
  margin-top: -0.3rem;
}
.dropzone .nome-arquivo {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  color: var(--amber);
  word-break: break-all;
}
.botao-dropzone {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  background: var(--panel);
  color: var(--texto);
  border: 1px solid var(--borda);
  box-shadow: none;
}
.dropzone:hover .botao-dropzone, .dropzone.arrastando .botao-dropzone {
  border-color: var(--amber);
  color: var(--amber);
}

.botao-secundario {
  display: inline-block;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borda);
  box-shadow: none;
}
.botao-secundario:hover { border-color: var(--amber); color: var(--amber); filter: none; }

/* ─────────────────────────────────────────────────────────
   Login — mesma linguagem de painel, sozinho na tela.
   ───────────────────────────────────────────────────────── */
.tela-login {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(232, 163, 61, 0.06), transparent 65%),
    var(--ink);
}
.card-login {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 2rem 2rem 1.75rem;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 1px 0 var(--realce) inset, 0 20px 40px -20px var(--sombra-forte);
}
.card-login .tally-ponto { width: 0.5rem; height: 0.5rem; display: inline-block; margin-right: 0.5rem; vertical-align: middle; }
.card-login h1 {
  font-family: var(--fonte-mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--texto);
  margin: 0 0 0.3rem 0;
  display: flex;
  align-items: center;
}
.card-login .subtitulo {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  color: var(--texto-fraco);
  letter-spacing: 0.04em;
  margin: 0 0 1.4rem 0;
  padding-left: 1rem;
}
.card-login input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--ink);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  color: var(--texto);
  font-family: var(--fonte-mono);
  margin-bottom: 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card-login input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-tenue); outline: none; }
.card-login button {
  width: 100%;
  padding: 0.65rem;
}
.erro-login {
  color: var(--err);
  font-size: 0.78rem;
  margin-bottom: 0.85rem;
  font-family: var(--fonte-mono);
}