/* Leyenda de chips (ficha C11; js/vista/leyenda.js). Los estilos en línea de datos/Leyenda de la maqueta
   (_ds_bundle.js, líneas 990-1087), pasados a clases que leen los valores de tokens.css. Las muestras usan los mismos
   colores que el gráfico (css/vista/grafico.css): los grises de banda, el del mercado y los dos de rombo; nunca las
   tintas de zona (regla de color 8). */

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--esp-4);
  color: var(--texto-secundario);
  font-size: var(--texto-s);
}

.leyenda__entrada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.muestra {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 10px;
}

/* Ingreso / Promoción: sin relleno y con borde discontinuo (regla 3). */
.muestra--sin-relleno {
  border: 1px dashed var(--bigote);
  background: transparent;
}

/* Crecimiento y Madurez comparten el gris claro; Mercado se distingue (regla 2). */
.muestra--clara {
  background: var(--banda-clara);
}

.muestra--mercado {
  background: var(--banda-mercado);
}

/* P50: línea continua; P25 / P75: discontinua (regla 5, HU-003.CA-15). */
.muestra--continua {
  height: 0;
  border-top: 2.5px solid var(--mercado-marcador);
}

.muestra--discontinua {
  height: 0;
  border-top: 2px dashed var(--mercado-marcador);
}

/* Rombo: un cuadro girado, con relleno semitransparente y borde opaco del mismo tono, como en el gráfico (P-195). */
.muestra--rombo {
  position: relative;
  width: 9px;
  height: 9px;
  margin: 0 2px;
  border: 1px solid transparent;
  transform: rotate(45deg);
}

.muestra--rombo::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--rombo-opacidad);
}

.muestra--rombo-empleado {
  border-color: var(--rombo-empleado);
}

.muestra--rombo-empleado::before {
  background: var(--rombo-empleado);
}

.muestra--rombo-convencionado {
  border-color: var(--rombo-convencionado);
}

.muestra--rombo-convencionado::before {
  background: var(--rombo-convencionado);
}