Componentes de la Interfaz

Elementos Comunes

Botones

Botón Primario (Amarillo)

• Para acciones principales como "Guardar", "Crear", "Confirmar"
• Siempre visible y destacado

Botón Secundario (Gris)

• Para acciones como "Cancelar", "Volver"
• Menos destacado

Botón de Acción (Verde/Rojo)

• Verde para confirmar
• Rojo para cancelar o eliminar

Formularios

Campos de Texto

• Para ingresar nombres, direcciones, emails
• Siempre tienen una etiqueta que indica qué poner

Campos de Fecha

• Formato: dd-mm-yyyy
• Ejemplo: 25-01-2025

Campos de Hora

• Formato: 24 horas
• Ejemplo: 14:30

Menús Desplegables

• Para elegir entre opciones predefinidas
• Ejemplo: Sedes, Canchas, Estados

Tablas

Todas las listas (reservas, bloqueos, usuarios) se muestran en tablas con:

• Encabezados que explican cada columna
• Datos ordenados
• Acciones disponibles (Editar, Eliminar, etc.)

Paginación

Cuando hay muchos elementos:

• Botón "Anterior"
• Números de página (1, 2, 3...)
• Botón "Siguiente"
• Contador: "Mostrando X - Y de Z elementos"

Notificaciones

Éxito (Verde)

• "Reserva creada correctamente"
• Aparecen arriba a la derecha
• Desaparecen solas después de unos segundos

Error (Rojo)

• "Error al guardar los datos"
• Te avisan cuando algo salió mal

Información (Azul)

• "Ten

és cambios sin guardar"

• Avisos importantes

Navegación

Menú Lateral

• Fijado a la izquierda
• Siempre visible
• Resalta la sección actual

Barra Superior

• Tu nombre y rol
• Botón de cerrar sesión
• Cambio de tema (claro/oscuro)

Próximos Pasos

• Dashboard - Vista principal
• Arquitectura - Cómo funciona el sistema