/* ===== Intro ===== */
.nfe-intro {
  padding: 56px 0 32px;
  background: var(--color-bg);
  text-align: center;
}
.nfe-intro h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.nfe-intro__lead {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.02rem;
}

/* ===== Tool section ===== */
.nfe-tool { padding: 0 0 96px; }

.nfe-upload-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

.nfe-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--color-ink-soft);
  transition: border-color .15s ease, background-color .15s ease;
}
.nfe-dropzone svg { color: var(--color-accent); margin-bottom: 10px; }
.nfe-dropzone p { margin: 0; font-size: .95rem; }
.nfe-dropzone strong { color: var(--color-ink); }
.nfe-dropzone:hover, .nfe-dropzone:focus-visible, .nfe-dropzone.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  outline: none;
}
.nfe-dropzone__filename {
  display: block;
  margin-top: 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-accent);
  word-break: break-all;
}

.nfe-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--color-ink-soft);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nfe-divider::before, .nfe-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.nfe-paste { display: flex; flex-direction: column; gap: 8px; }
.nfe-paste label { font-size: .85rem; font-weight: 600; color: var(--color-ink); }
.nfe-paste textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .8rem;
  color: var(--color-ink);
  resize: vertical;
}
.nfe-paste textarea:focus { outline: none; border-color: var(--color-accent); }

.nfe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.nfe-error {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(229, 137, 137, .12);
  border: 1px solid rgba(229, 137, 137, .4);
  color: #e58989;
  font-size: .88rem;
}

.nfe-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: .8rem;
  color: var(--color-ink-soft);
}
.nfe-privacy svg { color: var(--color-accent); flex-shrink: 0; }

