/* Componentes visuais do módulo /encomendas (design system "Portaria Flow",
   ver port.zip > portaria_flow/DESIGN.md) — usa as mesmas utilities de
   troca de tela (.view/.view-active) e safe-area de css/style.css, que
   continua incluído nessas páginas; aqui só o que é específico do tema. */

html, body {
  background: #faf8ff;
}

/* Badges de status — cores semânticas exatas do DESIGN.md (fill/texto/borda),
   pill-shaped pra distinguir metadado de área clicável. */
.badge-pendente {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.badge-recebido {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

.badge-entregue {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.badge-atrasado {
  background: #ffdad6;
  color: #93000a;
  border: 1px solid #f5b8b2;
}

/* Nível 1 do sistema de elevação: card/list item — micro-sombra ambiente
   em vez de drop shadow pesado. */
.card-surface {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
}

/* Nível 2: barras de ação fixas e folhas flutuantes. */
.elev-2 {
  box-shadow: 0 4px 12px -2px rgba(15, 41, 66, 0.08), 0 2px 6px -1px rgba(15, 41, 66, 0.04);
}

/* Item de lista marcado como atrasado ganha uma faixa vermelha à esquerda
   (ver mockup lista_de_encomendas). */
.card-atrasado {
  border-left: 4px solid #ba1a1a;
}

/* Faixa de status do card de destaque (gradiente navy do mockup da tela
   inicial) — Tailwind puro não cobre esse gradiente específico. */
.hero-portaria {
  background: linear-gradient(135deg, #0f2942 0%, #001428 60%, #001e70 100%);
}