/* style.css - ZellPay Custom Styles (Original Replication) */

:root {
    --yape: #742284;
    --yape-teal: #00f5c8; /* Updated to match original */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
}

body {
    background-color: #f1f5f9;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Inter', sans-serif;
}

.font-display {
    font-family: 'Outfit', sans-serif;
}

/* Scrollbar personalizado */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes pulse-teal {
    0% { box-shadow: 0 0 0 0 rgba(0, 245, 200, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 245, 200, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 245, 200, 0); }
}

.btn-pulse {
    animation: pulse-teal 2s infinite;
}

/* Landing Page Background */
.bg-zellpay-gradient {
    background: linear-gradient(135deg, #1e0a2e 0%, #2d1151 40%, #742284 100%);
}

/* Inputs Premium */
.input-pill {
    @apply rounded-full bg-slate-50 border-2 border-transparent focus:border-yape outline-none transition-all px-6 h-14 font-medium;
}

/* Card Premium */
.card-premium {
    background: white;
    border-radius: 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bottom Nav */
#bottom-nav {
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.03);
}

/* Transaction Item */
.tx-item {
    transition: all 0.2s;
}
.tx-item:active {
    background-color: #f1f5f9;
    transform: scale(0.98);
}