Create a complete, highly interactive mobile-first web application for the "DESERTIO" medical drone delivery system, designed for recipients (patients or rural clinic staff) in remote areas. The entire UI text must be in Spanish. Use a premium health-tech aesthetic with deep desert green (emerald green) as the primary accent, charcoal gray, and crisp white backgrounds with high contrast for outdoor legibility. ### APP STRUCTURE & INTERACTIVE STATES Implement a state-driven multi-step layout (or an interactive tab system) that simulates the entire recipient experience from login to unlocking, always keeping the support features accessible. --- #### STATE 0: Inicio de Sesión (Login Screen) - Title: "Bienvenido a DESERTIO" - Subtitle: "Control de recepción de medicamentos" - Form Fields: - Input for RUT (with placeholder "Ej: 12.345.678-9") - Input for Contraseña (password type with eye icon) - Action Button: A large green button "Iniciar Sesión" that advances to State 1 when clicked. --- #### STATE 1: Seguimiento del Dron en Camino (Tracking View) - Header: Shows user profile info and an active status badge: "Dron en vuelo - ETA: 12 min". - Telemetry Row: Clean mini-cards showing: Battery status (icon + %), Secure connection indicator ("Conexión Encriptada"), and Satellite signal. - Simplified Map Component: A stylized visual route grid showing a drone icon moving towards a "Puesto de Salud Rural". - Navigation: A button to simulate that the drone has landed, advancing to State 2. --- #### STATE 2: Zona de Entrega, Escaneo y Autenticación (The Core Interactive Screen) - Header Status: "Dron en zona de entrega - Esperando autenticación". - Main Action Card ("Entrega y Autenticación"): - Text: "Escanee el código QR del compartimento o deslice su Cédula de Identidad". - A beautiful UI camera viewport placeholder simulating an active QR scanner. - The Physical Locker Matrix: A visual grid representing the 3 independent compartments from the drone (labeled 1, 2, and 3). - Compartment 1 is highlighted in glowing green ("Listo para abrir"). - Inside Compartment 1 card, show a fully interactive digital security keypad layout (0-9, *, #) labeled "Digitar Clave de Seguridad". - Clicking the correct pin or an "Simular Apertura" button triggers the Success State: "Compartimento 1 Abierto. Retire su carga de forma segura." - Compartments 2 and 3 remain locked/grayed out. --- ### GLOBAL CONSTANT ASSISTANCE COMPONENTS (Visible during States 1 & 2) 1. BOTÓN VIDEO TUTORIAL DE ORIENTACIÓN (Siempre visible en la parte superior/central): - A highly accessible, high-contrast button labeled: "⚠️ ¿Cómo abrir la caja? Ver Video Tutorial". - Interactivity: Clicking this button opens a clean, user-friendly Shadcn Dialog/Modal containing a responsive video player placeholder. The video simulates a step-by-step guide on how to scan the QR code and how to align the ID card (carnet) to open the drone lockers. Includes a prominent "Cerrar" button. 2. SOPORTE Y CONTACTO DIRECTO CON EL OPERADOR (Fijo en la esquina inferior/barra base): - A dedicated sticky footer or corner component labeled "Soporte Técnico". - Features a quick-action button with a headset/phone icon labeled "Llamar a Operador del Dron". It simulates a satellite voice/chat link with the central operator in case the QR code doesn't scan or a locker is jammed. --- ### UI/UX & Technical Specs for v0: - Use Shadcn UI component conventions (Cards, Buttons with Lucide React icons, Input fields, Badges, and Dialog Modals for the video tutorial). - Ensure huge touch targets suitable for users who might not be highly tech-savvy or are working under harsh outdoor desert conditions.