/* ============================================================
   XOKAI · Onboarding E2E + Centro de Carga
   Core stylesheet — tokens (from DS) + tenant vars + animations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Xokai brand (production purple) ---- */
  --xk-accent:           #6D4AE8;
  --xk-accent-light:     #F3F0FF;   /* purple-tint use */
  --xk-accent-medium:    #C4B5FD;
  --xk-accent-dark:      #5B3BD4;
  --xokai-purple:        #6D4AE8;
  --xokai-purple-tint:   #FAFAFF;
  --xokai-purple-light:  #EEEDFE;
  --xokai-purple-dark:   #3C3489;

  /* ---- Surfaces & text (stone) ---- */
  --xk-bg:               #FAFAF8;
  --xk-surface:          #FFFFFF;
  --xk-surface-2:        #F5F5F4;
  --xk-surface-3:        #E7E5E4;
  --xk-subtle:           #F4F3EF;
  --xk-text:             #0F0E0C;
  --xk-text-secondary:   #57534E;
  --xk-text-muted:       #A8A49E;
  --xk-border:           #ECEAE3;
  --xk-border-strong:    #D8D5CC;

  /* ---- Semantic (spec calibration) ---- */
  --xk-success:          #0F6E56;
  --xk-success-tint:     #E1F5EE;
  --xk-warning:          #BA7517;
  --xk-warning-tint:     #FAEEDA;
  --xk-danger:           #C0392B;
  --xk-danger-tint:      #FBEAF0;
  --xk-info:             #0C447C;
  --xk-info-tint:        #E6F1FB;

  /* ---- Tenant (default Hábitat — overridable per-tenant) ---- */
  --tenant-brand:        #88B83C;
  --tenant-brand-tint:   #E1F5EE;
  --tenant-brand-dark:   #04342C;

  /* ---- Type ---- */
  --xk-font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --xk-font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  /* ---- Radius ---- */
  --radius-xk-sm:    6px;
  --radius-xk-md:    8px;
  --radius-xk-lg:    12px;
  --radius-xk-xl:    14px;

  /* ---- Shadow ---- */
  --xk-shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.04);
  --xk-shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --xk-shadow-md:    0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --xk-shadow-lg:    0 10px 24px -6px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.06);
  --xk-shadow-glow:  0 0 0 3px color-mix(in oklab, var(--xk-accent) 22%, transparent);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--xk-bg);
  font-family: var(--xk-font-sans);
  color: var(--xk-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
button { font-family: var(--xk-font-sans); }
input, select, textarea { font-family: var(--xk-font-sans); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--xk-border-strong); border-radius: 999px; border: 3px solid var(--xk-bg); }

/* ============================================================
   KEYFRAMES (all CSS-pure, per spec)
   ============================================================ */
