.cls-4{
    fill:#fff;
}

.cls-2 {
    fill: #29a9e0;
}
.cls-1 {
    fill: #646464;
}

.capture-section {
    transition: all 0.5s ease-in-out;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 2rem;
}

.capture-section.minimized {
    opacity: 0;
    transform: translateY(-50px);
    height: 0;
    overflow: hidden;
    margin-bottom: 0;
}

.results-section {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease-in-out;
    pointer-events: none;
}

    .results-section.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }

.result-card {
    animation: slideIn 0.6s ease-out forwards;
    opacity: 0;
    transform: translateX(-30px);
}

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

.classification-indicator {
    padding: 2rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.classification-normal {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
}

.classification-leve {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
}

.classification-moderada {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
}

.classification-severa {
    background: linear-gradient(135deg, #f8d7da, #dc3545);
    color: #721c24;
}

.bag-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    margin: 1rem 0;
}

.bag-svg {
    width: 100px;
    height: 150px;
    transition: transform 0.3s ease;
}

    .bag-svg:hover {
        transform: scale(1.1);
    }

@media (max-width: 768px) {
    .bag-container {
        height: 150px;
    }

    .bag-svg {
        width: 80px;
        height: 120px;
    }

    .classification-indicator {
        padding: 1rem;
    }

        .classification-indicator i {
            font-size: 2rem !important;
        }
}