/**
 * VEA CAST - Upload States CSS
 * Specific styles for upload functionality and progress states
 */

/* ============================================================================
   GLOBAL DISABLED BUTTON STYLES
   ============================================================================ */

/* Estilo uniforme para todos los botones deshabilitados - AUMENTADA ESPECIFICIDAD */
body .action-btn:disabled,
body .action-btn.disabled,
body .nav-btn:disabled,
body .nav-btn.disabled,
body button:disabled,
body button.disabled,
body.step-1 .action-btn:disabled,
body.step-2 .action-btn:disabled,
body.step-3 .action-btn:disabled,
body.step-4 .action-btn:disabled,
body.step-1 .nav-btn:disabled,
body.step-2 .nav-btn:disabled,
body.step-3 .nav-btn:disabled,
body.step-4 .nav-btn:disabled {
    background: #2d2d2d !important; /* Color url-background */
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    box-shadow: none !important;
    transform: none !important;
    border: 1px solid #2d2d2d !important;
}

/* Asegurar que los botones deshabilitados no respondan a hover - AUMENTADA ESPECIFICIDAD */
body .action-btn:disabled:hover,
body .action-btn.disabled:hover,
body .nav-btn:disabled:hover,
body .nav-btn.disabled:hover,
body button:disabled:hover,
body button.disabled:hover,
body.step-1 .action-btn:disabled:hover,
body.step-2 .action-btn:disabled:hover,
body.step-3 .action-btn:disabled:hover,
body.step-4 .action-btn:disabled:hover,
body.step-1 .nav-btn:disabled:hover,
body.step-2 .nav-btn:disabled:hover,
body.step-3 .nav-btn:disabled:hover,
body.step-4 .nav-btn:disabled:hover {
    background: #2d2d2d !important;
    transform: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    opacity: 0.5 !important;
}

/* ============================================================================
   UPLOAD PROGRESS STATES
   ============================================================================ */

/* Progress bar enhancements for upload */
.progress-bar {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar.uploading {
    animation: pulse-border 2s infinite;
}

.progress-fill {
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-fill.uploading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shine 2s infinite;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }
    50% { box-shadow: inset 0 2px 4px rgba(66, 133, 244, 0.3); }
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================================================
   UPLOAD BUTTON STATES
   ============================================================================ */

/* Asegurar que el botón en step 1 siempre esté habilitado */
body.step-1 .action-btn {
    background: var(--success-color) !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Mantener hover effect para step 1 */
body.step-1 .action-btn:hover:not(:disabled) {
    background: #0b8548 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(15, 157, 88, 0.3) !important;
}

/* Action button states during upload */
.action-btn.uploading {
    /* Mantener color verde pero deshabilitado */
    background: var(--success-color) !important;
    cursor: not-allowed;
    opacity: 0.7; /* Slightly dimmed but still green */
    /* Sin spinner - solo indicador de paso animado */
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Upload completed state */
.action-btn.upload-completed {
    background: var(--success-color) !important;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Upload failed state */
.action-btn.upload-failed {
    background: var(--error-color) !important;
    cursor: pointer;
    opacity: 0.9;
}

/* ============================================================================
   STEP 2 SPECIFIC STYLES
   ============================================================================ */

/* Body class for step processing states */
body.step-1.processing .step-indicator[data-step="1"] {
    animation: pulse-step 2s infinite;
}

body.step-2.uploading .step-indicator[data-step="2"] {
    animation: pulse-step 2s infinite;
}

body.step-3.processing .step-indicator[data-step="3"] {
    animation: pulse-step 2s infinite;
}

body.step-4.processing .step-indicator[data-step="4"] {
    animation: pulse-step 2s infinite;
}

/* Step circle gradient animation for all processing steps */
body.step-1.processing .step-indicator[data-step="1"] .step-circle,
body.step-3.processing .step-indicator[data-step="3"] .step-circle,
body.step-4.processing .step-indicator[data-step="4"] .step-circle {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    animation: rotate-gradient 3s linear infinite;
}

/* Step 2 mantiene el color azul normal durante upload */
body.step-2.uploading .step-indicator[data-step="2"] .step-circle {
    /* Mantener color azul normal, solo animar el tamaño */
    background: var(--primary-color);
}

@keyframes pulse-step {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes rotate-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================================================
   STATUS BAR UPLOAD STATES
   ============================================================================ */

/* Status bar during upload */
.status-bar.uploading .status-text {
    animation: pulse-text 2s infinite;
}

.status-bar.uploading .status-description {
    color: var(--primary-color);
    font-weight: 500;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Upload speed indicator */
.upload-speed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 500;
}

.upload-speed::before {
    content: '⚡';
    font-size: 10px;
}

/* ============================================================================
   FILE INFO UPLOAD STATES
   ============================================================================ */

/* File status during upload - simplified without animations */
#fileStatus.uploading {
    color: #ffc107 !important; /* Yellow color for uploading */
    font-weight: normal !important;
    text-align: right !important;
    font-size: 14px !important; /* Match other info-value elements */
    /* Remove all animations and pseudo-elements */
}

#fileStatus.uploaded {
    color: var(--success-color) !important; /* Green color for uploaded */
    font-weight: normal !important;
    text-align: right !important;
    font-size: 14px !important; /* Match other info-value elements */
}

#fileStatus.upload-failed {
    color: var(--error-color) !important; /* Red color for failed */
    font-weight: normal !important;
    text-align: right !important;
    font-size: 14px !important; /* Match other info-value elements */
}

/* Ensure default file status has consistent formatting */
#fileStatus {
    text-align: right !important;
    font-size: 14px !important; /* Match other info-value elements */
    font-weight: normal !important;
    color: var(--text-color) !important; /* White color for default states like "Waiting" */
}

/* Special colors for specific states */
#fileStatus[style*="color: rgb(40, 167, 69)"],
#fileStatus[style*="color: #28a745"] {
    color: var(--success-color) !important; /* Green for "Selected" state */
}

