fix: Added information about a talk at CompuFest and preliminary details for FLISOL 2026. The background color of the events‑section notification was changed for emphasis. A redundant field (location) was removed from Events.ts; now only locations is used, and the necessary components were adjusted. The dark theme now follows the system theme.

Author: ramen-root

project.org

@@ -361,8 +361,8 @@ El archivo src/data/blogPosts.ts se sigue usando, este genera los componentes [[
     - Para implementar el soporte multi-idioma:
       - Se modificará el directorio de cada post para contener versiones por idioma, un archivo por cada idioma (en este caso solo inglés-español, por ejemplo: index.es.md, index.en.md).
       - Se modificará el[[file:scripts/build-blog.js][ script]] que genera el[[file:src/data/blogPosts.ts][ archito ts]] con que usan los compontes que genran el blog. Deben detectar los archivos con sufijos .es.md o en.md y generar la estructura tipo json adecuada.
-**** IN-PROGRESS Events y EventDetail [78%]
-DEADLINE: <2026-03-10 Tue>
+**** IN-PROGRESS Events y EventDetail [86%]
+DEADLINE: <2026-04-12 Sun>
 - [X] Mudar el contenido "legacy" [100%]
   - [X] Las tecnologías de internet en los movimientos sociales
   - [X] CCOSS
@@ -387,21 +387,24 @@ DEADLINE: <2026-03-10 Tue>
 - [X] Mejorar el sombreado de eventsDetail
 - [X] La tarjeta que muestra los ponentes tiene un bug 🐛
 - [X] ¿Podríamos añadir un registro?
-- [ ] Añadir el nuevo evento flisol
-- [-] Calendario no, tres cosas: 1:
+- [X] Añadir el nuevo evento flisol
+- [X] Ubicación vs Ubicaciones. Hacerlo a modo de lista.
+- [-] Calendario:
   Este calendario está basado en la vista de GNOME Notifications/Calendar.
-  - [ ] En el calendario de Events.tsx, se debe mostrar un punto debajo del día del evento
-  - [ ] Hacer que el color de la notificación sea más clara que el BG general
+  - [ ] Hacer que el calendario soporte el multi-idioma
   - [ ] Hacer que la notificación tenga el mismo ancho que el calendario.
+  - [ ] En el calendario de Events.tsx, se debe mostrar un punto debajo del día del evento
+  - [X] Hacer que el color de la notificación sea más clara que el BG general
   - [X] En Events.tsx, debajo del calendario, se debe mostrar un apartado de notificaciones que muestre todos los próximos eventos.
   - [X] En el calendario de EventDetail.tsx muestra encerrado en un círculo el día del evento
 - [ ] Mejorar la sección de cronograma
   - [ ] Tener sub-items por día/hora
+  - [ ] Añadir la información faltante de FLISOL 2026
 **** IN-PROGRESS CourseDetail y CourseDetail [22%]
-DEADLINE: <2026-03-07 Sat>
-- [-] Mudar el contenido al sitio actual [40%]
-  - [X] Seminario de lisp
-  - [X] Fundamentos de Python
+DEADLINE: <2026-04-12 Sun>
+- [ ] Mudar el contenido al sitio actual [0%]
+  - [ ] Seminario de lisp
+  - [ ] Fundamentos de Python
   - [ ] PumaHat
   - [ ] Curso básico de sysadmin GNU/Linux
   - [ ] Curso de LaTeX
@@ -457,8 +460,8 @@ DEADLINE: <2026-03-03 Tue>
   - [X] Mejorar el color del botón cuando el cursor está sobré él en tema claro
 - Tal vez en el futuro sea bueno añadir paginación, si crece mucho el número de miembros. Igual intentar con una base de datos... (si hay más de 50 miembros, tal vea hora de dejar el "json").
 *** TODO Optimización/Bugs/Testing/Corrección de vulnerabilidades
-DEADLINE: <2026-03-21 Sat>
-**** Modo oscuro automático según el sistema
+DEADLINE: <2026-04-18 Sat>
+**** DONE Modo oscuro automático según el sistema
 **** Tal vez sería bueno cambiar el texto de "Proyectos en desarrollo" del Home, pues hay algunas investigaciones que ya no están en curso.
 **** Añadir una "pantalla de carga" al inicio.
 **** Tema oscuro automático
@@ -473,7 +476,7 @@ Al estar en dispositivos móviles, el efecto de brillo que sigue al cursos se qu
 Hay un problema con las tarjetas de "Último curso, Último post de blog" en dispositivos móviels el contenido no se ve completo.
 **** Auditoría de ciberseguridad
 *** TODO Documentar
-DEADLINE: <2026-03-17 Tue>
+DEADLINE: <2026-04-18 Sat>
 ** DONE Deploy
 DEADLINE: <2026-03-28 Sat>
 * Arquitectura

public/events-images/compufest-2026/compufest-tonejito.png

@@ -53,7 +53,7 @@ export function EventDetail({ event, onBack, onMemberClick }: EventDetailProps)
   const t = {
     back: { en: "Back to Events", es: "Volver a Eventos" },
     description: { en: "Description", es: "Descripción" },
-    agenda: { en: "Agenda", es: "Agenda" },
+    contents: { en: "Contents", es: "Contenidos" },
     requirements: { en: "Requirements", es: "Requisitos" },
     eventDetails: { en: "Event Details", es: "Detalles del Evento" },
     location: { en: "Location", es: "Ubicación" },
@@ -65,6 +65,7 @@ export function EventDetail({ event, onBack, onMemberClick }: EventDetailProps)
     time: { en: "Time", es: "Hora" },
     capacity: { en: "Capacity", es: "Capacidad" },
     relatedLinks: { en: "Related Links", es: "Enlaces relacionados" },
+    upcoming: { en: "Upcoming", es: "Próximamente" },
   };
 
   const matchedSpeakers = (event.speakers || []).map(speaker => {
@@ -134,7 +135,7 @@ export function EventDetail({ event, onBack, onMemberClick }: EventDetailProps)
             ))}
             {event.status === "upcoming" && (
               <Badge className="bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20">
-                Upcoming
+                {t.upcoming[language]}
               </Badge>
             )}
           </div>
@@ -159,23 +160,6 @@ export function EventDetail({ event, onBack, onMemberClick }: EventDetailProps)
                 <span>{event.time}</span>
               </div>
             )}
