/* Panofo Estoque — iteração 4: paleta de alertas (vencido = bordô), código, combobox de marca */

:root {
  --vinho-900: #5C1320;
  --vinho-700: #7A1E2B; /* VENCIDO */
  --vinho-500: #9E2A3A;
  --vinho-100: #F3E0E3;
}

/* ===== A1 · VENCIDO em bordô (distingue de PONTA? vermelho) ===== */
.cell.vencido {
  box-shadow: inset 0 0 0 3.5px var(--vinho-700), var(--shadow-xs) !important;
}
.cell.vence-breve {
  box-shadow: inset 0 0 0 2.5px var(--warning-500), var(--shadow-xs) !important;
}
.badge-cell.venc { color: var(--white); background: var(--vinho-700); }
.badge-cell.breve { color: var(--navy-900); background: var(--yellow-500); }

/* badges curtos, sem truncar, nunca cobrindo código/nome */
.cell .top-line { gap: 5px; }
.cell .code { flex-shrink: 0; }
.badge-cell {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1.5px 6px;
}
.badge-cell.venc, .badge-cell.breve { padding: 1.5px 6px 1.5px 5px; }
.badge-cell svg { flex-shrink: 0; }

/* legenda — swatch vencido bordô */
.legend .sw.venc { background: var(--vinho-700); }

/* chips e avisos de vencido → bordô */
.spec.val.venc { background: var(--vinho-100); color: var(--vinho-700); }
.tpill.venc { background: var(--vinho-100); color: var(--vinho-700); }
.ponta-alert.venc { background: var(--vinho-100); border-color: var(--vinho-500); }
.ponta-alert.venc .t { color: var(--vinho-700); }

/* ===== A3 · Aviso de material compacto (1 linha) no card da pilha ===== */
.mat-aviso {
  margin-top: 12px; border-radius: 10px; padding: 10px 13px;
  font-size: 13.5px; font-weight: 600; line-height: 18px;
  display: flex; align-items: center; gap: 9px;
}
.mat-aviso svg { flex-shrink: 0; }
.mat-aviso.venc { background: var(--vinho-100); color: var(--vinho-700); border: 1px solid var(--vinho-500); }
.mat-aviso.breve { background: var(--warning-100); color: var(--warning-700); border: 1px solid var(--warning-500); }

/* ===== B2 · Chip de código ===== */
.spec.cod { background: var(--navy-100); color: var(--navy-700); font-variant-numeric: tabular-nums; }
.obrig-mini { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--danger-700); margin-left: 6px; font-size: 11px; }
.cod-cell { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gray-700); }

/* código discreto no card do picker (entrada) */
.po-cod {
  position: absolute; bottom: 12px; right: 12px;
  font-size: 11px; font-weight: 700; color: var(--gray-500);
  font-variant-numeric: tabular-nums;
  background: var(--gray-100); border-radius: 6px; padding: 2px 7px;
}
.prod-opt .po-marca { padding-right: 56px; }

/* ===== B1 · Combobox de marca ===== */
.combobox { position: relative; }
.combo-field {
  width: 100%; height: 50px; padding: 0 14px;
  border-radius: 10px; border: 1.5px solid var(--gray-300); background: var(--white);
  font-family: var(--font-body); font-size: 15.5px; font-weight: 500; color: var(--navy-900);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.combo-field:hover { border-color: var(--navy-400); }
.combo-field.open { border-color: var(--navy-500); box-shadow: var(--shadow-focus); }
.combo-field.ph span { color: var(--gray-400); }
.combo-back { position: fixed; inset: 0; z-index: 40; }
.combo-pop {
  position: absolute; z-index: 41; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--border-default); border-radius: 12px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.combo-search {
  display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100); color: var(--gray-500);
}
.combo-search input { flex: 1; border: none; outline: none; font-family: var(--font-body); font-size: 15px; color: var(--navy-900); background: transparent; }
.combo-list { max-height: 256px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 48px; padding: 0 14px; border: none; background: transparent; border-radius: 9px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--navy-900);
  cursor: pointer; text-align: left;
}
.combo-opt:hover { background: var(--gray-100); }
.combo-opt.on { background: var(--navy-50); color: var(--navy-700); }
.combo-opt.on svg { color: var(--navy-600); }
.combo-opt.criar { color: var(--orange-700); font-weight: 700; }
.combo-opt.criar:hover { background: var(--orange-50); }
.combo-vazio { padding: 18px 14px; text-align: center; color: var(--gray-500); font-size: 14px; }