/* front/assets/components/file-handler/file-handler.css */
/* Port de bintelx_front. Usa var(--x, fallback) → funciona standalone en el front estático. */

/* Header Card */
.fh-header-card {
    background: linear-gradient(135deg, var(--color-primary, #6366f1) 0%, var(--color-primary-600, #7c3aed) 100%);
    color: white;
    border: none;
}

.fh-header-card h3 { color: white; margin-top: 0; }
.fh-header-card p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; }

/* Drop Area */
.fh-drop-card { padding: 0; overflow: hidden; }

.fh-drop-area {
    border: 2px dashed var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-8, 2rem);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-surface, #fff);
}

.fh-drop-area:hover { border-color: var(--color-primary, #6366f1); background: var(--color-primary-50, #f5f3ff); }
.fh-drop-area.fh-drop-active { border-color: var(--color-primary, #6366f1); background: var(--color-primary-100, #ede9fe); transform: scale(1.01); }

.fh-input-hidden { display: none; }
.fh-drop-content { pointer-events: none; }

.fh-drop-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-4, 1rem);
    background: var(--color-primary-100, #ede9fe);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #6366f1);
    transition: transform 0.2s ease;
}

.fh-drop-area:hover .fh-drop-icon { transform: scale(1.1); }

.fh-drop-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text-primary, #111827); margin: 0 0 var(--spacing-2, 0.5rem); }
.fh-drop-subtitle { font-size: 0.875rem; color: var(--color-text-secondary, #6b7280); margin: 0; }

.fh-paste-hint {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #9ca3af;
    background: #fff;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.fh-kbd { display: inline-flex; align-items: center; gap: 4px; }

.fh-kbd kbd {
    min-width: 20px;
    text-align: center;
    padding: 2px 6px;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 6px;
    color: #6b7280;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight: 600;
    font-size: 10px;
}

.fh-drop-subtitle .link { pointer-events: auto; background: none; border: none; cursor: pointer; color: var(--color-primary, #6366f1); padding: 0; font: inherit; }
.fh-drop-subtitle .link:hover { text-decoration: underline; }

/* Action Bar */
.fh-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
    background: var(--color-surface-subtle, #f9fafb);
    border-radius: var(--radius-lg, 12px);
    margin-top: var(--spacing-4, 1rem);
}

.fh-file-count { font-size: 0.875rem; color: var(--color-text-secondary, #6b7280); }
.fh-file-count strong { color: var(--color-primary, #6366f1); }

/* File List */
.fh-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 0.75rem);
    margin-top: var(--spacing-4, 1rem);
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--spacing-1, 0.25rem);
}

/* File Card */
.fh-file-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 0.75rem);
    padding: var(--spacing-3, 0.75rem);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    transition: all 0.3s ease;
    animation: fhSlideIn 0.3s ease forwards;
}

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

.fh-file-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.fh-file-card.fh-removing { opacity: 0; transform: translateX(20px); transition: all 0.3s ease; }

/* File Preview/Icon */
.fh-file-preview {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-subtle, #f3f4f6);
}

.fh-file-preview svg { width: 24px; height: 24px; }
.fh-file-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md, 8px); }

/* Icon color classes */
.fh-icon-image { background: #fce7f3; color: #db2777; }
.fh-icon-pdf { background: #fee2e2; color: #dc2626; }
.fh-icon-doc { background: #dbeafe; color: #2563eb; }
.fh-icon-spreadsheet { background: #d1fae5; color: #059669; }
.fh-icon-archive { background: #fef3c7; color: #d97706; }
.fh-icon-video { background: #e0e7ff; color: #4f46e5; }
.fh-icon-audio { background: #fae8ff; color: #a855f7; }
.fh-icon-code { background: #f3f4f6; color: #374151; }
.fh-icon-default { background: #f3f4f6; color: #6b7280; }

/* File Info */
.fh-file-info { flex: 1; min-width: 0; }

.fh-file-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: var(--spacing-2, 0.5rem);
}

.fh-file-name { font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-file-size { font-size: 0.75rem; color: var(--color-text-tertiary, #9ca3af); white-space: nowrap; }

/* Progress */
.fh-file-progress { display: flex; align-items: center; gap: var(--spacing-2, 0.5rem); }
.fh-progress-bar { flex: 1; height: 6px; background: var(--color-surface-subtle, #f3f4f6); border-radius: 3px; overflow: hidden; }
.fh-progress-fill { height: 100%; background: var(--color-primary, #6366f1); border-radius: 3px; transition: width 0.3s ease; }
.fh-file-status { font-size: 0.6875rem; color: var(--color-text-tertiary, #9ca3af); white-space: nowrap; }

/* File Actions */
.fh-file-actions { display: flex; align-items: center; gap: var(--spacing-2, 0.5rem); }

.fh-file-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary, #9ca3af);
    cursor: pointer;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.fh-file-remove:hover { background: var(--color-error-50, #fef2f2); color: var(--color-error, #ef4444); }
.fh-file-remove svg { width: 16px; height: 16px; }

/* Result Icon */
.fh-file-result { width: 24px; height: 24px; }
.fh-file-result svg { width: 100%; height: 100%; }
.fh-result-success { color: var(--color-success, #10b981); }
.fh-result-dedup { color: var(--color-info, #0ea5e9); }
.fh-result-error { color: var(--color-error, #ef4444); }

/* Completed file actions */
.fh-file-actions-complete { display: flex; align-items: center; gap: var(--spacing-2, 0.5rem); width: auto; height: auto; }
.fh-status-icon { width: 20px; height: 20px; flex-shrink: 0; }
.fh-status-icon svg { width: 100%; height: 100%; }

/* Status-based card styles */
.fh-status-uploading .fh-progress-fill { background: var(--color-primary, #6366f1); }
.fh-status-completed .fh-progress-fill { background: var(--color-success, #10b981); }
.fh-status-deduplicated .fh-progress-fill { background: var(--color-info, #0ea5e9); }
.fh-status-error .fh-progress-fill { background: var(--color-error, #ef4444); }
.fh-status-error .fh-file-status { color: var(--color-error, #ef4444); }

/* Upload button loading state */
.fh-upload-btn.loading { opacity: 0.7; pointer-events: none; }

/* Responsive */
@media (max-width: 768px) {
    .fh-file-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-1, 0.25rem); }
}