/* ============================================================ */
/* encomendas — main.css                                         */
/* Importa Livo Design System (tokens) e define estilos          */
/* específicos do painel.                                        */
/* ============================================================ */
@import url('/css/livo-design.css');

/* Compat: header antigo (mantém pra páginas que ainda não migraram) */
header:not(.livo-header) {
  background: var(--branco);
  color: var(--preto);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--cinza-2);
  min-height: 76px;
}
header .semaforo-dwh { margin-left: auto; }
.brand h1 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: var(--w-black);
  font-size: 22px;
  color: var(--azul-livo);
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand .fornecedor,
.brand .tagline {
  display: block;
  font-size: 11px;
  color: var(--cinza-4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--w-medium);
  margin-top: 4px;
  font-style: normal;
}

.acoes-header { display: flex; gap: 8px; margin-left: auto; }

/* ----- Cards de resumo (linha "X itens / Y pedidos / trava") -- */
.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.card-resumo {
  background: var(--branco);
  border: 1px solid var(--cinza-2);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transition: var(--t-base);
}
.card-resumo:hover {
  border-color: var(--cinza-3);
}
.card-resumo .numero {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: var(--w-black);
  color: var(--preto);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.card-resumo .label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--cinza-4);
  letter-spacing: 0.08em;
  font-weight: var(--w-bold);
}
.card-resumo.alerta {
  border-left: 4px solid var(--vermelho);
}
.card-resumo.alerta .numero { color: var(--vermelho); }

/* ----- Banner (avisos amarelos) ------------------------------- */
.banner {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
}
.banner-warn {
  background: var(--amarelo-soft);
  border-left: 4px solid var(--amarelo);
  color: var(--amarelo-dark);
}

/* ----- Pedido (item da fila) ---------------------------------- */
.pedido {
  border: 1px solid var(--cinza-2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--branco);
  transition: var(--t-fast);
}
.pedido:hover { border-color: var(--cinza-3); }
.pedido.pedido-aviso {
  border-left: 4px solid var(--amarelo);
  background: var(--amarelo-soft);
}
.aviso-cplpds {
  font-size: 12px;
  color: var(--amarelo-dark);
  background: var(--amarelo-soft);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  margin: 4px 0 8px;
  font-style: italic;
  cursor: help;
}
.pedido-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pedido-head .numero {
  font-weight: var(--w-bold);
  font-size: 14px;
  color: var(--preto);
  font-family: var(--font-mono);
}
.pedido-head .meta {
  font-size: 12px;
  color: var(--cinza-4);
}
.pedido-itens {
  display: grid;
  gap: 4px;
}
.item {
  display: grid;
  grid-template-columns: 110px 1fr 60px 110px;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-top: 1px solid var(--cinza-2);
}
.item:first-child { border-top: none; }
.item .sku   { font-family: var(--font-mono); color: var(--cinza-5); }
.item .qtd   { text-align: center; font-weight: var(--w-bold); }
.item .ean   { font-family: var(--font-mono); color: var(--cinza-4); font-size: 12px; }

/* ----- Eventos ------------------------------------------------- */
.eventos ul { list-style: none; margin: 0; padding: 0; }
.eventos li {
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cinza-2);
  display: grid;
  grid-template-columns: 110px 70px 1fr;
  gap: 12px;
  align-items: baseline;
}
.eventos li:last-child { border-bottom: none; }
.eventos .ts { color: var(--cinza-4); font-family: var(--font-mono); font-size: 11px; }
.eventos .nivel {
  font-size: 10px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-align: center;
}
.eventos .nivel.info  { background: var(--info-soft);     color: var(--info-dark); }
.eventos .nivel.warn  { background: var(--amarelo-soft);  color: var(--amarelo-dark); }
.eventos .nivel.error { background: var(--vermelho-soft); color: var(--vermelho-dark); }

.empty {
  text-align: center;
  padding: 36px;
  color: var(--cinza-4);
  font-style: italic;
  font-size: 13px;
}

/* ----- Modal especializações ---------------------------------- */
.modal .resultado-pedido {
  background: var(--verde-soft);
  border-left: 4px solid var(--verde);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 8px 0;
  font-family: var(--font-mono);
}
.modal .resultado-indisp {
  background: var(--vermelho-soft);
  border-left: 4px solid var(--vermelho);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 8px 0;
  font-size: 13px;
}
.modal .resultado-erro {
  background: var(--amarelo-soft);
  border-left: 4px solid var(--amarelo);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 8px 0;
  font-size: 13px;
}

/* ============================================================ */
/* page-header (faixa abaixo do header com escopo da página)    */
/* ============================================================ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px 32px 12px;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-2);
  gap: 16px;
  flex-wrap: wrap;
  min-height: 86px;
}
.page-title h2 {
  font-family: var(--font-title);
  font-weight: var(--w-bold);
  font-size: 22px;
  color: var(--preto);
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-title .sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--cinza-4);
  font-weight: var(--w-medium);
}
.page-title code {
  background: var(--cinza-1);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-mono);
}
.acoes-pagina { display: flex; gap: 8px; flex-wrap: wrap; }

main > .page-header:first-child { margin: 0 0 12px; }

/* ============================================================ */
/* Cores e identificadores visuais por fornecedor                */
/* ============================================================ */

/* Pontos coloridos por fornecedor (mantém visual cor por marca) */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.dot-central       { background: var(--verde); }
.dot-navi          { background: var(--azul-livo); }
.dot-solotica      { background: #B5651D; }   /* marrom claro */
.dot-coopervision  { background: #1E7E34; }   /* verde escuro */
.dot-optolentes    { background: #7C3AED; }   /* roxo */

/* Link ativo do nav-tabs por fornecedor */
.nav-tabs a.fornecedor-central.active      { border-bottom-color: var(--verde);     color: var(--verde-dark); }
.nav-tabs a.fornecedor-navi.active         { border-bottom-color: var(--azul-livo); color: var(--azul-livo); }
.nav-tabs a.fornecedor-solotica.active     { border-bottom-color: #B5651D;          color: #B5651D; }
.nav-tabs a.fornecedor-coopervision.active { border-bottom-color: #1E7E34;          color: #1E7E34; }
.nav-tabs a.fornecedor-optolentes.active   { border-bottom-color: #7C3AED;          color: #7C3AED; }

/* Sub-nav por fornecedor (idêntico padrão) */
.sub-nav-central      a.active { border-bottom-color: var(--verde);     color: var(--verde-dark); }
.sub-nav-navi         a.active { border-bottom-color: var(--azul-livo); color: var(--azul-livo); }
.sub-nav-solotica     a.active { border-bottom-color: #B5651D;          color: #B5651D; }
.sub-nav-coopervision a.active { border-bottom-color: #1E7E34;          color: #1E7E34; }
.sub-nav-optolentes   a.active { border-bottom-color: #7C3AED;          color: #7C3AED; }

/* Borda esquerda do painel expandido por fornecedor (sobrescreve o azul default) */
.pedido-painel.fornecedor-solotica     { border-left: 4px solid #B5651D; }
.pedido-painel.fornecedor-coopervision { border-left: 4px solid #1E7E34; }
.pedido-painel.fornecedor-optolentes   { border-left: 4px solid #7C3AED; }

/* Botão warn (amarelo/laranja) — intermediário entre normal e primary */
button.btn-warn, .btn-warn {
  background: var(--amarelo);
  color: var(--branco);
  border: 1px solid var(--amarelo);
  font-weight: var(--w-bold);
}
button.btn-warn:hover, .btn-warn:hover { filter: brightness(0.9); }