/* Hoja de estilos del certificado RTV en PDF.
   Lo convierte WeasyPrint (motor de maquetado CSS completo: @page, flexbox,
   letter-spacing...). El maquetado se sigue haciendo con tablas porque
   reproduce el certificado original, no porque el motor lo necesite.

   El fondo es la hoja membretada (2480x3508 px = A4 a 300 ppp) y la aplica
   rtv/pdf.py como fondo de pagina (la convierte antes de CMYK a RGB).
   Margenes medidos sobre esa hoja:
     - cabecera con logos y nombre: ocupa hasta el 12.1% del alto (102 pt)
     - pie con alcalde y direccion: empieza en el 90.8% (764 pt)
   Se dejan ~8 mm de aire arriba y ~5 mm abajo para que el contenido no
   toque las bandas impresas de la hoja. */

/* Margenes uno a uno: son los mismos que medidos sobre la hoja membretada. */
@page {
  size: A4 portrait;
  margin-top: 44mm;
  margin-right: 15mm;
  margin-bottom: 32mm;
  margin-left: 15mm;
}

/* "Liberation Sans" es la fuente del servidor con la misma metrica que Arial:
   asi el certificado se ve igual en Windows (desarrollo) y en Linux. */
body {
  margin: 0;
  color: #1f2f36;
  font: 8.5pt/1.35 Arial, "Liberation Sans", "DejaVu Sans", Helvetica, sans-serif;
}
.sheet { width: 100%; }

/* --- Título del documento --- */
/* El encabezado de la empresa ya viene impreso en la hoja membretada. */
.doc-title {
  margin: 0 0 8px;
  font-size: 12.5pt;
  font-weight: bold;
  text-align: center;
  letter-spacing: .07em;
}

/* --- Fila de control: fecha / vigencia / estado --- */
.doc-meta { width: 100%; margin-bottom: 2px; }
.doc-meta td {
  width: 33%;
  padding: 5px 9px;
  background-color: #f2f7f8;
  vertical-align: top;
}
.doc-meta .value { font-size: 10pt; }

.label { color: #6b7b84; font-size: 6.6pt; letter-spacing: .07em; text-transform: uppercase; }
.value { font-weight: bold; }
.gap-top { margin-top: 5px; }

/* --- Títulos de sección --- */
h2 {
  margin: 9px 0 4px;
  font-size: 9pt;
  color: #21444c;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid #c3d0d5;
  padding-bottom: 2px;
  /* El titulo no se queda solo al final de una hoja: si el bloque que viene
     detras no cabe, los dos pasan a la pagina siguiente. */
  break-after: avoid;
  page-break-after: avoid;
}

/* --- Datos del propietario y vehículo --- */
/* Una linea por dato: etiqueta estrecha a la izquierda y valor con todo el
   ancho restante, asi ningun dato se parte en dos lineas. */
.datos { width: 100%; }
.datos td {
  padding: 3px 9px;
  border-bottom: 1px solid #e9eef0;
  vertical-align: top;
}

.datos td.dato-label {
  width: 16%;
  background-color: #f2f7f8;
  color: #5c6d76;
  font-size: 6.8pt;
  letter-spacing: .05em;
  text-transform: uppercase;
  /* Las etiquetas nunca se parten: la columna crece lo justo y el valor se
     queda con el resto del ancho. */
  white-space: nowrap;
}

/* Fondo blanco para que la marca de agua del membrete no se transparente
   detras de los datos y el bloque se lea limpio. */
.datos td.dato-valor { font-size: 8.5pt; color: #1f2f36; background-color: #ffffff; }
.datos .defecto-n { font-weight: bold; }

/* --- Tabla de resultados de inspección --- */
.results { width: 100%; }

/* Reparto de anchos: el defecto se lleva el espacio, los datos van justos */
.results th.c-defecto { width: 48%; }
.results th.c-unidad { width: 9%; }
.results th.c-valor { width: 12%; }
.results th.c-rango { width: 14%; }
.results th.c-calif { width: 10%; }
.results th.c-ubic { width: 7%; }

/* Encabezado de la tabla */
.results thead th {
  padding: 5px 6px;
  background-color: #e4eef0;
  color: #2c454e;
  font-size: 6.8pt;
  line-height: 1.15;
  font-weight: bold;
  letter-spacing: .05em;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #93a9b0;
}

/* Filas de grupo (Sonómetro, Frenómetro...) */
.results tr.group th {
  padding: 4px 9px;
  background-color: #d7e6e8;
  color: #1c3d45;
  font-size: 8pt;
  line-height: 1.15;
  font-weight: bold;
  text-align: left;
  border-top: 1px solid #adc2c8;
  border-bottom: 1px solid #adc2c8;
}

/* Filas de datos: fondo blanco para que la marca de agua no estorbe la lectura */
.results tbody td {
  padding: 2px 6px;
  background-color: #ffffff;
  border-bottom: 1px solid #e9eef0;
  font-size: 7.5pt;
  line-height: 1.1;
  text-align: left;
  vertical-align: top;
}
.results tr.row-b td { background-color: #f7fafb; }

/* El tipo de defecto (MECATRONICAS) va como etiqueta pequena en su propia linea
   encima de la descripcion: el detalle se lee mejor asi que todo junto. */
.results td.defecto div { margin: 0; line-height: 1.15; }
.results td.defecto .tipo {
  color: #7d8d95;
  font-size: 6.5pt;
  letter-spacing: .03em;
}

.results td.defecto .descripcion { color: #1f2f36; }

.calif-ok { color: #1c6b3f; }
.calif-defecto { color: #a93a1c; }

/* OJO: `.results .center` necesita mas especificidad que `.results tbody td` */
.results .center { text-align: center; }

.strong { font-weight: bold; }
.empty { color: #6b7b84; font-size: 7.5pt; }

/* --- Diagrama de localización de defectos y código QR --- */
/* Sin recuadro: el diagrama y el marco del QR ya traen su propio diseno. El
   bloque no se parte entre hojas y la url no se separa de los graficos. */
.diagram {
  padding: 0;
  break-inside: avoid;
  page-break-inside: avoid;
}

.diagrama-fila { width: 100%; }
.diagrama-fila td { vertical-align: middle; }
.diagrama-imagen { width: 50%; text-align: center; }
.diagrama-imagen img { width: 205px; }
.diagrama-qr { width: 50%; text-align: center; }

/* qr.jpg es el marco; el codigo y la leyenda ya van dentro desde rtv/pdf.py.
   Mismo tamano que el recuadro de localizacion de defectos. El ancho esta
   medido para que el bloque (diagrama + QR + url) entre en la hoja A4 que
   ocupan los datos y la tabla de resultados. */
.qr-marco { width: 205px; }
.qr-url {
  margin-top: 5px;
  color: #5c6d76;
  font-size: 6.8pt;
  text-align: center;
  break-before: avoid;
  page-break-before: avoid;
}