-            {event.location && (
-              <div className="flex items-center gap-2">
-                <MapPin className="h-5 w-5 text-primary" />
-                {event.location.url ? (
-                  <a
-                    href={event.location.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="hover:text-primary hover:underline"
-                  >
-                    {event.location.name[language]}
-                  </a>
-                ) : (
-                  <span>{event.location.name[language]}</span>
-                )}
-              </div>
-            )}
             {event.locations && event.locations.length > 0 && event.locations.map((loc, idx) => (
               <div key={idx} className="flex items-center gap-2">
                 <MapPin className="h-5 w-5 text-primary" />
@@ -270,12 +254,12 @@ export function EventDetail({ event, onBack, onMemberClick }: EventDetailProps)
             </div>
             )}
 
-            {/* Agenda */}
-            {event.agenda && (
+            {/* Contents */}
+            {event.contents && (
               <div className="bg-primary/5 border border-primary/10 rounded-3xl p-8">
-                <h2 className="text-3xl mb-6">{t.agenda[language]}</h2>
+                <h2 className="text-3xl mb-6">{t.contents[language]}</h2>
                 <ul className="space-y-3">
-                  {event.agenda[language].map((item, index) => (
+                  {event.contents[language].map((item, index) => (
                     <li key={index} className="flex items-start gap-3">
                       <div className="bg-primary text-primary-foreground rounded-full w-6 h-6 flex items-center justify-center text-sm flex-shrink-0 mt-0.5">
                         {index + 1}
@@ -348,29 +332,6 @@ export function EventDetail({ event, onBack, onMemberClick }: EventDetailProps)
                   </div>
                   )}
 
-                  {event.location && (
-                  <div className="flex items-start gap-3">
-                    <MapPin className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
-                    <div>
-                      <div className="text-sm text-muted-foreground mb-1">
-                        {t.location[language]}
-                      </div>
-                      {event.location.url ? (
-                        <a
-                          href={event.location.url}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="font-medium hover:text-primary hover:underline"
-                        >
-                          {event.location.name[language]}
-                        </a>
-                      ) : (
-                        <div className="font-medium">{event.location.name[language]}</div>
-                      )}
-                    </div>
-                  </div>
-                  )}
-
                   {event.locations && event.locations.length > 0 && event.locations.map((loc, idx) => (
                   <div key={idx} className="flex items-start gap-3">
                     <MapPin className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />

public/events-images/flisol-2026/average-arch-linux-user.webp

@@ -1,6 +1,6 @@
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "./ui/card";
+import { Card } from "./ui/card";
 import { Badge } from "./ui/badge";
-import { Calendar as CalendarIcon, MapPin, Clock, Users, ArrowRight, Bell } from "lucide-react";
+import { Calendar as CalendarIcon, MapPin, Clock, ArrowRight } from "lucide-react";
 import { Button } from "./ui/button";
 import { Calendar } from "./ui/calendar";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
@@ -16,7 +16,6 @@ export function Events({ onEventClick }: EventsProps) {
   const { language } = useLanguage();
   const [date, setDate] = useState<Date | undefined>(new Date());
 
-  // Lógica para ordenar los eventos del más reciente al más antiguo
   const sortedEvents = useMemo(() => {
     return [...events].sort((a, b) => {
       const dateA = a.startDate ? new Date(a.startDate).getTime() : 0;
@@ -48,63 +47,62 @@ export function Events({ onEventClick }: EventsProps) {
 
   return (
     <section id="events" className="py-20 bg-background min-h-screen">
+      <style>{`
+        .notification-bg { background-color: #F5F5F5; }
+        .dark .notification-bg { background-color: #47474C; }
+      `}</style>
       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
         <div className="text-center space-y-4 mb-16">
-          <h1 className="text-5xl sm:text-6xl">{t.title[language]}</h1>
+          <h1 className="text-5xl sm:text-6xl tracking-tight">{t.title[language]}</h1>
           <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
             {t.subtitle[language]}
           </p>
         </div>
 
-        {/* Calendar at top */}
         <div className="max-w-md mx-auto mb-16">
-          <div className="bg-card rounded-3xl p-6 border border-border/50">
-            <div className="space-y-4">
-              <h2 className="text-2xl mb-2 text-center">{t.calendar[language]}</h2>
+          <div className="bg-card rounded-3xl p-6 border border-border/40 shadow-sm">
+            <div className="space-y-6">
+              <h2 className="text-xl font-medium text-center">{t.calendar[language]}</h2>
+              
               <div className="flex justify-center">
-                <div className="w-full flex justify-center">
-                  <Calendar
-                    mode="single"
-                    selected={date}
-                    onSelect={setDate}
-                    className="rounded-2xl border-none"
-                  />
-                </div>
+                <Calendar
+                  mode="single"
+                  selected={date}
+                  onSelect={setDate}
+                  className="rounded-2xl border-none"
+                />
               </div>
 
-              {/* Notification Card - GNOME style */}
-              <div className="bg-secondary rounded-xl p-3">
-                <div className="flex items-start gap-3">
-                  <div className="mt-0.5">
-                    <Bell className="h-5 w-5 text-primary" />
-                  </div>
+              <div className="w-full notification-bg rounded-2xl p-3">
+                <div className="flex items-start gap-4">
                   <div className="flex-1 min-w-0">
-                    <div className="text-xs uppercase tracking-wide mb-1 text-muted-foreground">
+                    <div className="text-[10px] font-bold uppercase tracking-widest mb-1 text-muted-foreground/90">
                       {t.nextEvent[language]}
                     </div>
+                    
                     {upcomingEvent ? (
                       <button
                         onClick={() => onEventClick(upcomingEvent.id)}
-                        className="text-left w-full hover:opacity-80 transition-opacity"
+                        className="text-left w-full group"
                       >
-                        <div className="font-medium truncate">
+                        <div className="font-semibold truncate group-hover:text-primary transition-colors">
                           {upcomingEvent.title[language]}
                         </div>
-                        <div className="flex items-center gap-2 mt-1 text-sm text-muted-foreground">
-                          <CalendarIcon className="h-3.5 w-3.5" />
-                          <span>{upcomingEvent.startDate}</span>
+                        <div className="flex items-center gap-3 mt-1.5 text-sm text-muted-foreground/80">
+                          <div className="flex items-center gap-1">
+                            <CalendarIcon className="h-3.5 w-3.5" />
+                            <span>{upcomingEvent.startDate}</span>
+                          </div>
                           {upcomingEvent.time && (
-                            <>
-                              <span>·</span>
+                            <div className="flex items-center gap-1">
                               <Clock className="h-3.5 w-3.5" />
                               <span>{upcomingEvent.time}</span>
-                            </>
+                            </div>
                           )}
                         </div>
                       </button>
                     ) : (
-                      <div className="text-sm text-muted-foreground">
+                      <div className="text-sm text-muted-foreground italic">
                         {t.noUpcoming[language]}
                       </div>
                     )}
@@ -115,32 +113,25 @@ export function Events({ onEventClick }: EventsProps) {
           </div>
         </div>
 
-        {/* Timeline - Vertical Event Cards */}
         <div className="max-w-4xl mx-auto space-y-6">
           {sortedEvents.map((event, index) => (
             <div key={event.id} className="relative">
-              {/* Timeline connector (Se mantiene idéntico, solo cambia la referencia al arreglo ordenado) */}
               {index < sortedEvents.length - 1 && (
                 <div className="absolute left-8 top-24 bottom-0 w-0.5 bg-border -mb-6" />
               )}
 
-              {/* Event Card */}
               <div className="flex gap-6">
-                {/* Date indicator */}
                 <div className="flex-shrink-0 w-16 pt-2">
                   <div className="bg-primary text-primary-foreground rounded-2xl p-3 text-center">
                     <div className="text-2xl leading-none mb-1">
-                      {/* CORRECCIÓN: Usar getUTCDate() para evitar el desfase de la zona horaria local */}
                       {event.startDate ? new Date(event.startDate).getUTCDate() : '?'}
                     </div>
                     <div className="text-xs uppercase">
-                      {/* CORRECCIÓN: Añadir timeZone: 'UTC' al formatear el mes */}
                       {event.startDate ? new Date(event.startDate).toLocaleString('default', { month: 'short', timeZone: 'UTC' }) : '-'}
                     </div>
                   </div>
                 </div>
 
-                {/* Event content */}
                 <Card className="flex-1 overflow-hidden hover:shadow-lg transition-all duration-300 border-border/60 group">
                   <div className="grid md:grid-cols-5 gap-0">
                     <div
@@ -183,12 +174,6 @@ export function Events({ onEventClick }: EventsProps) {
                             <span className="text-muted-foreground">{event.time}</span>
                           </div>
                         )}
-                        {event.location && (
-                          <div className="flex items-center gap-2">
-                            <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
-                            <span className="text-muted-foreground">{event.location.name[language]}</span>
-                          </div>
-                        )}
                         {event.locations && event.locations.map((loc, idx) => (
                           <div key={idx} className="flex items-center gap-2">
                             <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
@@ -213,4 +198,4 @@ export function Events({ onEventClick }: EventsProps) {
       </div>
     </section>
   );
-}
+}

public/events-images/flisol-2026/imagen_comprimida.webp

@@ -289,8 +289,8 @@ export function LatestHighlights({
                   <span className="text-muted-foreground/40">·</span>
                     <div className="flex items-center gap-1.5">
                     <MapPin className="h-3.5 w-3.5 text-primary" />
-                    <span>{latestEvent.location?.name[language] || latestEvent.locations?.[0]?.name[language]}</span>
-                  </div>
+                    <span>{latestEvent.locations?.[0]?.name[language]}</span>
+                    </div>
                 </div>
               </div>
             </div>

src/components/EventDetail.tsx

@@ -13,12 +13,20 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setTheme] = useState<Theme>("light");
 
   useEffect(() => {
-    // Check for saved theme preference or default to light
-    const savedTheme = localStorage.getItem("theme") as Theme | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-      document.documentElement.classList.toggle("dark", savedTheme === "dark");
-    }
+    const applyTheme = (isDark: boolean) => {
+      setTheme(isDark ? "dark" : "light");
+      document.documentElement.classList.toggle("dark", isDark);
+    };
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    applyTheme(mediaQuery.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      applyTheme(e.matches);
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
 
   const toggleTheme = () => {