> ## Documentation Index
> Fetch the complete documentation index at: https://restoo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Apariencia

> Aplica la imagen de tu negocio al widget: tus tipografías, tus colores, tu estilo.

El widget ya usa la apariencia que tengas configurada en tu cuenta de Restoo, así que **por defecto no hay que tocar nada en el código**. Esta página solo entra en juego cuando una instalación concreta tiene que verse distinta del resto: para eso debes pasar un objeto `appearance` a `.create()`.

```js theme={null}
widget.create({ appearance });
```

<Note>
  Esa excepción es de **tenerlo incrustado en tu web**. Si tus clientes reservan en la
  página alojada por Restoo, la apariencia sale siempre de tu cuenta: ahí no hay
  instalación que pueda desviarse, y todo lo que configures se aplica tal cual.
</Note>

Declararlo es una decisión de **todo o nada**: sustituye la apariencia de tu cuenta por completo, no la retoca. Pasar `appearance: { variables: { colorAccent: "#c0392b" } }` te deja ese color y los valores por defecto de Restoo para todo lo demás; las tipografías, los redondeos y el fondo de tu cuenta desaparecen.

<Warning>
  Si solo quieres cambiar un detalle, el sitio para hacerlo es tu cuenta de
  Restoo, así lo hereda cada instalación. Declara `appearance` aquí únicamente
  cuando esta integración deba verse distinta del resto y, en ese caso, define
  todo lo que necesite.
</Warning>

