Fix Panel de Resultados

Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx

@@ -9,6 +9,22 @@ import 'react-circular-progressbar/dist/styles.css';
 const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 const formatVotes = (num: number) => Math.round(num).toLocaleString('es-AR');
 
+const SvgDefs = () => (
+  <svg style={{ height: 0, width: 0, position: 'absolute' }}>
+    <defs>
+      {/* El gradiente ahora se define para que el color oscuro se mantenga en la segunda mitad del recorrido vertical */}
+      <linearGradient id="participationGradient" gradientTransform="rotate(90)">
+        <stop offset="0%" stopColor="#e0f3ffff" />
+        <stop offset="100%" stopColor="#007bff" />
+      </linearGradient>
+      <linearGradient id="scrutinizedGradient" gradientTransform="rotate(90)">
+        <stop offset="0%" stopColor="#e0f3ffff" />
+        <stop offset="100%" stopColor="#007bff" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
 interface PanelResultadosProps {
   resultados: ResultadoTicker[];
   estadoRecuento: EstadoRecuentoTicker;
@@ -17,17 +33,20 @@ interface PanelResultadosProps {
 export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosProps) => {
   return (
     <div className="panel-resultados">
+      <SvgDefs />
       <div className="panel-estado-recuento">
         <div className="estado-item">
           <CircularProgressbar
             value={estadoRecuento.participacionPorcentaje}
             text={formatPercent(estadoRecuento.participacionPorcentaje)}
-            strokeWidth={10}
+            strokeWidth={12}
+            circleRatio={0.75} /* Se convierte en un arco de 270 grados */
             styles={buildStyles({
               textColor: '#333',
-              pathColor: '#28a745',
+              pathColor: 'url(#participationGradient)',
               trailColor: '#e9ecef',
-              textSize: '24px',
+              textSize: '22px',
+              rotation: 0.625, /* Rota el inicio para que la apertura quede abajo */
             })}
           />
           <span>Participación</span>
@@ -36,12 +55,14 @@ export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosP
           <CircularProgressbar
             value={estadoRecuento.mesasTotalizadasPorcentaje}
             text={formatPercent(estadoRecuento.mesasTotalizadasPorcentaje)}
-            strokeWidth={10}
+            strokeWidth={12}
+            circleRatio={0.75} /* Se convierte en un arco de 270 grados */
             styles={buildStyles({
               textColor: '#333',
-              pathColor: '#007bff',
+              pathColor: 'url(#scrutinizedGradient)',
               trailColor: '#e9ecef',
-              textSize: '24px',
+              textSize: '22px',
+              rotation: 0.625, /* Rota el inicio para que la apertura quede abajo */
             })}
           />
           <span>Escrutado</span>