From 058b5849b45d13ecf6abc970a6b9be03c1d12549 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Thu, 23 Jul 2026 04:27:11 +0000
Subject: [PATCH] Autosave: 20260723-042834

---
 assets/css/style.css                 | 96 ++++++++++++++++++++++++++++
 includes/callcenter_test_helpers.php | 28 ++++----
 2 files changed, 112 insertions(+), 12 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 2acd9193..bedd1106 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -517,6 +517,49 @@ h1, .h1 {
     border-color: rgba(20, 184, 166, .18);
 }
 
+.cc-kpi-performance-box.cc-kpi-pill {
+    width: fit-content;
+    max-width: 100%;
+    min-width: 0;
+    flex: 0 0 auto;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .45rem;
+    padding: .28rem .48rem;
+    align-self: flex-start;
+}
+
+.cc-kpi-performance-head {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: .35rem;
+    min-width: 0;
+    white-space: nowrap;
+}
+
+.cc-kpi-performance-box .cc-kpi-label {
+    min-width: 0;
+    flex: 0 1 auto;
+}
+
+.cc-kpi-performance-box .cc-kpi-value {
+    flex: 0 0 auto;
+    font-size: 1.38rem;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.cc-kpi-performance-box .cc-kpi-meta {
+    color: #475569;
+    line-height: 1.05;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .cc-kpi-meta {
     font-size: .73rem;
     line-height: 1.15;
@@ -598,6 +641,59 @@ h1, .h1 {
     white-space: nowrap;
 }
 
+@media (min-width: 1200px) {
+    .cc-kpi-status-legend {
+        padding: .55rem;
+        gap: .22rem;
+    }
+
+    .cc-kpi-performance-box.cc-kpi-pill {
+        gap: .06rem;
+        padding: .3rem .48rem;
+    }
+
+    .cc-kpi-performance-head {
+        gap: .3rem;
+    }
+
+    .cc-kpi-performance-box .cc-kpi-label {
+        font-size: .64rem;
+        line-height: 1;
+        white-space: nowrap;
+    }
+
+    .cc-kpi-performance-box .cc-kpi-value {
+        font-size: 1.16rem;
+        line-height: 1;
+        white-space: nowrap;
+    }
+
+    .cc-kpi-performance-box .cc-kpi-meta {
+        font-size: .59rem;
+        line-height: 1;
+    }
+
+    .cc-kpi-status-item {
+        padding: .38rem .55rem;
+        gap: .45rem;
+    }
+
+    .cc-kpi-status-label {
+        font-size: .84rem;
+        line-height: 1.05;
+    }
+
+    .cc-kpi-status-count {
+        margin-top: .05rem;
+        font-size: .7rem;
+        line-height: 1.05;
+    }
+
+    .cc-kpi-status-percent {
+        font-size: .92rem;
+    }
+}
+
 .cc-kpi-footnote {
     font-size: .85rem;
     color: #6c757d;
diff --git a/includes/callcenter_test_helpers.php b/includes/callcenter_test_helpers.php
index 3163b5e3..cebd0884 100644
--- a/includes/callcenter_test_helpers.php
+++ b/includes/callcenter_test_helpers.php
@@ -1101,15 +1101,14 @@ function cc_test_render_performance_dashboard(array $dashboard, array $options =
     $confirmedTodayRecovered = (int) ($summary['confirmed_today_recovered'] ?? 0);
     $confirmedTodayTotal = (int) ($summary['confirmed_today_total'] ?? 0);
     $performanceTodayRate = (float) ($summary['performance_today_rate'] ?? 0);
-    $performanceTodayMeta = sprintf(
-        '%d confirmado%s = %d nuevo%s + %d recuperado%s',
+    $performanceTodayMetaTitle = sprintf(
+        '%d confirmados = %d nuevos + %d recuperado%s',
         $confirmedTodayTotal,
-        $confirmedTodayTotal === 1 ? '' : 's',
         $confirmedTodayNew,
-        $confirmedTodayNew === 1 ? '' : 's',
         $confirmedTodayRecovered,
         $confirmedTodayRecovered === 1 ? '' : 's'
     );
+    $performanceTodayValue = number_format($performanceTodayRate, 1) . '%';
 
     $statusLegendItems = [];
     if ($statusTotal > 0) {
@@ -1134,7 +1133,6 @@ function cc_test_render_performance_dashboard(array $dashboard, array $options =
         ['label' => 'Asignados hoy', 'value' => (int) ($summary['assigned_today'] ?? 0), 'class' => 'cc-kpi-pill-primary'],
         ['label' => 'Confirmados hoy', 'value' => $confirmedTodayTotal, 'class' => 'cc-kpi-pill-success'],
         ['label' => 'Recuperados', 'value' => $confirmedTodayRecovered, 'class' => 'cc-kpi-pill-warning'],
-        ['label' => 'Rendimiento del día', 'value' => number_format($performanceTodayRate, 1) . '%', 'class' => 'cc-kpi-pill-total', 'meta' => $performanceTodayMeta],
         ['label' => 'Seguimiento abierto', 'value' => (int) ($summary['followup_open'] ?? 0), 'class' => 'cc-kpi-pill-info'],
         ['label' => 'Cancelados hoy', 'value' => (int) ($summary['canceled_today'] ?? 0), 'class' => 'cc-kpi-pill-danger'],
         ['label' => '% confirmación', 'value' => number_format((float) ($summary['confirm_rate_today'] ?? 0), 1) . '%', 'class' => 'cc-kpi-pill-dark'],
@@ -1187,7 +1185,7 @@ function cc_test_render_performance_dashboard(array $dashboard, array $options =
                 <?php endif; ?>
 
                 <div class="row g-3 mt-2">
-                    <div class="col-12 col-xl-7">
+                    <div class="col-12 col-xl-8">
                         <div class="card border-0 shadow-sm h-100 cc-kpi-chart-card">
                             <div class="card-body">
                                 <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-start gap-2">
@@ -1197,15 +1195,21 @@ function cc_test_render_performance_dashboard(array $dashboard, array $options =
                                     </div>
                                     <span class="badge text-bg-light border align-self-start"><?php echo (int) $statusTotal; ?> <?php echo $statusTotal === 1 ? 'estado' : 'estados'; ?></span>
                                 </div>
-                                <div class="row g-3 mt-3 align-items-stretch">
-                                    <div class="col-12 col-xl-7">
+                                <div class="row g-3 mt-3 align-items-start">
+                                    <div class="col-12 col-xl-4">
                                         <div class="cc-kpi-chart-wrap">
                                             <canvas id="<?php echo htmlspecialchars($sectionId . 'StatusChart'); ?>"></canvas>
                                         </div>
                                     </div>
-                                    <div class="col-12 col-xl-5">
-                                        <div class="cc-kpi-status-legend h-100">
-                                            <div class="small text-uppercase text-muted fw-semibold mb-2">Detalle del KPI de hoy (%)</div>
+                                    <div class="col-12 col-xl-8">
+                                        <div class="cc-kpi-status-legend">
+                                            <div class="cc-kpi-pill cc-kpi-pill-total cc-kpi-performance-box mb-0" title="<?php echo htmlspecialchars($performanceTodayMetaTitle); ?>">
+                                                <div class="cc-kpi-performance-head">
+                                                    <span class="cc-kpi-label">Rendimiento del día</span>
+                                                    <span class="cc-kpi-value"><?php echo htmlspecialchars($performanceTodayValue); ?></span>
+                                                </div>
+                                            </div>
+                                            <div class="small text-uppercase text-muted fw-semibold mb-0 cc-kpi-status-heading">Detalle del KPI de hoy (%)</div>
                                             <?php foreach ($statusLegendItems as $item): ?>
                                                 <div class="cc-kpi-status-item">
                                                     <span class="cc-kpi-status-dot" style="background: <?php echo htmlspecialchars((string) $item['color']); ?>;"></span>
@@ -1222,7 +1226,7 @@ function cc_test_render_performance_dashboard(array $dashboard, array $options =
                             </div>
                         </div>
                     </div>
-                    <div class="col-12 col-xl-5">
+                    <div class="col-12 col-xl-4">
                         <div class="card border-0 shadow-sm h-100 cc-kpi-chart-card">
                             <div class="card-body">
                                 <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-start gap-2">