/* Demo LuciClass — base + tour guiado (coachmarks). Estático, sin dependencias. */

:root {
  --brand: #2f4eea;
  --lime: #d6f24a;
  --ink: #16181d;
  --ink3: #8b909c;
  --line: #dde0e7;
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* Scrollbar discreto */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd4dd; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b6bcc8; background-clip: content-box; }

/* Aparición suave de pantallas */
[data-screen] { animation: fadein .28s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ───────────────── Tour guiado (coachmarks) ───────────────── */
/* Transparente: NO difumina ni oscurece. El oscurecimiento (y el aro lima)
   lo genera el box-shadow gigante de #tourHole, que deja el elemento objetivo
   nítido. El overlay solo captura el clic para cerrar. */
#tourOverlay {
  position: fixed; inset: 0; z-index: 80;
  background: transparent;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#tourOverlay.on { opacity: 1; pointer-events: auto; }

/* recorte que resalta el elemento objetivo */
#tourHole {
  position: fixed; z-index: 81; pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(8, 10, 20, .55), 0 0 0 3px var(--lime), 0 8px 30px -6px rgba(0,0,0,.5);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
#tourOverlay.on + #tourHole { display: block; }

#tourPop {
  position: fixed; z-index: 82; width: min(340px, calc(100vw - 32px));
  background: #fff; border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.4); opacity: 0;
  transform: translateY(6px) scale(.98); transition: all .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
#tourPop.on { opacity: 1; transform: none; pointer-events: auto; }
#tourPop .tp-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 6px; }
#tourPop .tp-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--lime); box-shadow: 0 0 0 3px rgba(214,242,74,.35); }
#tourPop h4 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 8px 0 5px; letter-spacing: -.01em; line-height: 1.25; }
#tourPop p { font-size: 13.5px; color: #5b606b; line-height: 1.5; margin: 0; }
#tourPop .tp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 10px; }
#tourPop .tp-dots { display: flex; gap: 5px; }
#tourPop .tp-dots i { width: 6px; height: 6px; border-radius: 99px; background: #d8dce4; transition: all .2s; }
#tourPop .tp-dots i.on { background: var(--brand); width: 16px; border-radius: 99px; }
#tourPop .tp-btns { display: flex; gap: 8px; }
#tourPop button { font-size: 12.5px; font-weight: 700; border-radius: 9px; padding: 7px 13px; cursor: pointer; border: 0; transition: transform .12s, background .15s; }
#tourPop button:active { transform: scale(.96); }
#tourPop .tp-skip { background: transparent; color: var(--ink3); padding: 7px 8px; }
#tourPop .tp-skip:hover { color: var(--ink); }
#tourPop .tp-next { background: var(--ink); color: #fff; }
#tourPop .tp-next:hover { background: #000; }

/* Botón flotante para (re)lanzar el tour */
.tour-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; padding: 11px 16px; border-radius: 99px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.45); transition: transform .15s;
}
.tour-fab:hover { transform: translateY(-2px); }
.tour-fab .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--lime); box-shadow: 0 0 0 3px rgba(214,242,74,.3); }

/* Pill "Demo" + volver, arriba */
.demo-ribbon {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(22,24,29,.92); color: #fff; backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; padding: 7px 8px 7px 14px; border-radius: 99px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.demo-ribbon a { color: var(--ink); background: var(--lime); text-decoration: none; font-weight: 800; padding: 4px 11px; border-radius: 99px; font-size: 11.5px; }
.demo-ribbon .sep { opacity: .4; }

/* utilidades menores que el JIT no necesita pero usamos */
.tabular { font-variant-numeric: tabular-nums; }
.no-native::-webkit-outer-spin-button, .no-native::-webkit-inner-spin-button { -webkit-appearance: none; }