Funcionalidades

Sistema de Plano del Salón (Floor Plan) - Postea.la

**Fecha:** Diciembre 2025

Sistema de Plano del Salón (Floor Plan) - Postea.la

Resumen Funcional para NotebookLM

Fecha: Diciembre 2025
Objetivo: Documentación funcional del sistema de organización visual de mesas y distribución del evento
Tipo: ⭐ CARACTERÍSTICA PREMIUM (Plan Basic o superior, requiere Gestión de Invitados)

🚀 ¿Cómo acceder a esta funcionalidad?

Navegación desde el Panel de Administración:

1. Inicia sesión en tu cuenta de Postea.la
   ↓
2. Entra a tu Panel de Administración
   ↓
3. Selecciona un evento desde el selector de eventos (arriba del sidebar)
   💡 IMPORTANTE: Debes seleccionar un evento primero
   ↓
4. Una vez seleccionado el evento, las opciones del menú se habilitan
   ↓
5. En el menú lateral (sidebar), expande la categoría "Invitados"
   ↓
6. Selecciona "Invitados y Mesas"
   ↓
7. El sistema verifica automáticamente si el evento seleccionado tiene acceso a Gestión de Invitados:
   ↓
   SI EL EVENTO NO TIENE ACCESO A GESTIÓN DE INVITADOS:
   - Verás un mensaje indicando que esta función no está disponible
   - El evento necesita tener un plan que incluya Gestión de Invitados
   - Esta función requiere primero tener Gestión de Invitados activa
   ↓
   SI EL EVENTO TIENE ACCESO:
   - El sistema carga automáticamente la sección de Invitados y Mesas
   ↓
8. Verás varias pestañas en la parte superior:
   - Invitados (lista principal)
   - Floor Plan (plano del salón)
   - Estadísticas
   ↓
9. Click en la pestaña "Floor Plan" o "Plano del Salón"
   ↓
10. El sistema carga un lienzo visual con todas tus mesas representadas
    (Solo verás mesas si ya has asignado invitados a mesas)
    ↓
11. Puedes realizar varias acciones:
    - Arrastrar cada mesa con el mouse a donde irá físicamente en el salón
    - Agregar elementos especiales: Entrada, Escenario, Torta, Bar, Pista de Baile
    - Ver cuántas personas están asignadas a cada mesa
    - Reorganizar la distribución cuantas veces quieras
    - Exportar una imagen del plano para compartir con el salón o proveedor de eventos

¿Quién puede usar esta función?

✅ Disponible para: Usuarios con Plan Basic o superior (requiere Gestión de Invitados activa)
✅ Prerequisito: Necesitas tener invitados agregados con mesas asignadas
✅ Activación: Disponible automáticamente si tienes Gestión de Invitados habilitada

🎯 ¿Qué es este sistema?

Es una herramienta visual que permite a los organizadores de eventos diseñar y organizar la distribución física de su salón: dónde van las mesas, dónde está la entrada, el escenario, la torta, la pista de baile y otros elementos importantes del evento.

Problema que resuelve

Cuando organizas un evento grande (especialmente bodas), necesitas:

Sin plano del salón:

❌ Difícil visualizar la distribución de 15-20 mesas
❌ No sabes cuántas personas caben en cada sección
❌ Confusión el día del evento sobre dónde va cada mesa
❌ No puedes planificar con anticipación la disposición
❌ Pérdida de tiempo moviendo mesas el día del evento
❌ Sin control de capacidad por áreas
❌ Staff del salón trabaja "a ciegas"

Con plano del salón:

✅ Vista visual completa de toda la distribución
✅ Arrastras mesas y las acomodas como prefieras
✅ Ves en tiempo real cuántas personas hay en cada mesa
✅ Compartes el plano con el salón de eventos
✅ Planificación anticipada sin improvisaciones
✅ Control total de capacidad y distribución
✅ Staff sabe exactamente dónde colocar cada cosa

🔍 ¿Cómo funciona?

El proceso visual:

