4. dibujarGraficoCircular

/* ==================================================================
   dibujarGraficoCircular(contenedorId, datos)

   Dibuja un gráfico circular con leyenda.

   USO MÍNIMO:
   - contenedorId: id del div donde se dibuja el gráfico.
   - datos: arreglo de objetos con esta forma:
       { label: "Texto", valor: número, color: "#hex" }

   EJEMPLO MÍNIMO EN HTML:
   <div
     id="circular-1"
     class="grafico-circular-auto"
     data-datos='[
       {"label":"A","valor":6,"color":"#ff9800"},
       {"label":"B","valor":9,"color":"#4caf50"},
       {"label":"C","valor":3,"color":"#2196f3"}
     ]'>
   </div>

   EJEMPLO MÍNIMO DE LLAMADA DIRECTA:
   dibujarGraficoCircular("circular-1", [
     { label: "A", valor: 6, color: "#ff9800" },
     { label: "B", valor: 9, color: "#4caf50" },
     { label: "C", valor: 3, color: "#2196f3" }
   ]);

   OBSERVACIONES:
   - Si falta color en algún sector, se asigna un color por defecto.
   - Si un valor es 0, no se dibuja sector, pero sí puede aparecer en la leyenda.
   - Si el total es 0, la función muestra un mensaje en vez del gráfico.
   ================================================================== */