/* 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: el logo de Kuadro dibujándose ----------
   La misma página de producto de kruce-web (kuadro.html): la llave de
   cuadro en coral dentro de su caja, «Un producto de Kruce» y el nombre. */
:root{--kuadro-coral:#e2734a}
#carga{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:24px;box-sizing:border-box;
  background:var(--kruce-tinta);color:var(--kruce-papel);text-align:center}
#carga .icono-caja{display:grid;place-items:center;width:104px;height:104px;padding:24px;box-sizing:border-box;
  border-radius:28px;border:1px solid transparent;margin-bottom:6px;
  background:linear-gradient(var(--kruce-tinta),var(--kruce-tinta)) padding-box,
             linear-gradient(180deg,rgba(247,245,239,.22),rgba(247,245,239,.04)) border-box;
  box-shadow:inset 0 1px 0 rgba(247,245,239,.06)}
#carga .icono{display:block;width:100%;height:100%;fill:none;stroke:var(--kuadro-coral);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#carga .eyebrow{margin:0;font:600 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:#b9b4a6}
#carga .eyebrow::before{content:'';display:inline-block;width:22px;height:2px;background:var(--kuadro-coral);
  vertical-align:middle;margin-right:10px;border-radius:2px}
#carga .nombre{margin:0;display:inline-block;transform:skewX(var(--kruce-sk));
  font-family:'Unbounded','Arial Black','Helvetica Neue',sans-serif;font-weight:800;letter-spacing:-.01em;
  line-height:.95;font-size:clamp(56px,13vw,150px);color:var(--kuadro-coral)}
/* Las piezas empiezan ESCONDIDAS por CSS: si esperasen al JS (que llega
   detrás del bundle de Supabase) se vería el logo terminado un instante y
   luego dibujándose desde cero, un pantallazo. Con reduced-motion (o sin
   anime) la clase .lista lo deja todo terminado y quieto. Y por si el JS no
   llegara nunca, la capa se apaga sola a los 8 s. */
#carga:not(.lista) .icono path{opacity:0}
#carga:not(.lista) .nombre,#carga:not(.lista) .eyebrow{opacity:0}
#carga.lista .icono path{stroke-dashoffset:0;opacity:1}
#carga.lista .nombre,#carga.lista .eyebrow{opacity:1;transform:none}
#carga{animation:carga-fuera 0s linear 8s forwards}
@keyframes carga-fuera{to{visibility:hidden;pointer-events:none}}

/* ---------- 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)}