#fileStatus.ready-to-process {
    color: #007bff !important; /* Blue color for ready to process */
}

#fileStatus.processing {
    color: #ffc107 !important; /* Yellow color for processing */
    animation: pulse-processing 2s infinite;
}

/* File status processed - AUMENTADA ESPECIFICIDAD */
body #fileStatus.processed,
body.step-3 #fileStatus.processed,
body.step-4 #fileStatus.processed {
    color: #0f9d58 !important; /* Verde directo en lugar de var() */
    font-weight: 500 !important;
    text-align: right !important;
    font-size: 14px !important;
}

@keyframes pulse-processing {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Remove all animations from file status except processing */
#fileStatus:not(.processing)::after {
    display: none !important;
}

#fileStatus::after {
    display: none !important;
}

/* ============================================================================
   DRAG AND DROP UPLOAD STATES
   ============================================================================ */

/* Drop area during upload (hidden) */
body.step-2 .drop-area,
body.step-3 .drop-area,
body.step-4 .drop-area {
    display: none !important;
}

/* ============================================================================
   NOTIFICATION ENHANCEMENTS FOR UPLOAD
   ============================================================================ */

/* Upload-specific notifications */
.notification.upload-progress {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-left: 4px solid var(--primary-color);
}

.notification.upload-success {
    background: linear-gradient(135deg, var(--success-color), #0b8548);
    border-left: 4px solid var(--success-color);
}

.notification.upload-error {
    background: linear-gradient(135deg, var(--error-color), #c53030);
    border-left: 4px solid var(--error-color);
}

/* ============================================================================
   RESPONSIVE UPLOAD STATES
   ============================================================================ */

@media (max-width: 768px) {
    .upload-speed {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .progress-bar {
        height: 6px;
    }
}

/* ============================================================================
   UPLOAD DEBUGGING STYLES (for development)
   ============================================================================ */

.debug-upload {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 12px;
    z-index: 10000;
    display: none;
}

body.debug .debug-upload {
    display: block;
}

.debug-upload .debug-item {
    margin: 2px 0;
}

.debug-upload .debug-label {
    color: #4CAF50;
    font-weight: bold;
}

.debug-upload .debug-value {
    color: #FFC107;
}