diff --git a/docs/img_5.png b/docs/img_5.png new file mode 100644 index 0000000..ad4ef07 Binary files /dev/null and b/docs/img_5.png differ diff --git a/docs/img_6.png b/docs/img_6.png new file mode 100644 index 0000000..efebe53 Binary files /dev/null and b/docs/img_6.png differ diff --git a/docs/img_7.png b/docs/img_7.png new file mode 100644 index 0000000..c1ac858 Binary files /dev/null and b/docs/img_7.png differ diff --git a/docs/img_8.png b/docs/img_8.png new file mode 100644 index 0000000..a138d8e Binary files /dev/null and b/docs/img_8.png differ diff --git a/docs/prejoin_template.html b/docs/prejoin_template.html new file mode 100644 index 0000000..5b34f6b --- /dev/null +++ b/docs/prejoin_template.html @@ -0,0 +1,533 @@ + + + + + + Configura tu estudio + + + +
+
+

Configura tu estudio

+

Entrar al estudio no iniciará automáticamente
la transmisión.

+
+ +
+
+
Cesar Mendivil
+
+ +
+
+
+
+
+
El micrófono
está
funcionando
+
Microphone Array (R...
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + \ No newline at end of file diff --git a/docs/prejoin_ui.md b/docs/prejoin_ui.md new file mode 100644 index 0000000..b1bc382 --- /dev/null +++ b/docs/prejoin_ui.md @@ -0,0 +1,863 @@ +¡Excelente pregunta! Como experto en UX/UI, mi enfoque al construir esta interfaz con **HTML5** y **CSS3** se centraría no solo en replicar el diseño visual, sino en asegurar la **accesibilidad**, la **responsividad**, y el **dinamismo** para crear una experiencia de usuario fluida y atractiva. + +Aquí detallo cómo lo construiría y las opciones para el dinamismo. + +--- + +## 1. 📐 Estructura HTML5 Semántica + +Usaría etiquetas semánticas modernas para estructurar el contenido, lo cual es fundamental para la accesibilidad (SEO, lectores de pantalla). + +* **Contenedor Principal:** Usaría un `
` o un `
` con un rol de `dialog` o `aria-modal` si se trata de un modal o ventana superpuesta. +* **Encabezado:** El título principal "Configura tu estudio" debe ser un `

` o `

` (dependiendo de la jerarquía de la página) para estructura. +* **Controles y Previsualización:** + * La sección de medios (Video y Audio Meter) y los botones de control los agruparía en un `
` o `
` específico. + * Los botones de control deben ser ` +
+ 👤 +
+
+ 🎤 Cesar Mendivil +
+
+ + +
+
+
+
+

El micrófono está funcionando

+

Microphone Array (R...)

+
+ + +
+ + + +
+ + + + + + + + + + +

+``` + +----- + +## 🎨 Código CSS3 Detallado (Sass-like structure) + +Este CSS incluye las variables, el diseño con Flexbox/Grid, el sombreado sutil y las transiciones para el dinamismo. + +```css +/* ==================================== + 1. VARIABLES Y BASE + ==================================== */ +:root { + --color-primary: #0066ff; /* Azul principal */ + --color-primary-hover: #0055e6; + --color-text-main: #333; + --color-text-sub: #666; + --color-red-error: #cc0000; + --color-bg-error: #fff5f5; /* Rosa claro */ + --color-green-success: #17a960; + --color-preview-bg: #1a1a1a; + --color-gray-light: #f7f7f7; + --border-radius-base: 8px; + --button-height: 80px; +} + +body { + background-color: #f4f4f4; /* Fondo de la página */ + font-family: 'Inter', 'Arial', sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; +} + +.studio-config-modal { + max-width: 650px; + width: 90%; + background-color: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra principal sutil */ +} + +/* ==================================== + 2. ENCABEZADO Y TEXTO + ==================================== */ +.config-header { + text-align: center; + margin-bottom: 30px; +} + +.config-header h1 { + font-size: 1.8em; + font-weight: 700; + color: var(--color-text-main); + margin: 0 0 5px 0; +} + +.config-header .subtitle { + font-size: 0.95em; + color: var(--color-text-sub); + margin: 0; +} + +/* ==================================== + 3. SECCIÓN DE MEDIOS + ==================================== */ +.media-preview-section { + display: flex; + gap: 15px; + margin-bottom: 25px; +} + +/* Vista de Video */ +.video-preview-box { + flex: 2; + position: relative; + border-radius: var(--border-radius-base); + overflow: hidden; + min-height: 180px; + aspect-ratio: 16 / 9; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.video-placeholder { + width: 100%; + height: 100%; + background-color: var(--color-preview-bg); + display: flex; + justify-content: center; + align-items: center; + /* Efecto de degradado sutil en el fondo para profundidad, opcional */ + background: linear-gradient(135deg, #1a1a1a, #2c2c2c); +} + +.edit-avatar-button { + position: absolute; + top: 10px; + right: 10px; + background-color: rgba(0, 0, 0, 0.6); + color: white; + padding: 5px 12px; + border: none; + border-radius: 5px; + font-size: 0.8em; + cursor: pointer; + transition: background-color 0.2s; +} +.edit-avatar-button:hover { background-color: rgba(0, 0, 0, 0.8); } + +.avatar-circle { + width: 80px; + height: 80px; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 50%; + border: 3px solid rgba(255, 255, 255, 0.5); /* Borde claro */ + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + color: rgba(255, 255, 255, 0.8); +} + +.name-tag { + position: absolute; + bottom: 10px; + left: 10px; + background-color: #8a2be2; /* Púrpura */ + color: white; + padding: 4px 10px; + border-radius: 5px; + font-size: 0.85em; + font-weight: bold; +} + +/* Medidor de Audio */ +.audio-meter-box { + flex: 1; + background-color: var(--color-gray-light); + border-radius: var(--border-radius-base); + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + padding: 10px; + min-height: 180px; +} + +.mic-meter { + width: 40px; + height: 100px; + background-color: #eee; + border-radius: 5px; + border: 1px solid #ccc; + position: relative; + overflow: hidden; +} + +.level-bar { + position: absolute; + bottom: 0; + width: 100%; + /* Altura inicial para simular un nivel de volumen: 50% */ + height: 50%; + background-color: var(--color-green-success); + transition: height 0.1s ease-out; /* Dinamismo: Rápida transición de nivel */ +} + +.status-text { + font-weight: bold; + font-size: 0.9em; + margin: 5px 0 2px 0; +} + +.status-text.is-working { + color: var(--color-green-success); +} + +.device-name { + font-size: 0.8em; + color: var(--color-text-sub); + margin: 0; +} + +/* ==================================== + 4. CONTROLES DE MEDIOS + ==================================== */ +.media-controls-container { + margin-bottom: 30px; + /* Sombra tenue y limpia al grupo de botones */ + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border-radius: var(--border-radius-base); + overflow: hidden; + display: flex; +} + +.control-button { + flex-basis: 33.33%; + height: var(--button-height); + padding: 10px 15px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + border: none; + background-color: white; + color: var(--color-text-sub); + font-family: inherit; + font-weight: 500; + transition: all 0.3s ease; /* Transición suave para el dinamismo de color */ +} + +.control-button:hover:not(.is-settings) { + background-color: #f0f0f0; +} + +.control-button .icon { + font-size: 24px; + line-height: 1; + margin-bottom: 5px; + color: var(--color-text-sub); + transition: color 0.3s ease; +} + +.control-button .text { + font-size: 0.85em; + white-space: nowrap; +} + +/* Estados de Activación/Desactivación (Rojo) */ +.control-button.is-active.has-error { + background-color: var(--color-bg-error); /* Fondo rosa claro */ +} + +.control-button.is-active.has-error .icon { + color: var(--color-red-error); /* Icono rojo */ +} + +/* Estado de Configuración */ +.control-button.is-settings { + background-color: white; +} + +/* ==================================== + 5. FORMULARIO Y ENTRADAS + ==================================== */ +.config-form label { + display: block; + font-size: 0.9em; + font-weight: bold; + color: var(--color-text-main); + margin: 15px 0 5px 0; +} + +.config-form input[type="text"] { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1em; + box-sizing: border-box; + transition: border-color 0.2s; +} + +.config-form input[type="text"]:focus { + border-color: var(--color-primary); + outline: none; +} + +.config-form input[type="text"]::placeholder { + color: #aaa; + font-style: italic; +} + +.help-icon { + display: inline-flex; + justify-content: center; + align-items: center; + width: 16px; + height: 16px; + border: 1px solid var(--color-text-sub); + border-radius: 50%; + font-size: 0.8em; + font-weight: normal; + color: var(--color-text-sub); + cursor: help; + margin-left: 5px; +} + +.enter-studio-button { + width: 100%; + padding: 15px; + margin-top: 30px; + background-color: var(--color-primary); + color: white; + border: none; + border-radius: 5px; + font-size: 1.1em; + font-weight: bold; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.enter-studio-button:hover { + background-color: var(--color-primary-hover); +} + +/* ==================================== + 6. RESPONSIVIDAD (UX Mobile) + ==================================== */ +@media (max-width: 600px) { + .studio-config-modal { + padding: 20px 15px; + } + + /* Apilamos las vistas de medios en vertical */ + .media-preview-section { + flex-direction: column; + gap: 20px; + } + + .video-preview-box { + min-height: 150px; + } + + .audio-meter-box { + min-height: 120px; + } +} +``` + +¡Excelente idea\! Construir un "paquete" de estilos personalizados similar a **Tailwind CSS** (un **Utility-First CSS Framework**), pero adaptado a la identidad y necesidades de tu iniciativa privada, es una estrategia de diseño muy inteligente. + +Esto asegura **consistencia**, **velocidad de desarrollo** y **escalabilidad**. Llamaremos a este sistema **MiKit** (por ejemplo). + +----- + +## 🏗️ 1. Filosofía y Estructura del Proyecto + +Tu sistema privado de diseño debe seguir la filosofía de **Utility-First** de Tailwind, pero con una capa de **Componentes**. + +### A. La Capa de Utilidades (Utility-First) + +Esta capa es el corazón del sistema, donde defines clases atómicas para propiedades CSS individuales, **restringiendo los valores a tu sistema de diseño**. + +### B. La Capa de Componentes (Component Classes) + +Aquí creas clases que agrupan utilidades para elementos complejos y recurrentes, como `btn-primary` o `card-shadowed`. Esto mejora la **legibilidad** del HTML final. + +----- + +## 🎨 2. Personalización del Sistema de Diseño + +Antes de escribir CSS, define las bases de tu diseño. + +| Variable CSS | Propósito | Ejemplo de MiKit | +| :--- | :--- | :--- | +| **Colores** | Paleta principal (Primario, Secundario, Éxito, Error). | `--mk-blue-500`, `--mk-red-600` | +| **Espaciado** | Escala de espaciado uniforme (para `margin` y `padding`). | `--mk-space-xs`, `--mk-space-2xl` | +| **Tipografía** | Familias, tamaños y pesos predefinidos. | `--mk-font-heading`, `--mk-text-sm` | +| **Sombras** | Sombras predefinidas (Sutil, Media, Elevada). | `--mk-shadow-default` | +| **Bordes** | Radios de borde (Pequeño, Medio, Grande, Círculo). | `--mk-radius-md` | + +**Implementación:** Define todas estas variables dentro de `:root` en la parte superior de tu archivo CSS principal (ej. `mikit.css`). + +```css +:root { + /* Colores */ + --mk-color-primary: #0066ff; + --mk-color-error: #cc0000; + --mk-color-bg-error: #fff5f5; + + /* Espaciado (Escala 4px) */ + --mk-space-1: 4px; + --mk-space-4: 16px; + --mk-space-8: 32px; + + /* Sombras */ + --mk-shadow-default: 0 2px 8px rgba(0, 0, 0, 0.1); +} +``` + +----- + +## 🧱 3. Desarrollo de Clases de Utilidad (Utility Classes) + +Genera clases que solo realizan una tarea, mapeando las variables definidas. + +### A. Espaciado y Flexbox + +| Utilidad | CSS Generado | Uso en HTML | +| :--- | :--- | :--- | +| `.m-4` | `margin: var(--mk-space-4);` | `
` | +| `.py-2` | `padding-top/bottom: var(--mk-space-2);` | `
` | +| `.flex-col` | `flex-direction: column;` | `
` | + +### B. Colores y Fondos + +| Utilidad | CSS Generado | Uso en HTML | +| :--- | :--- | :--- | +| `.text-primary` | `color: var(--mk-color-primary);` | `

` | +| `.bg-error` | `background-color: var(--mk-color-bg-error);` | `

` | +| `.border-error` | `border-color: var(--mk-color-error);` | `` | + +### C. Transiciones y Sombras + +```css +/* Sombreado */ +.shadow-base { + box-shadow: var(--mk-shadow-default); +} + +/* Transiciones para dinamismo */ +.transition-colors { + transition: background-color 0.3s ease, color 0.3s ease; +} +``` + +----- + +## 🧩 4. Creación de Clases de Componentes + +Ahora usamos las utilidades para construir bloques complejos, como los botones de control de tu interfaz. + +### A. Botón Principal (Primary Button) + +```css +.btn-primary { + /* Fondo y texto basados en variables */ + background-color: var(--mk-color-primary); + color: white; + font-weight: 700; + padding: var(--mk-space-4) var(--mk-space-6); + border-radius: var(--mk-radius-md, 5px); + width: 100%; + /* Utilidades */ + @extend .transition-colors; +} +.btn-primary:hover { + background-color: var(--mk-color-primary-hover); +} +``` + +### B. Botones de Control de Medios + +Este ejemplo combina estilos de componente base con utilidades de estado: + +```css +/* Clase base para el botón de control */ +.ctrl-media-base { + /* Utilidades internas */ + @extend .transition-colors; + @extend .flex; + @extend .flex-col; + @extend .items-center; + /* Estilos fijos */ + height: var(--button-height, 80px); + font-weight: 500; + font-size: 0.85em; + border: none; + cursor: pointer; +} + +/* Utilidad de Estado para Error */ +.is-media-error { + background-color: var(--mk-color-bg-error); +} + +/* Utilidad de Estado para Icono */ +.is-media-error .ctrl-icon { + color: var(--mk-color-error); +} +``` + +### Uso en HTML (Ejemplo de Botones de Control) + +En lugar de aplicar 10 clases de utilidad, aplicas solo 3: + +```html + +``` + +## 🚀 5. Herramientas para Escalabilidad + +Para que tu sistema sea realmente parecido a Tailwind, te recomiendo usar un **Preprocesador CSS** o un **Postprocesador**: + +* **Preprocesador (SASS/LESS):** Permite usar `@mixin` para agrupar utilidades y `@extend` para heredar estilos, haciendo que la creación de componentes sea mucho más limpia (como se muestra arriba). +* **Postprocesador (PostCSS):** Similar a como funciona Tailwind. Puedes usar plugins como `postcss-nesting` para escribir CSS anidado y generar utilidades automáticamente a partir de tus variables. + +Este enfoque de **MiKit** te da la flexibilidad de las utilidades (velocidad) con la estructura y la legibilidad de los componentes (mantenimiento) en un sistema totalmente alineado con tu marca y estilo. + +¡Entendido\! Basándonos en la interfaz de **StreamYard** que se muestra en la imagen, podemos definir un sistema de diseño privado, tipo **Utility-First** (como Tailwind), pero capturando la estética específica de esta aplicación. + +Llamaremos a este sistema de diseño **StreamKit** (SK) para fines de referencia. + +----- + +## 🎨 1. Variables de Diseño (SK Variables) + +La clave para replicar el estilo es capturar la paleta de colores y el espaciado exactos. + +```css +/* ==================================== + VARIABLES DE ROOT (SK: StreamKit) + ==================================== */ +:root { + /* Colores */ + --sk-color-primary: #1976d2; /* Azul principal de botones y enlaces */ + --sk-color-secondary: #f4f6f9; /* Fondo de paneles laterales (Gris claro) */ + --sk-color-accent: #ff4545; /* Rojo de acción principal (Botón "Grabar") */ + --sk-color-text-dark: #3c4043; /* Texto principal oscuro */ + --sk-color-text-sub: #70757a; /* Texto secundario/sutil */ + --sk-color-border-light: #dadce0; /* Borde ligero de separadores */ + --sk-color-bg-white: #ffffff; + + /* Sombras (Limpias y definidas) */ + --sk-shadow-panel: 0 1px 3px 0 rgba(60, 64, 67, 0.1), 0 1px 2px 0 rgba(60, 64, 67, 0.15); /* Sombra de botones/paneles */ + --sk-shadow-float: 0 4px 12px rgba(60, 64, 67, 0.15); /* Sombra de elementos emergentes */ + + /* Espaciado (Escala Modular, aquí usando múltiplos de 8px) */ + --sk-space-xs: 4px; + --sk-space-sm: 8px; + --sk-space-md: 16px; + --sk-space-lg: 24px; + --sk-space-xl: 32px; + + /* Tipografía */ + --sk-font-base: 'Roboto', 'Arial', sans-serif; + --sk-font-size-base: 14px; + + /* Bordes */ + --sk-radius-sm: 4px; + --sk-radius-md: 6px; +} +``` + +----- + +## 🧱 2. Estilos de Utilidad (SK Utilities) + +Estas clases atómicas replicarán las propiedades de espaciado, tipografía y color de la interfaz. + +### A. Espaciado y Display + +| Utilidad | CSS Generado | Descripción | +| :--- | :--- | :--- | +| `.p-md` | `padding: var(--sk-space-md);` | Padding de 16px. | +| `.my-lg` | `margin-top/bottom: var(--sk-space-lg);` | Margen vertical de 24px. | +| `.flex-y-center` | `align-items: center;` | Alineación vertical común. | +| `.flex-col-gap-sm` | `flex-direction: column; gap: var(--sk-space-sm);` | Columna con espaciado de 8px. | + +```css +/* Utilidades de Espaciado */ +.p-md { padding: var(--sk-space-md); } +.py-sm { padding-top: var(--sk-space-sm); padding-bottom: var(--sk-space-sm); } +.mx-auto { margin-left: auto; margin-right: auto; } + +/* Utilidades de Flexbox */ +.flex { display: flex; } +.flex-col { flex-direction: column; } +.justify-between { justify-content: space-between; } +.items-center { align-items: center; } + +/* Utilidades de Borde/Sombra */ +.border-light { border: 1px solid var(--sk-color-border-light); } +.shadow-panel { box-shadow: var(--sk-shadow-panel); } +.rounded-md { border-radius: var(--sk-radius-md); } +``` + +### B. Colores y Texto + +```css +/* Colores de Fondo */ +.bg-white { background-color: var(--sk-color-bg-white); } +.bg-secondary { background-color: var(--sk-color-secondary); } + +/* Colores de Texto */ +.text-dark { color: var(--sk-color-text-dark); } +.text-sub { color: var(--sk-color-text-sub); } +.text-primary { color: var(--sk-color-primary); } + +/* Estilos de Texto */ +.text-sm { font-size: 0.9em; } +.text-lg { font-size: 1.1em; } +.font-bold { font-weight: 700; } +.font-medium { font-weight: 500; } +``` + +----- + +## 🧩 3. Clases de Componentes Específicos (SK Components) + +Estos estilos agrupan utilidades y estilos fijos para los elementos recurrentes de la interfaz de StreamYard. + +### A. Barra de Navegación Lateral (Side Nav / Sidebar) + +La barra de la izquierda y la derecha tienen un fondo gris muy claro o blanco, con líneas de división sutiles y texto denso. + +```css +.sk-panel-left { + width: 200px; /* Ancho fijo para el panel izquierdo */ + background-color: var(--sk-color-bg-white); + border-right: 1px solid var(--sk-color-border-light); + height: 100vh; + padding-top: var(--sk-space-md); +} + +.sk-panel-right { + width: 250px; /* Ancho fijo para el panel derecho */ + background-color: var(--sk-color-bg-white); + border-left: 1px solid var(--sk-color-border-light); + padding: var(--sk-space-md); + height: 100vh; +} + +/* Estilo para los elementos de navegación (Mis Escenas, Comentarios, etc.) */ +.sk-nav-item { + @extend .py-sm; + @extend .px-md; + @extend .text-sm; + color: var(--sk-color-text-dark); + cursor: pointer; + transition: background-color 0.2s; +} + +.sk-nav-item:hover { + background-color: var(--sk-color-secondary); /* Resaltado muy ligero al pasar el mouse */ +} + +/* Estado Activo (Demo Scene 2) */ +.sk-nav-item.is-active { + background-color: var(--sk-color-primary); + color: white; + font-weight: 500; +} +``` + +### B. Botones de Acción Global + +Hay dos tipos de botones principales: Azul (Primario) y Rojo (Accento/Grabar). + +```css +/* Botón Primario: "Agregar destino" / "Presentar o invitar" */ +.sk-btn-primary { + background-color: var(--sk-color-primary); + color: white; + padding: 8px 16px; + border: none; + border-radius: var(--sk-radius-md); + font-size: var(--sk-font-size-base); + font-weight: 500; + cursor: pointer; + box-shadow: var(--sk-shadow-panel); + transition: background-color 0.2s; +} + +.sk-btn-primary:hover { + background-color: #1565c0; /* Azul ligeramente más oscuro */ +} + +/* Botón de Énfasis: "Grabar" / Botón de Salir (Rojo) */ +.sk-btn-accent { + background-color: var(--sk-color-accent); + color: white; + padding: 10px 20px; + border: none; + border-radius: var(--sk-radius-md); + font-size: 16px; + font-weight: 700; + cursor: pointer; + transition: background-color 0.2s; +} + +.sk-btn-accent:hover { + background-color: #d83c3c; /* Rojo ligeramente más oscuro */ +} +``` + +### C. Contenedor de Previsualización de Escena + +El área central negra debe tener un borde y una sombra suaves. + +```css +.sk-preview-main { + background-color: black; + color: white; + aspect-ratio: 16 / 9; /* Mantener la proporción de video */ + width: 100%; + margin-bottom: var(--sk-space-md); + border-radius: var(--sk-radius-md); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + position: relative; + overflow: hidden; +} + +/* El elemento del borde/fondo blanco bajo el video */ +.sk-bottom-controls-bar { + background-color: var(--sk-color-bg-white); + padding: var(--sk-space-md); + display: flex; + justify-content: space-between; + align-items: center; + border-radius: var(--sk-radius-md); + box-shadow: var(--sk-shadow-panel); +} +``` + +## 📝 4. Ejemplo de Uso en HTML + +Así usarías las clases de **StreamKit** para construir la interfaz (simulando los botones de la derecha): + +```html + +``` \ No newline at end of file diff --git a/docs/streamyard_interface (1).html b/docs/streamyard_interface (1).html new file mode 100644 index 0000000..ecc5ae5 --- /dev/null +++ b/docs/streamyard_interface (1).html @@ -0,0 +1,979 @@ + + + + + + Transmisión - StreamYard Clone + + + + +
+ +
+ + +
+
+ + +
+ + + + +
+ +
+ ◀ +
+
+
+
720p
+
+ Producido con + StreamYard +
+
+
+ ▶ +
+
+ + +
+
+ + + + + + + + +
+ +
+
+
👤
+
+ 🎤 Cesar Mendivil +
+
+
+ 👤➕ + Presentar o invitar +
+
+
+ + +
+ + + + + + + +
+
+ + + +
+ + + + \ No newline at end of file diff --git a/docs/streamyard_interface (2).html b/docs/streamyard_interface (2).html new file mode 100644 index 0000000..3a25b65 --- /dev/null +++ b/docs/streamyard_interface (2).html @@ -0,0 +1,1000 @@ + + + + + + Transmisión - StreamYard Clone + + + + +
+ +
+ + +
+
+ + +
+ + + + +
+ +
+ ◀ +
+ + +
+
+
720p
+
+ Producido con + StreamYard +
+
+
+ ▶ +
+
+ + +
+ + + + + + + + +
+ + +
+
+
+ + +
+
👤
+
+ 🎤 Cesar Mendivil +
+
+
+ ➕ + Presentar o invitar +
+
+ + +
+
+ +
+ +
+ + + + + + + + + + +
+ +
+ +
+
+
+ + + +
+ + +