/* demo.css — el aviso de que ESTO ES UNA DEMO. Lo pone club.js (vestir) en
   cuanto el club de la URL es `demo`, en el cuadro público y en el panel.
   Colores propios: no depende del tema del club ni de admin.css, porque el
   cuadro público no carga ese archivo. */
/* En demo el aviso flota abajo a la izquierda y tapaba los botones del pie
   del cuadro (Dar de alta parejas, Partido de previa; cazado el 18-sep).
   Un margen abajo del alto del aviso, y nada queda debajo. */
body:has(.aviso-demo){padding-bottom:64px}
.aviso-demo{position:fixed;left:14px;bottom:14px;z-index:50;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 10px;border-radius:999px;font:600 12.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#fbbf24;background:rgba(20,18,15,.92);border:1px solid rgba(251,191,36,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  letter-spacing:.01em}
.aviso-demo::before{content:'';width:8px;height:8px;border-radius:50%;background:#fbbf24;
  box-shadow:0 0 8px rgba(251,191,36,.7)}
.aviso-demo button{margin-left:6px;padding:5px 11px;border-radius:999px;border:1px solid rgba(251,191,36,.45);
  background:rgba(251,191,36,.12);color:#fbbf24;font:600 12px/1 inherit;font-family:inherit;cursor:pointer;
  box-shadow:none;transform:none}
.aviso-demo button:hover{background:rgba(251,191,36,.22);transform:none;box-shadow:none}
.aviso-demo button:disabled{opacity:.5;cursor:wait}
@media (max-width:520px){.aviso-demo{left:10px;bottom:10px;font-size:12px}}

/* ---------- la marca de agua de Kruce, en el cuadro público de la demo ---------- */
@font-face{font-family:'Unbounded';src:url('../../frontend/fuentes/unbounded-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
.marca-agua{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;pointer-events:none;transform:rotate(-12deg);opacity:.09;color:#f7f5ef;mix-blend-mode:screen}
.marca-agua .wordmark{display:inline-block;font-family:'Unbounded','Arial Black',sans-serif;font-weight:800;line-height:1;
  letter-spacing:-.01em;font-size:clamp(90px,22vw,320px);transform:skewX(-10deg);white-space:nowrap}
.marca-agua .wordmark .k{display:inline-block;height:1.24em;width:.832em;vertical-align:-.245em;overflow:visible;fill:#c7e46a}
.marca-agua small{font:700 clamp(14px,3vw,32px)/1 system-ui,sans-serif;letter-spacing:.5em;text-transform:uppercase}
.aviso-demo .caduca{margin-left:8px;font-weight:500;opacity:.8}

/* el reloj de la demo de un visitante, y el final */
.aviso-demo.urgente{border-color:rgba(255,97,97,.6);color:#ff8a80}
.aviso-demo.urgente::before{background:#ff8a80;box-shadow:0 0 8px rgba(255,138,128,.7)}
.demo-fin{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(12,13,16,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.demo-fin-caja{max-width:520px;text-align:center;background:var(--superficie,#15171c);border:1px solid rgba(251,191,36,.35);
  border-radius:20px;padding:28px 26px;color:var(--tinta,#f2f4f8);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.demo-fin-caja .pv-kicker{color:#fbbf24}
.demo-fin-caja h2{margin:0 0 12px;font-size:34px;text-transform:uppercase}
.demo-fin-caja p{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--tinta-suave,#9aa2b1)}
.demo-fin-caja .pv-acciones{justify-content:center;margin-top:18px}
.demo-fin-caja a{text-decoration:none;display:inline-block;padding:11px 20px;border-radius:999px;font-weight:600;font-size:14px}
.demo-fin-caja a.ges{background:#fbbf24;color:#14120f}
.demo-fin-caja a.sec{border:1px solid rgba(242,244,248,.16);color:inherit}

/* ---------- la misión de la demo ---------- */
.mision{position:fixed;right:14px;bottom:14px;z-index:45;width:min(320px,calc(100vw - 28px));
  background:rgba(20,18,15,.94);border:1px solid rgba(251,191,36,.35);border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#f2f4f8;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
.mision-cab{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 14px;
  background:none;border:none;box-shadow:none;border-radius:0;color:inherit;font:600 13.5px/1 inherit;cursor:pointer}
.mision-cab:hover{transform:none;box-shadow:none;background:rgba(251,191,36,.08)}
.mision-tit{color:#fbbf24;letter-spacing:.02em}
.mision-cuenta{font-variant-numeric:tabular-nums;color:#9aa2b1}
.mision.completa .mision-tit{color:#34d399}
.mision-cuerpo{padding:0 14px 14px}
.mision ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mision li{display:grid;grid-template-columns:18px 1fr;gap:2px 10px;align-items:start;padding:8px 10px;border-radius:10px;
  background:rgba(242,244,248,.04)}
.mision li::before{content:'';grid-row:1/3;width:16px;height:16px;border-radius:50%;margin-top:1px;
  border:1.5px solid rgba(251,191,36,.6)}
.mision li.hecha::before{background:#34d399;border-color:#34d399;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2314120f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mision li b{font-size:13.5px;font-weight:600}
.mision li.hecha b{color:#9aa2b1;text-decoration:line-through}
.mision li small{font-size:12px;color:#9aa2b1;line-height:1.35}
.mision li.hecha small{display:none}
.mision-pie{margin-top:10px;font-size:12px;color:#9aa2b1}
.mision-pie p{margin:0 0 10px;font-size:13px;color:#f2f4f8;line-height:1.45}
.mision-pie a.ges{display:block;text-align:center;padding:10px 14px;border-radius:999px;background:#fbbf24;color:#14120f;
  font-weight:700;font-size:13.5px;text-decoration:none}
@media (max-width:640px){.mision{right:10px;bottom:64px}}
@media (prefers-reduced-motion: no-preference){.mision li::before{transition:background .25s,border-color .25s}}