/* ===========================================================
   ClinicOS · aviso de cookies
   -----------------------------------------------------------
   Cumple el criterio de la Agencia Española de Protección de
   Datos: rechazar cuesta lo mismo que aceptar, nada se carga
   antes de que la persona decida y la decisión se puede cambiar.

   Estilo: el mismo relieve que el resto de la web. Las piezas
   son del gris del fondo y lo que las separa es la luz; el azul
   es plano, sin degradado y sin resplandor.

   Este archivo lo cargan TODAS las páginas, y alguna no define
   los tokens. Por eso cada var() lleva su valor de reserva, y
   ese valor es el del sistema de relieve, nunca el antiguo.
   =========================================================== */
.ck-velo{
  position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.14);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.ck-velo.visible{opacity:1}   /* solo atenúa; nunca bloquea la lectura */

.ck{
  position:fixed; z-index:100; left:50%; transform:translate(-50%,140%);
  bottom:max(16px, env(safe-area-inset-bottom)); width:min(680px, calc(100vw - 28px));
  background:var(--glass,#eaecf2); border:0; border-radius:var(--r-l,24px);
  box-shadow:var(--flot-alta, 12px 12px 26px #cbd0dc, -10px -10px 24px #fff);
  padding:26px 28px; transition:transform .42s cubic-bezier(.22,.9,.3,1);
  max-height:min(86vh, 760px); overflow-y:auto;
}
.ck.visible{transform:translate(-50%,0)}
@media (max-width:560px){ .ck{padding:22px 20px; border-radius:var(--r-m,16px)} }

.ck h2{
  font-family:var(--display,"Plus Jakarta Sans",system-ui,sans-serif);
  font-size:19px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px;
  color:var(--ink,#0f172a);
}
.ck p{margin:0 0 16px; font-size:14.5px; line-height:1.6; color:var(--ink-2,#475569); max-width:62ch}
.ck a{color:var(--azul,#2563eb); text-underline-offset:3px}

/* ---------- botones: la misma píldora de la portada ---------- */
.ck-botones{display:flex; gap:10px; flex-wrap:wrap}
.ck-btn{
  font:inherit; font-family:var(--body,"Plus Jakarta Sans",system-ui,sans-serif);
  font-size:14.5px; font-weight:600; cursor:pointer;
  border-radius:999px; padding:13px 22px; min-height:48px;
  border:0; background:var(--glass,#eaecf2); color:var(--ink,#0f172a);
  box-shadow:var(--flot-baja, 4px 4px 10px #cbd0dc, -4px -4px 10px #fff);
  transition:transform .16s ease;
  flex:1 1 auto;
}
.ck-btn:active{transform:scale(.97)}

/* Aceptar y rechazar pesan lo mismo: mismo tamaño, mismo relleno y
   la misma contundencia visual. Es lo que exige la Agencia. */
.ck-btn.principal{
  color:#fff; background:var(--azul,#2563eb);
  box-shadow:var(--sombra-azul, 0 8px 20px rgba(37,99,235,.35));
}
.ck-btn.igual{
  color:#fff; background:var(--ink,#0f172a);
  box-shadow:0 8px 20px rgba(15,23,42,.30);
}
.ck-btn.texto{
  flex:0 0 auto; background:transparent; box-shadow:none;
  color:var(--ink-2,#475569); padding:13px 12px;
}
.ck-btn.texto:hover{color:var(--ink,#0f172a); text-decoration:underline}
.ck-btn:focus-visible{outline:2.5px solid var(--azul,#2563eb); outline-offset:3px}

/* ---------- los grupos: pieza hundida, no tarjeta con borde ---------- */
.ck-grupos{display:flex; flex-direction:column; gap:12px; margin:4px 0 18px}
.ck-grupo{
  display:flex; gap:14px; align-items:flex-start;
  border:0; border-radius:var(--r-m,16px); padding:16px 18px;
  background:var(--glass,#eaecf2);
  box-shadow:var(--som-in, inset 3px 3px 6px #c8cedb, inset -3px -3px 6px #fff);
}
.ck-grupo h3{
  font-family:var(--display,"Plus Jakarta Sans",system-ui,sans-serif);
  font-size:15.5px; font-weight:700; margin:0 0 3px; color:var(--ink,#0f172a);
}
.ck-grupo p{margin:0; font-size:13.5px; line-height:1.55}
.ck-grupo .fijo{
  flex:none; font-family:var(--body,"Plus Jakarta Sans",system-ui,sans-serif);
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--verde-ink,#047857); background:var(--disco-verde,#d6f5e5);
  border-radius:999px; padding:6px 11px; align-self:center; box-shadow:none;
}

/* ---------- interruptor ---------- */
.ck-sw{position:relative; flex:none; width:50px; height:30px; align-self:center}
.ck-sw input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.ck-sw span{
  position:absolute; inset:0; border-radius:999px;
  background:var(--hueco-bg,#e2e5ed);
  box-shadow:inset 2px 2px 5px #c8cedb, inset -2px -2px 5px #fff;
  transition:background .22s ease; pointer-events:none;
}
.ck-sw span::after{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:2px 2px 5px #c3c9d6, -2px -2px 5px #fff;
  transition:transform .22s ease;
}
.ck-sw input:checked + span{background:var(--azul,#2563eb); box-shadow:none}
.ck-sw input:checked + span::after{transform:translateX(20px); box-shadow:0 2px 6px rgba(15,23,42,.28)}
.ck-sw input:focus-visible + span{outline:2.5px solid var(--azul,#2563eb); outline-offset:3px}

.ck-oculto{display:none !important}

@media (prefers-reduced-motion:reduce){
  .ck,.ck-velo,.ck-btn,.ck-sw span,.ck-sw span::after{transition:none !important}
}