/* ==========================================================
   Declaração de Responsabilidade pela Procedência de Motor
   DETRAN-GO — form20
   ========================================================== */

/* ── Reset adicional ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Container ── */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 20px;
}

/* ── Cabeçalho ── */
.form-header {
  padding: 10px 0 6px;
  text-align: left;
}

.logo-detran {
  height: 70px;
}

/* ── Barra de título ── */
.title-bar {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 8px 0;
  margin: 8px 0 10px;
  text-align: center;
}

.title-bar h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.3px;
  line-height: 1.25;
}

/* ── Corpo ── */
.form-body {
  margin-top: 4px;
}

.intro-eu {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 4px;
}

.body-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  margin: 5px 0 2px;
}

/* ── Seções (grid de campos com borda) ── */
.form-section {
  border: 1px solid #000;
  margin-bottom: 0;
}

.section-hdr {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 4px 1px;
  line-height: 1.3;
}

/* ── Linhas de campos ── */
.form-row {
  display: flex;
  border-top: 1px solid #000;
}

/* ── Células de campo ── */
.field-cell {
  border-right: 1px solid #000;
  padding: 2px 4px 3px;
  min-height: 38px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.field-cell.no-border-r {
  border-right: none;
}

.field-lbl {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
  white-space: nowrap;
  display: block;
  color: #000;
}

.field-cell input[type="text"] {
  border: none;
  outline: none;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  width: 100%;
  flex: 1;
  min-width: 0;
  padding: 0;
  margin-top: 1px;
  line-height: 1.4;
  color: #000;
}

.field-cell input[type="text"]:focus {
  background: #fffde7;
}

/* ── Texto declaratório ── */
.declaration-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  text-align: justify;
  margin: 8px 0 0;
  line-height: 1.45;
}

/* ── Texto legal ── */
.legal-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  text-align: justify;
  margin: 5px 0;
  line-height: 1.45;
}

/* ── Linha de data ── */
.date-line {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  margin: 28px 0 0;
  text-align: center;
  line-height: 2;
}

.inp-inline {
  border: none;
  border-bottom: 1px solid #000;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  text-align: center;
  background: transparent;
  vertical-align: baseline;
  padding: 0 2px;
}

.inp-inline:focus { background: #fffde7; }

.inp-city   { width: 160px; }
.inp-day    { width: 32px; }
.inp-month  { width: 120px; }
.inp-year   { width: 32px; }

/* ── Área de assinatura ── */
.signature-area {
  margin-top: 48px;
  margin-bottom: 16px;
}

.sig-line {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.signature-area p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0;
}

/* ── Observações ── */
.observations {
  margin-top: 8px;
}

.divider {
  border: none;
  border-top: 1px solid #000;
  margin: 4px 0;
}

.obs-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin: 3px 0 2px;
}

.obs-item {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin: 1px 0;
  line-height: 1.4;
}

/* ── Rodapé ── */
.form-footer {
  margin-top: 6px;
}

.form-footer p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  margin: 1px 0;
  line-height: 1.4;
}

.doc-code {
  text-align: left !important;
  font-size: 8px !important;
  margin-top: 4px !important;
}


/* ==========================================================
   DOCUMENTO PDF (#pdf-document)
   Oculto na tela — exibido apenas no @media print
   ========================================================== */

#pdf-document .pdf-page {
  padding: 14mm 18mm 10mm 18mm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  color: #000;
  background: #fff;
}

/* Cabeçalho */
#pdf-document .pdf-header {
  margin-bottom: 4pt;
  text-align: left;
}

#pdf-document .pdf-logo {
  height: 52pt;
}

/* Título */
#pdf-document .pdf-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13pt;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 2pt;
  line-height: 1.2;
}

#pdf-document .pdf-title-hr {
  border: none;
  border-top: 2px solid #000;
  margin: 2pt 0 5pt;
}