/* ===== Result toolbar ===== */
.nfe-result { margin-top: 40px; }
.nfe-result__toolbar {
  max-width: 900px;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.nfe-result__notice {
  font-size: .85rem;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 14px;
}
.nfe-result__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===== DANFE paper ===== */
.danfe-scroll {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 8px;
}
.danfe-paper {
  width: 794px;
  margin: 0 auto;
  background: #ffffff;
  color: #111;
  font-family: 'Times New Roman', Times, Georgia, serif;
  padding: 16px;
  box-shadow: var(--shadow-md);
  border-radius: 4px;
}
.danfe-paper * { box-sizing: border-box; }
.danfe-label {
  display: block;
  font-size: 6.5px;
  font-style: italic;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  margin-bottom: 2px;
}
.danfe-value {
  font-size: 10px;
  line-height: 1.3;
  color: #111;
  min-height: 12px;
  word-break: break-word;
}
.danfe-value--strong { font-weight: 700; }
.danfe-value--pre { white-space: pre-wrap; font-size: 9px; }
.danfe-box {
  border: 1px solid #000;
  padding: 3px 5px;
}
.danfe-box--total { background: #f2f2f2; }
.danfe-box--total .danfe-value { font-weight: 700; font-size: 12px; }
.danfe-span2 { grid-column: span 2; }

/* 12-col utility spans (destinatário / entrega grids) */
.danfe-gc-1 { grid-column: span 1; }
.danfe-gc-2 { grid-column: span 2; }
.danfe-gc-3 { grid-column: span 3; }
.danfe-gc-4 { grid-column: span 4; }
.danfe-gc-5 { grid-column: span 5; }
.danfe-gc-6 { grid-column: span 6; }
.danfe-gc-7 { grid-column: span 7; }

.danfe-section-title {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #000;
  color: #fff;
  padding: 3px 6px;
  margin-top: 7px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Canhoto */
.danfe-canhoto {
  display: flex;
  border: 1px solid #000;
  margin-bottom: 6px;
}
.danfe-canhoto__text {
  flex: 1;
  padding: 5px 8px;
  border-right: 1px solid #000;
}
.danfe-canhoto__p {
  font-size: 7px;
  line-height: 1.5;
  margin: 0;
}
.danfe-canhoto__sign {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  border-top: 1px solid #000;
  padding-top: 3px;
  font-size: 6px;
}
.danfe-canhoto__nf {
  width: 130px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.danfe-canhoto__nf strong { font-size: 13px; font-weight: 700; }
.danfe-canhoto__nf span { font-size: 8.5px; font-weight: 700; }

/* Header 3 columns */
.danfe-header3 {
  display: grid;
  grid-template-columns: 1.3fr .85fr 1.3fr;
  gap: 0;
}
.danfe-headcol { display: flex; flex-direction: column; }
.danfe-headcol__label {
  text-align: center;
  font-size: 6.5px;
  font-style: italic;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  padding: 2px 0;
}
.danfe-headcol .danfe-box { flex: 1; }
.danfe-box--emit { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.danfe-emit-nome { font-size: 12px; font-weight: 700; }
.danfe-emit-linha { font-size: 8.5px; color: #222; }

.danfe-box--titulo { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-left: none; border-right: none; }
.danfe-titulo { font-size: 19px; font-weight: 800; letter-spacing: .04em; }
.danfe-titulo-sub { font-size: 6px; max-width: 150px; font-family: Arial, Helvetica, sans-serif; }
.danfe-titulo-tipo {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #000; border-radius: 2px; padding: 2px 8px; margin-top: 3px;
}
.danfe-titulo-tipo__labels { display: flex; flex-direction: column; font-size: 6.5px; text-align: left; line-height: 1.5; }
.danfe-titulo-tipo strong {
  border: 1px solid #000; border-radius: 50%;
  width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; font-size: 9px;
  flex-shrink: 0;
}
.danfe-titulo-num { font-size: 9px; font-weight: 700; margin-top: 2px; }
.danfe-titulo-folha { font-size: 6.5px; color: #444; margin-top: 2px; }

.danfe-box--chave { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.danfe-box--chave canvas { max-width: 100%; height: 32px; }
.danfe-chave-texto { font-size: 8px; font-weight: 700; letter-spacing: .03em; }
.danfe-chave-label { font-size: 6px; text-align: center; line-height: 1.4; color: #333; font-family: Arial, Helvetica, sans-serif; }
.danfe-chave-label a { color: #111; text-decoration: underline; }

/* 2-col rows */
.danfe-row2 { display: grid; grid-template-columns: 1fr 1fr; }
.danfe-row2 .danfe-box { border-top: none; }
.danfe-row2 .danfe-box:first-child { border-right: none; }

/* Emitente — IE / IM / IEST / CNPJ */
.danfe-grid-emitreg {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1.2fr;
  border-top: none;
}
.danfe-grid-emitreg .danfe-box { border-top: none; border-right: none; }
.danfe-grid-emitreg .danfe-box:last-child { border-right: 1px solid #000; }

/* Destinatário / Entrega grid (shared 12-col utility) */
.danfe-grid-dest {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-top: none;
}
.danfe-grid-dest .danfe-box { border-top: none; border-right: none; }
.danfe-grid-dest .danfe-box:nth-child(3n) { border-right: 1px solid #000; }

/* Cálculo imposto — 8 cols x 2 rows */
.danfe-grid-imposto {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-top: none;
}
.danfe-grid-imposto .danfe-box { border-top: none; border-right: none; }
.danfe-grid-imposto .danfe-box:nth-child(8n) { border-right: 1px solid #000; }

/* Transportador */
.danfe-grid-transp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: none;
}
.danfe-grid-transp .danfe-box { border-top: none; border-right: none; }
.danfe-grid-transp .danfe-box:nth-child(6n) { border-right: 1px solid #000; }
.danfe-grid-transp .danfe-span2 { grid-column: span 2; }

/* ISSQN */
.danfe-grid-issqn {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: none;
}
.danfe-grid-issqn .danfe-box { border-top: none; border-right: none; }
.danfe-grid-issqn .danfe-box:nth-child(4n) { border-right: 1px solid #000; }

/* Dados adicionais */
.danfe-grid-adic {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  border-top: none;
}
.danfe-grid-adic .danfe-box { border-top: none; border-right: none; min-height: 56px; }
.danfe-grid-adic .danfe-box:last-child { border-right: 1px solid #000; }

/* Tables */
.danfe-table { width: 100%; border-collapse: collapse; border: 1px solid #000; border-top: none; font-family: Arial, Helvetica, sans-serif; }
.danfe-table th, .danfe-table td {
  border: 1px solid #ccc;
  padding: 2px 4px;
  font-size: 7px;
  text-align: left;
  white-space: nowrap;
}
.danfe-table th {
  background: #eaeaea;
  font-size: 6.3px;
  text-transform: uppercase;
  border-color: #000;
  line-height: 1.25;
}
.danfe-table--itens .danfe-th-desc { min-width: 150px; white-space: normal; }
.danfe-table--itens td:nth-child(2) { white-space: normal; }
.danfe-table--itens td:nth-child(n+6), .danfe-table--itens th:nth-child(n+6) { text-align: right; }
.danfe-table--dup td, .danfe-table--dup th,
.danfe-table--pag td, .danfe-table--pag th { text-align: right; }
.danfe-table--dup td:first-child, .danfe-table--dup th:first-child,
.danfe-table--pag td:first-child, .danfe-table--pag th:first-child { text-align: left; }
.danfe-itens-scroll { overflow-x: auto; }

.danfe-cobr { margin-top: 0; }

.danfe-footer {
  margin-top: 10px;
  padding-top: 4px;
  border-top: 1px solid #ccc;
  font-size: 6.5px;
  color: #777;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
}

/* ===== Loading overlay ===== */
.nfe-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 24, .65);
  backdrop-filter: blur(2px);
}
.nfe-loading.is-open { display: flex; }
.nfe-loading__box {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-ink);
  font-size: .95rem;
  box-shadow: var(--shadow-md);
}
.nfe-loading__spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: nfe-spin .8s linear infinite;
}
@keyframes nfe-spin { to { transform: rotate(360deg); } }

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .nfe-upload-card { padding: 22px; }
  .nfe-actions { flex-direction: column; }
  .nfe-actions .btn { width: 100%; }
  .nfe-result__toolbar { flex-direction: column; align-items: stretch; }
  .nfe-result__actions .btn { flex: 1; }
}

/* ===== Print ===== */
@media print {
  .header, .footer, .nfe-intro, .nfe-upload-card, .nfe-result__toolbar, .nfe-loading { display: none !important; }
  body { background: #fff; }
  .danfe-scroll { overflow: visible; padding: 0; }
  .danfe-paper { box-shadow: none; width: auto; }
}