body {
    font-family: 'Inter', sans-serif;
    background-color: #111827;
    /* Gray 900 */
}

.container-app {
    width: 100%;
    max-width: 600px;
    min-height: 100vh;
}

.activity-btn {
    /* Estilo base */
    border: 2px solid transparent;
}

.activity-btn.selected {
    /* Estilo cuando está seleccionado/filtrando */
    border-color: #facc15;
    /* Secondary/Amber */
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.5);
    background-color: #4b5563;
    /* Gray 600 */
}

/* Ban Indicator Styles */
#ban-indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

#ban-indicator:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}

@keyframes ban-pulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
    }

    50% {
        opacity: 0.85;
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.7);
    }
}

#ban-indicator:not(.hidden) {
    animation: ban-pulse 2s ease-in-out infinite;
}

/* ============================================
   PWA Standalone Mode - Hide Download Buttons
   ============================================ */

/* Hide download buttons when running as installed PWA */
@media (display-mode: standalone) {
    .hide-in-pwa {
        display: none !important;
    }
}

/* iOS standalone mode */
@media all and (display-mode: standalone) {
    .hide-in-pwa {
        display: none !important;
    }
}

/* Fallback: Hide via body class (set by JavaScript) */
body.pwa-standalone .hide-in-pwa {
    display: none !important;
    visibility: hidden !important;
}

/* Modal Scroll Lock */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* ============================================
   Custom Scrollbar (Desktop Only)
   ============================================ */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #1f2937;
        /* gray-800 */
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: #4b5563;
        /* gray-600 */
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
        /* gray-500 */
    }

    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: #4b5563 #1f2937;
    }
}