/* ═══════════════════════════════════════════════════════════
   PANEL DEL CLIENTE · FIDELIDAD KOKITO STAR
   Se apoya en kokito-design-system.css
   ═══════════════════════════════════════════════════════════ */

#dashboard-cliente {
  --kc-alto-barra: 72px;
  min-height: 100vh;
  padding-bottom: calc(var(--kc-alto-barra) + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-sans);
}

.kc-marco { max-width: 560px; margin: 0 auto; padding: 0 16px; }

/* ── Cabecera ── */
.kc-cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 0, 16, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.kc-cabecera__fila {
  max-width: 560px; margin: 0 auto;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.kc-logo { height: 34px; width: auto; }
.kc-cabecera__acciones { display: flex; align-items: center; gap: 6px; }
.kc-icono-btn {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: rgba(212, 0, 255, 0.12);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: grid; place-items: center; cursor: pointer;
  transition: background .18s, color .18s;
}
.kc-icono-btn:hover { background: rgba(212, 0, 255, 0.22); color: var(--color-primary); }
.kc-icono-btn svg { width: 19px; height: 19px; }

/* ── Saludo ── */
.kc-saludo { display: flex; align-items: center; gap: 12px; padding: 16px 0 4px; }
.kc-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: rgba(212, 0, 255, 0.2);
  border: 1px solid var(--color-border-strong);
  display: grid; place-items: center;
  font-size: 26px; cursor: pointer;
  transition: transform .2s;
}
.kc-avatar:hover { transform: scale(1.05); }
.kc-saludo__nombre { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.kc-saludo__meta { font-size: 0.78rem; color: var(--color-text-muted); }

/* ── Tarjeta de puntos ── */
.kc-puntos {
  margin-top: 14px; padding: 22px 18px; text-align: center;
  background: var(--color-surface-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.kc-puntos__etiqueta {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.kc-puntos__cifra {
  font-size: 3.4rem; font-weight: 700; line-height: 1.05;
  color: var(--color-primary);
  text-shadow: 0 0 24px rgba(212, 0, 255, 0.75);
  font-variant-numeric: tabular-nums;
}
.kc-puntos__nivel { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.kc-puntos__como {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem; color: var(--color-text-muted);
}
.kc-puntos__como b { color: var(--color-text); font-weight: 600; }

/* ── Accesos rápidos ── */
.kc-accesos {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
}
.kc-acceso {
  padding: 14px 6px; text-align: center; cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: background .18s, border-color .18s, transform .18s;
}
.kc-acceso:hover { background: rgba(212, 0, 255, 0.1); transform: translateY(-2px); }
.kc-acceso svg { width: 22px; height: 22px; color: var(--color-primary); }
.kc-acceso span { display: block; margin-top: 6px; font-size: 0.75rem; }
.kc-acceso--activo {
  background: rgba(212, 0, 255, 0.2);
  border-color: var(--color-border-strong);
  animation: pulse-glow 2.5s ease-in-out infinite;
}

/* ── Acciones de compra ── */
.kc-compras { margin-top: 14px; display: grid; gap: 9px; }
.kc-compras .btn { width: 100%; }

/* ── Listas ── */
.kc-titulo-lista {
  margin: 22px 0 8px;
  font-size: 0.8rem; color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: space-between;
}
.kc-titulo-lista button {
  background: none; border: none; cursor: pointer;
  color: var(--color-primary); font-size: 0.78rem; font-family: inherit;
}
.kc-movimiento {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(212, 0, 255, 0.12);
}
.kc-movimiento:last-child { border-bottom: none; }
.kc-movimiento__texto { font-size: 0.85rem; }
.kc-movimiento__meta { font-size: 0.72rem; color: var(--color-text-subtle); }
.kc-movimiento__valor { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kc-mas { color: var(--color-success); }
.kc-menos { color: var(--color-accent); }

/* ── Filtros ── */
.kc-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.kc-filtro {
  padding: 5px 13px; border-radius: var(--radius-full);
  background: transparent; border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 0.75rem;
  font-family: inherit; cursor: pointer; transition: .18s;
}
.kc-filtro:hover { color: var(--color-text); }
.kc-filtro[aria-pressed="true"] {
  background: rgba(212, 0, 255, 0.2);
  border-color: var(--color-border-strong);
  color: var(--color-primary); font-weight: 600;
}

/* ── Cupones ── */
.kc-cupon {
  margin-bottom: 14px; padding: 18px;
  background: var(--color-surface-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  text-align: center;
}
.kc-cupon__qr {
  width: 190px; height: 190px; margin: 12px auto;
  background: #fff; border-radius: var(--radius-lg); padding: 10px;
}
.kc-cupon__qr img { width: 100%; height: 100%; display: block; }
.kc-cupon__codigo {
  font-family: ui-monospace, monospace; font-size: 1.15rem;
  letter-spacing: 0.12em; color: var(--color-primary);
}
.kc-cupon__vence { font-size: 0.78rem; margin-top: 8px; }
.kc-cupon--usado { opacity: 0.5; }

/* ── QR del socio ── */
.kc-qr-caja { text-align: center; padding: 22px 18px; }
.kc-qr-caja img {
  width: min(260px, 72vw); margin: 14px auto;
  background: #fff; padding: 12px; border-radius: var(--radius-lg);
}
.kc-numero-socio {
  font-family: ui-monospace, monospace;
  font-size: 1.3rem; letter-spacing: 0.14em;
  color: var(--color-primary);
}

/* ── Perfil ── */
.kc-dato-perfil {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(212, 0, 255, 0.12);
  font-size: 0.85rem;
}
.kc-dato-perfil span:first-child { color: var(--color-text-muted); }
.kc-avatares {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-top: 12px;
}
.kc-avatar-opcion {
  aspect-ratio: 1; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 1.4rem; cursor: pointer;
  display: grid; place-items: center;
  transition: transform .2s, border-color .2s, background .2s;
}
.kc-avatar-opcion:hover { transform: translateY(-2px) scale(1.06); }
.kc-avatar-opcion[aria-pressed="true"] {
  background: rgba(212, 0, 255, 0.2);
  border-color: var(--color-border-strong);
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ── Vacíos ── */
.kc-vacio {
  padding: 34px 20px; text-align: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted); font-size: 0.85rem;
}

/* ── Barra inferior ── */
.kc-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(10, 0, 16, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.kc-barra__fila {
  max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.kc-barra button {
  background: none; border: none; cursor: pointer;
  padding: 11px 4px 13px;
  color: var(--color-text-subtle); font-family: inherit;
  display: grid; justify-items: center; gap: 3px;
  transition: color .18s;
}
.kc-barra button svg { width: 21px; height: 21px; }
.kc-barra button span { font-size: 0.66rem; }
.kc-barra button[aria-current="page"] { color: var(--color-primary); }

@media (min-width: 640px) {
  .kc-accesos { grid-template-columns: repeat(3, 1fr); }
  .kc-compras { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #dashboard-cliente *, .kc-barra * { animation: none !important; transition: none !important; }
}