From 217984045ee4cbd7b13e0961bd0833755dc6c162 Mon Sep 17 00:00:00 2001
From: hacklab <hacklab@laenre.net>
Date: Tue, 29 Sep 2026 22:26:50 +0200
Subject: [PATCH] Colectivos de la acampada con logo y redes desplegables

---
 site/css/main.css | 35 ++++++++++++++++++++++++++++++-----
 site/index.html   | 28 ++++++++++++++++++++++------
 2 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/site/css/main.css b/site/css/main.css
index dcef3c4..5bd66fc 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -121,11 +121,36 @@ footer { margin: 64px 0 24px; border-top: var(--bd); padding-top: 12px; font-siz
   .bt:hover, .bt:focus-visible, .bt:active { transform: none; }
 }
 
-.colectivos { list-style: none; margin: 0 0 16px; padding: 0; columns: 2 280px; column-gap: 32px; }
-.colectivos li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--fg); }
-.colectivos a { font-family: var(--tit); font-size: 22px; text-transform: uppercase; text-decoration: none; }
-.colectivos a:hover, .colectivos a:focus-visible { color: var(--neon); }
-.colectivos span { display: block; font-size: 14px; }
+.colectivos { list-style: none; margin: 0 0 16px; padding: 0; columns: 2 300px; column-gap: 32px; }
+.colectivos > li { break-inside: avoid; border-bottom: 1px solid var(--fg); }
+.colectivos summary, .colectivos .cab {
+  display: grid;
+  grid-template-columns: 48px 1fr;
+  column-gap: 12px;
+  align-items: center;
+  padding: 8px 0;
+}
+.colectivos summary { cursor: pointer; list-style: none; }
+.colectivos summary::-webkit-details-marker { display: none; }
+.colectivos img, .colectivos .sin-logo { grid-row: span 2; width: 48px; height: 48px; border: 2px solid var(--fg); }
+.colectivos .sin-logo { background: var(--fg); }
+.colectivos .n { font-family: var(--tit); font-size: 22px; line-height: 1.1; text-transform: uppercase; }
+.colectivos .n.solo { grid-row: span 2; }
+.colectivos .d { font-size: 14px; line-height: 1.3; }
+.colectivos summary .n::after { content: " +"; }
+.colectivos details[open] .n::after { content: " −"; }
+.colectivos summary:hover .n, .colectivos summary:focus-visible .n, .colectivos details[open] .n { color: var(--neon); }
+.colectivos summary:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
+.redes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 0 12px 60px; }
+.redes a {
+  display: block;
+  padding: 4px 10px;
+  font-size: 15px;
+  text-decoration: none;
+  border: 2px solid var(--fg);
+  border-radius: 8px;
+}
+.redes a:hover, .redes a:focus-visible { color: var(--neon); border-color: var(--neon); outline: none; }
 
 .unete { max-width: 480px; margin: 32px auto; }
 .unete .bt { padding: 22px 16px; font-size: 34px; }
diff --git a/site/index.html b/site/index.html
index fc93f79..762f8e7 100644
--- a/site/index.html
+++ b/site/index.html
@@ -45,13 +45,29 @@
 
   <section id="colectivos">
     <h2>Colectivos</h2>
-    <p>Centros sociales y colectivos de Madrid. Aquí también hay información y asambleas.</p>
+    <p>Centros sociales y colectivos que están en la acampada. Toca uno para ver sus redes.</p>
     <ul class="colectivos">
