/* ============================================================================
   notaentrada.css — a tela de Entrada de Nota (lista | conferencia) e os dois
   modais dela (mnti = Importar XML, mrat = Ratear preco).

   Os campos do produto usam o CSS `kcad` (../modals/cadastro.css), como as
   telas de Produto e Contas a Pagar. Aqui ficam o cartao, a lista de notas,
   o resumo, as abas, a lista de itens e o editor.

   LARGURA: acima de 900px a aba Itens e duas colunas (lista a esquerda,
   editor a direita, a lista rolando sozinha); abaixo disso vira uma coluna so
   e o runtime rola ate o editor quando se toca num item.

   Quem liga/desliga .hidden nos paineis e o runtime, por patch.
   ============================================================================ */

.nte-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  /* SEM overflow:hidden: a lista suspensa da pesquisa de produto e o
     calendario do <filtro-data> abrem para fora do cartao e seriam cortados.
     Os cantos de cima quem arredonda e o proprio cabecalho. */
}

.nte-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background: var(--primary);
  color: var(--on-primary, #111);
  font-weight: 700;
  border-radius: var(--radius) var(--radius) 0 0;
}
.nte-card-titulo { flex: 1; min-width: 0; font-size: .88rem; }

.nte-voltar {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: .4rem;
  background: rgba(255, 255, 255, .22);
  color: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.nte-voltar:hover { background: rgba(0, 0, 0, .2); }

.nte-card-body { padding: 1.15rem; }

/* ---- botoes ------------------------------------------------------------- */
.nte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.nte-btn:hover { border-color: var(--primary); }
.nte-btn:disabled { opacity: .55; cursor: default; }
.nte-btn--primario {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}
.nte-btn--primario:hover { background: var(--primary-hover); }

/* ---- filtros da lista --------------------------------------------------- */
.nte-filtros {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin-bottom: .6rem;
}
.nte-busca {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.nte-busca i {
  position: absolute;
  top: 50%;
  left: .8rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .82rem;
  pointer-events: none;
}
.nte-busca input {
  width: 100%;
  height: 100%;
  min-height: 2.4rem;
  padding: .55rem .7rem .55rem 2.2rem;
  border: 1px solid var(--input-border, var(--card-border));
  border-radius: var(--radius);
  background: var(--input-bg, var(--card-bg));
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.nte-busca input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.nte-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .7rem;
}
.nte-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.nte-chip:hover { border-color: var(--primary); }
.nte-chip--on {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}

.nte-periodo { margin-bottom: .6rem; }

.nte-info-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .76rem;
}
.nte-info { color: var(--text-muted); }
.nte-status { flex: 1; min-width: 0; color: var(--warning, #b45309); font-weight: 600; font-size: .76rem; }
.nte-status.erro { color: var(--danger, #b91c1c); }

/* ---- etiquetas ---------------------------------------------------------- */
.nte-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .5rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface-2, rgba(127, 127, 127, .1));
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
}
.nte-tag i { font-size: .62rem; }
.nte-tag--ok {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(21, 128, 61, .12);
  color: var(--success, #15803d);
}
.nte-tag--info {
  border-color: rgba(37, 99, 235, .35);
  background: rgba(37, 99, 235, .12);
  color: #2563eb;
}
.nte-tag--aviso {
  border-color: rgba(180, 83, 9, .35);
  background: rgba(180, 83, 9, .12);
  color: var(--warning, #b45309);
}

/* ---- lista de notas ----------------------------------------------------- */
.nte-lista { display: flex; flex-direction: column; gap: .5rem; }

.nte-nota {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}
.nte-nota:hover { border-color: var(--primary); }

.nte-nota-ico {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, rgba(127, 127, 127, .1));
  color: var(--primary);
}
.nte-nota-main { flex: 1; min-width: 0; }
.nte-nota-titulo {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nte-nota-sub {
  margin: .1rem 0 .3rem;
  font-size: .72rem;
  color: var(--text-muted);
}
.nte-nota-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.nte-nota-meta { flex: 0 0 auto; text-align: right; }
.nte-nota-valor { font-size: .88rem; font-weight: 700; color: var(--primary); }
.nte-nota-data { margin-top: .2rem; font-size: .68rem; color: var(--text-muted); }
.nte-nota-acoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.nte-nota-acoes button:hover { border-color: var(--primary); color: var(--primary); }

.nte-pager {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.nte-pager button {
  padding: .3rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.nte-pager button:hover { border-color: var(--primary); }
.nte-pager-info { flex: 1; text-align: right; font-size: .74rem; color: var(--text-muted); }

.nte-totalizador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--card-border);
  font-size: .76rem;
  color: var(--text-muted);
}
.nte-totalizador strong { color: var(--text); font-size: .95rem; }

/* ---- resumo da nota ----------------------------------------------------- */
.nte-resumo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem .9rem;
  margin-bottom: .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface-2, rgba(127, 127, 127, .06));
}
.nte-resumo-main { flex: 1; min-width: 0; }
.nte-resumo-titulo {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  overflow-wrap: anywhere;
}
.nte-resumo-sub { margin: .15rem 0 .4rem; font-size: .74rem; color: var(--text-muted); }
.nte-resumo-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.nte-resumo-total { flex: 0 0 auto; text-align: right; }
.nte-resumo-total span { display: block; font-size: .7rem; color: var(--text-muted); }
.nte-resumo-total strong { font-size: 1.15rem; color: var(--primary); }

/* ---- abas --------------------------------------------------------------- */
/* No celular as quatro nao cabem: a faixa rola de lado em vez de quebrar. */
.nte-abas {
  display: flex;
  gap: .25rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--card-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.nte-abas::-webkit-scrollbar { display: none; }
.nte-aba-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.nte-aba-btn:hover { color: var(--text); }
.nte-aba-btn--on { border-bottom-color: var(--primary); color: var(--primary); }

/* ---- aba Itens: lista + editor ------------------------------------------ */
.nte-itens {
  display: grid;
  grid-template-columns: minmax(16rem, 23rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.nte-progresso {
  margin-bottom: .5rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--warning, #b45309);
}
.nte-progresso--ok { color: var(--success, #15803d); }

/* Desktop: a lista rola sozinha e o editor fica parado ao lado. */
.nte-itens-rep {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: calc(100vh - 17rem);
  min-height: 12rem;
  overflow-y: auto;
  padding-right: .2rem;
}

.nte-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .65rem;
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}
.nte-item:hover { border-color: var(--primary); }
.nte-item--sel {
  border-color: var(--primary);
  border-left-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary) inset;
}
.nte-item-nr {
  flex: 0 0 auto;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .3rem;
  border-radius: .45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, rgba(127, 127, 127, .12));
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 800;
}
.nte-item-main { flex: 1; min-width: 0; }
.nte-item-desc {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.nte-item-sub {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .6rem;
  margin-top: .15rem;
  font-size: .68rem;
  color: var(--text-muted);
}
.nte-item-vinc { color: #2563eb; }
.nte-item-lado {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
}
.nte-item-valor { font-size: .78rem; font-weight: 700; color: var(--text); }

/* ---- editor do item ----------------------------------------------------- */
.nte-editor {
  min-width: 0;
  position: sticky;
  top: .5rem;
  scroll-margin-top: 4.5rem;
}
.nte-editor-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 12rem;
  padding: 1.5rem;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: .8rem;
  text-align: center;
}
.nte-editor-vazio i { font-size: 1.4rem; color: var(--primary); }

.nte-item-info {
  padding: .7rem .8rem;
  margin-bottom: .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface-2, rgba(127, 127, 127, .06));
}
.nte-item-info-topo { display: flex; align-items: center; gap: .5rem; }
.nte-item-info-nr { font-size: .7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.nte-item-info-desc { margin: .25rem 0 .55rem; font-size: .86rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }

.nte-vincular { margin-bottom: .8rem; }
.nte-vincular-rot {
  display: block;
  margin-bottom: .35rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
}
.nte-vincular-rot i { color: var(--primary); }

.nte-bloco {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  margin-bottom: .8rem;
}
.nte-bloco-titulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-2, rgba(127, 127, 127, .08));
  color: var(--text);
  font-size: .74rem;
  font-weight: 800;
  border-radius: var(--radius) var(--radius) 0 0;
}
.nte-bloco-titulo i { color: var(--primary); }
.nte-bloco-body { padding: 1rem .9rem .9rem; }
.nte-op {
  margin-left: auto;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  color: #2563eb;
  font-size: .66rem;
  font-weight: 700;
}
.nte-op:empty { display: none; }
.nte-op--novo { background: rgba(180, 83, 9, .14); color: var(--warning, #b45309); }

.nte-editor-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* ---- pares rotulo/valor (dados, fornecedor, item) ----------------------- */
.nte-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .55rem 1rem;
}
.nte-grade--compacta { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .4rem .8rem; }
.nte-grade-titulo {
  margin: 1.1rem 0 .6rem;
  padding-top: .8rem;
  border-top: 1px solid var(--card-border);
  font-size: .74rem;
  font-weight: 800;
  color: var(--text);
}
.nte-par { min-width: 0; }
.nte-par--largo { grid-column: 1 / -1; }
.nte-par span { display: block; font-size: .66rem; color: var(--text-muted); }
.nte-par strong {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.nte-infadic {
  padding: .8rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface-2, rgba(127, 127, 127, .06));
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nte-vazio { font-size: .8rem; color: var(--text-muted); }

/* ---- rodape da nota ----------------------------------------------------- */
.nte-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--card-border);
}

/* ---- responsivo --------------------------------------------------------- */
@media (max-width: 900px) {
  .nte-itens { grid-template-columns: minmax(0, 1fr); }
  /* Uma coluna. A lista CONTINUA rolando por dentro, mais baixa: nota de 250
     itens viraria uma pagina de 25 mil pixels, e o editor ficaria la no fim.
     O editor deixa de ser sticky. */
  .nte-itens-rep { max-height: 55vh; min-height: 0; }
  .nte-editor { position: static; }
}

@media (max-width: 640px) {
  .nte-card-body { padding: .8rem; }
  .nte-filtros { flex-wrap: wrap; }
  .nte-filtros .nte-btn { flex: 1 1 100%; }
  .nte-nota { flex-wrap: wrap; }
  .nte-nota-ico { width: 2rem; height: 2rem; font-size: .8rem; }
  .nte-nota-meta { text-align: left; }
  .nte-nota-acoes { margin-left: auto; }
  .nte-resumo { flex-direction: column; align-items: stretch; gap: .5rem; }
  .nte-resumo-total { text-align: left; }
  .nte-editor-acoes .nte-btn { flex: 1 1 auto; }
  .nte-editor-acoes .nte-status { flex: 1 1 100%; }
  .nte-rodape .nte-btn { flex: 1 1 100%; }
}

/* ============================================================================
   MODAL "Importar XML" (mnti) — a estrutura vem de ../modals/modais.css
   ============================================================================ */
.mnti-intro { margin: 0 0 .9rem; font-size: .8rem; color: var(--text-muted); line-height: 1.45; }

.mnti-arquivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.2rem 1rem;
  margin-bottom: 1.1rem;
  border: 2px dashed var(--card-border);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
}
.mnti-arquivo:hover { border-color: var(--primary); }
.mnti-arquivo i { font-size: 1.6rem; color: var(--primary); }
.mnti-arquivo-nome { font-size: .84rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.mnti-arquivo-nome--ok { color: var(--success, #15803d); }
.mnti-arquivo-dica { font-size: .7rem; color: var(--text-muted); }
.mnti-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mnti-empresa { margin-top: .4rem; }
.mnti-dica {
  display: block;
  margin-top: .45rem;
  font-size: .7rem;
  color: var(--text-muted);
}
.mnti-dica i { color: var(--primary); }
.mnti-erro {
  margin-top: .8rem;
  padding: .55rem .7rem;
  border-radius: var(--radius);
  background: rgba(185, 28, 28, .1);
  color: var(--danger, #b91c1c);
  font-size: .76rem;
  font-weight: 600;
}
.mnti-erro:empty { display: none; }

/* ============================================================================
   MODAL "Ratear preco" (mrat)
   ============================================================================ */
.mrat-resumo,
.mrat-resultado {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .7rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface-2, rgba(127, 127, 127, .06));
}
.mrat-resultado { margin-top: 1rem; border-color: var(--primary); }
.mrat-resumo > div,
.mrat-resultado > div {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  font-size: .78rem;
  color: var(--text-muted);
}
.mrat-resumo strong,
.mrat-resultado strong { color: var(--text); }
.mrat-campo { margin-top: 1.2rem; }
.mrat-aviso { margin: .2rem 0 0; font-size: .72rem; color: var(--warning, #b45309); font-weight: 600; }

/* ---- rodape dos dois modais --------------------------------------------- */
.mnti-cancelar,
.mrat-cancelar {
  padding: .5rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.mnti-cancelar:hover,
.mrat-cancelar:hover { border-color: var(--primary); color: var(--primary); }
.mnti-importar,
.mrat-aplicar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary, #111);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.mnti-importar:hover,
.mrat-aplicar:hover { background: var(--primary-hover); }
.mnti-importar:disabled { opacity: .6; cursor: default; }