/* ============================================================
   BOYACÁ VIP — aviso de cookies y preferencias (cookies.js)
   Dos composiciones, como el resto del sitio:
   base = celular (hasta 959 px): hoja inferior compacta.
   @media (min-width: 960px) = escritorio: tarjeta flotante abajo a la izquierda.
   Usa los tokens de sitio.css; los valores de respaldo son la paleta
   «Piedra», para las páginas que no cargan sitio.css (política de datos).
   «Rechazar» y «Aceptar» llevan EXACTAMENTE el mismo estilo.
   ============================================================ */

.ck,.ck-panel{
  --ck-fondo:var(--card, #F7F5F1); --ck-tinta:var(--tinta, #1D221F); --ck-tenue:var(--tinta-dim, #62665F);
  --ck-verde:var(--verde, #34503F); --ck-verde-h:var(--verde-hover, #2A4234); --ck-acento:var(--ambar, #B38B5D);
  --ck-linea:var(--linea-l, rgba(var(--tinta-rgb,29,34,31),.14));
  --ck-display:var(--display, 'Marcellus', Georgia, serif);
  --ck-body:var(--body, 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-family:var(--ck-body);color:var(--ck-tinta);-webkit-font-smoothing:antialiased;box-sizing:border-box
}
.ck *,.ck-panel *{box-sizing:border-box}
.ck :focus-visible,.ck-panel :focus-visible{outline:3px solid var(--ck-acento);outline-offset:2px}

.ck__t{margin:0;font-family:var(--ck-display);font-weight:400;line-height:1.15;color:var(--ck-tinta)}
.ck__d{margin:0;font-size:14px;line-height:1.5;color:var(--ck-tenue)}
.ck__d a{color:var(--ck-verde);font-weight:600;text-underline-offset:2px}

/* Los botones: Rechazar y Aceptar, gemelos. Configurar, texto. */
.ck__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border-radius:10px;
  border:1px solid var(--ck-verde);background:var(--ck-verde);color:#fff;font:600 15px/1.2 var(--ck-body);cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;-webkit-tap-highlight-color:transparent}
.ck__btn:active{transform:translateY(1px)}
.ck__btn--txt{background:transparent;border-color:transparent;color:var(--ck-verde);min-height:44px;text-decoration:underline;text-underline-offset:3px}

/* ---------- Celular: hoja inferior ---------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ck-fondo);border-top:1px solid var(--ck-linea);
  border-radius:16px 16px 0 0;box-shadow:0 -10px 32px rgba(var(--b0-rgb,20,24,21),.16);
  padding:16px 16px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;
  animation:ck-sube .32s cubic-bezier(.2,.8,.2,1) both}
.ck .ck__t{font-size:18px}
.ck__acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.ck__acciones .ck__btn--txt{grid-column:1 / -1}
@keyframes ck-sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* El panel de preferencias: también hoja inferior en el celular. */
.ck-panel{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:88vh;max-height:88dvh;padding:0;border:0;
  border-radius:16px 16px 0 0;background:var(--ck-fondo);box-shadow:0 -10px 40px rgba(var(--b0-rgb,20,24,21),.22);overflow:auto;overscroll-behavior:contain}
.ck-panel[open]{animation:ck-sube .32s cubic-bezier(.2,.8,.2,1) both}
.ck-panel::backdrop{background:rgba(var(--b0-rgb,20,24,21),.45)}
.ck-panel__cuerpo{padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.ck-panel__cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ck-panel .ck__t{font-size:21px}
.ck-cerrar{flex:0 0 44px;width:44px;height:44px;margin-right:-8px;border:0;border-radius:50%;background:transparent;color:var(--ck-tinta);
  display:grid;place-items:center;cursor:pointer}
.ck-cerrar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ck-cats{display:flex;flex-direction:column;border-top:1px solid var(--ck-linea)}
.ck-cat{padding:12px 0;border-bottom:1px solid var(--ck-linea);display:flex;flex-direction:column;gap:2px}
.ck-cat__fila{display:flex;align-items:center;gap:10px;min-height:44px}
.ck-cat__n{font-weight:600;font-size:16px;flex:1;cursor:pointer}
.ck-cat__fija{font-size:13px;color:var(--ck-tenue)}
.ck-cat__d{margin:0;font-size:13.5px;line-height:1.5;color:var(--ck-tenue);max-width:60ch}

/* El interruptor: un checkbox de verdad (role="switch"), con 52×44 para tocar. */
.ck-switch{position:relative;flex:0 0 52px;width:52px;height:44px;display:grid;place-items:center}
.ck-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.ck-switch input:disabled{cursor:not-allowed}
.ck-switch__pista{position:relative;width:44px;height:26px;border-radius:999px;background:rgba(var(--tinta-rgb,29,34,31),.22);transition:background-color .2s ease}
.ck-switch__pista::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(var(--b0-rgb,20,24,21),.3);transition:transform .2s ease}
.ck-switch input:checked + .ck-switch__pista{background:var(--ck-verde)}
.ck-switch input:checked + .ck-switch__pista::after{transform:translateX(18px)}
.ck-switch input:disabled + .ck-switch__pista{opacity:.55}
.ck-switch input:focus-visible + .ck-switch__pista{outline:3px solid var(--ck-acento);outline-offset:2px}

.ck-panel__acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-panel__acciones .ck__btn--guardar{grid-column:1 / -1;background:transparent;color:var(--ck-verde)}

/* ---------- Escritorio: tarjeta flotante abajo a la izquierda ---------- */
@media (min-width:960px){
  .ck{left:24px;right:auto;bottom:24px;width:392px;border:1px solid var(--ck-linea);border-radius:16px;
    box-shadow:0 2px 6px rgba(var(--b0-rgb,20,24,21),.10), 0 24px 60px rgba(var(--b0-rgb,20,24,21),.22);padding:22px 22px 14px;gap:10px}
  .ck .ck__t{font-size:20px}
  .ck__acciones{margin-top:6px}
  .ck__acciones .ck__btn--txt{justify-self:start;padding:0 4px}
  .ck-panel{inset:auto auto 24px 24px;width:460px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
    border:1px solid var(--ck-linea);border-radius:16px;box-shadow:0 2px 6px rgba(var(--b0-rgb,20,24,21),.10), 0 24px 60px rgba(var(--b0-rgb,20,24,21),.24)}
  .ck-panel__cuerpo{padding:22px 24px 20px;gap:14px}
  .ck-panel .ck__t{font-size:22px}
  .ck-panel::backdrop{background:rgba(var(--b0-rgb,20,24,21),.30)}
}
@media (hover:hover){
  .ck__btn:hover{background:var(--ck-verde-h);border-color:var(--ck-verde-h)}
  .ck__btn--txt:hover,.ck-panel__acciones .ck__btn--guardar:hover{background:rgba(var(--verde-rgb,52,80,63),.08);border-color:transparent}
  .ck-panel__acciones .ck__btn--guardar:hover{border-color:var(--ck-verde)}
  .ck-cerrar:hover{background:rgba(var(--tinta-rgb,29,34,31),.06)}
}
@media (prefers-reduced-motion:reduce){
  .ck,.ck-panel[open]{animation:none}
  .ck__btn,.ck-switch__pista,.ck-switch__pista::after{transition:none}
}