-      <li><a href="https://csolarosa.net" rel="noopener noreferrer">CSO La Rosa</a> <span>Centro · La Latina</span></li>
-      <li><a href="https://eslaeko.net" rel="noopener noreferrer">ESLA EKO</a> <span>Carabanchel</span></li>
-      <li><a href="https://www.laenre.net" rel="noopener noreferrer">CSOA La Enredadera</a> <span>Tetuán</span></li>
-      <li><a href="https://www.instagram.com/csolaanimosa/" rel="noopener noreferrer">CSO La Animosa</a> <span>Hortaleza</span></li>
-      <li><a href="https://apoyalacasika.wordpress.com" rel="noopener noreferrer">CSOA La Casika</a> <span>Móstoles</span></li>
+      <li><details><summary><img src="/img/colectivos/larosa.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CSO La Rosa</span><span class="d">Centro · La Latina</span></summary><ul class="redes"><li><a href="https://csolarosa.net" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/CSO_LaRosa/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://t.me/CSO_LaRosa" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/eko.webp" alt="" width="48" height="48" loading="lazy"><span class="n">ESLA EKO</span><span class="d">Carabanchel</span></summary><ul class="redes"><li><a href="https://eslaeko.net" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/eko_carabanchel/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/EKO_Carabanchel" rel="noopener noreferrer">X</a></li><li><a href="https://t.me/ESLAEkoDifusion" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/enredadera.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CSOA La Enredadera</span><span class="d">Tetuán</span></summary><ul class="redes"><li><a href="https://www.laenre.net" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/la_enredadera_de_tetuan/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://t.me/laenredadera" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/animosa.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CSO La Animosa</span><span class="d">Hortaleza</span></summary><ul class="redes"><li><a href="https://www.instagram.com/csolaanimosa/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/CSOLaAnimosa" rel="noopener noreferrer">X</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/casika.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CSOA La Casika</span><span class="d">Móstoles</span></summary><ul class="redes"><li><a href="https://www.instagram.com/lacasika.csoa/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://apoyalacasika.wordpress.com" rel="noopener noreferrer">Blog de apoyo</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/inquilinas.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Sindicato de Inquilinas</span><span class="d">Vivienda</span></summary><ul class="redes"><li><a href="https://inquilinato.org" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/inquilinato_madrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/InquilinatoMad" rel="noopener noreferrer">X</a></li><li><a href="https://t.me/inquilinatoMad" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/xr.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Rebelión o Extinción</span><span class="d">Clima</span></summary><ul class="redes"><li><a href="https://www.instagram.com/xrmadrid_/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/xrmadrid_" rel="noopener noreferrer">X</a></li><li><a href="https://t.me/XRMadrid" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
+      <li><div class="cab"><span class="sin-logo" aria-hidden="true"></span><span class="n">PUCVM</span><span class="d">Sindicatos y asambleas de vivienda de Madrid</span></div></li>
+      <li><details><summary><img src="/img/colectivos/ir.webp" alt="" width="48" height="48" loading="lazy"><span class="n solo">Izquierda Revolucionaria</span></summary><ul class="redes"><li><a href="https://izquierdarevolucionaria.net/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/izquierdarevol/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/IzquierdaRevol" rel="noopener noreferrer">X</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/liza.webp" alt="" width="48" height="48" loading="lazy"><span class="n">LIZA</span><span class="d">Plataforma anarquista</span></summary><ul class="redes"><li><a href="https://www.instagram.com/liza__madrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/Liza__Madrid" rel="noopener noreferrer">X</a></li><li><a href="https://lizaplataforma.com/" rel="noopener noreferrer">Web</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/ariskas.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Ariskas</span><span class="d">Vallekas</span></summary><ul class="redes"><li><a href="https://www.instagram.com/ariskas.vk/" rel="noopener noreferrer">Instagram</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/solidaridad.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Solidaridad Obrera</span><span class="d">Sindicato</span></summary><ul class="redes"><li><a href="https://www.solidaridadobrera.org/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/soliobrera/" rel="noopener noreferrer">Instagram</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/fff.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Fridays For Future</span><span class="d">Clima</span></summary><ul class="redes"><li><a href="https://www.instagram.com/fridaysformadrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://mastodon.social/@fridaysformadrid" rel="noopener noreferrer">Mastodon</a></li><li><a href="https://bsky.app/profile/fridaysformadrid.bsky.social" rel="noopener noreferrer">Bluesky</a></li><li><a href="https://t.me/fffmadrid" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/crt.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CRT</span><span class="d">Corriente Revolucionaria de Trabajadores y Trabajadoras</span></summary><ul class="redes"><li><a href="https://crtweb.org/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/crtorg/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/CRTorg" rel="noopener noreferrer">X</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/contracorriente.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Contracorriente</span><span class="d">Juventud</span></summary><ul class="redes"><li><a href="https://www.instagram.com/contrac_mad/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/contrac_mad" rel="noopener noreferrer">X</a></li></ul></details></li>
+      <li><div class="cab"><span class="sin-logo" aria-hidden="true"></span><span class="n solo">Luciérnagas</span></div></li>
+      <li><div class="cab"><span class="sin-logo" aria-hidden="true"></span><span class="n solo">Articulación Antirracista Madrid</span></div></li>
+      <li><details><summary><img src="/img/colectivos/bbaa.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Asamblea BBAA x la Pública</span><span class="d">Bellas Artes · UCM x la Pública</span></summary><ul class="redes"><li><a href="https://ucmxlapublica.org/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/ucm_por_la_publica/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/UCMporlaPublica" rel="noopener noreferrer">X</a></li><li><a href="https://t.me/PlataformaUCM" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/sindicato-estudiantes.webp" alt="" width="48" height="48" loading="lazy"><span class="n solo">Sindicato de Estudiantes</span></summary><ul class="redes"><li><a href="https://www.sindicatodeestudiantes.net/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/sindestudmadrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/SEMadrid_" rel="noopener noreferrer">X</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/marika.webp" alt="" width="48" height="48" loading="lazy"><span class="n solo">Movimiento Marika Madrid</span></summary><ul class="redes"><li><a href="https://x.com/marikasMMM" rel="noopener noreferrer">X</a></li></ul></details></li>
+      <li><details><summary><img src="/img/colectivos/trans.webp" alt="" width="48" height="48" loading="lazy"><span class="n solo">Trans en Lucha</span></summary><ul class="redes"><li><a href="https://www.instagram.com/transenlucha/" rel="noopener noreferrer">Instagram</a></li></ul></details></li>
     </ul>
     <p>¿Falta tu colectivo? Escribe a la comisión de comunicación en OASIS.</p>
   </section>