/*
 * Tema de CookieConsent v3 a juego con malasdecisiones.es.
 * Carga DESPUÉS de cookieconsent.css (no editar el vendor).
 *
 * Mapea las variables --cc-* a los tokens del sitio. Los botones primario y
 * secundario se definen IDÉNTICOS a propósito: misma jerarquía y mismo diseño
 * (requisito legal). El atractivo viene de la estética, no de favorecer "Aceptar".
 */
#cc-main {
  --cc-font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --cc-bg: color-mix(in oklab, #120b15 82%, transparent); /* panel translúcido */
  --cc-primary-color: #f6f1ea;   /* ink (hueso) */
  --cc-secondary-color: color-mix(in oklab, #f6f1ea 75%, #9b91a3); /* hueso atenuado: mejor contraste que muted */
  --cc-link-color: #ff5e96;      /* accent2 (legible sobre fondo oscuro) */

  --cc-modal-border-radius: 14px;
  --cc-btn-border-radius: 999px; /* pill, como los .btn del sitio */

  /* ---- Botones: AMBOS idénticos (igual jerarquía y diseño) ---- */
  --cc-btn-primary-bg: color-mix(in oklab, #ff1f6c 16%, transparent);
  --cc-btn-primary-border-color: #ff1f6c;
  --cc-btn-primary-color: #f6f1ea;
  --cc-btn-primary-hover-bg: #ff1f6c;
  --cc-btn-primary-hover-border-color: #ff1f6c;
  --cc-btn-primary-hover-color: #080509;

  --cc-btn-secondary-bg: color-mix(in oklab, #ff1f6c 16%, transparent);
  --cc-btn-secondary-border-color: #ff1f6c;
  --cc-btn-secondary-color: #f6f1ea;
  --cc-btn-secondary-hover-bg: #ff1f6c;
  --cc-btn-secondary-hover-border-color: #ff1f6c;
  --cc-btn-secondary-hover-color: #080509;
}

/* Caja: panel oscuro con blur, borde fino y sombra, como los paneles del sitio */
#cc-main .cm {
  border: 1px solid rgba(246, 241, 234, .14); /* var(--line) */
  border-top: 2px solid #ff1f6c;              /* guiño de marca (acento) */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

/* Título con el peso tipográfico de las cabeceras del sitio */
#cc-main .cm__title {
  font-weight: 800;
  letter-spacing: .005em;
}

#cc-main .cm__desc {
  line-height: 1.6;
}

#cc-main .cm__desc a {
  font-weight: 700;
  text-underline-offset: 2px;
}

/* Botones con la estética de los .btn: pill, Space Mono, mayúsculas, hover que sube */
#cc-main .cm__btn {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--cc-btn-primary-border-color);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              background-color .3s, color .3s, border-color .3s;
}

#cc-main .cm__btn:hover {
  transform: translateY(-2px);
}

#cc-main .cm__btn:focus-visible {
  outline: 2px solid #ff5e96;
  outline-offset: 2px;
}

/* Mobile: banner compacto y ARRIBA, para no tapar la fila de plataformas del
   hero (objetivo de la landing). En desktop sigue abajo-derecha.
   El vendor pasa el banner a full-width y apila los botones en ≤640px;
   aquí lo reubicamos arriba y ponemos los dos botones en una sola fila. */
@media (max-width: 640px) {
  #cc-main .cm.cm--bottom { top: var(--cc-modal-margin); bottom: auto; }
  /* tipografía más chica y botones compactos en una fila */
  #cc-main .cm__desc { font-size: 12px; line-height: 1.4; padding-bottom: .5em; }
  #cc-main .cm__btn-group { flex-direction: row !important; gap: .5em; }
  #cc-main .cm__btn { flex: 1 1 0 !important; min-height: 34px; padding: .4em .8em; font-size: 11.5px; }
  #cc-main .cm__btn + .cm__btn { margin: 0 !important; }
}