/* Textos auxiliares */
#pdf-document .pdf-intro {
  font-size: 10pt;
  font-weight: bold;
  margin: 0 0 3pt;
}

#pdf-document .pdf-body {
  font-size: 10pt;
  margin: 3pt 0 2pt;
}

/* Seções */
#pdf-document .pdf-section {
  border: 1px solid #000;
  margin-bottom: 0;
}

#pdf-document .pdf-shdr {
  font-size: 8pt;
  font-weight: bold;
  padding: 1pt 3pt;
  line-height: 1.3;
}

#pdf-document .pdf-row {
  display: flex;
  border-top: 1px solid #000;
}

#pdf-document .pdf-cell {
  border-right: 1px solid #000;
  padding: 1pt 3pt 2pt;
  min-height: 22pt;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

#pdf-document .pdf-cell.pdf-no-br {
  border-right: none;
}

#pdf-document .pdf-lbl {
  font-size: 7pt;
  display: block;
  line-height: 1.3;
  font-family: Arial, Helvetica, sans-serif;
}

#pdf-document .pdf-val {
  font-size: 9pt;
  display: block;
  flex: 1;
  padding-top: 1pt;
  font-family: Arial, Helvetica, sans-serif;
  word-break: break-word;
}

/* Textos declaratórios */
#pdf-document .pdf-declaration {
  font-size: 10pt;
  text-align: justify;
  margin: 4pt 0 0;
  line-height: 1.4;
}

#pdf-document .pdf-legal {
  font-size: 10pt;
  text-align: justify;
  margin: 4pt 0;
  line-height: 1.4;
}

/* Data */
#pdf-document .pdf-date {
  font-size: 10pt;
  margin: 18pt 0 0;
  text-align: center;
  line-height: 1.5;
}

/* Assinatura */
#pdf-document .pdf-signature {
  text-align: center;
  margin-top: 28pt;
  page-break-inside: avoid;
}

#pdf-document .pdf-sig-line {
  font-size: 10pt;
  margin-bottom: 2pt;
  letter-spacing: 0;
}

#pdf-document .pdf-signature p {
  font-size: 10pt;
  margin: 1pt 0;
}

/* Observações */
#pdf-document .pdf-obs {
  margin-top: 6pt;
}

#pdf-document .pdf-hr {
  border: none;
  border-top: 1px solid #000;
  margin: 3pt 0;
}

#pdf-document .pdf-obs-title {
  font-size: 8pt;
  margin: 2pt 0;
}

#pdf-document .pdf-obs-item {
  font-size: 8pt;
  margin: 1pt 0;
  line-height: 1.35;
}

/* Rodapé */
#pdf-document .pdf-footer {
  text-align: center;
  margin-top: 4pt;
}

#pdf-document .pdf-footer p {
  font-size: 8pt;
  margin: 1pt 0;
  line-height: 1.3;
}

#pdf-document .pdf-doc-code {
  text-align: left;
  font-size: 7pt;
  margin-top: 3pt;
}


/* ==========================================================
   Responsividade — tela
   ========================================================== */

@media (max-width: 900px) {
  .container {
    max-width: 100%;
    padding: 12px 16px;
  }

  .title-bar h2 {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .title-bar h2 {
    font-size: 13px;
  }

  .date-line {
    text-align: left;
  }

  .inp-city {
    width: 110px;
  }

  /* Quebra colunas pequenas para nova linha */
  .form-row {
    flex-wrap: wrap;
  }

  .field-cell[style*="width:10%"],
  .field-cell[style*="width:18%"],
  .field-cell[style*="width:20%"] {
    min-width: 80px;
  }
}

@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
  }

  .field-cell {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid #000;
  }

  .field-cell:last-child {
    border-bottom: none;
  }

  .field-cell.no-border-r {
    border-right: none;
    border-bottom: none;
  }

  .logo-detran {
    height: 50px;
  }

  .title-bar h2 {
    font-size: 12px;
  }
}