1. Organizador inicia sesión en Postea.la
   ↓
2. Entra a su Panel de Administración
   ↓
3. Selecciona un evento desde el selector de eventos (arriba del sidebar)
   ↓
4. En el menú lateral, expande "Invitados"
   ↓
5. Click en "Invitados y Mesas"
   ↓
6. Click en la pestaña "Floor Plan" o "Plano del Salón"
   ↓
7. Ve un lienzo blanco con todas sus mesas representadas como círculos
   ↓
8. Arrastra cada mesa con el mouse a donde quiere que esté físicamente
   ↓
5. Agrega elementos: Entrada, Escenario, Torta, Bar, Pista de Baile
   ↓
6. Organiza todo visualmente como será el día del evento
   ↓
7. Hace click en "Guardar cambios"
   ↓
8. El plano se guarda y puede compartirlo o imprimirlo

Analogía del mundo real:

Es como jugar Sims o diseñar tu casa en papel:

Tienes un lienzo (el salón)
Tienes objetos (mesas, entrada, escenario)
Los mueves arrastrando con el mouse
Todo se queda donde lo colocas
Puedes hacer zoom para ver más o menos detalle

🏷️ Elementos del Plano

1. Mesas (Elemento Principal)

Las mesas son círculos de colores que representan las mesas físicas del evento.

Información visual de cada mesa:

┌─────────────────┐
│    Mesa 5       │  ← Número de mesa
│   [Mesa VIP]    │  ← Nombre descriptivo (opcional)
│   👥 8/10       │  ← Personas asignadas / Capacidad
└─────────────────┘

Códigos de colores por ocupación:

⚪ Vacía (0 personas):      Gris
🟡 Poca ocupación (1-50%):  Amarillo
🟠 Media ocupación (51-89%): Naranja
🌸 Llena (90-100%):         Rosa-Morado

Para qué sirve:

Ves de un vistazo qué mesas están llenas y cuáles tienen espacio
Puedes decidir si agregar más invitados a mesas con espacio
Ayuda a balancear la distribución

Cómo se organizan:

Por defecto: Las mesas aparecen en una cuadrícula automática (4 mesas por fila)

Mesa 1    Mesa 2    Mesa 3    Mesa 4
Mesa 5    Mesa 6    Mesa 7    Mesa 8
Mesa 9    Mesa 10   Mesa 11   Mesa 12

Personalizado: Arrastras cada mesa donde quieras

        [Escenario]

Mesa 1        Mesa 2        Mesa 3
      Mesa 4        Mesa 5
Mesa 6        Mesa 7        Mesa 8

        [Pista de Baile]

2. Marcadores de Lugares (7 tipos)

Son elementos que puedes agregar para marcar áreas importantes del evento.

🚪 Entrada

Ícono: Puerta abierta
Color: Azul
Uso: Marca dónde entran los invitados
Ejemplo: Organizas las mesas más cercanas a la entrada para la familia

🎵 Escenario

Ícono: Nota musical
Color: Púrpura
Uso: Dónde tocará la banda o DJ
Ejemplo: Colocas las mesas de jóvenes cerca del escenario, las de adultos mayores más lejos

🎂 Mesa de Torta

Ícono: Pastel
Color: Rosa
Uso: Dónde estará el centro de atención para el corte de torta
Ejemplo: La mesa de los novios debe ver bien la torta

🍷 Bar

Ícono: Copa de cóctel
Color: Marrón
Uso: Dónde se servirán bebidas
Ejemplo: No colocar mesas de niños demasiado cerca del bar

🚶 Salida

Ícono: Flecha de salida
Color: Rojo
Uso: Salidas de emergencia o salida principal
Ejemplo: Asegurarse de que todas las mesas tengan acceso fácil a la salida

🚻 Baños

Ícono: WC
Color: Verde
Uso: Ubicación de sanitarios
Ejemplo: Las mesas de adultos mayores más cerca de los baños

💃 Pista de Baile

