Guía de estilos: todos los elementos

Este es un párrafo introductorio que muestra texto normal. Aquí puedes verificar el tamaño de fuente, el interlineado y el espaciado entre párrafos. Este párrafo tiene suficiente texto para ver cómo se comporta en múltiples líneas y cómo fluye el contenido dentro del contenedor prose.

Este es un segundo párrafo para verificar el espaciado entre párrafos consecutivos. Asegúrate de que el margen entre ambos se vea equilibrado.

Encabezado H2

Encabezado H3

Encabezado H4

Encabezado H5

Encabezado H6

Formato de texto en línea

Este párrafo contiene texto en negritas, texto en cursiva, y negritas con cursiva combinadas. También puedes usar texto tachado para indicar correcciones.

Aquí hay un ejemplo de código en línea dentro de un párrafo, útil para mencionar nombres de variables como menuItems o comandos como npm install.

Este texto incluye un enlace interno y un enlace externo para verificar los estilos de links.

Listas desordenadas

• Primer elemento de la lista
• Segundo elemento con más texto para ver cómo se comporta en varias líneas cuando el contenido es más largo de lo normal
• Tercer elemento
  • Sub-elemento anidado
  • Otro sub-elemento anidado
    • Tercer nivel de anidamiento
• Cuarto elemento

Listas ordenadas

1. Primer paso del proceso
2. Segundo paso con una explicación más detallada para verificar el comportamiento del texto en múltiples líneas
3. Tercer paso
   1. Sub-paso anidado
   2. Otro sub-paso anidado
4. Cuarto paso

Lista mixta

1. Primer elemento ordenado
   • Sub-elemento desordenado
   • Otro sub-elemento desordenado
2. Segundo elemento ordenado
3. Tercer elemento ordenado

Citas (Blockquote)

Esta es una cita simple. Útil para resaltar testimonios de clientes o frases importantes.

Esta es una cita más larga que ocupa varias líneas para probar cómo se comporta el estilo del blockquote con contenido extenso. El espaciado interno y los bordes deben verse consistentes.

También puede tener múltiples párrafos dentro de la misma cita.

Cita con formato: “Los restaurantes que usan MásPedidos aumentaron sus ventas un 20% en el primer mes.”

Bloques de código

Bloque de código sin lenguaje:

const menu = await getMenu();
console.log(menu);

Imágenes

Imagen con texto antes y después para verificar el espaciado.

Tablas

Característica	Plan Básico	Plan Pro	Plan Enterprise
Sucursales	1	3	Ilimitadas
Pedidos mensuales	500	2,000	Ilimitados
Menú digital	✅	✅	✅
Estadísticas	Básicas	Avanzadas	Personalizadas
Soporte	Email	WhatsApp	Dedicado
Precio	$299/mes	$599/mes	Contactar

Tabla simple con dos columnas:

Término	Definición
POS	Punto de venta (Point of Sale)
SKU	Unidad de mantenimiento de stock
QR	Código de respuesta rápida

Línea horizontal

Contenido antes de la línea.

---

Contenido después de la línea.

Texto con notas al pie

Este es un párrafo con una referencia a una nota al pie[^1] y otra más[^2].

[^1]: Esta es la primera nota al pie con información adicional. [^2]: Esta es la segunda nota al pie.

Lista de tareas

• Configurar el menú digital
• Agregar productos con fotos
• Configurar métodos de pago
• Publicar el menú

Combinaciones de elementos

Blockquote con lista

Beneficios de recibir pedidos en línea:

• Aumenta tus ventas hasta un 20%
• Reduce errores en los pedidos
• Mejora la experiencia del cliente

Párrafo con código y enlaces

Para instalar Maspedidos en tu negocio, visita la página de precios y selecciona tu plan. Luego ejecuta npm install maspedidos en tu terminal y sigue las instrucciones del manual de integración.

Lista con código en línea

• Usa GET /api/menu para obtener el menú
• Usa POST /api/orders para crear un pedido
• Usa PATCH /api/orders/:id para actualizar el estado

Texto largo para probar el ancho máximo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.