Cookie Banner — EU & USA

Implementación personalizada del banner de cookies para los mercados de la Unión Europea y Estados Unidos. Consta de dos componentes visuales. El comportamiento interactivo (animación de entrada, panel de preferencias, acordeones y trampa de foco) está gestionado por el JavaScript compartido entre las tres variantes.

1. Barra principal (#cookiebannerWrapper) — aparece fija en la parte inferior (móvil) o centrada en la parte superior (escritorio) con el mensaje de consentimiento y tres botones de acción.
2. Panel de preferencias (.cookiebannerPreferencesWrapper) — overlay lateral que se despliega al pulsar "Personalizar" y permite gestionar el consentimiento por categoría de cookie.

---

Comportamiento

• La barra principal aparece fija hasta que el usuario toma una decisión.
• El overlay oscuro (#cookiebanner-overlay) bloquea el scroll de la página cuando el panel de preferencias está abierto.
• El panel de preferencias se abre como un drawer con transición de opacidad y se cierra con el botón × o con "Confirmar selección".
• Cada categoría de cookies es expandible/colapsable pulsando su botón — el icono + rota 45° para indicar estado abierto.
• En móvil los botones se apilan verticalmente; en escritorio (≥600px) se disponen en fila invertida.

---

Variables de plantilla

Los placeholders entre [# #] son sustituidos dinámicamente por la plataforma de gestión de consentimiento (Cookiebot):

Placeholder	Descripción
[#LANGUAGE#]	Código de idioma del documento (ej. es, en, fr).
[#TEXTDIRECTION#]	Dirección del texto: ltr o rtl.
[#TITLE#]	Título del banner y del panel de preferencias.
[#TEXT#]	Mensaje principal del banner.
[#ACCEPT#]	Texto del botón "Aceptar todo".
[#DECLINE#]	Texto del botón "Rechazar todo".
[#CUSTOMIZE#]	Texto del botón "Personalizar".
[#COOKIESGENERALINTRO#]	Introducción general a las cookies en el panel de preferencias.
[#COOKIETYPE_NECESSARY_RAW#]	Etiqueta de la categoría "Necesarias".
[#COOKIETYPE_STATISTICS_RAW#]	Etiqueta de la categoría "Estadísticas".
[#COOKIETYPE_ADVERTISING_RAW#]	Etiqueta de la categoría "Publicidad".
[#COOKIETYPEINTRO_NECESSARY#]	Descripción de las cookies necesarias.
[#COOKIETYPEINTRO_STATISTICS#]	Descripción de las cookies de estadísticas.
[#COOKIETYPEINTRO_ADVERTISING#]	Descripción de las cookies de publicidad.
[#DETAILSHIDE#]	Texto de "Ocultar detalles" en la categoría de necesarias.
[#LEVELOPTIN_ALLOW_SELECTION#]	Texto del botón "Confirmar selección" en el footer del panel.

---

Categorías de cookies

Categoría	ID del checkbox	Modificable
Necesarias	CybotCookiebotDialogBodyLevelButtonNecessary	No (checkbox oculto, siempre activas)
Estadísticas	CybotCookiebotDialogBodyLevelButtonStatistics	Sí
Publicidad	CybotCookiebotDialogBodyLevelButtonMarketing	Sí
Preferencias	CybotCookiebotDialogBodyLevelButtonPreferences	No (oculto, vinculado a publicidad)

---

Comportamiento responsive

Propiedad	Móvil (< 600px)	Escritorio (≥ 600px)
Posición barra	Fija en la parte inferior	Centrada en la parte superior
Botones	Columna vertical	Fila horizontal invertida (accept → customize)
Panel preferencias	Pantalla completa	Modal centrado 575 × 601px

---

Estructura HTML

<div id="cookiebanner" lang="[#LANGUAGE#]" dir="[#TEXTDIRECTION#]" ng-non-bindable>

  <!-- Overlay oscuro de fondo -->
  <div id="cookiebanner-overlay"></div>

  <!-- Barra principal -->
  <div id="cookiebannerWrapper">
    <div id="header-text">
      <p class="c-header">[#TITLE#]</p>
      <p class="c-message">[#TEXT#]</p>
    </div>
    <div class="buttons-container">
      <button type="button"
        id="CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll"
        class="custom-button accept-button">
        [#ACCEPT#]
      </button>
      <button type="button"
        id="CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll"
        class="custom-button">
        [#DECLINE#]
      </button>
      <button type="button" id="config-button" class="custom-button">
        [#CUSTOMIZE#]
      </button>
    </div>
    <div style="clear: both"></div>
  </div>

  <!-- Panel de preferencias -->
  <div class="cookiebannerPreferencesWrapper">
    <header>
      <!-- Logo Hawkers (SVG inline) -->
      <div class="cookiebannerPreferences__logo">...</div>
      <!-- Botón cerrar -->
      <button type="button" id="close-preferences">...</button>
    </header>

    <main>
      <!-- Texto introductorio -->
      <section class="preferences-privacy">
        <h2>[#TITLE#]</h2>
        <p>[#COOKIESGENERALINTRO#]</p>
      </section>

      <!-- Categorías de cookies (acordeón) -->
      <section class="preferences-consent">
        <!-- Necesarias (siempre activas) -->
        <div class="preferences-consent__option-wrapper">
          <button type="button" class="preferences-consent__option">
            <span class="preferences-consent__option__plus"><!-- icono + --></span>
            <span>[#COOKIETYPE_NECESSARY_RAW#]</span>
            <span class="preferences-consent__option__right">[#DETAILSHIDE#]</span>
            <input type="checkbox" id="CybotCookiebotDialogBodyLevelButtonNecessary"
              style="display: none" />
          </button>
          <aside><p>[#COOKIETYPEINTRO_NECESSARY#]</p></aside>
        </div>

        <!-- Estadísticas -->
        <div class="preferences-consent__option-wrapper">
          <button type="button" class="preferences-consent__option">
            <span class="preferences-consent__option__plus"><!-- icono + --></span>
            <span>[#COOKIETYPE_STATISTICS_RAW#]</span>
            <input id="CybotCookiebotDialogBodyLevelButtonStatistics"
              class="preferences-consent__option__right hw-form-checkbox"
              type="checkbox" />
          </button>
          <aside><p>[#COOKIETYPEINTRO_STATISTICS#]</p></aside>
        </div>

        <!-- Publicidad -->
        <div class="preferences-consent__option-wrapper">
          <button type="button" class="preferences-consent__option">
            <span class="preferences-consent__option__plus"><!-- icono + --></span>
            <span>[#COOKIETYPE_ADVERTISING_RAW#]</span>
            <input id="CybotCookiebotDialogBodyLevelButtonMarketing"
              class="preferences-consent__option__right hw-form-checkbox"
              type="checkbox" />
            <!-- Preferencias: oculto, vinculado internamente -->
            <input style="display: none"
              id="CybotCookiebotDialogBodyLevelButtonPreferences"
              type="checkbox" />
          </button>
          <aside><p>[#COOKIETYPEINTRO_ADVERTISING#]</p></aside>
        </div>
      </section>
    </main>

    <footer>
      <button type="button" class="confirm-selection"
        id="CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection">
        [#LEVELOPTIN_ALLOW_SELECTION#]
      </button>
    </footer>
  </div>

</div>

---

Clases y selectores CSS principales

Barra principal

Selector	Descripción
#cookiebannerWrapper	Contenedor de la barra. Fondo #202020, ancho máx. 700px.
#cookiebanner .c-header	Título en blanco, negrita.
#cookiebanner p.c-message ~ p	Texto secundario bajo el mensaje principal.
.buttons-container	Flex column (móvil) / flex row-reverse (escritorio).
.custom-button	Botón base: fondo #202020, texto blanco.
.accept-button	Variante: fondo blanco, texto negro (invierte colores).

Panel preferencias

Selector	Descripción
.cookiebannerPreferencesWrapper	Drawer de preferencias, oculto por defecto (opacity: 0).
.cookiebannerPreferencesWrapper.open	Estado visible (z-index: 21474836475, opacity: 1).
#cookiebanner-overlay	Fondo oscuro semitransparente que bloquea la UI.
.preferences-consent__option-wrapper	Fila de categoría con borde completo.
.preferences-consent__option.open ~ aside	Muestra el panel de descripción cuando la categoría está expandida.
.preferences-consent__option__plus	Icono + que rota 45° al abrir la categoría.
.preferences-consent__option__right:is(input)	Checkbox de consentimiento alineado a la derecha (20×20px).
.cookiebannerPreferences__logo	Logo Hawkers SVG inline en la cabecera del panel (100px ancho).

---

Notas

IDs reservados por Cookiebot

Los id de los botones (CybotCookiebotDialogBodyLevelButton*) son utilizados internamente por Cookiebot para registrar el consentimiento. No los cambies ni los elimines.

Abrir/cerrar categorías

El comportamiento de acordeón de las categorías se controla añadiendo/quitando la clase open al elemento .preferences-consent__option. Cuando está presente, el <aside> adyacente pasa de display: none a display: block.

Activar el panel de preferencias

El panel .cookiebannerPreferencesWrapper se muestra añadiendo la clase open. Cuando está activo, CSS bloquea el scroll del <html> y <body> mediante :has(.cookiebannerPreferencesWrapper.open).