/* ============================================================================
   JAKOMI · Hub / mini-tienda — skin de marca
   Importa el sistema de diseño UNA sola vez y mapea las clases de la app a los
   tokens --jk-*. Cálido, kawaii-premium; dark espresso por prefers-color-scheme.
   @import debe ir primero (regla CSS).
============================================================================ */
@import "/styles/jakomi/jakomi.css";

body { padding-bottom: 96px; }
.hidden { display: none !important; }

/* ---------- Topbar (café tostado) ---------- */
.topbar {
  background:
    linear-gradient(180deg, rgba(255,248,238,.10), rgba(74,48,30,.10)),
    var(--jk-primary);
  color: var(--jk-on-primary);
  padding: var(--jk-4) var(--jk-5);
  position: sticky; top: 0; z-index: 10;
  box-shadow: var(--jk-shadow-md), var(--jk-inner-hi);
}
.brand { font-family: var(--jk-font-display); font-weight: 700; font-size: var(--jk-text-xl); letter-spacing: var(--jk-tracking-display); }
.brand span { font-weight: 500; opacity: .9; }
.local-name { font-family: var(--jk-font-sans); font-size: var(--jk-text-sm); opacity: .92; margin-top: 2px; }

main { padding: var(--jk-4); max-width: 560px; margin: 0 auto; }
.hub-wrap { max-width: 480px; margin: 0 auto; padding: var(--jk-5); }

/* ---------- Estados / vacíos ---------- */
.state { text-align: center; padding: var(--jk-16) var(--jk-5); }
.state h2 { color: var(--jk-cacao); }
.dark .state h2, :root[data-theme="dark"] .state h2 { color: var(--jk-text); }

/* ---------- Card base (sombra en capas) ---------- */
.card {
  background: var(--jk-surface);
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-r-xl);
  padding: var(--jk-5);
  margin-bottom: var(--jk-3);
  box-shadow: var(--jk-shadow-md);
}
.card h2, .card h3 { margin: 0 0 var(--jk-3); color: var(--jk-cacao); }
.dark .card h2, .dark .card h3 { color: var(--jk-text); }

/* ---------- Selector de tipo de pedido ---------- */
.choice {
  display: block; width: 100%; text-align: left;
  background: var(--jk-surface);
  border: 1.5px solid var(--jk-border);
  border-radius: var(--jk-r-xl);
  padding: var(--jk-4); margin-bottom: var(--jk-3); cursor: pointer;
  box-shadow: var(--jk-shadow-sm), var(--jk-inner-hi);
  transition: transform var(--jk-dur) var(--jk-ease-out-quint),
              box-shadow var(--jk-dur) var(--jk-ease-out-quint),
              border-color var(--jk-dur-fast) var(--jk-ease-out-quint);
}
.choice:hover { transform: translateY(-2px); box-shadow: var(--jk-shadow-lg); border-color: var(--jk-border-strong); }
.choice:active { transform: translateY(0) scale(.99); }
.choice strong { display: block; font-family: var(--jk-font-display); font-weight: 600; font-size: var(--jk-text-lg); color: var(--jk-cacao); }
.dark .choice strong { color: var(--jk-text); }
.choice span { color: var(--jk-text-muted); font-size: var(--jk-text-sm); }

/* ---------- Banner descuento (acento rosa, quirúrgico) ---------- */
.banner {
  background: var(--jk-rose); color: var(--jk-ink);
  border-radius: var(--jk-r-lg); padding: var(--jk-3) var(--jk-4);
  margin-bottom: var(--jk-3); font-weight: 700; text-align: center;
  box-shadow: var(--jk-shadow-sm);
}

.cat-title { font-family: var(--jk-font-display); font-weight: 600; margin: var(--jk-5) 0 var(--jk-2); color: var(--jk-caramel); font-size: var(--jk-text-lg); }

