ajuste de docu

site_requirements.md

@@ -0,0 +1,137 @@
+# 🎨 Site Requirements & Style Guide – Gloria App
+
+Este documento define los requisitos visuales, de diseño y técnicos para la interfaz de usuario de **Gloria App**, asegurando una estética premium, cálida y profesional ("High-End Wellness") para la terapeuta **Gloria Niño**.
+
+---
+
+## 1. Identidad Visual
+
+### 🎨 Paleta de Colores
+Colores definidos para transmitir elegancia, serenidad y sanación.
+
+| Token | Color Hex | Descripción | Uso Principal |
+| :--- | :--- | :--- | :--- |
+| **Primary** | `#340649` | Deep Royal Purple | Encabezados, textos principales, fondos oscuros de alto contraste. |
+| **Secondary (Gradient)** | `#67486A` | Muted Lavender/Purple | Gradientes, transparencias, bordes sutiles, estados desactivados. |
+| **Background** | `#F9F6E9` | Soft Cream | Fondo general de la página, tarjetas (light mode). |
+| **Accent** | `#C8A668` | Muted Gold | Detalles de lujo, iconos, líneas separadoras, estados de éxito. |
+| **Button Primary** | `#C8A668` | Muted Gold | Botones de llamada a la acción (CTA) principales. |
+| **Button Secondary** | `#67486A` | Muted Lavender | Botones secundarios, filtros, o acciones de menor jerarquía. |
+
+### 🖋️ Tipografía (Sugerencia Premium)
+Se recomienda una combinación de **Serif** para títulos (elegancia) y **Sans-Serif** para cuerpo (legibilidad).
+
+*   **Títulos (Display):** *Playfair Display* o *Cormorant Garamond*
+    *   Uso: `h1`, `h2`, Citas en testimonios.
+    *   Peso: 700 (Bold) para impacto, 400 (Regular) para subtítulos elegantes.
+*   **Cuerpo (Body):** *Fira Code* (Elección actual del mockup) o *Inter*.
+    *   Uso: Párrafos, menús, formularios.
+    *   Peso: 400 (Regular), 300 (Light) para descripciones, 500 (Medium) para botones.
+
+---
+
+## 2. Requisitos de Diseño UI/UX
+
+### 📐 Layout & Espaciado
+*   **Enfoque "Phone-First":** El diseño debe priorizar la experiencia móvil, con elementos táctiles grandes y legibles.
+*   **Whitespace:** Uso generoso del espacio en blanco (o *cream space*) para separar secciones y dar aire al contenido (Wabi-sabi aesthetics).
+*   **Contenedor:** Ancho máximo de `1200px` para desktop, con márgenes laterales de `24px` en móvil.
+
+### 🖼️ Estilos de Componentes
+
+#### 1. Botones (Buttons)
+*   **Primary CTA (Gold):**
+    *   Fondo: `#C8A668`
+    *   Texto: `#FFFFFF` (o `#340649` si se requiere mayor contraste, verificar accesibilidad). Se sugiere Blanco para elegancia.
+    *   Radio: `50px` (Pill shape) o `8px` (Rounded).
+    *   Hover: Aclarar ligeramente o añadir sombra suave (`box-shadow: 0 4px 12px rgba(200, 166, 104, 0.4)`).
+*   **Secondary (Purple):**
+    *   Fondo: `#67486A`
+    *   Texto: `#FFFFFF`
+    *   Hover: Oscurecer a `#553C57`.
+
+#### 2. Tarjetas (Cards) - Servicios/Testimonios
+*   **Glassmorphism (Opcional):**
+    *   Fondo: `rgba(255, 255, 255, 0.7)` sobre fondos con textura o gradientes suaves del color `#67486A`.
+    *   Borde: `1px solid rgba(103, 72, 106, 0.1)`.
+    *   Sombra: `0 8px 32px rgba(52, 6, 73, 0.05)`.
+*   **Estilo Sólido:**
+    *   Fondo: `#FFFFFF` sobre el fondo `#F9F6E9`.
+    *   Borde superior: Línea acento `#C8A668` de 4px.
+
+#### 3. Hero Section
+*   **Diseño:** Imagen de Gloria o textura abstracta de sanación a la derecha/fondo. Texto a la izquierda (Desktop) o centrado (Móvil).
+*   **Overlay:** Gradiente lineal suave de `#340649` (transparencia baja) a transparente si la imagen tiene texto encima.
+
+#### 4. Tipografía y Detalles
+*   **Micro-interacciones:** Los enlaces y botones deben tener transiciones suaves (`0.3s ease`).
+*   **Iconografía:** Líneas finas (outline icons) en color `#340649` o `#C8A668`.
+
+---
+
+## 3. Estructura de Secciones (Mapa del Sitio)
+
+### Header (Navegación)
+*   **Fondo:** Transparente (fijo al scrollear se vuelve `#F9F6E9` o `#340649`).
+*   **Logo:** SVG de firma "Gloria Niño" o Logo Gráfico.
+*   **Items:** Inicio, Sobre mí, Servicios, Testimonios, Contacto.
+*   **CTA:** Botón pequeño "Agendar".
+
+### Hero
+*   `h1`: **"Gloria Niño - Terapeuta Emocional"**.
+*   `h2`/Subtítulo: "Sanación Integral" y descripción de enfoque.
+*   Botones: CTA Principal (Gold) + "Ver Servicios" (Transparent/Hover fill).
+
+### Servicios (Grid)
+*   Grid de 3 columnas (1 col en móvil).
+*   Cada servicio con Icono/Imagen minimalista, Título y breve descripción.
+
+### Testimonios
+*   Carrusel. Fondo `#340649` (Invertido) o Mantener Cream `#F9F6E9` con tarjetas blancas.
+*   Si fondo es oscuro, texto `#F9F6E9` y Acento `#C8A668`.
+
+### Footer
+*   Fondo: `#340649` (Primary Deep Purple).
+*   Texto: `#F9F6E9`.
+*   Enlaces legales discretos.
+
+---
+
+## 4. Requisitos Aplicación Web (Sistema de Citas)
+
+El diseño visual debe mantenerse consistente en las vistas funcionales de la aplicación (Next.js):
+
+### 4.1 Flujo de Agendamiento
+*   **Login (Phone-First):**
+    *   Input de teléfono grande y central (Estilo tipo "Typeform").
+    *   Teclado numérico optimizado en móvil.
+    *   Verificación OTP clean y minimalista.
+*   **Triaje de Crisis:**
+    *   Pantalla de alerta suave (No rojo alarmante, sino tono serio/calmado).
+    *   Botones de decisión claros ("Sí", "No").
+*   **Selección de Fecha (Calendario):**
+    *   Estilo personalizado de calendario (no el default del navegador).
+    *   Días disponibles en `#340649` o fondo `#C8A668` (circular) si seleccionado.
+    *   Horarios en pills/chips seleccionables.
+
+### 4.2 Dashboards (Privado)
+
+#### Dashboard Terapeuta (Gloria)
+*   **Vista de Agenda:** Calendario semanal con bloques de tiempo.
+*   **Expediente Paciente:**
+    *   Layout de "Hoja Clínica" limpia.
+    *   Área de texto enriquecido para notas.
+    *   Grabadora de voz integrada (Botón flotante de micrófono).
+*   **Modo Enfoque:** Posibilidad de ocultar menús laterales para escribir notas sin distracciones.
+
+#### Dashboard Asistente
+*   **Confirmación de Pagos:** Lista eficiente con acciones rápidas (Aprobar/Rechazar).
+*   **Gestión de Agenda:** Vista de calendario (Read/Write) pero sin acceso a notas clínicas.
+
+---
+
+## 5. Requisitos Técnicos CSS
+*   Usar Variables CSS (`:root`) para todos los colores y fuentes.
+*   Diseño Responsivo (Media Queries estándar).
+*   Animaciones: **Fade-in** al hacer scroll (AOS o Framer Motion si es React/Next).
+