/* ==========================================================================
   CANDELA OFFICE — pop-up de cookies
   --------------------------------------------------------------------------
   Caja blanca centrada sobre la web, con dos pantallas: el aviso y las
   preferencias. Medido sobre COOKIES.pdf y COOKIES MOBILE.pdf (20-sep):

     ESCRITORIO (1366x768)   aviso        caja 256 x 258, centrada
                             preferencias caja 600 x 250, centrada
     MÓVIL (375x812)         aviso        caja 350 x 88, abajo, a 82 del borde
                             preferencias caja 350 x 183, abajo

   Este fichero es INDEPENDIENTE del resto: nada de sitio.css depende de él.
   Con COOKIES = False en datos.py no se carga y la web queda igual.
   ========================================================================== */

#cookies{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  /* Mientras está puesto no se puede tocar nada de la web. */
  pointer-events:auto;
  /* Un velo muy suave: en el layout la web se sigue viendo. Lo que importa
     es que no se pueda tocar nada hasta decidir. */
  background:rgba(251,250,248,.28);
  animation:ck-velo .45s var(--ease) forwards;
}
#cookies[hidden]{display:none;}
@keyframes ck-velo{from{opacity:0}to{opacity:1}}
#cookies.ck-fuera{animation:ck-sale .3s var(--ease) forwards;}
@keyframes ck-sale{to{opacity:0}}

.ck-caja{
  background:#fff; border:1px solid rgba(18,16,14,.16);
  color:var(--ink); font-family:var(--serif); font-weight:400;
  font-size:12px; line-height:1.18; letter-spacing:.005em;
  width:256px; min-height:258px; padding:36px 18px 38px;
  display:flex; flex-direction:column; text-align:center;
  transition:width .3s var(--ease), min-height .3s var(--ease);
  opacity:0; animation:ck-entra .45s var(--ease) .05s forwards;
}
@keyframes ck-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #cookies,.ck-caja{animation:none;opacity:1;}
}
/* La pantalla de preferencias es más ancha y más baja. */
#cookies.ck-preferencias .ck-caja{
  width:600px; min-height:250px; padding:26px 34px 20px; text-align:left;
}

.ck-p{display:none; flex-direction:column; flex:1;}
.ck-p.ck-visible{display:flex;}

/* --- Pantalla 1: el aviso ------------------------------------------------ */
.ck-p1 h2{margin:0; font-size:12px; font-weight:400;}
.ck-p1 p{margin:auto 0; max-width:222px; align-self:center;}   /* 222 es el ancho del texto en el layout */
.ck-p1 .ck-bot{margin:0;}

/* --- Pantalla 2: las preferencias ---------------------------------------- */
.ck-cabecera{display:flex; justify-content:space-between; align-items:baseline; gap:20px;}
.ck-cabecera h2{margin:0; font-size:12px; font-weight:400;}
.ck-cats{list-style:none; margin:10px 0 0; padding:0; flex:1;}
.ck-cats li{display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin:0 0 6px;}
.ck-cats .ck-txt{flex:1; min-width:0;}
.ck-cats h3{margin:0; font-size:12px; font-weight:500; letter-spacing:.01em;}
.ck-cats p{margin:1px 0 0; font-size:9.5px; line-height:1.2;}
.ck-cats .ck-int{flex:none;}
.ck-p2 .ck-bot{justify-content:flex-end; margin-top:6px;}

/* La casilla: dos paréntesis, como el resto de la web. Dentro, un punto
   cuando está activada. */
.ck-int{appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;
  background:none;font:inherit;color:inherit;cursor:pointer;
  width:22px;height:14px;position:relative;}
.ck-int::before{content:"(";position:absolute;left:0;top:0;}
.ck-int::after{content:")";position:absolute;right:0;top:0;}
.ck-int span{position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;border-radius:50%;background:currentColor;
  opacity:0;transition:opacity .18s var(--ease);}
.ck-int[aria-checked="true"] span{opacity:1;}
.ck-int[disabled]{cursor:default;opacity:.55;}
.ck-int:focus-visible{outline:1px solid currentColor;outline-offset:2px;}

/* --- Los botones: texto subrayado, separados por comas ------------------- */
.ck-bot{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;}
.ck-bot button{appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.5px;}
.ck-bot button:hover{text-decoration-thickness:1.3px;}
.ck-bot button:focus-visible{outline:1px solid currentColor;outline-offset:2px;}
.ck-bot .ck-fuerte{font-weight:500;}
.ck-bot .ck-coma{margin:0 .35em 0 0;}
.ck-p2 .ck-bot button + button{margin-left:18px;}

/* --- Móvil: la caja baja al pie, encima del nombre ----------------------- */
/* Enlace a la segunda capa dentro del propio aviso. */
.ck-mas{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}

@media(max-width:860px){
  #cookies{align-items:flex-end; justify-content:center;}
  .ck-caja{width:calc(100vw - var(--pad) * 2); min-height:94px;
    margin:0 0 82px; padding:11px 12px 13px; font-size:12px; line-height:1.2;}
  #cookies.ck-preferencias .ck-caja{width:calc(100vw - var(--pad) * 2);
    min-height:194px; padding:10px 12px 8px;}
  .ck-p1 h2,.ck-p1 p{font-size:12px;}
  .ck-p1 p{max-width:none;}
  .ck-cabecera h2{font-size:12px;}
  .ck-cats{margin:7px 0 0;}
  .ck-cats li{margin:0 0 2px;column-gap:12px;}
  .ck-cats h3{font-size:11.5px;}
  .ck-cats p{font-size:9.6px;line-height:1.18;}
  .ck-p2 .ck-bot button + button{margin-left:12px;}
  .ck-int{width:18px;height:12px;}
}