/* =========================================================
   WeWeKa · Aviso y preferencias de cookies
   Tokens propios: funciona igual en la landing, la app y las
   páginas legales, en tema claro y oscuro.
   ========================================================= */
.wwck, .wwck-ov {
  --ck-bg: #f1faee;
  --ck-ink: #111b61;
  --ck-muted: #4a5490;
  --ck-line: rgba(17, 27, 97, .16);
  --ck-accent: #d90034;
  --ck-accent-ink: #ffffff;
  --ck-sh: 0 18px 48px rgba(17, 27, 97, .24);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ck-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wwck, :root:not([data-theme="light"]) .wwck-ov {
    --ck-bg: #161d45; --ck-ink: #eef1ff; --ck-muted: #a7afe0; --ck-line: rgba(238, 241, 255, .16);
    --ck-accent: #ff2e56; --ck-sh: 0 18px 48px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] .wwck, :root[data-theme="dark"] .wwck-ov {
  --ck-bg: #161d45; --ck-ink: #eef1ff; --ck-muted: #a7afe0; --ck-line: rgba(238, 241, 255, .16);
  --ck-accent: #ff2e56; --ck-sh: 0 18px 48px rgba(0, 0, 0, .5);
}

.wwck {
  position: fixed; z-index: 90;
  left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(640px, calc(100% - 32px));
  background: var(--ck-bg);
  border: 1px solid var(--ck-line);
  border-radius: 22px;
  box-shadow: var(--ck-sh);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  animation: wwck-in .3s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes wwck-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.wwck-txt { font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--ck-muted); }
.wwck-txt b { color: var(--ck-ink); }
.wwck a, .wwck-ov a { color: var(--ck-accent); font-weight: 800; text-decoration: underline; }
.wwck-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.wwck-btn {
  flex: 1 1 140px; min-height: 44px;
  font: inherit; font-size: 14px; font-weight: 800;
  color: var(--ck-ink); background: transparent;
  border: 2px solid var(--ck-line); border-radius: 999px;
  padding: 10px 16px; cursor: pointer;
}
.wwck-btn.solid { background: var(--ck-accent); border-color: var(--ck-accent); color: var(--ck-accent-ink); }
.wwck-btn:focus-visible, .wwck-sw:focus-visible { outline: 3px solid var(--ck-accent); outline-offset: 2px; }

.wwck-ov {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(10, 14, 40, .45);
  display: grid; place-items: center; padding: 16px;
}
.wwck-modal {
  width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--ck-bg); border-radius: 24px; box-shadow: var(--ck-sh);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.wwck-modal h2 { font-size: 18px; font-weight: 900; }
.wwck-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--ck-line); cursor: default;
}
label.wwck-row { cursor: pointer; }
.wwck-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wwck-row b { font-size: 14px; font-weight: 900; }
.wwck-row span { font-size: 12.5px; font-weight: 600; color: var(--ck-muted); line-height: 1.5; }
.wwck-fixed { font-size: 12px !important; font-weight: 800 !important; color: var(--ck-ink) !important; white-space: nowrap; }
.wwck-sw { width: 22px; height: 22px; accent-color: var(--ck-accent); flex: none; cursor: pointer; }
.wwck-note { font-size: 12px; font-weight: 600; color: var(--ck-muted); line-height: 1.5; }

@media (max-width: 520px) {
  .wwck { padding: 14px; }
  .wwck-btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wwck { animation: none; } }