Ícono: Persona bailando
Color: Dorado
Tamaño: Ajustable (100-500px)
Formas: Rectangular o Circular
Uso: Área central donde bailarán los invitados

Características especiales de la pista de baile:

┌─────────────────────────────┐
│                             │
│       💃                    │
│   Pista de Baile            │
│                             │
│  [+] [-] [⬜/⭕]            │  ← Controles:
└─────────────────────────────┘     + Agrandar
                                     - Achicar
                                     ⬜/⭕ Cambiar forma

🎨 Funcionalidades Clave

1. Arrastrar y Soltar (Drag & Drop)

La funcionalidad más importante del sistema.

Cómo funciona:

1. Haces click sobre una mesa o marcador
2. Mantienes presionado el click
3. Mueves el mouse a donde quieras
4. Sueltas el click
5. El elemento se queda en la nueva posición

Ejemplo de uso:

Antes:
┌──────────────────────────────┐
│ Mesa 1  Mesa 2  Mesa 3      │
│                              │
│ [Entrada]      [Escenario]   │
└──────────────────────────────┘

Después de arrastrar:
┌──────────────────────────────┐
│       [Escenario]            │
│ Mesa 1  Mesa 2  Mesa 3      │
│ [Entrada]                    │
└──────────────────────────────┘

2. Control de Zoom

Puedes acercar o alejar la vista del plano.

Controles:

[−] 100% [+] [⟲]
 ↓    ↓   ↓   ↓
Alejar │ Acercar │ Resetear
       │         
  Porcentaje actual

Niveles de zoom:

30%: Vista muy alejada (para salones enormes)
50%: Vista general cómoda
100%: Vista normal (por defecto)
150%: Vista acercada para precisión
200%: Máximo acercamiento

Para qué sirve:

Zoom out (alejar): Ver todo el salón de un vistazo si tienes 20+ mesas
Zoom in (acercar): Colocar mesas con precisión en espacios pequeños
Reset: Volver a la vista normal

3. Indicador de Cambios Sin Guardar

El sistema te avisa si tienes cambios que no has guardado.

Señal visual:

[Guardar cambios ●]  ← Punto rojo indica cambios pendientes

Advertencia en pantalla:

⚠️ CAMBIOS PENDIENTES:
Tienes cambios sin guardar que se perderán si sales de esta página.
Haz clic en "Guardar cambios" para preservar tu diseño.

Protecciones:

Si intentas salir con cambios sin guardar → Te pregunta si estás seguro
Si intentas cerrar la pestaña → Navegador te advierte
Botón "Volver" bloqueado hasta que guardes

4. Guardar en Base de Datos

Tus cambios se guardan permanentemente en el sistema.

Qué se guarda:

Por cada mesa:
- Posición X (horizontal)
- Posición Y (vertical)

Por cada marcador:
- Tipo (entrada, escenario, etc.)
- Etiqueta (texto que dice)
- Ícono (símbolo visual)
- Posición X
- Posición Y
- Tamaño (si es pista de baile)
- Forma (si es pista de baile)

Configuración general:
- Nivel de zoom actual

Persistencia:

Cierras el navegador → Se mantiene
Otro usuario accede → Ve tu diseño
Días después → Sigue igual

5. Restablecer Posiciones

Si te equivocaste o quieres empezar de cero.

Cómo funciona:

1. Click en "Restablecer"
2. Confirmas: "¿Estás seguro de que deseas restablecer...?"
3. Todo vuelve a la cuadrícula automática
4. Pierdes todo el diseño personalizado

Precaución: Esto NO se puede deshacer. Una vez que restableces, pierdes todo.

💡 Casos de Uso Reales

Caso 1: Boda de 150 invitados con 15 mesas

Situación:
María organiza su boda con 150 invitados en un salón rectangular.

Proceso:

Paso 1: Vista inicial

Sistema crea automáticamente 15 mesas en cuadrícula:
Mesa 1  Mesa 2  Mesa 3  Mesa 4
Mesa 5  Mesa 6  Mesa 7  Mesa 8
Mesa 9  Mesa 10 Mesa 11 Mesa 12
Mesa 13 Mesa 14 Mesa 15

