/* Cadastro pela Nota — o XML da NF-e de entrada vira produto no ERP.
   Prefixo cxm-. Toda cor e estado nasce aqui; markup não carrega style=".

   A tela responde a uma pergunta só: desta nota, o que já é produto nosso, o
   que só falta ligar ao fornecedor e o que preciso cadastrar agora. */

/* ---- entrada do arquivo -------------------------------------------------- */
.cxm-solta {
  border: 2px dashed #ced4da;
  border-radius: .6rem;
  background: #fff;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.cxm-solta:hover,
.cxm-solta--sobre { border-color: #e30613; background: #fff5f5; }
.cxm-solta .bi { font-size: 2rem; color: #adb5bd; display: block; margin-bottom: .4rem; }
.cxm-solta--sobre .bi { color: #e30613; }
.cxm-solta strong { display: block; font-size: .95rem; }
.cxm-solta small  { color: #6c757d; }
.cxm-explica {
  max-width: 620px;
  margin: .9rem auto 0;
  font-size: .8rem;
  color: #6c757d;
  line-height: 1.5;
  text-align: center;
}

/* ---- cabeçalho da nota --------------------------------------------------- */
.cxm-nota {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: .7rem .85rem;
  margin-bottom: .75rem;
}
.cxm-nota-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  justify-content: space-between;
}
.cxm-nota-forn { font-size: 1.02rem; font-weight: 600; line-height: 1.2; }
.cxm-nota-sub  { font-size: .76rem; color: #6c757d; }
.cxm-nota-campos {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin-top: .5rem;
  font-size: .78rem;
}
.cxm-nota-campos div { min-width: 0; }
.cxm-nota-campos span { color: #6c757d; display: block; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .03em; }
.cxm-nota-campos strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.cxm-chave { font-size: .72rem; color: #6c757d; word-break: break-all; }

/* ---- KPIs ---------------------------------------------------------------- */
.cxm-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .5rem;
  margin-bottom: .75rem;
}
.cxm-kpi {
  border: 1px solid #dee2e6;
  border-left: 3px solid #adb5bd;
  border-radius: .4rem;
  background: #fff;
  padding: .5rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.cxm-kpi span {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: #6c757d;
}
.cxm-kpi strong { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cxm-kpi small  { font-size: .68rem; color: #6c757d; line-height: 1.25; }
.cxm-kpi.good   { border-left-color: #2b8a3e; }
.cxm-kpi.good   strong { color: #2b8a3e; }
.cxm-kpi.warn   { border-left-color: #e8590c; }
.cxm-kpi.warn   strong { color: #e8590c; }
.cxm-kpi.danger { border-left-color: #c92a2a; }
.cxm-kpi.danger strong { color: #c92a2a; }

/* ---- proximo passo ------------------------------------------------------- */
.cxm-proximo {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  border: 1px solid #d0ebff;
  border-left: 3px solid #1971c2;
  background: #f4faff;
  border-radius: .4rem;
  padding: .55rem .7rem;
  margin-bottom: .6rem;
  font-size: .8rem;
}
.cxm-proximo .bi { color: #1971c2; font-size: 1rem; line-height: 1.3; }
.cxm-proximo strong { display: block; font-size: .86rem; line-height: 1.25; }
.cxm-proximo span { display: block; color: #495057; line-height: 1.35; margin-top: .08rem; }
.cxm-proximo--warn { border-color: #ffe3bf; border-left-color: #e8590c; background: #fff9f2; }
.cxm-proximo--warn .bi { color: #e8590c; }
.cxm-proximo--good { border-color: #d3f9d8; border-left-color: #2b8a3e; background: #f4fff6; }
.cxm-proximo--good .bi { color: #2b8a3e; }

/* ---- pendências: sempre terminam em verbo -------------------------------- */
.cxm-pend {
  display: flex;
  gap: .55rem;
  border: 1px solid #ffe3bf;
  border-left: 3px solid #e8590c;
  background: #fff9f2;
  border-radius: .4rem;
  padding: .55rem .7rem;
  margin-bottom: .5rem;
}
.cxm-pend--danger { border-color: #ffd3d3; border-left-color: #c92a2a; background: #fff5f5; }
.cxm-pend .bi { color: #e8590c; font-size: 1rem; line-height: 1.2; }
.cxm-pend--danger .bi { color: #c92a2a; }
.cxm-pend-txt { min-width: 0; }
.cxm-pend-txt strong { display: block; font-size: .85rem; }
.cxm-pend-txt p { margin: .15rem 0 0; font-size: .78rem; color: #495057; line-height: 1.4; }
.cxm-pend-acao { font-size: .78rem; font-weight: 600; color: #9d5c00; margin-top: .2rem; display: block; }
.cxm-pend--danger .cxm-pend-acao { color: #c92a2a; }

/* ---- frescor ------------------------------------------------------------- */
.cxm-frescor {
  font-size: .72rem; color: #6c757d;
  display: flex; align-items: center; gap: .35rem;
  margin-bottom: .6rem; flex-wrap: wrap;
}

/* ---- filtros ------------------------------------------------------------- */
.cxm-filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; align-items: center; }
.cxm-chip {
  border: 1px solid #dee2e6; background: #fff; color: #495057;
  border-radius: 999px; padding: .18rem .65rem; font-size: .76rem;
  cursor: pointer; white-space: nowrap;
}
.cxm-chip:hover { border-color: #adb5bd; background: #f8f9fa; }
.cxm-chip.ativo { background: #212529; border-color: #212529; color: #fff; }
.cxm-chip.ativo:hover { background: #212529; border-color: #212529; color: #fff; }

/* ---- tabela dos itens ---------------------------------------------------- */
.cxm-card {
  background: #fff; border: 1px solid #dee2e6; border-radius: .5rem;
  padding: .7rem .85rem; margin-bottom: .75rem;
}
.cxm-card-tit { font-size: .95rem; font-weight: 600; margin: 0; }
.cxm-card-sub { font-size: .76rem; color: #6c757d; margin: .1rem 0 .55rem; }
.cxm-rola { overflow-x: auto; }
.cxm-tab { width: 100%; border-collapse: collapse; font-size: .8rem; min-width: 720px; }
.cxm-tab th {
  text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
  color: #6c757d; font-weight: 600; border-bottom: 1px solid #dee2e6;
  padding: .35rem .45rem; white-space: nowrap;
}
.cxm-tab td { padding: .4rem .45rem; border-bottom: 1px solid #f1f3f5; vertical-align: top; }
.cxm-tab tr:last-child td { border-bottom: 0; }
.cxm-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cxm-tab th.num { text-align: right; }
.cxm-tab tr.cxm-aberta > td { background: #f8f9fa; }
.cxm-desc { font-weight: 600; line-height: 1.25; }
.cxm-desc-sub { font-size: .7rem; color: #6c757d; }

/* Estado do item: cor nunca sozinha — sempre com ícone e texto. */
.cxm-estado { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem;
  font-weight: 600; white-space: nowrap; }
.cxm-estado--cadastrado  { color: #2b8a3e; }
.cxm-estado--sem_vinculo { color: #9d5c00; }
.cxm-estado--novo        { color: #1864ab; }
.cxm-acao {
  border: 1px solid #212529; background: #212529; color: #fff;
  border-radius: .3rem; padding: .18rem .6rem; font-size: .75rem;
  cursor: pointer; white-space: nowrap;
}
.cxm-acao:hover { background: #000; }
.cxm-acao--fraca { background: #fff; color: #212529; }
.cxm-acao--fraca:hover { background: #f1f3f5; color: #212529; }
.cxm-acao[disabled] { opacity: .5; cursor: default; }

/* ---- painel de cadastro do item ------------------------------------------ */
/* Fora do rolador da tabela de propósito: dentro dele o painel herdava a
   largura mínima de 720px e escondia o botão de gravar no telefone. */
.cxm-painel {
  background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .4rem;
  padding: .8rem .85rem; margin-top: .75rem;
}
.cxm-painel-tit { font-size: .88rem; font-weight: 600; margin-bottom: .6rem; line-height: 1.3; }
.cxm-painel h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  color: #6c757d; margin: 0 0 .5rem; font-weight: 600; }
.cxm-painel h4 + h4 { margin-top: 1rem; }
.cxm-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem .8rem;
}
.cxm-grade--solta { margin-top: .7rem; }
.cxm-campo { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.cxm-campo label { font-size: .72rem; font-weight: 600; color: #495057; }
.cxm-campo small { font-size: .68rem; color: #6c757d; line-height: 1.3; }
/* `:not([type=checkbox])` não é firula: sem isso o quadradinho do check herda
   `width:100%`, vira uma faixa da largura do campo e joga o texto para longe. */
.cxm-campo input:not([type="checkbox"]), .cxm-campo select {
  border: 1px solid #ced4da; border-radius: .3rem; padding: .3rem .45rem;
  font-size: .82rem; background: #fff; width: 100%; min-width: 0;
}
.cxm-campo input:not([type="checkbox"]):focus,
.cxm-campo select:focus { outline: 2px solid #a5c8ff; border-color: #4c8bf5; }

/* ---- recorte da grade ---------------------------------------------------- */
/* O select oferece so as grades que a categoria usa. A nota diz qual e o
   recorte e abre a lista inteira -- cortar sem saida travaria grade estreando
   numa categoria, que acontece. */
.cxm-grade-nota { display: block; margin-top: .1rem; }
.cxm-grade-nota b { color: #34495e; }
/* Sem regua para esta categoria: escolhe sem rede, entao confere com cuidado. */
.cxm-grade-nota--aberta { color: #8a6d1f; }
.cxm-grade-link {
  border: 1px solid #cfe0f5;
  background: #fff;
  border-radius: 999px;
  padding: .02rem .4rem;
  font: inherit;
  color: #1c6fb8;
  cursor: pointer;
  white-space: nowrap;
}
.cxm-grade-link:hover { color: #14508a; background: #f4f8ff; border-color: #9fc2ef; }
.cxm-grade-link:focus-visible { outline: 2px solid #1c6fb8; outline-offset: 2px; }
/* ---- categoria por nivel -------------------------------------------------- */
/* Um select por nivel da arvore, na mesma leitura do Briefing. Ficam lado a
   lado enquanto couber: a cadeia inteira visivel de uma vez e o que diz a
   quem le que ainda ha subcategoria por escolher. */
.cxm-cat-linha { display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.cxm-cat-nivel { display: flex; flex-direction: column; gap: .18rem;
  flex: 1 1 170px; min-width: 150px; max-width: 260px; }
.cxm-cat-nivel label { font-size: .72rem; font-weight: 600; color: #495057; }
.cxm-cat-nivel select {
  border: 1px solid #ced4da; border-radius: .3rem; padding: .3rem .45rem;
  font-size: .82rem; background: #fff; width: 100%; min-width: 0;
}
.cxm-cat-nivel select:focus { outline: 2px solid #a5c8ff; border-color: #4c8bf5; }
.cxm-campo--erro .cxm-cat-nivel select { border-color: #c92a2a; }
.cxm-cat-carregando { font-size: .76rem; color: #6c757d; margin: .1rem 0 0; }

.cxm-campo--erro input, .cxm-campo--erro select { border-color: #c92a2a; }
.cxm-campo--largo { grid-column: 1 / -1; }
.cxm-check { display: flex; align-items: flex-start; gap: .4rem; font-size: .78rem;
  font-weight: 400; color: #212529; line-height: 1.35; }
.cxm-check + .cxm-check { margin-top: .35rem; }
.cxm-check input { margin-top: .18rem; width: auto; flex: none; }

/* Da nota: o que veio pronto, para conferir sem sair da tela. */
.cxm-danota {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .76rem; color: #495057; margin-bottom: .6rem;
}
.cxm-danota span { color: #6c757d; }
.cxm-danota b { font-variant-numeric: tabular-nums; }

/* Cores escolhidas */
.cxm-cores { display: flex; flex-wrap: wrap; gap: .3rem; }
.cxm-cor {
  border: 1px solid #ced4da; background: #fff; border-radius: 999px;
  padding: .12rem .5rem; font-size: .74rem; cursor: pointer;
}
.cxm-cor.ativa { background: #212529; border-color: #212529; color: #fff; }
.cxm-cor.ativa:hover { background: #212529; color: #fff; }

/* Sugestão de produto parecido — é dúvida, não é casamento. */
.cxm-parecido {
  border: 1px solid #ffe3bf; background: #fff9f2; border-radius: .4rem;
  padding: .45rem .6rem; font-size: .76rem; margin-bottom: .6rem;
}
.cxm-parecido ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.cxm-parecido code { font-size: .74rem; color: #212529; }

/* Prévia do que vai ser gravado */
.cxm-previa {
  border: 1px solid #d0ebff; background: #f4faff; border-radius: .4rem;
  padding: .5rem .65rem; font-size: .78rem; margin-top: .7rem;
}
.cxm-previa strong { font-variant-numeric: tabular-nums; }
.cxm-previa ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.cxm-previa li { margin-bottom: .1rem; }
.cxm-previa pre {
  margin: .4rem 0 0; font-size: .7rem; background: #fff; border: 1px solid #dee2e6;
  border-radius: .3rem; padding: .4rem; max-height: 220px; overflow: auto;
}
.cxm-mao {
  border: 1px solid #ffe3bf; background: #fff9f2; border-radius: .4rem;
  padding: .5rem .65rem; font-size: .76rem; margin-top: .6rem;
}
.cxm-mao ul { margin: .25rem 0 0; padding-left: 1.1rem; }

.cxm-botoes { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; align-items: center; }
.cxm-erro-campo { font-size: .76rem; color: #c92a2a; font-weight: 600; }

/* ---- vazio, erro e carga ------------------------------------------------- */
.cxm-vazio { text-align: center; padding: 1.6rem 1rem; color: #6c757d; font-size: .85rem; }
.cxm-vazio .bi { font-size: 1.6rem; display: block; margin-bottom: .35rem; color: #adb5bd; }
.cxm-vazio strong { display: block; color: #212529; font-size: .9rem; }
.cxm-erro {
  border: 1px solid #ffd3d3; border-left: 3px solid #c92a2a; background: #fff5f5;
  border-radius: .4rem; padding: .6rem .75rem; font-size: .82rem;
}
.cxm-erro strong { display: block; }
.cxm-erro p { margin: .2rem 0 0; font-size: .78rem; color: #495057; }
.cxm-erro details { margin-top: .35rem; font-size: .72rem; color: #6c757d; }
.cxm-recarregando { opacity: .55; pointer-events: none; }
.cxm-skel { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem;
  height: 3.1rem; animation: cxm-pulsa 1.1s ease-in-out infinite; }
@keyframes cxm-pulsa { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }

/* ---- procedência --------------------------------------------------------- */
.cxm-metodo {
  font-size: .74rem; color: #6c757d; line-height: 1.5;
  border-top: 1px dashed #dee2e6; margin-top: .6rem; padding-top: .5rem;
}
.cxm-metodo b { color: #495057; }

/* ---- telefone ------------------------------------------------------------ */
@media (max-width: 640px) {
  .cxm-nota-campos { gap: .3rem .9rem; }
  .cxm-tab { min-width: 620px; }
  .cxm-grade { grid-template-columns: 1fr; }
  .cxm-cat-nivel { flex: 1 1 100%; max-width: none; }
  .cxm-botoes .cxm-acao { flex: 1 1 auto; text-align: center; }
}