/* ---------- Items del menú ---------- */
.menu { margin-bottom: var(--jk-3); }
.item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--jk-surface); border: 1px solid var(--jk-border);
  border-radius: var(--jk-r-lg); padding: var(--jk-3) var(--jk-4); margin-bottom: var(--jk-2);
  box-shadow: var(--jk-shadow-sm);
  transition: transform var(--jk-dur) var(--jk-ease-out-quint), box-shadow var(--jk-dur) var(--jk-ease-out-quint);
}
.item:hover { transform: translateY(-1px); box-shadow: var(--jk-shadow-md); }
.item-name { font-weight: 700; }
.item-price { color: var(--jk-text-muted); font-size: var(--jk-text-sm); }

.qty { display: flex; align-items: center; gap: var(--jk-3); }
.qty button {
  width: 34px; height: 34px; border-radius: var(--jk-r-full); border: 0;
  background: var(--jk-primary); color: var(--jk-on-primary);
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: var(--jk-shadow-sm), var(--jk-inner-hi);
  transition: transform var(--jk-dur-fast) var(--jk-ease-back), background-color var(--jk-dur-fast) var(--jk-ease-out-quint);
}
.qty button:hover { background: var(--jk-primary-press); transform: scale(1.08); }
.qty button:active { transform: scale(.92); }
.qty .qcount { min-width: 18px; text-align: center; font-weight: 800; font-family: var(--jk-font-display); }

/* ---------- Formularios ---------- */
label { display: block; font-size: var(--jk-text-sm); margin-bottom: var(--jk-3); color: var(--jk-text); font-weight: 700; }
input[type="text"], input[type="tel"] {
  width: 100%; margin-top: var(--jk-2);
  font-family: var(--jk-font-sans); font-size: var(--jk-text-base); color: var(--jk-text);
  background: var(--jk-surface); border: 1.5px solid var(--jk-border);
  border-radius: var(--jk-r-md); padding: var(--jk-3) var(--jk-4);
  transition: border-color var(--jk-dur-fast) var(--jk-ease-out-quint), box-shadow var(--jk-dur-fast) var(--jk-ease-out-quint);
}
input::placeholder { color: var(--jk-text-subtle); }
input:focus { outline: none; border-color: var(--jk-primary); box-shadow: var(--jk-ring-shadow); }

/* ---------- Barra de carrito ---------- */
.cartbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--jk-surface); border-top: 1px solid var(--jk-border);
  padding: var(--jk-3) var(--jk-4); display: flex; align-items: center; justify-content: space-between;
  gap: var(--jk-3); max-width: 560px; margin: 0 auto;
  box-shadow: 0 -8px 24px rgba(74,48,30,.10);
}
.cart-total { font-size: var(--jk-text-sm); color: var(--jk-text-muted); }
.cart-total strong { font-family: var(--jk-font-display); font-size: var(--jk-text-xl); color: var(--jk-text); }

/* ---------- Botones (jk-btn) ---------- */
.btn, #sendBtn,
#successState button, #errorState button, #mBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jk-2);
  width: 100%; font-family: var(--jk-font-ui); font-weight: 600; font-size: var(--jk-text-sm);
  letter-spacing: .01em; color: var(--jk-on-primary); background: var(--jk-primary);
  border: 0; border-radius: var(--jk-r-md); padding: var(--jk-3) var(--jk-5); cursor: pointer; text-align: center;
  box-shadow: var(--jk-shadow-sm), var(--jk-inner-hi);
  transition: transform var(--jk-dur) var(--jk-ease-out-quint), box-shadow var(--jk-dur) var(--jk-ease-out-quint), background-color var(--jk-dur-fast) var(--jk-ease-out-quint);
}
.btn:hover, #sendBtn:hover { transform: translateY(-2px); box-shadow: var(--jk-shadow-md), var(--jk-inner-hi); }
.btn:active, #sendBtn:active { transform: translateY(0) scale(.985); box-shadow: var(--jk-shadow-xs); }
.btn:disabled, #sendBtn:disabled { background: var(--jk-border-strong); color: var(--jk-text-subtle); cursor: not-allowed; transform: none; box-shadow: none; }
#sendBtn { flex: 1; max-width: 220px; }
.btn-ghost {
  background: transparent; color: var(--jk-primary);
  box-shadow: inset 0 0 0 1.5px var(--jk-border-strong);
}
.btn-ghost:hover { background: var(--jk-surface-2); box-shadow: inset 0 0 0 1.5px var(--jk-primary); }

