/* Tela "Novo documento" e folha A4 impressa. Regras da tela ficam só dentro de #tela-kit. */
#tela-kit{background:var(--kit-bg)}
  :root{
    --kit-brand:#1F3A5F; --kit-brand-soft:#E6ECF4; --kit-bg:#F3F5F7; --kit-surface:#fff;
    --kit-border:#D9DEE4; --kit-text:#1B2430; --kit-text-2:#5B6675; --kit-bad:#B42318; --kit-good:#1F7A45;
  }
  #tela-kit *{box-sizing:border-box}

  /* ---------- TELA ---------- */
  #tela-kit .tela{max-width:none;margin:0;padding:16px clamp(16px,2vw,32px)}
  #tela-kit .tela h1{font-size:22px;color:var(--kit-brand);margin:8px 0 4px}
  #tela-kit .tela .sub{color:var(--kit-text-2);margin:0 0 16px;font-size:14px}
  #tela-kit .card{background:var(--kit-surface);border:1px solid var(--kit-border);border-radius:10px;padding:16px;margin-bottom:14px}
  #tela-kit .card h2{font-size:16px;margin:0 0 12px;color:var(--kit-brand)}
  #tela-kit .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
  #tela-kit label{display:block;font-size:13px;font-weight:bold;margin-bottom:4px;color:var(--kit-text-2)}
  #tela-kit input,#tela-kit select{width:100%;padding:10px;font-size:15px;border:1px solid var(--kit-border);border-radius:8px;background:#fff}
  #tela-kit .botoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  #tela-kit button{padding:12px 18px;font-size:15px;font-weight:bold;border-radius:8px;border:1px solid var(--kit-brand);cursor:pointer;background:#fff;color:var(--kit-brand)}
  #tela-kit button.principal{background:var(--kit-brand);color:#fff}
  #tela-kit button:disabled{opacity:.5;cursor:not-allowed}
  #tela-kit .aviso{padding:10px 12px;border-radius:8px;margin-top:10px;font-size:14px;display:none}
  #tela-kit .aviso.erro{display:block;background:#FBE9E7;color:var(--kit-bad)}
  #tela-kit .aviso.ok{display:block;background:#E0F0E7;color:var(--kit-good)}
  #tela-kit table.hist{width:100%;border-collapse:collapse;font-size:13px}
  #tela-kit table.hist th,#tela-kit table.hist td{border-bottom:1px solid var(--kit-border);padding:6px;text-align:left}
  #tela-kit .previa-titulo{font-weight:bold;margin:18px 0 8px;color:var(--kit-brand)}
  #areaFolhas .folha{box-shadow:0 1px 6px rgba(0,0,0,.15);margin:0 auto 18px}

  /* ---------- FOLHA A4 ---------- */
  .folha{width:210mm;height:297mm;padding:7mm 8mm;background:#fff;color:#000;
    display:flex;flex-direction:column;font-size:9pt;position:relative;overflow:hidden}
  .f-topo{display:flex;justify-content:space-between;align-items:stretch;border:1.4px solid #000}
  .f-titulo{flex:1;padding:2mm 3mm;display:flex;flex-direction:column;justify-content:center}
  .f-empresa{font-size:8pt;letter-spacing:.5px}
  .f-titulo h1{font-size:13pt;margin:1mm 0 0;line-height:1.15;white-space:nowrap}
  .f-kit{font-size:8pt;margin-top:1.5mm}
  .f-id{width:62mm;border-left:1.4px solid #000;display:flex;align-items:center;gap:2mm;padding:1.5mm 2mm}
  .f-id .qr{width:22mm;height:22mm;flex:none}
  .f-id .qr img,.f-id .qr canvas{width:22mm!important;height:22mm!important}
  .f-id .txt{font-size:7pt}
  .f-id .txt b{display:block;font-size:11.5pt;letter-spacing:.3px;margin-top:.5mm;word-break:break-all}
  .f-campos{border:1.4px solid #000;border-top:none}
  .f-linha{display:flex;border-top:1px solid #000}
  .f-linha:first-child{border-top:none}
  .f-c{padding:1.2mm 2mm;border-left:1px solid #000;flex:1;min-height:8mm;display:flex;align-items:center;gap:1.5mm;flex-wrap:wrap}
  .f-c:first-child{border-left:none}
  .f-c .r{font-size:7pt;font-weight:bold;white-space:nowrap}
  .f-c .v{font-size:10pt;font-weight:bold}
  .cx{display:inline-flex;align-items:center;gap:.8mm;margin-right:2mm;font-size:8.5pt;white-space:nowrap}
  .cx i{width:3.4mm;height:3.4mm;border:1px solid #000;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:8pt;font-weight:bold;line-height:1}
  .papel-destaque{font-size:11pt;font-weight:bold}
  .papel-destaque .cx{font-size:10pt}
  .papel-destaque .cx i{width:4.4mm;height:4.4mm;font-size:10pt}

  .f-corpo{flex:1;display:flex;flex-direction:column;margin-top:2mm;min-height:0;overflow:hidden}
  table.ap{width:100%;border-collapse:collapse;table-layout:fixed}
  table.ap th{background:#000;color:#fff;font-size:8pt;padding:1.2mm 1mm;border:1px solid #000}
  table.ap td{border:1px solid #000;height:7.3mm}
  table.ap td.sep{text-align:center;color:#999;font-size:9pt}
  table.ap .cxs{display:flex;justify-content:space-around;align-items:center}
  table.ap .cxs .cx{margin:0;font-size:8pt;gap:.8mm}
  table.ap .cxs .cx i{width:3.6mm;height:3.6mm}
  .aviso-verso{font-size:8.5pt;font-weight:bold;text-align:right;margin:1mm 0 0}
  .blocos{display:flex;gap:2mm;margin-top:2mm}
  .bloco{border:1.4px solid #000}
  .bloco .bt{background:#000;color:#fff;font-weight:bold;font-size:8pt;padding:1mm 2mm}
  .bloco table{width:100%;border-collapse:collapse;table-layout:fixed}
  .bloco th{font-size:7pt;border:1px solid #000;padding:.8mm;background:#eee}
  .bloco td{border:1px solid #000;height:6mm;font-size:7.5pt;text-align:center}

  /* verso: códigos */
  .v-topo{display:flex;justify-content:space-between;align-items:center;border:1.4px solid #000;padding:2mm 3mm}
  .v-topo h1{font-size:12pt;margin:0}
  .v-topo .vid{font-size:7.5pt;text-align:right}
  .v-topo .vid b{display:block;font-size:9pt}
  .v-sec{margin-top:3mm}
  .v-sec h2{background:#000;color:#fff;font-size:9pt;margin:0;padding:1.2mm 3mm}
  .v-esp{display:grid;grid-template-columns:1fr 1fr;border:1.4px solid #000;border-top:none}
  .v-esp div{display:flex;align-items:center;gap:2mm;padding:1mm 2.5mm;border-top:1px solid #000;font-size:9pt;font-weight:bold;min-height:7mm}
  .v-esp div:nth-child(odd){border-right:1px solid #000}
  .v-esp div:nth-child(-n+2){border-top:none}
  .v-esp b{flex:none;width:8mm;height:5.5mm;border:1.4px solid #000;display:flex;align-items:center;justify-content:center;font-size:10.5pt}
  .v-ger{column-count:3;column-gap:4mm;border:1.4px solid #000;border-top:none;padding:1.5mm 3mm}
  .v-ger div{break-inside:avoid;font-size:8.5pt;line-height:1.6;white-space:nowrap}
  .v-ger b{display:inline-block;width:6.5mm;font-size:9.5pt}
  .v-como{border:1.4px solid #000;border-top:none;padding:2mm 3mm;display:flex;gap:5mm}
  .v-como table{border-collapse:collapse;font-size:8.5pt;flex:none}
  .v-como th{background:#eee;border:1px solid #000;padding:.8mm 2mm;font-size:7.5pt}
  .v-como td{border:1px solid #000;padding:.8mm 2mm;text-align:center}
  .v-como ul{margin:0;padding-left:5mm;font-size:8.5pt;line-height:1.5}
  .f-obs{border:1.4px solid #000;border-top:none;padding:1.2mm 2mm;font-size:8pt;height:9mm}
  .f-ass{display:flex;gap:6mm;margin-top:5mm;font-size:8pt}
  .f-ass div{flex:1;border-top:1px solid #000;padding-top:1mm;text-align:center}
  .f-rodape{display:flex;justify-content:space-between;font-size:6.5pt;color:#444;margin-top:1.5mm}
  .marca-previa{position:absolute;top:45%;left:0;right:0;text-align:center;font-size:60pt;color:rgba(200,0,0,.12);transform:rotate(-30deg);font-weight:bold;pointer-events:none}

  @page{size:A4 portrait;margin:0}
  @media print{
    body{background:#fff}
    body > *:not(#areaFolhas){display:none!important}
    #areaFolhas .folha{box-shadow:none;margin:0;page-break-after:always;break-after:page}
    #areaFolhas .folha:last-child{page-break-after:auto;break-after:auto}
  }
  @media screen and (max-width:820px){
    #areaFolhas{overflow-x:auto}
  }