Paso 2: Agregar elementos
María hace click en cada botón:

✅ Agrega "Entrada" (parte inferior izquierda)
✅ Agrega "Escenario" (parte superior central)
✅ Agrega "Mesa de Torta" (junto al escenario)
✅ Agrega "Pista de Baile" (centro del salón)
✅ Agrega "Bar" (esquina derecha)
✅ Agrega "Baños" (izquierda, cerca de entrada)

Paso 3: Organizar mesas por grupos

Diseño final:

           [Escenario] [🎂 Torta]
           
Mesa 1 (Novios)    Mesa 2 (Padres)

[Entrada]     Mesa 3-8         [🍷 Bar]
              (Familia)
              
       [💃 Pista de Baile]
       
      Mesa 9-15
      (Amigos)
      
[🚻 Baños]              [Salida]

Resultado:

Mesas de familia cerca del escenario (mejor vista)
Mesas de jóvenes cerca de la pista de baile
Entrada y baños accesibles
Bar estratégicamente ubicado

Caso 2: Evento corporativo con áreas VIP

Situación:
Empresa organiza conferencia con 200 personas. Necesitan diferenciar:

5 mesas VIP (ejecutivos)
15 mesas regulares (empleados)

Solución con el plano:

Paso 1: Nombrar mesas

Mesa 1-5: "Mesa VIP Ejecutivos"
Mesa 6-20: "Mesa General"

Paso 2: Diseño visual

[Entrada Principal]

        [Escenario con Pantalla]
        
    Mesa VIP 1-5 (Primera fila)
    🌸🌸🌸🌸🌸
    
    Mesa General 6-20
    🟡🟡🟡🟡🟡
    🟡🟡🟡🟡🟡
    🟡🟡🟡🟡🟡
    
[Bar Café]          [Salida Lateral]

Ventaja:

VIPs tienen mejor vista al escenario
Todos los empleados tienen acceso fácil a café
Flujo de entrada y salida optimizado

Caso 3: Quinceañera con decoración temática

Situación:
Fiesta de 15 años con 120 invitados. Quieren que sea muy visual.

Uso especial del plano:

           [Escenario - Banda en vivo]
           
Mesa 1 (Quinceañera y Chambelanes)

[Entrada]     💃 Pista Circular    [🎂 Torta]
              (Grande, 400x400)
              
        Mesas 2-12 alrededor
        de la pista
        
[Bar de Bebidas]     [Bar de Postres]

Configuración de pista de baile:

Agrega "Pista de Baile"
Hace click en [+] varias veces → Agranda a 400x400px
Hace click en [⭕] → Cambia a forma circular
Arrastra al centro del salón

Resultado:

Pista de baile como centro de atención
Todas las mesas ven la pista
Facilita coreografía del vals

Caso 4: Boda pequeña con salón irregular

Situación:
Boda íntima de 60 personas en un salón con forma de "L".

Desafío: El salón no es rectangular, tiene esquinas raras.

Solución con zoom y precisión:

1. Zoom in a 150% para ver mejor
2. Coloca 6 mesas en la parte horizontal:
   Mesa 1  Mesa 2  Mesa 3
   Mesa 4  Mesa 5  Mesa 6
   
3. Coloca 4 mesas en la parte vertical (el brazo de la L):
   Mesa 7
   Mesa 8
   Mesa 9
   Mesa 10
   
4. Pista de baile en la esquina donde se unen las dos partes

Ventaja del zoom:

Puede colocar mesas con precisión en espacios estrechos
Ve exactamente dónde cabe cada mesa
No hay sorpresas el día del evento

📊 Integración con Gestión de Invitados

Conexión automática

El plano del salón NO es independiente. Está completamente integrado con el sistema de invitados.

Cómo se relacionan:

SISTEMA DE INVITADOS          PLANO DEL SALÓN
─────────────────────        ──────────────────