/* ---------- Éxito ---------- */
.success-emoji { font-size: 56px; }

/* ---------- Toast (espresso) ---------- */
.toast {
  position: fixed; bottom: 104px; left: 50%; transform: translateX(-50%);
  background: var(--jk-espresso); color: var(--jk-cream);
  padding: var(--jk-3) var(--jk-5); border-radius: var(--jk-r-full);
  font-size: var(--jk-text-sm); max-width: 90%; text-align: center; z-index: 20;
  box-shadow: var(--jk-shadow-lg);
}

/* ============================ Hub / link-in-bio ============================ */
.hub-logo { text-align: center; margin: var(--jk-5) 0 var(--jk-2); }
.hub-logo .big { font-family: var(--jk-font-display); font-size: var(--jk-text-4xl); font-weight: 700; letter-spacing: var(--jk-tracking-display); color: var(--jk-cacao); }
.dark .hub-logo .big { color: var(--jk-text); }
.hub-logo .sub { color: var(--jk-text-muted); font-size: var(--jk-text-sm); }

.hub-link {
  display: flex; align-items: center; gap: var(--jk-3);
  background: var(--jk-surface); border: 1px solid var(--jk-border);
  border-radius: var(--jk-r-xl); padding: var(--jk-4); margin-bottom: var(--jk-3);
  text-decoration: none; color: var(--jk-text);
  box-shadow: var(--jk-shadow-md);
  transition: transform var(--jk-dur-slow) var(--jk-ease-out-quint), box-shadow var(--jk-dur-slow) var(--jk-ease-out-quint);
}
.hub-link:hover { transform: translateY(-3px); box-shadow: var(--jk-shadow-lg); }
.hub-link .ico { font-size: 24px; }
.hub-link .t { font-family: var(--jk-font-display); font-weight: 600; }
.hub-link .d { font-size: var(--jk-text-xs); color: var(--jk-text-muted); }

/* ============================ Eventos ============================ */
.event-card {
  background: var(--jk-surface); border: 1px solid var(--jk-border);
  border-radius: var(--jk-r-xl); padding: var(--jk-4); margin-bottom: var(--jk-3);
  box-shadow: var(--jk-shadow-md);
  transition: transform var(--jk-dur-slow) var(--jk-ease-out-quint), box-shadow var(--jk-dur-slow) var(--jk-ease-out-quint);
}
.event-card:hover { transform: translateY(-2px); box-shadow: var(--jk-shadow-lg); }
.event-card .e-top { display: flex; align-items: center; gap: var(--jk-3); }
.event-card .e-emoji { font-size: 28px; }
.event-card .e-title { font-family: var(--jk-font-display); font-weight: 600; font-size: var(--jk-text-lg); color: var(--jk-cacao); }
.dark .event-card .e-title { color: var(--jk-text); }
.event-card .e-when { color: var(--jk-caramel); font-size: var(--jk-text-sm); font-weight: 700; font-family: var(--jk-font-ui); letter-spacing: .04em; }
.event-card .e-desc { color: var(--jk-text-muted); font-size: var(--jk-text-sm); margin: var(--jk-2) 0 var(--jk-3); }

/* ---------- Tabs (pill) ---------- */
.tabs { display: flex; gap: var(--jk-2); margin-bottom: var(--jk-4); }
.tabs button {
  flex: 1; padding: var(--jk-3); border: 1px solid var(--jk-border);
  background: var(--jk-surface); border-radius: var(--jk-r-md);
  font-family: var(--jk-font-ui); font-weight: 600; cursor: pointer; color: var(--jk-text-muted);
  transition: all var(--jk-dur-fast) var(--jk-ease-out-quint);
}
.tabs button.active { background: var(--jk-primary); color: var(--jk-on-primary); border-color: var(--jk-primary); box-shadow: var(--jk-shadow-sm); }

