html, body { -webkit-tap-highlight-color: transparent; }

.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-top { padding-top: env(safe-area-inset-top, 0); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 1rem; font-weight: 600; padding: 0.9rem 1.25rem;
  font-size: 1.05rem; line-height: 1.2; transition: transform .05s ease, opacity .15s ease;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: #dd4482; color: white; }
.btn-primary:disabled { opacity: .5; }
.btn-secondary { background: #fbe6ee; color: #a52154; }
.btn-ghost { background: transparent; color: #a52154; }

.card { background: white; border-radius: 1.25rem; box-shadow: 0 2px 10px rgba(198, 44, 104, 0.08); }

.input {
  width: 100%; border: 1px solid #f1a3c1; border-radius: 0.9rem;
  padding: 0.8rem 1rem; font-size: 1.05rem; background: white;
}
.input:focus { outline: 2px solid #dd4482; outline-offset: 1px; }

.pin-dot { width: 14px; height: 14px; border-radius: 999px; background: #f1a3c1; }
.pin-dot.filled { background: #dd4482; }

.bottom-nav {
  position: sticky; bottom: 0; background: white; border-top: 1px solid #fbe6ee;
  display: flex; z-index: 20;
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.6rem 0.25rem; font-size: 0.72rem; color: #a8a29e; font-weight: 600;
}
.bottom-nav-item.active { color: #c62c68; }

.badge { font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.badge-agotado { background: #fee2e2; color: #b91c1c; }
.badge-venta { background: #dcfce7; color: #15803d; }
.badge-sinvender { background: #f1f5f9; color: #64748b; }
.badge-regalo { background: #fef9c3; color: #a16207; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { border: 3px solid #fbe6ee; border-top-color: #dd4482; border-radius: 50%; width: 28px; height: 28px; animation: spin .7s linear infinite; }