/* v21: ajuste final solicitado.
   Código de verificación en negrilla, código +5px, celdas derecha grises
   y filas desde RAZON SOCIAL un poco más cortas. */

:root{
  --sp-cell-label:#d6e9e5;
  --sp-cell-value:#e9e9e9;
  --sp-cell-text:#111111;
}

/* Código de verificación */
html body #pageMain .code-box,
html body .page .code-box{
  height:36px !important;
  display:grid !important;
  grid-template-columns:165px 96px 46px !important;
  border:1px solid #8c8c8c !important;
  overflow:hidden !important;
  background:#fff !important;
}

html body #pageMain .code-label,
html body .page .code-label{
  background:var(--sp-cell-label) !important;
  color:var(--sp-cell-text) !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 8px !important;
  border-right:1px solid #8c8c8c !important;
  white-space:nowrap !important;
}

html body #pageMain .code-value,
html body .page .code-value{
  background:var(--sp-cell-value) !important;
  color:var(--sp-cell-text) !important;
  font-weight:800 !important;
  font-size:20.5px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 6px !important;
  border-right:1px solid #8c8c8c !important;
  white-space:nowrap !important;
}

/* Filas del certificado: etiqueta verde + valor gris visible */
html body #pageMain .vehicle-row,
html body .page .vehicle-row,
html body #pageMain .owner-row,
html body .page .owner-row,
html body #pageMain .merchandise-row,
html body .page .merchandise-row,
html body #pageMain .date-row,
html body .page .date-row{
  display:grid !important;
  align-items:stretch !important;
  min-height:23px !important;
  height:auto !important;
  margin-bottom:5px !important;
  border:0 !important;
  overflow:visible !important;
}

html body #pageMain .vehicle-row,
html body .page .vehicle-row{
  grid-template-columns:150px minmax(260px,1fr) !important;
  width:100% !important;
}

html body #pageMain .owner-row,
html body .page .owner-row,
html body #pageMain .merchandise-row,
html body .page .merchandise-row,
html body #pageMain .date-row,
html body .page .date-row{
  grid-template-columns:150px minmax(260px,1fr) !important;
  width:100% !important;
}

/* Desde RAZON SOCIAL hacia abajo: un poquito más corto */
html body #pageMain .owner-rows,
html body .page .owner-rows,
html body #pageMain .merchandise-row,
html body .page .merchandise-row,
html body #pageMain .vehicle-dates,
html body .page .vehicle-dates{
  width:calc(100% - 72px) !important;
  max-width:640px !important;
  margin-left:4px !important;
  margin-right:auto !important;
}

html body #pageMain .vehicle-left,
html body .page .vehicle-left{
  width:100% !important;
  min-width:0 !important;
}

html body #pageMain .vehicle-label,
html body .page .vehicle-label,
html body #pageMain .owner-label,
html body .page .owner-label,
html body #pageMain .merchandise-label,
html body .page .merchandise-label,
html body #pageMain .date-label,
html body .page .date-label{
  background:var(--sp-cell-label) !important;
  color:var(--sp-cell-text) !important;
  font-weight:700 !important;
  font-size:12px !important;
  line-height:1.05 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:23px !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  overflow:hidden !important;
}

html body #pageMain .vehicle-value,
html body .page .vehicle-value,
html body #pageMain .owner-value,
html body .page .owner-value,
html body #pageMain .merchandise-value,
html body .page .merchandise-value,
html body #pageMain .date-value,
html body .page .date-value{
  background:var(--sp-cell-value) !important;
  color:var(--sp-cell-text) !important;
  font-weight:400 !important;
  font-size:12px !important;
  line-height:1.1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:23px !important;
  width:100% !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  overflow:hidden !important;
}

/* La caja de productos también debe verse como celda gris */
html body #pageMain .prod-box,
html body .page .prod-box{
  background:var(--sp-cell-value) !important;
  color:var(--sp-cell-text) !important;
  font-weight:400 !important;
  width:calc(100% - 72px) !important;
  max-width:640px !important;
  min-height:54px !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
  margin-left:4px !important;
  margin-right:auto !important;
}

@media print{
  html body #pageMain .code-label,
  html body #pageMain .code-value,
  html body #pageMain .vehicle-label,
  html body #pageMain .owner-label,
  html body #pageMain .merchandise-label,
  html body #pageMain .date-label,
  html body #pageMain .vehicle-value,
  html body #pageMain .owner-value,
  html body #pageMain .merchandise-value,
  html body #pageMain .date-value,
  html body #pageMain .prod-box,
  html body .page .code-label,
  html body .page .code-value,
  html body .page .vehicle-label,
  html body .page .owner-label,
  html body .page .merchandise-label,
  html body .page .date-label,
  html body .page .vehicle-value,
  html body .page .owner-value,
  html body .page .merchandise-value,
  html body .page .date-value,
  html body .page .prod-box{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}