/* PIEZA: tablas comparativas dentro del cuerpo del articulo
 * ---------------------------------------------------------------------------
 * Reescribe el bloque de tabla de Gutenberg (`wp:table`) para que se lea como
 * una pieza mas del sistema de diseno, no como el HTML de fabrica del
 * navegador (bordes finos por defecto, cabecera sin distinguir, sin scroll en
 * movil). Pensada para las tablas comparativas que ahora forman parte del
 * proceso de mejora de articulos (ver docs/MEJORA_ARTICULOS.md): la primera,
 * NIE frente a TIE en `diferencias-entre-tie-nie`, escrita a mano con
 * `<th scope="row">` en la primera columna para que sea tabla de verdad y no
 * una cuadricula de `<td>`, tanto para accesibilidad como para que un
 * asistente de IA la lea como lo que es.
 *
 * `.single` delante, igual que en `notas.css`: el CSS del Personalizador se
 * imprime DESPUES de las hojas encoladas (`wp_custom_css_cb`, prioridad 101
 * de `wp_head`), asi que sin ese prefijo pierde por especificidad.
 * --------------------------------------------------------------------------- */

.single .wp-block-table {
  margin: var(--dl-esp-lg) 0;
  overflow-x: auto; /* una tabla con mas columnas de las que caben no rompe el ancho */
}

.single .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--dl-texto);
  font-size: 0.95rem;
  color: var(--dl-tinta);
}

.single .wp-block-table th,
.single .wp-block-table td {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--dl-linea);
  text-align: left;
  vertical-align: top;
}

/* La cabecera de columna (fila superior): fondo del panel, sin gastar azul
   fuerte. La misma superficie que usa `.dl-nota`, para que se lea como del
   mismo sistema y no como un elemento suelto. */
.single .wp-block-table thead th {
  background-color: var(--dl-azul-100);
  font-weight: 700;
}

/* La cabecera de fila (primera columna, "Que es", "Caduca"...): se distingue
   del dato con un fondo mas suave y negrita, sin caja ni borde de color. */
.single .wp-block-table tbody th {
  background-color: var(--dl-papel);
  font-weight: 600;
  white-space: nowrap;
}

/* Cebra suave en el resto de columnas, solo para que el ojo no pierda la
   fila al cruzar una tabla ancha. Mismo tono que el fondo real de la pagina:
   no anade un color nuevo al sistema. */
.single .wp-block-table tbody tr:nth-child(even) td {
  background-color: var(--dl-papel);
}

@media (max-width: 700px) {
  .single .wp-block-table th,
  .single .wp-block-table td {
    padding: 0.5rem 0.65rem;
    font-size: 0.88rem;
  }

  /* En movil el hueco es el recurso escaso: la cabecera de fila deja de ir en
     una sola linea para no robarle ancho a la columna de datos. */
  .single .wp-block-table tbody th {
    white-space: normal;
  }
}