Mesa 5: "Mesa Familia"  →    Mesa 5 (visual)
  - Juan Pérez                 👥 8/10
  - María López                🟢 Color verde
  - Luis García                posición X: 250
  - Ana Torres                 posición Y: 400
  - Carlos Ruiz
  - Sofía Mendoza
  - Pedro Castro
  - Elena Vargas
  (8 personas asignadas)

Flujo de datos en tiempo real:

Asignas invitado a mesa en "Gestión de Invitados"
```
Juan Pérez → Mesa 5
```

El plano se actualiza automáticamente

Mesa 5: 7/10 → 8/10 (se suma 1 persona)
Color: 🟡 → 🟠 (cambia a naranja porque ya está al 80%)

Mueves la mesa en el plano

Mesa 5 se mueve de posición (250, 400) a (350, 200)

La información se guarda para todos

Cuando imprimas la lista de invitados, verán:
"Juan Pérez - Mesa 5 (coordenadas guardadas)"

Ejemplo visual completo:

Vista en Gestión de Invitados:

┌────────────────────────────────┐
│ Lista de Invitados             │
├────────────────────────────────┤
│ Juan Pérez    │ Mesa 5 │ ✅    │
│ María López   │ Mesa 5 │ ✅    │
│ Luis García   │ Mesa 3 │ 🟡    │
│ Ana Torres    │ Mesa 5 │ ❌    │
└────────────────────────────────┘

Vista en Plano del Salón:

        [Escenario]
        
Mesa 3 (🟡 1/10)    Mesa 5 (🌸 8/10)
Luis García         Juan Pérez
                    María López
                    ... (6 más)

Sincronización:

Si eliminas a Juan de Mesa 5 → Mesa 5 pasa de 8/10 a 7/10
Si mueves a Luis de Mesa 3 a Mesa 7 → Mesa 3: 0/10 (gris), Mesa 7: +1
Todo en tiempo real sin recargar

🎯 Beneficios del Sistema

Para el Organizador

1. Planificación visual

Ves todo el evento de un vistazo
Puedes planificar semanas antes
Reduces estrés del día del evento

2. Control de capacidad

Sabes exactamente cuántas personas caben
No sobrepasas la capacidad del salón
Balanceas la distribución

3. Comunicación con el salón

Imprimes el plano y se lo das al staff
Ellos montan exactamente como diseñaste
Sin malentendidos

4. Flexibilidad

Puedes cambiar el diseño cuantas veces quieras
Experimentar con diferentes distribuciones
Encontrar la mejor organización

Para los Invitados (Indirecto)

1. Mejor experiencia

Llegan y todo está organizado
No hay confusión de dónde sentarse
Flujo más ordenado

2. Ubicaciones estratégicas

Familias con niños cerca de baños
Adultos mayores lejos de parlantes
Jóvenes cerca de la pista de baile

Para el Salón de Eventos

1. Instrucciones claras

Reciben plano exacto
Saben dónde va cada cosa
Montan más rápido

2. Menos errores

No hay improvisación
Todo está medido
Cliente satisfecho

🔧 Características Técnicas (Simplificadas)

Persistencia de datos

Qué significa: Tus cambios se guardan para siempre en el sistema.

Cómo funciona:

1. Mueves una mesa → Se guarda en memoria temporal
2. Haces más cambios → Se acumulan en memoria
3. Click en "Guardar cambios" → Todo se guarda en la base de datos
4. Cierras el navegador → Datos siguen ahí
5. Vuelves mañana → Todo sigue igual

Respaldo automático:

Mientras no guardes, hay una copia en tu navegador (localStorage)
Si el internet falla, no pierdes todo
Pero DEBES hacer click en "Guardar" para que sea permanente

Responsividad visual

Qué significa: El plano se adapta a diferentes tamaños de pantalla.

Soporte:

✅ Computadora de escritorio (ideal)
✅ Laptop (funciona bien)
⚠️ Tablet (puede ser difícil arrastrar con dedos)
❌ Celular (no recomendado, pantalla muy pequeña)

