From 0d60be2ac39d6c4a22455f77939e554acc4be55d Mon Sep 17 00:00:00 2001
From: Tatiana Villa Ema <tatiana@tecnologia-facil.es>
Date: Sat, 25 Apr 2026 19:36:55 +0200
Subject: [PATCH] ui: grupos de compra colapsables con contador de items

---
 static/css/style.css | 27 +++++++++++++++++++++++++++
 templates/index.html | 30 ++++++++++++++++++++++++++----
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index e317880..418308d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -72,8 +72,35 @@ h2 {
   align-items: center;
   gap: .5rem;
   margin-bottom: .75rem;
+  cursor: pointer;
+  user-select: none;
 }
 .card-header strong { color: var(--text); font-size: .95rem; }
+.card.collapsed .card-header { margin-bottom: 0; }
+
+.card-count {
+  font-size: .72rem;
+  color: var(--text-muted);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: .1rem .5rem;
+}
+.card-chevron {
+  margin-left: auto;
+  font-size: .8rem;
+  color: var(--text-muted);
+  transition: transform .25s ease;
+  line-height: 1;
+}
+.card.collapsed .card-chevron { transform: rotate(-90deg); }
+
+.prod-list {
+  overflow: hidden;
+  max-height: 9999px;
+  transition: max-height .35s ease;
+}
+.card.collapsed .prod-list { max-height: 0; }
 
 /* ---- Badges ---- */
 .badge {
diff --git a/templates/index.html b/templates/index.html
index 098b420..cfaf5d6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -25,6 +25,7 @@
   <div class="toolbar">
     <button class="btn btn-primary btn-sm" onclick="marcarSemanal()">Marcar sugeridos esta semana</button>
     <button class="btn btn-secondary btn-sm" onclick="desmarcarTodo()">Desmarcar todo</button>
+    <button class="btn btn-secondary btn-sm" onclick="toggleTodos()" id="btnToggle">Plegar todo</button>
   </div>
 
   <div class="layout">
@@ -136,20 +137,41 @@
         { titulo: 'Compra mensual',    badge: 'badge-verde',   label: 'cada 2-4 semanas', items: predicciones.filter(p => p.frecuencia_dias > 16 && p.frecuencia_dias <= 35) },
         { titulo: 'Compra esporadica', badge: 'badge-gris',    label: 'mas de un mes',    items: predicciones.filter(p => p.frecuencia_dias > 35) },
       ];
-      grupos.forEach(grupo => {
+      grupos.forEach((grupo, idx) => {
         if (!grupo.items.length) return;
         const card = document.createElement('div');
-        card.className = 'card';
+        card.className = 'card' + (idx >= 2 ? ' collapsed' : '');
         card.innerHTML =
-          '<div class="card-header"><strong>' + grupo.titulo + '</strong>' +
-          '<span class="badge ' + grupo.badge + '">' + grupo.label + '</span></div>' +
+          '<div class="card-header">' +
+            '<strong>' + grupo.titulo + '</strong>' +
+            '<span class="badge ' + grupo.badge + '">' + grupo.label + '</span>' +
+            '<span class="card-count">' + grupo.items.length + '</span>' +
+            '<span class="card-chevron">▾</span>' +
+          '</div>' +
           '<div class="prod-list"></div>';
+        card.querySelector('.card-header').addEventListener('click', () => {
+          card.classList.toggle('collapsed');
+          actualizarBotonToggle();
+        });
         contenedor.appendChild(card);
         const lista = card.querySelector('.prod-list');
         grupo.items.forEach(prod => lista.appendChild(crearItem(prod)));
       });
     }
 
+    function toggleTodos() {
+      const cards = [...document.querySelectorAll('#columnaProductos .card')];
+      const todosCollapsed = cards.every(c => c.classList.contains('collapsed'));
+      cards.forEach(c => c.classList.toggle('collapsed', !todosCollapsed));
+      actualizarBotonToggle();
+    }
+
+    function actualizarBotonToggle() {
+      const cards = [...document.querySelectorAll('#columnaProductos .card')];
+      const todosCollapsed = cards.length > 0 && cards.every(c => c.classList.contains('collapsed'));
+      document.getElementById('btnToggle').textContent = todosCollapsed ? 'Desplegar todo' : 'Plegar todo';
+    }
+
     function crearItem(prod) {
       const li = document.createElement('div');
       li.className = 'prod-item';