/* Folha de impressão A4 dos relatórios de instrumento.
   CSS puro e classes semânticas de propósito: o mesmo arquivo serve o template
   React aqui e o partial ERB no Rails, sem depender de utilitários de framework.
   Unidades em mm e pt porque o destino é papel, não viewport. */

@page {
  size: A4 portrait;
  margin: 12mm 14mm 16mm;
}

:root {
  --rpt-paper: #ffffff;
  --rpt-ink: #1f2937;
  --rpt-ink-muted: #6b7280;
  --rpt-ink-faint: #9ca3af;
  --rpt-line: #d8dce2;
  --rpt-hairline: #e9ecef;
  --rpt-brand: #11ac9d;
  --rpt-shade: #f5f7f8;
}

.rpt {
  font-family: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 9.5pt;
  line-height: 1.45;
  color: var(--rpt-ink);
  background: var(--rpt-paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.rpt,
.rpt * {
  box-sizing: border-box;
}

.rpt h1,
.rpt h2,
.rpt h3,
.rpt p,
.rpt ul,
.rpt ol {
  margin: 0;
}

.rpt-sheet {
  width: 182mm;
  margin: 0 auto;
  /* Sem padding: a margem de topo é do @page. Somar as duas empurrava o conteúdo
     12mm para baixo e custava uma página inteira nos relatórios mais longos. */
  padding: 0;
}

/* O app pinta o body com a cor de canvas; no papel isso vira um retângulo cinza
   em toda sobra de página. A folha impressa é branca. */
@media print {
  html:has(.rpt),
  body:has(.rpt) {
    background: #fff;
  }
}

/* Na tela a folha aparece sobre um fundo cinza para o recorte do papel ficar
   visível durante o desenho. Na impressão isso desaparece. */
@media screen {
  body:has(.rpt) {
    background: #eceff1;
  }
  .rpt-sheet {
    background: #fff;
    width: 210mm;
    padding: 12mm 14mm 16mm;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    margin: 8mm auto;
  }
}

/* ─── Cabeçalho ───────────────────────────────────────────────────────────── */

.rpt-masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8mm;
  padding-bottom: 2.5mm;
  border-bottom: 1.2pt solid var(--rpt-brand);
}

.rpt-clinic {
  max-width: 112mm;
}

.rpt-clinic--logo {
  display: flex;
  align-items: center;
  gap: 4mm;
}

.rpt-clinic--logo .rpt-clinic-line:first-child {
  margin-top: 0;
}

/* Caixa fixa: logo alto e logo deitado ocupam a mesma altura de assinatura,
   então o cabeçalho não muda de altura de uma clínica para outra. */
.rpt-logo {
  display: block;
  height: 9mm;
  max-width: 40mm;
  object-fit: contain;
  object-position: left center;
}

.rpt-clinic-name {
  font-size: 10.5pt;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.rpt-clinic-line {
  font-size: 7.5pt;
  color: var(--rpt-ink-muted);
  margin-top: 0.4mm;
}

.rpt-instrument {
  text-align: right;
  font-size: 7.5pt;
  color: var(--rpt-ink-muted);
  line-height: 1.35;
  max-width: 62mm;
}

.rpt-instrument strong {
  display: block;
  font-size: 9pt;
  font-weight: 650;
  color: var(--rpt-ink);
}

.rpt-title {
  font-size: 19pt;
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 5mm 0 1mm;
}

.rpt-subtitle {
  font-size: 9pt;
  color: var(--rpt-ink-muted);
  max-width: 130mm;
}

/* ─── Identificação ───────────────────────────────────────────────────────── */

.rpt-identity {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm 6mm;
  margin: 5mm 0 0;
  padding: 3.5mm 0;
  border-top: 0.4pt solid var(--rpt-line);
  border-bottom: 0.4pt solid var(--rpt-line);
}

.rpt-field-label {
  font-size: 7pt;
  font-weight: 600;
  color: var(--rpt-ink-faint);
  letter-spacing: 0.01em;
}

.rpt-field-value {
  font-size: 9.5pt;
  font-weight: 550;
  margin-top: 0.3mm;
}

.rpt-note {
  margin-top: 3mm;
  padding: 2.5mm 3mm;
  background: var(--rpt-shade);
  border-left: 1.5pt solid var(--rpt-brand);
  font-size: 8pt;
  color: var(--rpt-ink-muted);
  line-height: 1.4;
}

/* ─── Blocos ──────────────────────────────────────────────────────────────── */

.rpt-block {
  margin-top: 7mm;
  break-inside: avoid;
}

.rpt-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6mm;
  margin-bottom: 3mm;
  padding-bottom: 1.2mm;
  border-bottom: 0.4pt solid var(--rpt-line);
}

.rpt-block-title {
  font-size: 12.5pt;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.rpt-block-hint {
  font-size: 7.5pt;
  color: var(--rpt-ink-muted);
  text-align: right;
}

.rpt-lead {
  font-size: 9pt;
  line-height: 1.5;
  max-width: 160mm;
}

.rpt-lead + .rpt-lead {
  margin-top: 1.5mm;
}

.rpt-page-break {
  break-before: page;
}

/* ─── Régua de desenvolvimento ────────────────────────────────────────────── */

.rpt-ruler {
  position: relative;
}

.rpt-ruler-row {
  display: grid;
  grid-template-columns: 30mm 1fr 17mm 13mm;
  align-items: center;
  column-gap: 3mm;
  break-inside: avoid;
}

.rpt-ruler-row--no-delta {
  grid-template-columns: 30mm 1fr 17mm;
}

.rpt-ruler-scale {
  font-size: 7pt;
  color: var(--rpt-ink-faint);
  height: 4mm;
}

.rpt-ruler-track {
  position: relative;
  height: 5.6mm;
}

.rpt-ruler-scale .rpt-ruler-track {
  height: 4mm;
}

.rpt-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.rpt-gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.4pt;
  background: var(--rpt-hairline);
}

.rpt-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.6pt;
  transform: translateY(-50%);
  background: var(--rpt-line);
}

