/* ============================================================
   A&7 · Emissor Fiscal Visual — DOCUMENTO FISCAL (DANFE / DACTE)
   Renderização em "papel" fiel ao layout oficial + impressão
   DANFE (NF-e) = azul · DACTE (CT-e) = verde
   ============================================================ */

.doc-viewport {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: #e9ebf2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
  padding: 14px;
  max-height: 460px;
  overflow: auto;
  margin-bottom: 14px;
}

/* ================== O PAPEL ================== */
.doc {
  background: #fff;
  color: #14161c;
  border-radius: 4px;
  box-shadow: 0 14px 40px rgba(10, 12, 24, .28);
  font-size: 11px;
  line-height: 1.45;
  font-family: var(--font);
  max-width: 640px;
  margin-inline: auto;
  overflow: hidden;
  animation: docUnfold .6s cubic-bezier(.2,.7,.3,1);
  transform-origin: top center;
}
@keyframes docUnfold {
  from { opacity: 0; transform: perspective(900px) rotateX(-14deg) translateY(18px); }
  to { opacity: 1; transform: none; }
}
.doc * { box-sizing: border-box; }
.doc .row { display: flex; flex-wrap: wrap; }
.doc .col { flex: 1 1 200px; padding: 4px 8px; min-width: 0; }
.doc .lbl {
  display: block;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6a6f7c;
}
.doc .val { display: block; font-weight: 700; font-size: 10.5px; color: #14161c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Cabeçalho do documento ---- */
.doc-head {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 3px solid #0c0d13;
}
.doc-head .doc-brand {
  display: flex;
  flex-direction: column;
}
.doc-head .doc-title { font-size: 17px; font-weight: 900; letter-spacing: -.01em; line-height: 1.05; }
.doc-head .doc-subtitle { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.doc-head .doc-ident {
  text-align: right;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
}
.doc-head .doc-ident b { display: block; font-size: 13px; }
.doc.danfe .doc-head { background: linear-gradient(135deg, #1d4ed8, #2563eb); }
.doc.cte .doc-head { background: linear-gradient(135deg, #0f9d58, #16a34a); }

/* ---- Bloco do emitente ---- */
.doc-block { border-bottom: 1px solid #cfd3dd; }
.doc-block-title {
  background: #eef1f7;
  color: #333a4a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-bottom: 1px solid #cfd3dd;
}
.doc.danfe .doc-block-title { background: #e7edfb; }
.doc.cte .doc-block-title { background: #e7f5ee; }

/* ---- Tabela de itens ---- */
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th {
  background: #f2f4f9;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  color: #4a5163;
  padding: 3px 6px;
  border: 1px solid #cfd3dd;
}
.doc-table td {
  font-size: 9.5px;
  padding: 3px 6px;
  border: 1px solid #dfe2ea;
  vertical-align: top;
}
.doc-table td.num, .doc-table th.num { text-align: right; white-space: nowrap; }
.doc.danfe .doc-table th { background: #e7edfb; }
.doc.cte .doc-table th { background: #e7f5ee; }

/* ---- Totais ---- */
.doc-totais { display: flex; justify-content: flex-end; }
.doc-totais .col { flex: 1 1 120px; padding: 4px 8px; border-top: 1px solid #cfd3dd; }
.doc-totais .col b { font-size: 11px; }

/* ---- Rodapé / chave de acesso + QR ---- */
.doc-key {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-top: 2px solid #0c0d13;
}
.doc-qr {
  flex: none;
  width: 74px; height: 74px;
  background: #fff;
  border: 1px solid #0c0d13;
  display: grid; place-items: center;
  overflow: hidden;
}
.doc-qr canvas { width: 72px !important; height: 72px !important; }
.doc-qr .qr-placeholder {
  font-size: 7px;
  font-weight: 800;
  text-align: center;
  color: #9aa1b0;
  padding: 6px;
  line-height: 1.4;
}
.doc-key-info { flex: 1; min-width: 0; }
.doc-key-info .lbl { margin-bottom: 2px; }
.doc-key-value {
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, monospace;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #0c0d13;
  word-break: break-all;
}
.doc-key-value .kv-dash { color: #7a8194; }
.doc-prot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-top: 1px solid #cfd3dd;
  font-size: 8.5px;
  color: #4a5163;
  font-weight: 700;
}

/* ---- Carimbo "EMITIDO" ---- */
.doc-stamp {
  position: absolute;
  top: 30px;
  right: 18px;
  transform: rotate(-16deg);
  border: 3px solid var(--green);
  color: var(--green);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  pointer-events: none;
  z-index: 3;
}
.doc-stamp.show { animation: stampIn .5s cubic-bezier(.2,2.2,.4,1) .55s forwards; }
@keyframes stampIn {
  0% { opacity: 0; transform: rotate(-16deg) scale(2.2); }
  60% { opacity: 1; transform: rotate(-16deg) scale(.92); }
  100% { opacity: 1; transform: rotate(-16deg) scale(1); }
}
.doc-wrap { position: relative; }

/* ---- Resumo tributário no DANFE (tributos destacados) ---- */
.doc-tributos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #cfd3dd;
  background: #fbfcfe;
}
.doc-tributos .trib {
  font-size: 8.5px;
  font-weight: 700;
  color: #4a5163;
}
.doc-tributos .trib b { display: block; font-size: 10.5px; color: #0c0d13; }

/* ---- Detalhes CT-e (carga / componentes) ---- */
.doc-carga {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.doc-components { display: flex; flex-wrap: wrap; }
.doc-components .col { flex: 1 1 120px; }

/* ================== IMPRESSÃO (print/PDF) ================== */
@media print {
  @page { size: A4; margin: 8mm; }
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .doc-print, .doc-print * { visibility: visible !important; }
  .doc-print {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .doc {
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    animation: none !important;
  }
  .doc-stamp { display: none !important; }
  .doc-viewport {
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}