/* ============================================================================
   dfe.css — a tela "DF-e (Manifestação XML)".

   Porte de D2PdvSmart\Web\wwwroot\sistema\dfe.html (Tailwind inline) +
   src/js/pages/dfe.js (o cartão de cada documento, os selos e o totalizador).

   Os selos seguem o desenho de cotacao.css (.cot-tag): mesma pílula, mesmas
   quatro cores. O que é próprio daqui é a linha da CHAVE DE ACESSO — 44
   dígitos que não cabem em nenhuma tela de celular sem quebrar.

   Os dois modais desta tela (mdfe = Manifestar, mpdf = DANFE) moram em
   ../modals/modais.css, junto com os outros.
   ============================================================================ */

.dfe-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dfe-card-body { padding: 1.15rem; }

/* ---- filtros ------------------------------------------------------------ */
.dfe-filtros { margin-bottom: .8rem; }
.dfe-periodo { margin-bottom: .8rem; }

/* ---- linha de informacao ------------------------------------------------ */
.dfe-info-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .76rem;
}
.dfe-info { color: var(--text-muted); }
.dfe-status { flex: 1; color: var(--warning, #b45309); font-weight: 600; }

/* ---- a lista ------------------------------------------------------------ */
.dfe-lista {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dfe-lista:empty { border: 0; }

.dfe-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--card-border);
}
.dfe-item:last-child { border-bottom: 0; }

.dfe-item-main { flex: 1; min-width: 0; }
.dfe-item-titulo {
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
}
.dfe-item-sub {
  margin-bottom: .45rem;
  font-size: .7rem;
  color: var(--text-muted);
}
.dfe-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .4rem;
}
.dfe-item-valor {
  margin-bottom: .35rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}
.dfe-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  font-size: .7rem;
  color: var(--text-muted);
}
.dfe-item-meta i { margin-right: .2rem; }

/* A chave tem 44 digitos: ela pode ocupar a linha inteira e QUEBRAR no meio
   do numero — sem isso o cartao estoura a largura no celular. */
.dfe-chave { flex: 1 1 100%; min-width: 0; }
.dfe-chave code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  word-break: break-all;
}

/* ---- selos -------------------------------------------------------------- */
.dfe-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .45rem;
  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;
}
.dfe-tag--ok {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(21, 128, 61, .12);
  color: var(--success, #15803d);
}
.dfe-tag--erro {
  border-color: rgba(185, 28, 28, .35);
  background: rgba(185, 28, 28, .12);
  color: var(--danger, #b91c1c);
}
.dfe-tag--aviso {
  border-color: rgba(180, 83, 9, .35);
  background: rgba(180, 83, 9, .12);
  color: var(--warning, #b45309);
}
.dfe-tag--info {
  border-color: rgba(29, 78, 216, .35);
  background: rgba(29, 78, 216, .12);
  color: #1d4ed8;
}

/* ---- acoes da linha ----------------------------------------------------- */
.dfe-item-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .25rem;
}
.dfe-item-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;
}
.dfe-item-acoes button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---- totalizador -------------------------------------------------------- */
.dfe-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);
}
.dfe-totalizador strong { color: var(--text); font-size: .95rem; }

@media (max-width: 640px) {
  .dfe-card-body { padding: .8rem; }
  .dfe-item { flex-direction: column; }
  .dfe-item-acoes { align-self: flex-end; }
}