.rpt-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2.2mm;
  transform: translateY(-50%);
  border-radius: 0.6mm;
}

/* Área limitada pela cobertura: a barra é um piso, não uma medida fechada. */
.rpt-fill--bounded {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0,
    rgba(255, 255, 255, 0.85) 0.5mm,
    transparent 0.5mm,
    transparent 1.1mm
  );
}

.rpt-marker {
  position: absolute;
  top: 50%;
  width: 2.4mm;
  height: 2.4mm;
  border-radius: 50%;
  border: 0.8pt solid #fff;
  transform: translate(-50%, -50%);
}

.rpt-beyond {
  position: absolute;
  right: 0;
  top: 50%;
  height: 3.6mm;
  transform: translateY(-50%);
  border-left: 0.8pt solid var(--rpt-ink-faint);
  /* Cinza chapado, não hachura: aqui há dado, e ele é zero. A hachura fica
     reservada para ausência de dado, que é a faixa não aplicada da matriz. */
  background: var(--rpt-shade);
}

.rpt-chrono {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.9pt;
  background: var(--rpt-ink);
  transform: translateX(-50%);
}

.rpt-chrono-flag {
  position: absolute;
  top: -0.5mm;
  transform: translateX(-50%);
  font-size: 7pt;
  font-weight: 600;
  color: var(--rpt-ink);
  white-space: nowrap;
  background: #fff;
  padding: 0 1mm;
}

.rpt-area-name {
  display: flex;
  align-items: center;
  gap: 1.6mm;
  font-size: 9pt;
  font-weight: 550;
}

.rpt-dot {
  width: 2.2mm;
  height: 2.2mm;
  border-radius: 50%;
  flex: none;
}

.rpt-equiv {
  text-align: right;
  font-size: 9pt;
  font-weight: 600;
}

.rpt-delta {
  text-align: right;
  font-size: 8.5pt;
  font-weight: 600;
}

.rpt-delta--behind { color: #b45309; }
.rpt-delta--near { color: var(--rpt-ink-muted); }
.rpt-delta--none { color: var(--rpt-ink-faint); font-weight: 500; }

.rpt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm 5mm;
  margin-top: 3mm;
  padding-top: 2mm;
  border-top: 0.4pt solid var(--rpt-hairline);
  font-size: 7.5pt;
  color: var(--rpt-ink-muted);
}

.rpt-legend-item {
  display: flex;
  align-items: center;
  gap: 1.4mm;
}

.rpt-swatch {
  width: 3.4mm;
  height: 2.4mm;
  border: 0.4pt solid var(--rpt-line);
  flex: none;
}

.rpt-swatch--beyond {
  border: 0;
  border-left: 0.8pt solid var(--rpt-ink-faint);
  /* Cinza chapado, não hachura: aqui há dado, e ele é zero. A hachura fica
     reservada para ausência de dado, que é a faixa não aplicada da matriz. */
  background: var(--rpt-shade);
}

.rpt-swatch--chrono {
  width: 0.9pt;
  height: 3mm;
  border: 0;
  background: var(--rpt-ink);
}

