| Acceptance Criteria |
1. The system must display an interactive map with pins representing parking zones, color-coded by occupancy: Green (Available), Yellow (Near Full), and Red (Full). 2. The system must display a side list of "Zonas registradas" including name, address, price per hour, and a visual progress bar indicating occupancy. 3. Each zone in the list must show a status badge (Disponible, Casi lleno, Sin cupos) and the specific number of available spaces (e.g., "14/20 cupos"). 4. When a user selects a zone (via map pin or list), the pin must change to blue ("Seleccionada") and display detailed information in a dedicated panel. 5. The detailed panel must show: full address, exact available slots (e.g., "14 de 20"), hourly rate, and operating hours (e.g., 6:00 AM - 10:00 PM). 6. The system must include a "Reservar cupo" button within the detail panel, which is active only if slots are available. 7. The information must be updated automatically or when the page is refreshed to reflect real-time availability. 8. The system must provide a "Filtrar zonas" button to search or narrow down the displayed zones. 9. If no zones are available or match the filters, the system must display a clear "empty state" message. 10. The interface must maintain the dark theme and visual consistency shown in the mockup. |