/* v20: celdas derechas grises reales.
   Regla final: etiqueta verde claro + valor gris, con texto negro normal. */

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

/* Certificado: texto normal */
html body #pageMain,
html body .page,
html body #pageMain *,
html body .page *{
  color:var(--sp-cell-text) !important;
  text-shadow:none !important;
}

/* Quitar cualquier negrita/verde forzado en campos */
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 .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{
  font-family:Arial, Helvetica, sans-serif !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* Las filas deben ocupar todo el ancho del bloque */
html body #pageMain .vehicle-row,
html body #pageMain .owner-row,
html body #pageMain .merchandise-row,
html body #pageMain .date-row,
html body .page .vehicle-row,
html body .page .owner-row,
html body .page .merchandise-row,
html body .page .date-row{
  display:grid !important;
  grid-template-columns:150px minmax(0, 1fr) !important;
  width:100% !important;
  min-height:25px !important;
  gap:0 !important;
  margin:0 0 5px 0 !important;
  border:0 !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

/* Mantener los bloques de datos anchos */
html body #pageMain .vehicle-left,
html body #pageMain .owner-rows,
html body #pageMain .vehicle-dates,
html body .page .vehicle-left,
html body .page .owner-rows,
html body .page .vehicle-dates{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* El bloque de vehículo conserva el camión a la derecha */
html body #pageMain .vehicle-area,
html body .page .vehicle-area{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 185px !important;
  column-gap:10px !important;
}

/* Columna izquierda verde claro */
html body #pageMain .vehicle-label,
html body #pageMain .owner-label,
html body #pageMain .merchandise-label,
html body #pageMain .date-label,
html body .page .vehicle-label,
html body .page .owner-label,
html body .page .merchandise-label,
html body .page .date-label{
  background:var(--sp-cell-label) !important;
  color:var(--sp-cell-text) !important;
  min-height:25px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  white-space:normal !important;
}

/* Columna derecha gris completa, incluso vacía */
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 #pageMain .vehicle-row > div:nth-child(2),
html body #pageMain .owner-row > div:nth-child(2),
html body #pageMain .merchandise-row > div:nth-child(2),
html body #pageMain .date-row > div:nth-child(2),
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,
html body .page .vehicle-row > div:nth-child(2),
html body .page .owner-row > div:nth-child(2),
html body .page .merchandise-row > div:nth-child(2),
html body .page .date-row > div:nth-child(2){
  background:var(--sp-cell-value) !important;
  color:var(--sp-cell-text) !important;
  min-height:25px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Productos / mercancía puede ser más alto */
html body #pageMain .prod-box,
html body .page .prod-box{
  min-height:56px !important;
  align-items:flex-start !important;
  padding-top:6px !important;
  width:100% !important;
  margin-left:0 !important;
}

/* Fechas: mismo patrón */
html body #pageMain .vehicle-dates .date-row,
html body .page .vehicle-dates .date-row{
  grid-template-columns:150px minmax(0, 1fr) !important;
}

@media print{
  html body #pageMain .vehicle-label,
  html body #pageMain .owner-label,
  html body #pageMain .merchandise-label,
  html body #pageMain .date-label,
  html body .page .vehicle-label,
  html body .page .owner-label,
  html body .page .merchandise-label,
  html body .page .date-label{
    background:#d6e9e5 !important;
    color:#111 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  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 .vehicle-value,
  html body .page .owner-value,
  html body .page .merchandise-value,
  html body .page .date-value,
  html body .page .prod-box{
    background:#ececec !important;
    color:#111 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}