/* kruce.css — la firma de Kruce en el panel: la pantalla de carga y la
   firma de la entrada. El panel viste la piel del CLUB (admin.css, data-tema);
   Kruce solo firma, y por eso sus colores van con prefijo propio y no tocan
   las variables del tema. El wordmark es el de kruce-web (assets/css/site.css):
   la K en lima, «RUCE» en Unbounded 800, inclinado -10°. */

@font-face{
  font-family:'Unbounded';
  src:url('../../frontend/fuentes/unbounded-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}

:root{
  --kruce-lima:#c7e46a;
  --kruce-papel:#f7f5ef;
  --kruce-tinta:#14120f;
  --kruce-sk:-10deg;
}

/* ---------- el wordmark, reutilizable ---------- */
.wordmark{display:inline-block;transform:skewX(var(--kruce-sk));
  font-family:'Unbounded','Arial Black','Helvetica Neue',sans-serif;font-weight:800;
  line-height:1;letter-spacing:-.01em;color:var(--kruce-papel);white-space:nowrap}
.wordmark .k{display:inline-block;height:1.24em;width:.832em;vertical-align:-.245em;
  overflow:visible;fill:var(--kruce-lima)}
.wordmark .letra{display:inline-block}

/* ---------- la carga: negro tinta y la marca en el centro ---------- */
#carga{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:var(--kruce-tinta);color:var(--kruce-papel)}
#carga .wordmark{font-size:clamp(44px,9vw,84px)}
/* Mientras anime dibuja la K, el trazo se ve y el relleno no; con
   reduced-motion (o sin anime) la clase .lista lo deja terminado. */
#carga .k path{stroke:var(--kruce-lima);stroke-width:0;stroke-linejoin:round;stroke-linecap:round}
#carga.lista .k path{fill-opacity:1;stroke-width:0}
#carga.lista .letra{opacity:1;transform:none}
#carga .pie{position:absolute;bottom:28px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--kruce-papel);opacity:.45;letter-spacing:.02em}

/* ---------- la firma de la entrada ---------- */
.firma-kruce{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px 0 0;
  font-size:12px;color:var(--tinta-suave)}
.firma-kruce .wordmark{font-size:15px;color:var(--tinta)}
.firma-kruce a{color:inherit;text-decoration:none}
.firma-kruce a:hover .wordmark{color:var(--kruce-lima)}