/* ===========================================================
   JuntoCompra — Consentimiento de cookies

   La AEPD exige que rechazar sea tan fácil y tan visible como
   aceptar: los dos botones comparten tamaño, peso y jerarquía.
   =========================================================== */

.ck{
  /* Por debajo del fondo oscuro de los paneles (80): si se abre la ficha,
     la cesta o el acceso, el banner queda detrás y atenuado, como debe. */
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;justify-content:center;
  padding:var(--s4);
  pointer-events:none;
}
.ck[hidden]{display:none !important}

.ck__card{
  width:min(680px,100%);
  padding:var(--s6);
  background:var(--bg);
  border:1px solid rgba(36,36,68,.1);
  border-radius:var(--r-lg);
  box-shadow:0 18px 50px rgba(36,36,68,.22);
  pointer-events:auto;
  transform:translateY(14px);
  opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.ck.is-open .ck__card{transform:none;opacity:1}

.ck__title{font-size:1.06rem;margin-bottom:8px}
.ck__text{
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-60);
  margin-bottom:var(--s5);
}
.ck__text a{color:var(--red);text-decoration:underline;text-underline-offset:2px}

/* Rechazar y aceptar, mismo peso visual */
.ck__acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ck__btn{
  flex:1 1 160px;
  padding:.78em 1.2em;
  border-radius:var(--r-pill);
  font-size:var(--fs-body);font-weight:700;
  text-align:center;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
/* Los dos botones son idénticos a propósito: mismo tamaño, mismo color
   y mismo peso. Destacar «aceptar» sobre «rechazar» es justo lo que la
   AEPD considera un patrón oscuro. */
.ck__btn--si,
.ck__btn--no{
  background:var(--white);
  border:1.5px solid rgba(36,36,68,.2);
  color:var(--ink);
}
.ck__btn--si:hover,
.ck__btn--no:hover{border-color:var(--ink);background:var(--surface)}
.ck__link{
  flex:0 0 auto;
  padding:.78em .6em;
  font-size:var(--fs-sm);font-weight:600;
  color:var(--ink-60);
  text-decoration:underline;text-underline-offset:2px;
}
.ck__link:hover{color:var(--red)}

/* ── Panel de preferencias ──────────────────────────────── */
.ck__panel{margin-top:var(--s5)}
.ck__grupo{
  display:grid;grid-template-columns:1fr auto;
  gap:4px var(--s4);
  padding:var(--s4) 0;
  border-top:1px solid rgba(36,36,68,.1);
}
.ck__grupo h3{font-size:var(--fs-body);color:var(--ink)}
.ck__grupo p{
  grid-column:1;
  font-size:var(--fs-sm);line-height:1.5;color:var(--ink-60);
  margin:0;
}
.ck__grupo .sw{grid-row:span 2}

/* Interruptor */
.sw{
  position:relative;
  width:42px;height:24px;flex:none;
  align-self:center;
}
.sw input{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.sw i{
  position:absolute;inset:0;
  border-radius:var(--r-pill);
  background:rgba(36,36,68,.18);
  transition:background var(--t-fast);
  pointer-events:none;
}
.sw i::after{
  content:'';position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--white);
  transition:transform var(--t-fast);
}
.sw input:checked + i{background:var(--red)}
.sw input:checked + i::after{transform:translateX(18px)}
.sw input:disabled{cursor:not-allowed}
.sw input:disabled + i{background:var(--ink);opacity:.4}
.sw input:focus-visible + i{outline:2.5px solid var(--red);outline-offset:3px}

.ck__guardar{margin-top:var(--s5)}

@media (max-width:560px){
  .ck{padding:10px}
  .ck__card{padding:var(--s5)}
  .ck__btn{flex:1 1 100%}
  .ck__link{flex:1 1 100%;text-align:center;padding-top:2px}
}