Propuesta: simplificación visual + mobile-first hasta 250px

[estebanzarate]

Motivación

Al revisar el frontend actual noté oportunidades de simplificación visual y de robustecer la responsividad. Antes de meter mano quiero proponerles el alcance y el criterio, para alinear expectativas antes de abrir PRs.

Objetivo

Reducir la carga visual (menos colores, evitar sombras fuertes y marcadas, evitar abusar de los bordes redondeados, evitar tanto movimiento en los hovers) y garantizar que la UI no se rompa en ningún ancho, desde 250px (celulares chicos) hasta desktop.

Criterios concretos

Paleta

• Consolidar a un set reducido de colores base + los colores funcionales que ya existen para dificultad (Muy Fácil / Fácil / Medio / Difícil), que se mantienen porque comunican información, no decoran.
• Todo color definido como variable CSS (custom properties), nada hardcodeado por template.

Superficie / profundidad

• Sin box-shadow.
• Sin border decorativo (se evalúa caso por caso si algún borde cumple función real, ej. separar inputs de su fondo).
• Sin border-radius (esquinas rectas en casi todo el sistema).
• La jerarquía visual se resuelve con espaciado, tipografía y color plano, no con efectos de profundidad.

Responsividad

• Mobile-first: se diseña primero para 250px de ancho y se escala hacia arriba.
• Breakpoints propuestos: 250px (mínimo), 480px, 768px, 1024px, 1280px+.
• Ningún elemento debe generar scroll horizontal ni overflow no intencional en el mínimo.
• Imágenes y contenido con max-width: 100% por defecto.

Buenas prácticas generales

• HTML semántico donde falte.
• Estados de foco visibles (accesibilidad de teclado).
• Respetar prefers-reduced-motion en cualquier transición.
• Sin duplicación de CSS entre templates: centralizar en variables/clases reutilizables.

Cómo lo encararía

No como un PR único: iría por partes, cada una revisable por separado.

1. Base: sistema de variables CSS (colores, espaciado, tipografía) sin tocar layout todavía.
2. Componentes globales: navbar, footer, botones, cards.
3. Página por página: empezando por [ej. listado de máquinas / dashboard], ajustando responsividad y quitando sombras/bordes/redondeados en cada una.
4. Auditoría final: pasada completa probando en 250px, 375px, 768px, 1280px.

Preguntas para el equipo

• ¿Hay alguna guía de marca o restricción que deba respetar (ej. el logo, los colores por dificultad)?
• ¿Prefieren que vaya por una rama larga con PRs seguidos, o PRs independientes contra main a medida que cada pieza esté lista?
• ¿Hay partes del frontend que NO tocaría por estar en medio de la migración a FastAPI?

Quedo atento a feedback antes de empezar a escribir código.