.rpt-caption {
  margin-top: 3mm;
  padding-top: 2mm;
  border-top: 0.4pt solid var(--rpt-hairline);
  font-size: 7.5pt;
  color: var(--rpt-ink-muted);
}

/* ─── Matriz de faixas ────────────────────────────────────────────────────── */

.rpt-matrix {
  width: 100%;
  /* Largura fixa: as seis faixas ocupam colunas iguais. Em layout automático o
     rótulo sob a célula ("faixa de trabalho" contra "teto") esticava a coluna, e
     barras de larguras diferentes sugeriam significado que não existe. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 8pt;
}

.rpt-matrix th {
  font-size: 7pt;
  font-weight: 600;
  color: var(--rpt-ink-faint);
  text-align: center;
  padding: 0 0 1.5mm;
}

.rpt-matrix th:first-child {
  text-align: left;
  width: 30mm;
}

.rpt-matrix td {
  padding: 1.2mm 0.8mm;
  border-top: 0.4pt solid var(--rpt-hairline);
  vertical-align: middle;
}

.rpt-matrix tr {
  break-inside: avoid;
}

.rpt-matrix-area {
  font-weight: 550;
  font-size: 8.5pt;
  padding-right: 3mm !important;
}

.rpt-cell {
  text-align: center;
}

.rpt-bar {
  position: relative;
  height: 4.4mm;
  border: 0.4pt solid var(--rpt-line);
  overflow: hidden;
}

.rpt-bar-acquired,
.rpt-bar-developing {
  position: absolute;
  top: 0;
  bottom: 0;
}

.rpt-bar-count {
  position: relative;
  display: block;
  font-size: 7pt;
  font-weight: 600;
  line-height: 4.4mm;
  color: var(--rpt-ink);
}

.rpt-bar--empty .rpt-bar-count {
  color: var(--rpt-ink-faint);
  font-weight: 500;
}

.rpt-bar--unassessed {
  background-image: repeating-linear-gradient(
    135deg,
    var(--rpt-hairline) 0,
    var(--rpt-hairline) 0.6mm,
    #fff 0.6mm,
    #fff 1.4mm
  );
}

.rpt-cell-flag {
  display: block;
  font-size: 6.5pt;
  color: var(--rpt-ink-muted);
  margin-top: 0.5mm;
  height: 2.6mm;
}

/* ─── Alvos de ensino ─────────────────────────────────────────────────────── */

.rpt-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm 6mm;
}

.rpt-target-group {
  break-inside: avoid;
  border-top: 0.8pt solid var(--rpt-line);
  padding-top: 1.8mm;
}

.rpt-target-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3mm;
  margin-bottom: 1.2mm;
}

.rpt-target-area {
  display: flex;
  align-items: center;
  gap: 1.6mm;
  font-size: 9pt;
  font-weight: 620;
}

.rpt-target-band {
  font-size: 7pt;
  color: var(--rpt-ink-muted);
}

.rpt-target {
  display: grid;
  grid-template-columns: 11mm 1fr;
  column-gap: 2mm;
  font-size: 8.5pt;
  line-height: 1.35;
  padding: 1mm 0;
  border-top: 0.4pt solid var(--rpt-hairline);
}

.rpt-target-code {
  font-weight: 650;
  color: var(--rpt-ink-muted);
  font-size: 8pt;
}

.rpt-target-status {
  display: block;
  font-size: 7pt;
  color: var(--rpt-ink-muted);
  margin-top: 0.3mm;
}

.rpt-empty {
  font-size: 8.5pt;
  color: var(--rpt-ink-muted);
  padding: 1mm 0;
}

/* ─── Fecho ───────────────────────────────────────────────────────────────── */

.rpt-synthesis {
  padding: 3.5mm 4mm;
  background: var(--rpt-shade);
  border-left: 1.5pt solid var(--rpt-brand);
  break-inside: avoid;
}

.rpt-signature {
  margin-top: 14mm;
  display: grid;
  grid-template-columns: 78mm;
  break-inside: avoid;
}

.rpt-signature-rule {
  border-top: 0.6pt solid var(--rpt-ink);
  padding-top: 1.2mm;
  font-size: 8.5pt;
  font-weight: 550;
}

.rpt-signature-meta {
  font-size: 7.5pt;
  color: var(--rpt-ink-muted);
}

.rpt-legal {
  margin-top: 6mm;
  padding-top: 2mm;
  border-top: 0.4pt solid var(--rpt-line);
  font-size: 7pt;
  line-height: 1.45;
  color: var(--rpt-ink-muted);
  break-inside: avoid;
}

.rpt-legal p + p {
  margin-top: 1mm;
}