/* ---------------------------------------------------------------------------
   Leyenda de color de las gráficas matriciales.

   La usan graficas/js/ClimaticosMatriz.js (en /climaticos) y
   js/graficas/ano/GraficasAnoMatriz.js (en /anuales). Vive en un fichero propio
   porque esas dos páginas no comparten ninguna hoja de estilos: /climaticos carga
   graficas/css/graficas.css y /anuales carga css/graficas.css, que son ficheros
   distintos pese al nombre. Antes estaba dentro de nube-temperaturas.css, que solo
   carga /climaticos.

   Quien añada otra matriz solo tiene que enlazar esta hoja y usar estas clases.
   --------------------------------------------------------------------------- */

.matriz-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 14px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.72em;
  color: rgba(0, 0, 0, 0.6);
}

.matriz-leyenda__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.matriz-leyenda__color {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

/* Muestra de "sin datos" cuando la celda se dibuja como una cruz (matrices de
   /climaticos): dos degradados en diagonal, para no depender de ninguna imagen.
   La matriz de /anuales no la usa: allí los días sin dato se pintan en gris. */
.matriz-leyenda__color--cruz {
  border-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 43%, #b4b4b4 43%, #b4b4b4 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #b4b4b4 43%, #b4b4b4 57%, transparent 57%);
}