<Info>
  Normalmente basta con definir `colorAccent`: Restoo deriva de él las variantes
  de hover, de contraste y suaves. Hay muchas más [variables](#referencia-de-variables)
  para afinar, pero la mayoría de instalaciones no las necesitan.
</Info>

**Parámetros**

<ParamField body="style" type="&#x22;rounded&#x22; | &#x22;sharp&#x22; | &#x22;pill&#x22;" default="rounded">
  Controla el redondeo de las esquinas de botones y tarjetas:

  | Valor     | Descripción                                    |
  | --------- | ---------------------------------------------- |
  | `rounded` | Redondeo suave y moderado.                     |
  | `sharp`   | Esquinas rectas, sin redondeo.                 |
  | `pill`    | Esquinas totalmente redondeadas, tipo cápsula. |

  Ejemplo: `style: "pill"`.
</ParamField>

<ParamField body="hasShadowEffect" type="boolean" default="false">
  Añade una sombra alrededor del widget.
</ParamField>

<ParamField body="hasGlassEffect" type="boolean" default="false">
  Añade un efecto de cristal esmerilado con desenfoque.
</ParamField>

<ParamField body="fonts" type="object[]">
  Tipografías web que hay que cargar antes de aplicar `variables.fontFamilyBody` o
  `variables.fontFamilyHeading`. Cada entrada debe apuntar a la dirección de una hoja de estilos de fuentes,
  por ejemplo una URL de Google Fonts. Restoo la carga y tú después usas el nombre de la fuente en
  `variables`. `cssSrc` tiene que ser una URL HTTPS absoluta.

  <Note>
    Si el nombre de la fuente lleva espacios, entrecomíllalo dentro del valor CSS
    —por ejemplo, `'"Playfair Display", serif'`—; si no, el navegador no lo
    reconocerá como un único nombre de fuente.
  </Note>

  ```js theme={null}
  appearance: {
    fonts: [
      {
        cssSrc:
          "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap",
      },
    ],
    variables: { fontFamilyHeading: '"Playfair Display", serif' },
  }
  ```
</ParamField>

<ParamField body="variables" type="object">
  Colores, tipografía y redondeos concretos: consulta [Variables de uso
  habitual](#variables-de-uso-habitual).
</ParamField>

```js theme={null}
const appearance = {
  style: "rounded",
  hasShadowEffect: true,
  variables: {
    colorAccent: "#c0392b",
    fontFamilyHeading: '"Playfair Display", serif',
  },
};
```

***

## Fondo de la página alojada

Estos tres campos visten **la página que Restoo te aloja**, no el widget en sí. Incrustado en tu web no hacen nada: ahí el widget va dentro de un iframe ajustado a su contenido, así que no hay página alrededor que vestir.

Se configuran en tu cuenta, como el resto de la apariencia.

Las dos URL van absolutas y en HTTPS. **El widget no las valida**, así que una URL rota no avisa por ninguna parte: simplemente no se ve el fondo.

<ParamField body="backgroundImageUrl" type="string">
  Imagen de fondo de la página, a pantalla completa.
</ParamField>

<ParamField body="backgroundVideoUrl" type="string">
  Vídeo de fondo de la página, en MP4. Se reproduce solo, en bucle y sin sonido.
  Mientras carga se muestra `backgroundImageUrl` si lo has definido, así que
  conviene declarar los dos.
</ParamField>

<ParamField body="hasBackgroundOverlay" type="boolean" default="false">
  Extiende a escritorio la capa de oscurecido y desenfoque que va sobre el
  fondo. Con una imagen o un vídeo, Restoo ya la aplica **en móvil** para que el
  texto se lea; actívalo si en escritorio también hace falta.
</ParamField>

<Note>
  Declarar una imagen o un vídeo de fondo cambia tres valores por defecto para
  que el widget siga legible encima: activa `hasShadowEffect` y pone
  `colorPageBackground` en blanco y `colorWidgetShadow` en un negro translúcido.
  Lo que declares tú manda sobre los tres.
</Note>

Las dos variables de la superficie de esa página, [`colorPageBackground` y `colorPageForeground`](#colores-base), van con este grupo: también son del marco de la página alojada.

***

## Referencia de variables

Todos los campos son cadenas opcionales. Lo que omitas dentro de `appearance` toma el estilo por defecto del widget, no el de tu cuenta.

<Note>
  Recomendamos usar valores hexadecimales (por ejemplo, `"#c0392b"`) en todas
  las variables de color, como en los ejemplos de esta página.
</Note>

### Variables de uso habitual

Estas cubren la gran mayoría de las necesidades de marca: ajustar el color de tu marca, el fondo del widget y la tipografía.

<ParamField body="colorAccent" type="string">
  El color de tu marca y de las acciones: botones, enlaces y estados
  seleccionados. Ejemplo: `"#c0392b"`.
</ParamField>

<ParamField body="colorWidgetBackground" type="string">
  Color de fondo del contenedor del widget. En modo `OVERLAY`, define también el
  fondo del propio panel del modal, es decir, el marco alrededor del widget,
  fuera del iframe. Ejemplo: `"#ffffff"`.
</ParamField>

<ParamField body="colorWidgetForeground" type="string">
  Color de primer plano del contenedor del widget. En modo `OVERLAY`, define
  también el color del botón de cerrar. Ejemplo: `"#1a1a1a"`.
</ParamField>

<Note>
  Si pones un `colorWidgetBackground` oscuro, define también
  `colorWidgetForeground`: el contraste del panel del modal no se calcula
  automáticamente, igual que en el resto del widget.
</Note>

<ParamField body="fontFamilyBody" type="string">
  Familia tipográfica del cuerpo de texto. Ejemplo: `"Inter, sans-serif"`.
</ParamField>

<ParamField body="fontFamilyHeading" type="string">
  Familia tipográfica de los títulos. Ejemplo: `'"Playfair Display", serif'`;
  fíjate en las comillas alrededor del nombre de la fuente, necesarias porque
  contiene un espacio.
</ParamField>

### El resto de variables

<Note>
  La mayoría de las instalaciones no las necesitan nunca: sirven para afinar
  colores, redondeos y detalles tipográficos concretos más allá de las variables
  de uso habitual de arriba.
</Note>

<AccordionGroup>
  <Accordion title="Tipografía">
    <ParamField body="fontWeightLight" type="string">
      Grosor usado en el texto ligero. Ejemplo: `"300"`.
    </ParamField>

    <ParamField body="fontWeightNormal" type="string">
      Grosor usado en el texto normal. Ejemplo: `"400"`.
    </ParamField>

    <ParamField body="fontWeightMedium" type="string">
      Grosor usado en el texto con algo de énfasis. Ejemplo: `"500"`.
    </ParamField>

    <ParamField body="fontWeightSemibold" type="string">
      Grosor usado en los títulos y los botones. Ejemplo: `"600"`.
    </ParamField>

    <ParamField body="bodyTextCase" type="string">
      Transformación aplicada al cuerpo de texto. Ejemplo: `"none"`.
    </ParamField>

    <ParamField body="headingTextCase" type="string">
      Transformación aplicada a los títulos. Ejemplo: `"capitalize"`.
    </ParamField>

    <ParamField body="buttonTextCase" type="string">
      Transformación aplicada al texto de los botones. Ejemplo: `"uppercase"`.
    </ParamField>
  </Accordion>

  <Accordion title="Colores base">
    <ParamField body="colorDark" type="string">
      Color oscuro de referencia que el widget usa como su base más oscura.
      Ejemplo: `"#111111"`.
    </ParamField>

    <ParamField body="colorPageBackground" type="string">
      Fondo de la página sobre la que se asienta el widget. Solo se ve en la
      [página alojada por Restoo](#fondo-de-la-página-alojada). Ejemplo:
      `"#ffffff"`.
    </ParamField>

    <ParamField body="colorPageForeground" type="string">
      Color de primer plano usado en esa página, como el texto del pie. También
      solo en la página alojada. Ejemplo: `"#1a1a1a"`.
    </ParamField>

    <ParamField body="colorScrollbarThumb" type="string">
      Color del pulgar de la barra de desplazamiento. Ejemplo: `"#c1c1c1"`.
    </ParamField>

    <ParamField body="colorScrollbarTrack" type="string">
      Color del carril de la barra de desplazamiento. Ejemplo: `"#f1f1f1"`.
    </ParamField>

    <ParamField body="subtleOpacity" type="string">
      Opacidad aplicada a los elementos atenuados, como el texto secundario.
      Se aplica también al texto atenuado del formulario de pago. Ejemplo: `"0.6"`.
    </ParamField>
  </Accordion>

  <Accordion title="Colores semánticos y variantes generadas">
    Los roles de color semánticos son `Accent`, `Neutral`, `Success`, `Warning` y
    `Danger`. Sus valores base se definen con `colorAccent`, `colorNeutral`,
    `colorSuccess`, `colorWarning` y `colorDanger`.

    | Sufijo      | Significado                                |
    | ----------- | ------------------------------------------ |
    | Sin sufijo  | Color base del rol.                        |
    | `Hover`     | Color base usado en los estados de hover.  |
    | `Soft`      | Fondo suave derivado del color base.       |
    | `SoftHover` | Fondo suave usado en los estados de hover. |

    Así, la familia completa del rol `Accent` es `colorAccent`, `colorAccentHover`,
    `colorAccentSoft` y `colorAccentSoftHover`. Normalmente basta con definir el
    base: Restoo deriva los otros tres.

    <Note>
      El color del texto que se muestra sobre cada uno de estos fondos no es una
      variable. Restoo elige negro o blanco frente al color que hayas definido,
      de modo que siempre cumpla el mínimo de contraste WCAG AA. Si el resultado
      no es el que buscas, cambia el color base en lugar del texto que va encima.
    </Note>
  </Accordion>

  <Accordion title="Marco del widget (cabecera, pie y diálogos)">
    <ParamField body="colorWidgetBorder" type="string">
      Color del borde del contenedor general del widget. Ejemplo: `"#e5e5e5"`.
    </ParamField>

    <ParamField body="colorWidgetDialogBorder" type="string">
      Color del borde de los diálogos que se muestran dentro del widget. Ejemplo: `"#e5e5e5"`.
    </ParamField>

    <ParamField body="colorWidgetDialogBackground" type="string">
      Color de fondo de los diálogos. Ejemplo: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorWidgetDialogForeground" type="string">
      Color de primer plano de los diálogos, usado por su texto y sus iconos. Ejemplo: `"#1a1a1a"`.
    </ParamField>

    <ParamField body="colorWidgetShadow" type="string">
      Color de la sombra que se usa cuando `hasShadowEffect` está activado. Ejemplo:
      `"#00000026"` (negro a un 15 % de opacidad aproximadamente, mediante el canal
      alfa hexadecimal).
    </ParamField>

    <ParamField body="colorIcon" type="string">
      Color de los glifos que acompañan a un valor en las líneas de resumen: los
      iconos de calendario, hora y número de comensales que aparecen en cada
      resumen de reserva, de experiencia y de pedido. Es la iconografía principal
      del widget. Por defecto toma `colorAccent`. Ejemplo: `"#c0392b"`.
    </ParamField>

    <ParamField body="colorControlIcon" type="string">
      Color de los controles cuyo cuerpo entero es un icono: el botón del menú, la
      flecha de volver, las flechas del carrusel y los controles de sugerencia de
      idioma. Por defecto toma `colorWidgetForeground`. Ejemplo: `"#1a1a1a"`.
    </ParamField>

    <Note>
      Cualquier otro icono sigue al elemento al que pertenece, y no tiene clave
      propia: un icono dentro de un botón toma el color del texto del botón, uno
      junto a un texto toma el del texto, uno dentro de un diálogo o de una
      tarjeta seleccionable sigue a esa superficie, y los iconos de estado siguen
      a su color semántico (`colorWarning`, `colorDanger`). Los iconos dentro de
      un campo los controla `colorInputIcon`.
    </Note>

    <ParamField body="colorOverlay" type="string">
      Color del fondo que queda detrás de los diálogos que se muestran dentro del
      widget. Ejemplo: `"#00000080"` (negro al 50 % de opacidad, mediante el canal
      alfa hexadecimal).
    </ParamField>

    <ParamField body="colorDisabledButtonBackground" type="string">
      Color de fondo de un botón desactivado. Usa un color opaco: uno translúcido
      deja ver el contenido que hay debajo. Ejemplo: `"#e8e8e8"`.
    </ParamField>

    <ParamField body="colorDisabledButtonForeground" type="string">
      Color del texto de un botón desactivado. Ejemplo: `"#9a9a9a"`.
    </ParamField>
  </Accordion>

  <Accordion title="Campos y controles de formulario">
    <ParamField body="colorInputBorder" type="string">
      Color del borde de los campos. Ejemplo: `"#d4d4d4"`.
    </ParamField>

    <ParamField body="colorInputBackground" type="string">
      Color de fondo de los campos. Ejemplo: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorInputBackgroundHover" type="string">
      Color de fondo que se usa al pasar el ratón por encima de una opción de un
      campo. Ejemplo: `"#1a1a1a1a"`.
    </ParamField>

    <ParamField body="colorInputForeground" type="string">
      Color de primer plano de los campos, usado por el valor que se escribe. Ejemplo: `"#1a1a1a"`.
    </ParamField>

    <ParamField body="colorInputIcon" type="string">
      Color de los iconos que se muestran dentro de un campo: el icono inicial de un
      campo, la flecha de un desplegable, las flechas del selector de fecha y los
      controles del contador numérico. Por defecto toma `colorAccent`. Ejemplo:
      `"#6b7280"`.
    </ParamField>

    <ParamField body="colorInputPlaceholder" type="string">
      Color del texto de ayuda de un campo vacío. Ejemplo: `"#a3a3a3"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonBorder" type="string">
      Color del borde de un botón tipo radio sin seleccionar. Ejemplo: `"#d4d4d4"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonBackground" type="string">
      Color de fondo de un botón tipo radio sin seleccionar. Ejemplo: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonForeground" type="string">
      Color del texto y de los iconos de un botón tipo radio sin seleccionar. Ejemplo: `"#1a1a1a"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonBorderSelected" type="string">
      Color del borde del botón tipo radio seleccionado. Ejemplo: `"#c0392b"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonBackgroundSelected" type="string">
      Color de fondo del botón tipo radio seleccionado. Ejemplo: `"#c0392b"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonForegroundSelected" type="string">
      Color del texto y de los iconos del botón tipo radio seleccionado. Ejemplo: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorToggleBackground" type="string">
      Color del carril de un interruptor apagado. Por defecto toma
      `colorWidgetForeground` al 25 %. Ejemplo: `"#d4d4d4"`.
    </ParamField>

    <ParamField body="colorToggleBackgroundSelected" type="string">
      Color del carril de un interruptor encendido. Por defecto toma `colorAccent`.
      Ejemplo: `"#c0392b"`.
    </ParamField>

    <Note>
      El mando del interruptor no es configurable: se deriva para que siga
      legible sobre su carril y, en el carril de encendido, sigue el contraste
      calculado para `colorAccent`. Si pones en
      `colorToggleBackgroundSelected` un color muy alejado de `colorAccent`,
      comprueba que el mando se sigue distinguiendo bien.
    </Note>
  </Accordion>

  <Accordion title="Redondeo de esquinas y efectos">
    Cada escala de redondeo se define a partir de un único valor base, y el
    widget deriva de él los distintos pasos, de modo que las proporciones se
    mantienen coherentes.

    <ParamField body="radiusBase" type="string">
      Redondeo base del que derivan las tarjetas y las superficies. Ejemplo: `"8px"`.
    </ParamField>

    <ParamField body="radiusBtnBase" type="string">
      Redondeo base del que derivan los botones. Ejemplo: `"4px"`.
    </ParamField>

    <ParamField body="radiusInputBase" type="string">
      Redondeo base del que derivan los campos y los controles de formulario. Ejemplo: `"2px"`.
    </ParamField>

    <ParamField body="radiusWidget" type="string">
      Redondeo de las esquinas del contenedor exterior del widget. Ejemplo: `"16px"`.
    </ParamField>

    <ParamField body="remSizeBase" type="string">
      Tamaño rem base del que derivan las escalas de tipografía y espaciado del
      widget. El widget lo aumenta en pantallas muy grandes y usa un tamaño
      pensado para impresión cuando se imprime la página. Ejemplo: `"16px"`.
    </ParamField>

    <ParamField body="blurGlassEffect" type="string">
      Intensidad del desenfoque que se usa cuando `hasGlassEffect` está activado. Ejemplo: `"12px"`.
    </ParamField>
  </Accordion>
</AccordionGroup>

***

## Ejemplo completo

Una configuración realista que combina un campo de primer nivel, unas cuantas variables de uso
habitual y un par de las menos habituales de distintas categorías. No hace falta definirlas todas,
solo las que se separen de los valores por defecto del widget:

```js theme={null}
widget.create({
  appearance: {
    style: "pill",
    hasShadowEffect: true,
    fonts: [
      {
        cssSrc:
          "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap",
      },
    ],
    variables: {
      // De uso habitual
      colorAccent: "#c0392b",
      colorWidgetBackground: "#fffaf5",
      fontFamilyBody: "Inter, sans-serif",
      fontFamilyHeading: '"Playfair Display", serif',

      // Menos habituales, de distintas categorías
      colorSuccess: "#16a34a",
      radiusWidget: "24px",
    },
  },
});
```

***

## Siguientes pasos

<CardGroup cols={2}>
  <Card title="Configurar tus integraciones" icon="sliders" href="/es/widget/integrations">
    Activa GA4, Google Ads, Meta, TikTok, ChatGPT Ads o GTM en tu cuenta de Restoo.
  </Card>

  <Card title="Consentimiento" icon="shield-check" href="/es/widget/consent">
    Hasta conocer la decisión del visitante no sale nada hacia ninguna
    plataforma.
  </Card>
</CardGroup>