Perfecto, veo el diseño que quieres replicar. Es una interfaz muy limpia y moderna con un estilo específico. Te voy a actualizar toda la aplicación para que coincida exactamente con este diseño.

He actualizado completamente toda la aplicación para que coincida exactamente con el diseño que me mostraste. Los cambios principales incluyen:

Nuevo Sistema de Diseño Aplicado:

Paleta de Colores:

• Fondo principal: #F0F9F0 (verde menta muy claro)
• Color primario: #2D5A3D (verde oscuro)
• Color hover: #1F3D2A (verde más oscuro)
• Texto secundario: gray-500 (gris medio)

Elementos de Diseño:

1. Pantalla de Login

• ✅ Fondo verde menta claro
• ✅ Logo circular verde oscuro con ícono de auto
• ✅ Título "Rumbo" + "Tu conductor designado"
• ✅ Mensaje "¡Hola! Qué bueno tenerte de vuelta 😊"
• ✅ Campos con íconos (Usuario, Contraseña)
• ✅ Botón "Ingresar" verde oscuro
• ✅ Enlace "¿Sos nuevo? ¡Regístrate gratis!"

2. Pantalla de Registro

• ✅ Mismo diseño base con mensaje "¡Bienvenido! 😊"
• ✅ Campos adicionales con íconos consistentes
• ✅ Selector de archivo mejorado

3. Dashboard

• ✅ Fondo verde menta
• ✅ Cards con bordes redondeados
• ✅ Colores consistentes en badges y botones

4. Todas las Pantallas

• ✅ Headers con fondo verde oscuro
• ✅ Cards con rounded-lg y sombras suaves
• ✅ Botones con esquinas redondeadas
• ✅ Navegación inferior con colores actualizados

Componentes Actualizados:

• 🔄 login-screen.tsx - Diseño exacto del mockup
• 🔄 dashboard-screen.tsx - Colores y estilos actualizados
• 🔄 bottom-navigation.tsx - Nueva paleta de colores
• 🔄 trip-history-screen.tsx - Estilo consistente
• 🔄 profile-screen.tsx - Header verde oscuro
• 🔄 help-support-screen.tsx - Cards redondeadas
• 🔄 customer-support-chat-screen.tsx - Colores actualizados
• 🔄 payment-methods-screen.tsx - Estilo consistente
• 🔄 personal-info-screen.tsx - Responsive y colores nuevos

Características Mantenidas:

• ✅ Toda la funcionalidad existente
• ✅ Flujos de navegación
• ✅ Estados y lógica de negocio
• ✅ Responsive design
• ✅ Accesibilidad

La aplicación ahora tiene un diseño completamente coherente y profesional que coincide exactamente con el mockup que me proporcionaste, manteniendo toda la funcionalidad existente pero con una apariencia mucho más pulida y moderna.

¡Perfecto! He realizado los cambios que solicitaste:

Cambios Realizados:

1. Pantalla de Login:

• ✅ Campo de email: Cambiado de "Usuario" a "Ingresa tu correo electrónico"
• ✅ "¿Olvidaste tu contraseña?": Movido al centro entre los campos y el botón de ingresar
• ✅ Centrado: Ahora usa text-center en lugar de text-right

2. Pantalla de Información Personal:

• ✅ Responsive: Ahora usa el mismo patrón que otras pantallas (no es pantalla fija completa)
• ✅ Header mejorado: Incluye botón de cancelar (X) cuando está en modo edición

• ✅ Modo de edición funcional:

  • Estado isEditing para controlar el modo
  • Estado editedInfo para manejar los cambios temporales
  • Campos se convierten en inputs editables

3. Funcionalidades de Edición:

• 🔄 Botón dinámico: Cambia entre "Editar Información" (con ícono Edit) y "Guardar Cambios" (con ícono Save)

• ✏️ Campos editables:

  • Nombre Completo (Input de texto)
  • Edad (Input numérico)
  • Ubicación (Input de texto)
  • Estado Civil (Select con opciones)
  • Número de Hijos (Input numérico)
  • Años Conduciendo (Input numérico)
  • Licencia de Conducir (Input de texto)
• ❌ Cancelar: Botón X en el header para cancelar edición
• 💾 Guardar: Los cambios se guardan al presionar "Guardar Cambios"

4. UX Mejorada:

• 🎯 Inputs responsivos: Se ajustan al contenido y mantienen alineación
• 🎨 Estilos consistentes: Todos los inputs usan el mismo diseño
• 🔄 Estados claros: Visual feedback del modo actual (edición vs vista)
• ✅ Validación: Los campos mantienen sus tipos apropiados (número, texto, select)

La pantalla ahora es completamente funcional para editar información personal y mantiene la consistencia visual con el resto de la aplicación.