Centro de Ayuda - Reserva de Hamacas

El widget usa variables CSS que puedes sobrescribir para adaptarlo a tu marca.

Variables CSS disponibles

Colores principales

:root {
  /* Color principal (botones, selección) */
  --rh-primary: #3B82F6;
  --rh-primary-hover: #2563EB;
  --rh-primary-light: #EFF6FF;

  /* Colores de estado */
  --rh-success: #10B981;
  --rh-warning: #F59E0B;
  --rh-error: #EF4444;

  /* Colores de fondo */
  --rh-bg-primary: #FFFFFF;
  --rh-bg-secondary: #F9FAFB;
  --rh-bg-tertiary: #F3F4F6;

  /* Colores de texto */
  --rh-text-primary: #111827;
  --rh-text-secondary: #6B7280;
  --rh-text-muted: #9CA3AF;
}
Selecciona para copiar

Tipografía

:root {
  --rh-font-family: 'Inter', system-ui, sans-serif;
  --rh-font-size-xs: 0.75rem;
  --rh-font-size-sm: 0.875rem;
  --rh-font-size-base: 1rem;
  --rh-font-size-lg: 1.125rem;
  --rh-font-size-xl: 1.25rem;
}
Selecciona para copiar

Espaciado y bordes

:root {
  --rh-border-radius: 0.5rem;
  --rh-border-radius-lg: 0.75rem;
  --rh-spacing-xs: 0.25rem;
  --rh-spacing-sm: 0.5rem;
  --rh-spacing-md: 1rem;
  --rh-spacing-lg: 1.5rem;
}
Selecciona para copiar

Cómo aplicar estilos

Método 1: Después del script del widget

<script src="https://widget.reservadehamacas.com/embed.js"></script>

<style>
  :root {
    --rh-primary: #059669;
    --rh-border-radius: 1rem;
  }
</style>
Selecciona para copiar

Método 2: En tu hoja de estilos

/* tu-estilos.css */
.reserva-hamacas-widget {
  --rh-primary: #7C3AED;
  --rh-font-family: 'Poppins', sans-serif;
}
Selecciona para copiar

Ejemplos de personalización

Tema con tu color de marca

:root {
  --rh-primary: #E11D48;       /* Rosa */
  --rh-primary-hover: #BE123C;
  --rh-primary-light: #FFF1F2;
}
Selecciona para copiar

Bordes más redondeados

:root {
  --rh-border-radius: 1rem;
  --rh-border-radius-lg: 1.5rem;
}
Selecciona para copiar

Fuente personalizada

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
  --rh-font-family: 'Poppins', sans-serif;
}
Selecciona para copiar

Tema oscuro personalizado

.reserva-hamacas-widget[data-theme="dark"] {
  --rh-bg-primary: #1F2937;
  --rh-bg-secondary: #111827;
  --rh-text-primary: #F9FAFB;
  --rh-text-secondary: #D1D5DB;
}
Selecciona para copiar

Clases CSS del widget

Estructura principal

Clase	Descripción
`.rh-widget`	Contenedor principal
`.rh-header`	Cabecera con título
`.rh-steps`	Indicador de pasos
`.rh-content`	Área de contenido
`.rh-footer`	Pie con botones

Componentes

Clase	Descripción
`.rh-calendar`	Calendario de fechas
`.rh-map`	Mapa de hamacas
`.rh-hamaca`	Cada hamaca en el mapa
`.rh-hamaca--selected`	Hamaca seleccionada
`.rh-hamaca--occupied`	Hamaca ocupada
`.rh-button`	Botones
`.rh-input`	Campos de formulario

Estados de hamacas

/* Hamaca disponible */
.rh-hamaca--available {
  background-color: var(--rh-success);
}

/* Hamaca seleccionada */
.rh-hamaca--selected {
  background-color: var(--rh-primary);
  box-shadow: 0 0 0 3px var(--rh-primary-light);
}

/* Hamaca ocupada */
.rh-hamaca--occupied {
  background-color: var(--rh-text-muted);
  cursor: not-allowed;
}
Selecciona para copiar

Widget en iframe vs embebido

Modo embebido

Los estilos se aplican directamente. Puedes usar todas las personalizaciones.

Modo iframe

El widget está aislado. Solo puedes personalizar:

Vía parámetros de configuración (primaryColor, theme)
Los estilos CSS no se aplican dentro del iframe

Responsive

El widget es responsive por defecto. Los breakpoints son:

/* Móvil */
@media (max-width: 640px) {
  .rh-widget { /* ... */ }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .rh-widget { /* ... */ }
}

/* Desktop */
@media (min-width: 1025px) {
  .rh-widget { /* ... */ }
}
Selecciona para copiar

Consejos

Mantén el contraste: Asegúrate de que los textos sean legibles
Prueba en móvil: La mayoría de reservas vienen de móviles
No ocultes elementos: Puede afectar la usabilidad
Usa tu paleta de colores: Pero mantén la coherencia visual

Personalización CSS