Recomendación: Diseñar el plano en una computadora con mouse.

❓ Preguntas Frecuentes

¿Cuántas mesas puedo agregar?

Sin límite técnico. Puedes tener 5 mesas o 50 mesas. El sistema se adapta.

¿Puedo eliminar una mesa del plano?

No directamente en el plano. Las mesas se crean desde "Gestión de Invitados". El plano solo te permite organizarlas visualmente.

¿Qué pasa si no guardo los cambios?

Se pierden cuando cierras el navegador. Por eso el sistema te advierte constantemente.

¿Puedo compartir el plano con alguien más?

Sí. Cualquier persona con acceso al evento en Postea.la puede ver el plano. Es útil para coordinadores o el salón de eventos.

¿El plano se imprime?

Actualmente no hay botón específico de impresión, pero puedes:

Hacer screenshot (captura de pantalla)
Usar la función de imprimir del navegador

¿Puedo tener múltiples pisos o salas?

No en un solo plano. Cada evento tiene un plano. Si tu evento tiene 2 salas, tendrías que crear 2 eventos separados (limitación actual).

¿Las mesas tienen forma? (redondas, rectangulares)

Visualmente son círculos para simplificar. Pero puedes anotar en el nombre: "Mesa 1 - Rectangular"

¿Puedo agregar fotos o imágenes de fondo?

No actualmente. El plano es un lienzo blanco con elementos arrastrables.

¿Qué pasa si dos mesas se superponen?

El sistema permite superposiciones (es visual, no físico). Debes tener cuidado de separarlas bien.

¿Puedo deshacer cambios?

No hay función "Ctrl+Z" todavía. Pero si no has guardado, puedes recargar la página y volverás al último estado guardado.

¿El zoom afecta las posiciones reales?

No. El zoom solo cambia cómo VES el plano. Las posiciones reales se mantienen igual.

¿Puedo copiar el plano de un evento a otro?

No automáticamente. Tendrías que recrearlo manualmente en el nuevo evento.

Resumen Ejecutivo

El sistema de Plano del Salón de Postea.la es una herramienta visual interactiva que permite a los organizadores diseñar la distribución física de su evento mediante arrastrar y soltar.

¿Qué ofrece?

Canvas visual con todas las mesas del evento
Arrastrar mesas a posiciones personalizadas
Agregar marcadores (entrada, escenario, torta, bar, pista de baile, baños, salida)
Control de zoom (30%-200%)
Indicadores visuales de ocupación de mesas (gris=vacía, amarillo=poca, naranja=media, rosa=llena)
Guardado permanente en base de datos
Integración completa con sistema de gestión de invitados

¿Para qué sirve?

Planificación anticipada de la distribución del evento
Visualización de capacidad por mesa en tiempo real
Comunicación clara con el salón de eventos
Optimización de espacios y flujos
Reducción de estrés el día del evento

Funcionalidades clave:

Drag & Drop de mesas y marcadores
Sincronización automática con lista de invitados
Zoom para salones grandes (30%) o precisión (200%)
Pista de baile ajustable (tamaño y forma)
Advertencias de cambios sin guardar
Colores por ocupación (gris=vacía, amarillo=poca, naranja=media, rosa=llena)

Integración:

Cada mesa del plano muestra en tiempo real cuántos invitados tiene asignados
Los cambios en "Gestión de Invitados" se reflejan inmediatamente en el plano
Las posiciones del plano se guardan y pueden compartirse con el staff del salón

Beneficio principal:
Transforma la planificación abstracta de un evento en una experiencia visual tangible, permitiendo a los organizadores diseñar, experimentar y comunicar la distribución perfecta de su evento, con control total sobre capacidad, flujos y experiencia de invitados, ahorrando tiempo y evitando improvisaciones de último momento.

Estado actual: Sistema completo e implementado (Diciembre 2025)
Mesas soportadas: Ilimitadas
Elementos decorativos: 7 tipos (entrada, escenario, torta, bar, baños, salida, pista)
Integración: 100% conectado con gestión de invitados