:root {
    --primary: #f97316;
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
}

@keyframes loading {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

@keyframes slideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

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

.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}

.animate-slide-in-up {
    animation: slideInUp 0.4s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* App Styles */
#app {
    user-select: none;
}

/* Bottom Nav Glassmorphism */
#bottom-nav {
    border-radius: 2rem 2rem 0 0;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Photo Placeholder */
#photo-albaran img,
#photo-lineal img {
    max-height: 100%;
}

/* Button Pulse Animation for Steps */
.step-item.active .rounded-2xl {
    animation: stepPulse 2s infinite;
}

@keyframes stepPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(15, 23, 42, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(15, 23, 42, 0);
    }
}

/* Mobile responsive fixes for desktop view */
@media (min-width: 640px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: #f1f5f9;
        padding: 2rem;
    }
}

/* Dashboard Card Next Stop Glow */
.next-stop-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: #fff7ed;
    /* orange-50 */
    border-radius: 9999px;
    margin-right: -4rem;
    margin-top: -4rem;
    transition: transform 0.3s;
}

@media (prefers-color-scheme: dark) {
    .next-stop-glow {
        background: rgba(251, 146, 60, 0.1);
        /* orange-900/10 */
    }
}

.group:hover .next-stop-glow {
    transform: scale(1.2);
}