Preparar repositorio para despliegue: código fuente limpio

NEWSPAPER_STYLE_GUIDE.md

@@ -0,0 +1,145 @@
+# Diseño Periodístico Clásico - El Observador
+
+## 🎨 Transformación Visual Completa
+
+La aplicación ha sido completamente rediseñada con un **estilo periodístico clásico** inspirado en los mejores periódicos del mundo:
+- **The New York Times** (estructura y jerarquía)
+- **El País** (elementos visuales españoles)  
+- **The Guardian** (claridad tipográfica)
+
+## ✨ Características Implementadas
+
+### 1. Tipografía Periodística
+- **Titulares**: Old Standard TT & Playfair Display (serif clásico)
+- **Cuerpo**: Merriweather (serif legible para lectura larga)
+- **UI/Navegación**: Lato (sans-serif limpio y moderno)
+
+### 2. Paleta de Colores Clásica
+- **Tinta Negra** (#1a1a1a): Texto principal con peso y autoridad
+- **Papel Blanco** (#ffffff): Fondo limpio y profesional
+- **Papel Crema** (#f9f7f4): Fondo general con calidez
+- **Rojo Acento** (#c1121f): Color institucional para destacados
+- **Azul Enlaces** (#326891): Enlaces legibles y tradicionales
+
+### 3. Elementos de Diseño Periodístico
+- ✅ Cabecera con nombre en mayúsculas y bordes dobles
+- ✅ Fecha y hora actualizadas en tiempo real (Estilo Madrid)
+- ✅ Navegación sticky negra con bordes rojos
+- ✅ Tarjetas de noticias con bordes sutiles
+- ✅ Tipografía jerárquica (títulos grandes, meta pequeña)
+- ✅ Hover effects suaves y profesionales
+- ✅ Badges de categoría en rojo institucional
+- ✅ Layout responsive adaptado a móviles
+
+### 4. Página de Artículos
+- 📰 Breadcrumbs para navegación
+- 📰 Título prominente con tipografía serif
+- 📰 Metadata periodística (fuente, fecha, país, categoría)
+- 📰 Resumen destacado con borde rojo
+- 📰 Sidebar con artículos relacionados
+- 📰 Modo lectura inmersivo
+- 📰 Botones de compartir, PDF y favoritos
+
+### 5. Funcionalidades
+- **Modo Lectura**: Aumenta fuente y elimina distracciones
+- **Modo Oscuro**: Tema completamente adaptado
+- **Responsive**: Diseño adaptado para móvil, tablet y desktop
+- **Animaciones**: Transiciones suaves y profesionales
+- **Accesibilidad**: Contraste adecuado y jerarquía clara
+
+## 📱 Responsive Design
+
+- **Desktop (>968px)**: Layout completo con sidebar
+- **Tablet (768px-968px)**: Grid adaptado en 2 columnas
+- **Mobile (<768px)**: Una columna, menú de hamburguesa
+
+## 🌓 Modo Oscuro
+
+Paleta invertida manteniendo la estética:
+- Fondo oscuro (#0f0f0f)
+- Texto claro (#e0e0e0)
+- Acento rojo más brillante (#ff4444)
+- Bordes sutiles (#333)
+
+## 🎯 Mejoras de UX
+
+1. **Historial de Lectura**: Artículos leídos aparecen con opacidad reducida
+2. **Favoritos Persistentes**: Sistema de guardado con estrellas
+3. **Búsqueda Avanzada**: Filtros por categoría, país, fecha
+4. **Búsqueda Semántica IA**: Toggle para búsqueda inteligente
+5. **Notificaciones**: Sistema de alertas para nuevas noticias
+6. **Paginación Clara**: Navegación entre páginas de noticias
+
+## 📂 Archivos Modificados
+
+- `static/style.css` - CSS completamente reescrito (1300+ líneas)
+- `templates/base.html` - Actualizado con nuevas fuentes y nombre
+- `templates/noticia_classic.html` - Template de detalle mejorado
+- `templates/_noticias_list.html` - Cards de noticias (sin cambios necesarios)
+
+## 🚀 Activación
+
+Los cambios están **activos automáticamente** después de reiniciar nginx:
+
+```bash
+docker compose restart nginx
+```
+
+## 🎨 Paleta de Colores Completa
+
+```css
+--ink-black: #1a1a1a          /* Texto principal */
+--newspaper-gray: #333333      /* Texto secundario */
+--paper-white: #ffffff         /* Fondo de tarjetas */
+--paper-cream: #f9f7f4         /* Fondo general */
+--border-gray: #d1d1d1         /* Bordes */
+--accent-red: #c1121f          /* Acento principal */
+--accent-red-dark: #9a0e1a     /* Acento hover */
+--link-blue: #326891           /* Enlaces */
+--text-gray: #4a4a4a           /* Meta información */
+--light-gray: #f0f0f0          /* Fondos sutiles */
+```
+
+## 💡 Inspiración de Diseño
+
+El diseño sigue los principios de los mejores periódicos:
+
+1. **Jerarquía Clara**: Los títulos dominan visualmente
+2. **Espacios en Blanco**: El contenido respira
+3. **Legibilidad**: Fuentes serif para lectura larga
+4. **Profesionalismo**: Colores sobrios y clásicos
+5. **Credibilidad**: Diseño serio y confiable
+
+## 🔄 Migración desde Diseño Anterior
+
+El diseño anterior era moderno con:
+- Glassmorphism
+- Gradientes animados
+- Colores vibrantes (púrpura, rosa, azul)
+- Fuentes sans-serif (Poppins, Roboto)
+
+El nuevo diseño es periodístico con:
+- Fondos sólidos
+- Colores clásicos (blanco, negro, rojo)
+- Tipografía serif tradicional
+- Bordes definidos
+
+## ✅ Testing Recomendado
+
+1. ✓ Verificar que el header muestra "EL OBSERVADOR"
+2. ✓ Comprobar que las fuentes serif se carguen correctamente
+3. ✓ Probar el modo oscuro (botón luna/sol)
+4. ✓ Verificar responsive en móvil
+5. ✓ Probar funcionalidades (favoritos, búsqueda, filtros)
+6. ✓ Verificar que las imágenes de noticias se vean bien
+7. ✓ Comprobar paginación
+8. ✓ Probar modo lectura en artículos
+
+## 👨‍💻 Créditos
+
+Diseño creado siguiendo las mejores prácticas de diseño periodístico digital, manteniendo toda la funcionalidad existente del agregador de noticias RSS.
+
+---
+
+**Fecha de Actualización**: Enero 2026  
+**Versión**: 2.0 - Diseño Periodístico Clásico