/* ---------- Puntos del Club ---------- */
.points-badge { font-family: var(--jk-font-display); font-size: var(--jk-text-5xl); font-weight: 700; color: var(--jk-primary); text-align: center; margin: var(--jk-2) 0; letter-spacing: var(--jk-tracking-display); }

/* ---------- Modal (eventos) ---------- */
#modal > .card { box-shadow: var(--jk-shadow-lg); border-radius: var(--jk-r-2xl) var(--jk-r-2xl) 0 0; }

/* ============================ Entradas con stagger ============================ */
/* .jk-rise ya hace fade+8px con out-expo. Aquí escalonamos listas sutilmente. */
.jk-stagger > * { animation: jk-rise var(--jk-dur-slow) var(--jk-ease-out-expo) both; }
.jk-stagger > *:nth-child(1) { animation-delay: 40ms; }
.jk-stagger > *:nth-child(2) { animation-delay: 90ms; }
.jk-stagger > *:nth-child(3) { animation-delay: 140ms; }
.jk-stagger > *:nth-child(4) { animation-delay: 190ms; }
.jk-stagger > *:nth-child(5) { animation-delay: 240ms; }
.jk-stagger > *:nth-child(6) { animation-delay: 290ms; }
.jk-stagger > *:nth-child(n+7) { animation-delay: 320ms; }

/* ============================ Estados con Komi (vacío / error) ============================ */
.komi-state { text-align: center; padding: var(--jk-12) var(--jk-5); }
.komi-state .komi-face {
  font-size: 56px; line-height: 1; display: block; margin-bottom: var(--jk-3);
  filter: drop-shadow(0 6px 12px rgba(74,48,30,.18));
}
.komi-state h2, .komi-state h3 {
  font-family: var(--jk-font-display); color: var(--jk-cacao); margin: 0 0 var(--jk-2);
}
.dark .komi-state h2, .dark .komi-state h3,
:root[data-theme="dark"] .komi-state h2, :root[data-theme="dark"] .komi-state h3 { color: var(--jk-text); }
.komi-state p { color: var(--jk-text-muted); font-size: var(--jk-text-sm); margin: 0 auto var(--jk-4); max-width: 34ch; }
.komi-state .btn, .komi-state .jk-btn { width: auto; display: inline-flex; }

/* ============================ Skeletons de marca ============================ */
.sk-card {
  background: var(--jk-surface); border: 1px solid var(--jk-border);
  border-radius: var(--jk-r-xl); padding: var(--jk-4); margin-bottom: var(--jk-3);
  box-shadow: var(--jk-shadow-md);
}
.sk-row { display: flex; align-items: center; gap: var(--jk-3); margin-bottom: var(--jk-3); }
.sk-dot { width: 40px; height: 40px; border-radius: var(--jk-r-full); flex: 0 0 auto; }
.sk-line { height: 14px; border-radius: var(--jk-r-sm); }
.sk-grow { flex: 1; }
.sk-btn { height: 40px; width: 48%; border-radius: var(--jk-r-md); margin-top: var(--jk-2); }

/* ============================ 404 de marca ============================ */
.nf-wrap {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: var(--jk-6); max-width: 520px; margin: 0 auto;
}
.nf-card {
  background: var(--jk-surface); border: 1px solid var(--jk-border);
  border-radius: var(--jk-r-2xl); padding: var(--jk-10) var(--jk-6);
  box-shadow: var(--jk-shadow-lg), var(--jk-inner-hi);
  text-align: center; width: 100%;
}
.nf-komi { font-size: 72px; line-height: 1; margin-bottom: var(--jk-4); filter: drop-shadow(0 8px 16px rgba(74,48,30,.20)); }
.nf-title { font-family: var(--jk-font-display); color: var(--jk-cacao); margin: var(--jk-2) 0 var(--jk-3); font-size: var(--jk-text-2xl); }
.dark .nf-title, :root[data-theme="dark"] .nf-title { color: var(--jk-text); }
.nf-text { color: var(--jk-text-muted); font-size: var(--jk-text-sm); margin: 0 auto var(--jk-6); max-width: 40ch; }
.nf-card .jk-btn { width: auto; }