html,
        body {
            height: 100%;
            width: 100%;
            overflow: hidden;
            overscroll-behavior: none;
            position: fixed;
            background-color: #0f172a;
            color: #fff;
            font-family: 'Inter', sans-serif;
        }

        #content-area {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            height: 100%;
            padding-bottom: 80px;
        }

        .fade-in {
            animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 5px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 10px;
        }

        .card-active:active {
            transform: scale(0.98);
            background-color: #1e293b;
        }

        .date-btn.active {
            background-color: #4f46e5;
            color: white;
            border-color: #6366f1;
        }

        .locked-card {
            background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.2) 20px);
        }

        #back-toast {
            visibility: hidden;
            min-width: 250px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 50px;
            padding: 12px;
            position: fixed;
            z-index: 200;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            font-size: 14px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.3s, bottom 0.3s;
        }

        #back-toast.show {
            visibility: visible;
            opacity: 1;
            bottom: 50px;
        }

        /* Animación suave para el botón de WhatsApp */
        .whatsapp-float {
            animation: pulse-green 2s infinite;
        }

        @keyframes pulse-green {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
            }
        }
        
        .category-chip {
            white-space: nowrap;
            transition: all 0.2s;
        }
        
        .category-chip.active {
            background-color: #fff;
            color: #0f172a;
            border-color: #fff;
        }