@keyframes confetti-fall {
  0%   { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(450px) rotate(720deg); opacity: 0; }
}
@keyframes hero-scale-in {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes check-draw {
  0%   { stroke-dashoffset: 60; }
  100% { stroke-dashoffset: 0; }
}
@keyframes fade-up {
  0%   { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  100% { box-shadow: 0 0 0 24px rgba(255,255,255,0); }
}
@keyframes skeleton-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
@keyframes slide-up-in {
  0%   { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes backdrop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@keyframes pulse-success {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--xk-success) 45%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
@keyframes toast-bounce {
  0% { transform: translateY(16px) scale(0.96); opacity: 0; }
  60% { transform: translateY(-3px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---- Animation utility classes ---- */
.animate-hero-in   { animation: hero-scale-in 0.7s var(--xk-ease,cubic-bezier(0.16,1,0.3,1)) both; }
.animate-fade-up   { animation: fade-up 0.5s ease both; }
.animate-slide-up  { animation: slide-up-in 0.32s cubic-bezier(0.16,1,0.3,1) both; }
.animate-pulse-ring{ animation: pulse-ring 2s ease-out infinite; }
.animate-spin      { animation: spinner-rotate 0.7s linear infinite; }
.animate-shake     { animation: shake 0.3s ease; }
.animate-pulse-success { animation: pulse-success 0.9s ease-out; }
.animate-toast     { animation: toast-bounce 0.4s cubic-bezier(0.16,1,0.3,1) both; }

.confetti-piece {
  position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px;
  animation: confetti-fall 3s ease-in infinite;
}

.skeleton {
  background: linear-gradient(90deg, var(--xk-surface-2) 25%, #ecebe8 50%, var(--xk-surface-2) 75%);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  /* Disable entry animations entirely so content shows its natural (visible)
     state — never leave elements stuck at an opacity:0 start frame. */
  .confetti-piece { display: none !important; }
  .animate-pulse-ring,
  .animate-hero-in,
  .animate-fade-up,
  .animate-slide-up,
  .animate-toast,
  .animate-pulse-success { animation: none !important; opacity: 1 !important; transform: none !important; }
  .animate-spin { animation-duration: 1.1s; }
}
/* check-draw fallback: visible end-state when animation can't run */
@media (prefers-reduced-motion: reduce) {
  svg path { stroke-dashoffset: 0 !important; }
}

/* ------------------------------------------------------------
   Reveal lock — JS adds `.xk-revealed` to a container shortly
   after mount. Forces entrance-animated descendants to their
   final visible state WITHOUT relying on the animation timeline
   (which some embed/capture contexts freeze at t=0). Real
   browsers play the animation in the window before reveal.
   ------------------------------------------------------------ */
.xk-revealed .animate-hero-in,
.xk-revealed .animate-fade-up,
.xk-revealed .animate-slide-up,
.xk-revealed .animate-toast,
.xk-revealed .animate-pulse-success {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.xk-revealed .animate-pulse-ring { animation: none !important; }
.xk-revealed svg path { stroke-dashoffset: 0 !important; }
.xk-revealed .xk-modal-backdrop { animation: none !important; opacity: 1 !important; }

/* ============================================================
   Shared element styles
   ============================================================ */
.xk-card {
  background: var(--xk-surface);
  border-radius: var(--radius-xk-lg);
  border: 1px solid color-mix(in oklab, var(--xk-border) 78%, transparent);
  box-shadow: var(--xk-shadow-xs);
}
.xk-overline {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--xk-text-secondary);
}
.xk-mono { font-family: var(--xk-font-mono); font-variant-numeric: tabular-nums; }

.xk-input {
  height: 36px; width: 100%; padding: 0 11px;
  font-size: 13.5px; color: var(--xk-text);
  background: var(--xk-surface);
  border: 1px solid var(--xk-border-strong);
  border-radius: var(--radius-xk-md);
  outline: none; transition: box-shadow 120ms ease, border-color 120ms ease;
}
.xk-input:focus { border-color: var(--xk-accent); box-shadow: var(--xk-shadow-glow); }
.xk-input.is-error { border-color: var(--xk-danger); }
.xk-input.is-error:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--xk-danger) 20%, transparent); }
textarea.xk-input { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.5; }

/* interactive card hover */
.xk-card-interactive { cursor: pointer; transition: border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease; }
.xk-card-interactive:hover { border-color: var(--xk-accent); box-shadow: var(--xk-shadow-md); transform: translateY(-1px); }

.xk-btn-press:active { transform: scale(0.97); }
.xk-btn-press { transition: background 120ms ease, transform 100ms ease, box-shadow 120ms ease, filter 120ms ease; }
.xk-btn-press:hover { filter: brightness(0.97); box-shadow: var(--xk-shadow-sm); }

/* ------------------------------------------------------------
   Global interactivity polish — hover affordances everywhere
   ------------------------------------------------------------ */
/* static cards get a gentle lift on hover */
.xk-card { transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease; }
.xk-card:hover { box-shadow: var(--xk-shadow-sm); }

/* data-table rows */
.xk-trow { transition: background 100ms ease; }
.xk-trow:hover { background: var(--xk-subtle) !important; }

/* icon-only ghost buttons (kebab, edit, trash, copy) */
.xk-iconbtn { border: none; background: transparent; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 7px; padding: 5px;
  color: var(--xk-text-muted); transition: background 120ms ease, color 120ms ease; }
.xk-iconbtn:hover { background: var(--xk-subtle); color: var(--xk-text); }
.xk-iconbtn.is-danger:hover { background: var(--xk-danger-tint); color: var(--xk-danger); }
.xk-iconbtn.is-warn:hover { background: var(--xk-warning-tint); color: var(--xk-warning); }

/* dashed "add" buttons */
.xk-dashed { transition: border-color 140ms ease, background 140ms ease, color 140ms ease; }
.xk-dashed:hover { border-color: var(--xk-accent) !important; background: var(--xokai-purple-tint) !important; color: var(--xk-accent) !important; }

/* swatch / chip buttons */
.xk-tap { transition: transform 120ms ease, box-shadow 120ms ease; }
.xk-tap:hover { transform: translateY(-1px); box-shadow: var(--xk-shadow-sm); }

/* group pills (estructura) */
.xk-pill-edit { transition: background 120ms ease, color 120ms ease; }
.xk-pill-edit:hover { background: var(--xk-accent-light) !important; color: var(--xk-accent) !important; }
.xk-group-pill:hover .xk-group-x { opacity: 1 !important; }
.xk-group-x:hover { color: var(--xk-danger); }

/* select hover */
.xk-input:hover:not(:focus) { border-color: var(--xk-text-muted); }

/* tab / filter pills */
.xk-tabpill { transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.xk-tabpill:hover { border-color: var(--xk-accent); color: var(--xk-accent); }

/* App-store / scroll containers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }