/*
 * Consentimiento de cookies.
 *
 * Estas reglas vivían en `integrations.css`, que solo se carga cuando hay
 * activo alguno de los plugins de la web vieja. El diseño estaba aprobado en
 * la preview desde julio, pero sus estilos no existían en el stack limpio: el
 * banner se veía en la preview y habría salido sin pintar en la tienda real.
 *
 * Al decidir Toni el 13/08/2026 que el consentimiento se implementa en el tema
 * propio y no con un plugin, las reglas se mudan aquí, a una hoja que se carga
 * siempre. El aspecto es el mismo que se aprobó; lo que cambia es que ahora
 * existe de verdad.
 *
 * Los selectores conservan `#cookie-notice` y `cn-*` a propósito: son los que
 * mide el contrato de paridad visual contra la preview. Renombrarlos sería un
 * cambio cosmético que rompería esa medición sin mejorar nada.
 */



/* Compliance / Cookie Notice. */
#cookie-notice {
  background: transparent !important;
  box-shadow: none;
  color: var(--gp-white) !important;
  font-family: inherit;
  padding: 0 1rem 1rem;
  z-index: 100000;
}

#cookie-notice .cookie-notice-container {
  align-items: center;
  -webkit-backdrop-filter: blur(30px) saturate(155%) brightness(0.52);
  backdrop-filter: blur(30px) saturate(155%) brightness(0.52);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1.75rem;
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--gp-max-width);
  padding: 1.15rem 1.25rem;
}

#cookie-notice .cn-text-container {
  display: grid;
  flex: 1 1 30rem;
  gap: 0.3rem;
  line-height: 1.45;
  margin: 0;
  text-shadow: 0 1px 1rem rgba(0, 0, 0, 0.8);
}

#cookie-notice .cn-text-container strong {
  font-size: 1rem;
  letter-spacing: -0.015em;
}

#cookie-notice .cn-text-container span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.86rem;
}

#cookie-notice .cn-text-container a {
  color: var(--gp-volt);
  font-size: 0.82rem;
  font-weight: 850;
  justify-self: start;
  text-decoration: none;
}

#cookie-notice .cn-text-container a:hover,
#cookie-notice .cn-text-container a:focus-visible {
  text-decoration: underline;
}

#cookie-notice .cn-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: flex-end;
}

#cookie-notice .cn-button {
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0.45rem 1.2rem rgba(0, 0, 0, 0.14);
  color: var(--gp-white) !important;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
  margin: 0;
  min-height: 3rem;
  padding: 0.72rem 1.15rem !important;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#cookie-notice .cn-buttons-container .cn-button:nth-child(2) {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
}

#cookie-notice .cn-buttons-container .cn-button:first-child,
#cookie-notice .cn-buttons-container .cn-button:last-child,
#cookie-notice .gp-preview-cookie-preferences > .cn-button {
  background: var(--gp-volt) !important;
  border-color: var(--gp-volt) !important;
  color: var(--gp-black) !important;
}

#cookie-notice .cn-button:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0.7rem 1.5rem rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

#cookie-notice .cn-buttons-container .cn-button:first-child:hover,
#cookie-notice .cn-buttons-container .cn-button:last-child:hover,
#cookie-notice .gp-preview-cookie-preferences > .cn-button:hover {
  background: #d2ff33 !important;
  border-color: #d2ff33 !important;
}

#cookie-notice .cn-close-icon::before,
#cookie-notice .cn-close-icon::after {
  background-color: var(--gp-white);
}

.gp-preview-cookie-notice {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

.gp-preview-cookie-notice[hidden],
.gp-preview-cookie-preferences[hidden] {
  display: none !important;
}

#cookie-notice .gp-preview-cookie-preferences {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.15rem;
  display: grid;
  flex: 1 0 100%;
  gap: 0.7rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  padding: 1rem;
  width: 100%;
}

#cookie-notice .gp-preview-cookie-preferences > p {
  display: grid;
  grid-column: 1 / -1;
  margin: 0;
}

#cookie-notice .gp-preview-cookie-preferences label {
  align-items: start;
  display: grid;
  font-weight: 900;
  gap: 0.2rem;
  grid-template-columns: auto 1fr;
}

#cookie-notice .gp-preview-cookie-preferences label small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  grid-column: 2;
}

.cn-revoke-cookie {
  display: none !important;
}

/* Pastilla de volver al aviso de cookies.
   Antes era un botón negro opaco de 2,75 rem con «Preferencias de cookies»
   dentro, fijo en la esquina de todas las páginas. Toni la reduce el
   03/09/2026: pone «Cookies», blanco al 30 % y con desenfoque detrás, para que
   se apoye en lo que haya debajo en vez de taparlo. El nombre largo no se
   pierde, pasa al `aria-label`, que es lo que lee un lector de pantalla.
   La letra va oscura y no blanca: sobre el velo blanco del 30 % —que aclara
   igual el fondo negro de la portada que el blanco de una ficha— es la única
   que se lee en las dos. */
.gp-cookie-reopen {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  bottom: 1rem;
  color: var(--gp-black);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 850;
  left: 1rem;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  position: fixed;
  z-index: 9998;
}

.gp-cookie-reopen[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  #cookie-notice {
    padding: 0 0.7rem 0.7rem;
  }

  #cookie-notice .cookie-notice-container {
    align-items: stretch;
    border-radius: 1.5rem;
    flex-direction: column;
    gap: 0.65rem;
    max-height: calc(100dvh - 1.4rem);
    overflow-y: auto;
    padding: 0.8rem;
    text-align: left;
  }

  #cookie-notice .cn-buttons-container {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
  }

  #cookie-notice.cookie-notice-visible .cookie-notice-container .cn-buttons-container .cn-button {
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 100% !important;
    inline-size: 100% !important;
    justify-content: center;
    max-width: none !important;
    min-width: 0;
    text-align: center;
    width: 100% !important;
  }

  #cookie-notice .cn-text-container {
    flex: none;
    gap: 0.18rem;
    line-height: 1.35;
    width: 100%;
  }

  #cookie-notice .cn-text-container strong {
    font-size: 0.9rem;
  }

  #cookie-notice .cn-text-container span {
    font-size: 0.78rem;
  }

  #cookie-notice .cn-text-container a {
    font-size: 0.76rem;
  }

  #cookie-notice .cn-button {
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem !important;
  }

  #cookie-notice .gp-preview-cookie-preferences {
    grid-template-columns: 1fr;
  }

  #cookie-notice .gp-preview-cookie-preferences > p {
    grid-column: 1;
  }
}