Muchos cambios

index.html

@@ -147,21 +147,49 @@
 
 <div class="main">
   <div class="section-block">
-    <div class="kpi-row-3">
+    <!-- Colas Actuales -->
+    <div class="kpi-row" style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #dfe1e6;">
+      <div class="kpi warning" style="border-color:#ff8b00;" title="Tickets que se encuentran en este preciso instante en la columna Code Review esperando o siendo revisados">
+        <div class="kpi-value" id="kpi-cr-queue-now">—</div>
+        <div class="kpi-label">En Cola Actual CR</div>
+        <div class="kpi-sub" id="kpi-cr-queue-sp">— SP en espera</div>
+      </div>
+      <div class="kpi warning" title="Tickets que se encuentran actualmente y desde hace más de 2 días atascados solos en la columna de revisión">
+        <div class="kpi-value" id="kpi-cr-stalled">—</div>
+        <div class="kpi-label">Tickets Atascados CR</div>
+        <div class="kpi-sub">Demorados actualmente (más de 2 días)</div>
+      </div>
+    </div>
+
+    <!-- Historial del período -->
+    <h3 style="font-size:14px; margin-bottom:12px; color:#172b4d;">Métricas del período seleccionado</h3>
+    <div class="kpi-row">
       <div class="kpi" style="border-color:#00b8d9;" title="Cantidad de tickets que registraron actividad en la fase de Code Review">
         <div class="kpi-value" id="kpi-cr-tickets">—</div>
         <div class="kpi-label">Tickets en CR</div>
         <div class="kpi-sub">Procesados en el período</div>
       </div>
-      <div class="kpi" style="border-color:#00b8d9;" title="Cantidad de horas promedio que tarda en resolverse una revisión general de código (Code Review)">
-        <div class="kpi-value" id="kpi-cr-avg">—</div>
-        <div class="kpi-label">Tiempo Prom. CR</div>
-        <div class="kpi-sub">Horas promedio por ticket</div>
+      <div class="kpi" style="border-color:#00b8d9;">
+        <div class="kpi-value" id="kpi-cr-p50">—</div>
+        <div class="kpi-label">
+          <div class="pop-trigger" style="border-bottom: 1px dotted #5e6c84;">Tiempo P50 CR
+            <div class="pop-content" style="text-transform:none; font-weight:normal; letter-spacing:normal; text-align:left;">
+              <div class="pop-item" style="font-size:12px;"><strong>Percentil 50 (Mediana)</strong><br>El 50% de las revisiones de código se completan en esta cantidad de horas o menos.<br><br>A diferencia del promedio tradicional, el P50 muestra un valor "habitual" sin ser distorsionado por tickets que queden atascados durante meses.</div>
+            </div>
+          </div>
+        </div>
+        <div class="kpi-sub">Horas (Mediana)</div>
       </div>
-      <div class="kpi warning" title="Tickets que se encuentran actualmente y desde hace más de 2 días atascados solos en la columna de revisión">
-        <div class="kpi-value" id="kpi-cr-stalled">—</div>
-        <div class="kpi-label">Tickets Atascados</div>
-        <div class="kpi-sub">Demorados actualmente en revisión</div>
+      <div class="kpi" style="border-color:#ff8b00;">
+        <div class="kpi-value" id="kpi-cr-p90">—</div>
+        <div class="kpi-label">
+          <div class="pop-trigger" style="border-bottom: 1px dotted #5e6c84;">Tiempos P90 y P99
+            <div class="pop-content" style="text-transform:none; font-weight:normal; letter-spacing:normal; text-align:left;">
+              <div class="pop-item" style="font-size:12px;"><strong>Métricas de Cuello de Botella</strong><br>Muestran los "peores escenarios" posibles.<br><br><strong>P90:</strong> El 90% de los tickets logra pasar en este tiempo. El 10% restante demoró aún más.<br><strong>P99:</strong> El 99% pasa en este tiempo. Ideal para medir los bloqueos máximos.</div>
+            </div>
+          </div>
+        </div>
+        <div class="kpi-sub" id="kpi-cr-p99-sub">P99: — hs</div>
       </div>
     </div>
 
@@ -187,7 +215,22 @@
 <div class="main">
   <div class="section-block">
 
-    <!-- KPIs -->
+    <!-- Colas Actuales -->
+    <div class="kpi-row" style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #dfe1e6;">
+      <div class="kpi qa-queue" style="border-color:#ff8b00;" title="Tickets que se encuentran en este preciso instante en la columna Ready to QA">
+        <div class="kpi-value" id="kpi-qa-queue-now">—</div>
+        <div class="kpi-label">En Cola Actual RTQA</div>
+        <div class="kpi-sub" id="kpi-qa-queue-now-sp">— SP esperando</div>
+      </div>
+      <div class="kpi qa" style="border-color:#0065ff;" title="Tickets que se encuentran en este preciso instante siendo probados en la columna QA">
+        <div class="kpi-value" id="kpi-qa-active-now">—</div>
+        <div class="kpi-label">En Cola Actual QA</div>
+        <div class="kpi-sub" id="kpi-qa-active-now-sp">— SP en prueba</div>
+      </div>
+    </div>
+
+    <!-- KPIs del período -->
+    <h3 style="font-size:14px; margin-bottom:12px; color:#172b4d;">Métricas del período seleccionado</h3>
     <div class="kpi-row">
       <div class="kpi qa" title="Total de tickets que han pasado por QA">
         <div class="kpi-value" id="kpi-qa-tickets">—</div>