/** * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 * 
 * G25 Studio AI Infographic Tab Styling
 * Provides styling for the credits card, generate button, preview, and history gallery.
 */

/* =============================================
   Credits Widget States
   ============================================= */

#creditsWidget {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#creditsWidget.state-loading {
    border-color: #6c757d;
}

#creditsWidget.state-success {
    border-color: #28a745;
    box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.1);
}

#creditsWidget.state-warning {
    border-color: #ffc107;
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.1);
}

#creditsWidget.state-danger {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.1);
}

#creditsWidgetBalance {
    transition: color 0.3s ease;
}

/* =============================================
   Generate Button
   ============================================= */

#btnGenerateInfographic {
    transition: all 0.3s ease;
    min-width: 200px;
}

#btnGenerateInfographic:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#btnGenerateInfographic:disabled,
#btnGenerateInfographic.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#btnGenerateInfographic .fa-spinner {
    animation: spin 1s linear infinite;
}

/* =============================================
   Infographic Preview
   ============================================= */

#infographicPreview {
    animation: slideIn 0.3s ease;
}

#infographicPreview img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* =============================================
   History Gallery
   ============================================= */

#infographicHistoryGallery .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

#infographicHistoryGallery .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

#infographicHistoryGallery .card-img-top {
    transition: opacity 0.2s ease;
}

#infographicHistoryGallery .card:hover .card-img-top {
    opacity: 0.9;
}

/* =============================================
   Error Alert
   ============================================= */

#infographicError {
    animation: shake 0.5s ease;
}

/* =============================================
   Animations
   ============================================= */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =============================================
   Responsive Adjustments
   ============================================= */

@media (max-width: 768px) {
    #creditsWidget .d-flex {
        flex-direction: column;
        text-align: center;
    }
    
    #creditsWidget .d-flex > div:first-child {
        margin-bottom: 1rem;
    }
    
    #creditsWidget .mr-3 {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }
    
    #btnGenerateInfographic {
        width: 100%;
    }
    
    #infographicHistoryGallery .col-6 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* =============================================
   Print Styles
   ============================================= */

@media print {
    #creditsWidget,
    #btnGenerateInfographic,
    #creditsWidgetAction,
    #infographicHistorySection {
        display: none !important;
    }
    
    #infographicPreview {
        page-break-inside: avoid;
    }
}