<!--
Archivo: FormSistCritUPS.html
Ruta: src\templates\Ventas\Cotiz\CotizEspSolicitud\FormSistCritUPS.html
Descripción: Formulario específico para solicitudes de cotización de Sistemas Críticos UPS.
Autor: Equipo de Desarrollo IGSA
Fecha: 2025
-->
<!--
<h3 class="form-title">Solicitud de Cotización - Sistemas Críticos (UPS)</h3>
-->

<div class="row-1col">
    <div class="form-group">
        <label for="sistcritups_tipo" class="required">Tipo:</label>
        <select id="sistcritups_tipo" class="form-select" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="comercial">Comercial</option>
            <option value="industrial">Industrial</option>
        </select>
    </div>
</div>

<div class="row-1col">
    <div class="form-group">
        <label for="sistcritups_especificar_tipo">Especificar Tipo (ej: Comercial: DC, Oficina, etc. o Industrial: Gas,
            Petróleo, Ambiente Tóxico, etc.):</label>
        <input type="text" id="sistcritups_especificar_tipo" class="form-control" placeholder="Escriba su respuesta">
    </div>
</div>

<div class="row-3col">
    <div class="form-group">
        <label for="sistcritups_motivo" class="required">Motivo:</label>
        <select id="sistcritups_motivo" class="form-select" required>
            <option value="" selected disabled>Selecciona motivo</option>
            <option value="equipo_nuevo">Equipo Nuevo</option>
            <option value="actualizacion">Actualización</option>
        </select>
    </div>    
    <div class="form-group">
        <label for="sistcritups_capacidad_numero">Capacidad (sólo número):</label>
        <input type="number" id="sistcritups_capacidad_numero" class="form-control"
            placeholder="Escriba un número mayor que 0" min="0" step="0.01">
    </div>
    <div class="form-group">
        <label for="sistcritups_capacidad_unidad" class="required">Capacidad: Unidad de Medida:</label>
        <select id="sistcritups_capacidad_unidad" class="form-select" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="kw">kW</option>
            <option value="kva">kVA</option>
        </select>
    </div>
</div>

<div class="row-3col">
    <div class="form-group">
        <label for="sistcritups_topologia" class="required">Topología:</label>
        <select id="sistcritups_topologia" class="form-select" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="stand_by">Stand by</option>
            <option value="interactivo">Interactivo</option>
            <option value="online">Online</option>
            <option value="especial">Especial</option>
        </select>
    </div>
    <div class="form-group">
        <label for="sistcritups_construccion" class="required">Construcción:</label>
        <select id="sistcritups_construccion" class="form-select" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="modular">Modular</option>
            <option value="monolitico">Monolítico</option>
        </select>
    </div>
    <div class="form-group">
        <label for="sistcritups_fases" class="required">Fases:</label>
        <select id="sistcritups_fases" class="form-select" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="monofasico">Monofásico</option>
            <option value="trifasico">Trifásico</option>
        </select>
    </div>
</div>

<div class="row-3col">
    <div class="form-group">
        <label for="sistcritups_tension_operacion" class="required">Tensión de Operación:</label>
        <select id="sistcritups_tension_operacion" class="form-select" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="208/120_v">208/120 V</option>
            <option value="220/127_v">220/127 V</option>
            <option value="480/277_v">480/277 V</option>
            <option value="otro">Otro (especifique en comentarios)</option>
        </select>
    </div>
    <div class="form-group">
        <label for="sistcritups_parametros_especiales">Parámetros especiales:</label>
        <input type="text" id="sistcritups_parametros_especiales" class="form-control"
            placeholder="THDv, THDi y Factor de Potencia">
        <small class="form-text text-muted">THDv, THDi y Factor de Potencia de Entrada y de Salida</small>
    </div>
    <div class="form-group">
        <label for="sistcritups_cuenta_generador" class="required">¿Se cuenta con generador?:</label>
        <select id="sistcritups_cuenta_generador" class="form-select" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="si">Sí</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

<div class="row-1col">
    <div class="field-group">
        <label for="sistcritups_comentarios_sistemas">Comentarios Adicionales Sistemas Críticos:</label>
        <textarea id="sistcritups_comentarios_sistemas" class="form-control" rows="3"
            placeholder="Escriba su respuesta"></textarea>
    </div>
</div>

<!-- SECCIÓN BATERÍAS -->

<div class="row-1col">
    <div class="form-group">
        <label for="sistcritups_incluye_baterias" class="required">Incluye Baterías:</label>
        <select id="sistcritups_incluye_baterias" class="form-select" data-conditional-toggle="seccion-baterias" data-show-when="si" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="si">Sí</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

<div id="seccion-baterias" class="conditional-section" style="display: none;">

    <h5 style="margin-top: 25px; margin-bottom: 15px; color: #495057; font-weight: 600;">Baterías</h5>

    <div class="row-3col">
        <div class="form-group">
            <label for="sistcritups_tipo_bateria" class="required">Tipo de Batería:</label>
            <select id="sistcritups_tipo_bateria" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="vrla">VRLA</option>
                <option value="lithium">Lithium</option>
                <option value="otro">Otro (especificar en comentarios)</option>
            </select>
        </div>
        <div class="form-group">
            <label for="sistcritups_tiempo_respaldo" class="required">Tiempo de respaldo en minutos:</label>
            <input type="number" id="sistcritups_tiempo_respaldo" class="form-control"
                placeholder="Escriba un número mayor que 0" min="1" required disabled>
        </div>
        <div class="form-group">
            <label for="sistcritups_crecimiento_futuro" class="required">¿Requiere Crecimiento Futuro?:</label>
            <select id="sistcritups_crecimiento_futuro" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="si">Sí</option>
                <option value="no">No</option>
            </select>
        </div>
    </div>

    <div class="row-3col">
        <div class="form-group">
            <label for="sistcritups_topologia_operacion" class="required">Topología de operación:</label>
            <select id="sistcritups_topologia_operacion" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="stand_alone">Stand Alone</option>
                <option value="paralelo_capacidad">Paralelo Capacidad</option>
                <option value="paralelo_redundancia">Paralelo Redundancia</option>
            </select>
        </div>
        <div class="form-group">
            <label for="sistcritups_refrigeracion" class="required">Sitio cuenta con refrigeración:</label>
            <select id="sistcritups_refrigeracion" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="si">Sí</option>
                <option value="no">No</option>
            </select>
        </div>
    </div>

    <div class="row-3col">
        <div class="form-group">
            <label for="sistcritups_tipo_carga" class="required">Tipo de carga a conectar:</label>
            <input type="text" id="sistcritups_tipo_carga" class="form-control"
                placeholder="Workstations, Racks, PLC's, etc." required disabled>
            <small class="form-text text-muted">Especificar: Workstations, Racks, PLC's, etc.</small>
        </div>
        <div class="form-group">
            <label for="sistcritups_flete_envio" class="required">Requiere Flete de Envío:</label>
            <select id="sistcritups_flete_envio" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="si">Sí</option>
                <option value="no">No</option>
            </select>
        </div>
        <div class="form-group">
            <label for="sistcritups_opcionales" class="required">Opcionales:</label>
            <select id="sistcritups_opcionales" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="bypass_externo">Bypass Externo</option>
                <option value="transformador">Transformador</option>
                <option value="gabinete_emparalelamiento">Gabinete emparalelamiento</option>
                <option value="tarjeta_monitoreo">Tarjeta de monitoreo</option>
                <option value="supresor_picos">Supresor de picos</option>
            </select>
        </div>
    </div>

    <div class="row-1col">
        <div class="field-group">
            <label for="sistcritups_comentarios_baterias" class="required">Comentarios Adicionales Sistemas Críticos -
                Baterías:</label>
            <textarea id="sistcritups_comentarios_baterias" class="form-control" rows="3"
                placeholder="Escriba su respuesta" disabled></textarea>
        </div>
    </div>

</div>

<!-- SECCIÓN SERVICIOS -->

<div class="row-1col">
    <div class="form-group">
        <label for="sistcritups_requiere_servicios" class="required">¿Requiere Servicios?:</label>
        <select id="sistcritups_requiere_servicios" class="form-select" data-conditional-toggle="seccion-servicios-UPS" data-show-when="si" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="si">Sí</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

<div id="seccion-servicios-UPS" class="conditional-section" style="display: none;">

    <h5 style="margin-top: 25px; margin-bottom: 15px; color: #495057; font-weight: 600;">Servicios</h5>

    <div class="row-3col">
        <div class="form-group">
            <label for="sistcritups_maniobra" class="required">Requiere Maniobra:</label>
            <select id="sistcritups_maniobra" class="form-select" required>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="si">Sí</option>
                <option value="no">No</option>
            </select>
        </div>
        <div class="form-group">
            <label for="sistcritups_instalacion" class="required">Requiere Instalación:</label>
            <select id="sistcritups_instalacion" class="form-select" required>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="si">Sí</option>
                <option value="no">No</option>
            </select>
        </div>
        <div class="form-group">
            <label for="sistcritups_levantamiento" class="required">¿Requiere Levantamiento o se cuenta con diagramas y
                layouts?:</label>
            <select id="sistcritups_levantamiento" class="form-select" required>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="requiere_levantamiento">Requiere Levantamiento</option>
                <option value="adjuntar_documento">Adjuntar documentos</option>
            </select>
        </div>
    </div>

    <div class="row-1col">
        <div class="field-group">
            <label for="sistcritups_comentarios_servicios" class="required">Comentarios Adicionales Sistemas Críticos -
                Servicios:</label>
            <textarea id="sistcritups_comentarios_servicios" class="form-control" rows="3"
                placeholder="Escriba su respuesta" disabled></textarea>
        </div>
    </div>
</div>


<!-- ============================================================================ -->
<!-- SECCIÓN DE ARCHIVOS -->
<!-- ============================================================================ -->

<div class="file-upload-section">
    <h5 class="file-section-title">📎 Documentos Técnicos</h5>
    <p class="file-section-description">
        Adjunte diagramas, layouts, especificaciones técnicas y cualquier documento de soporte.
        <strong>Formatos permitidos:</strong> PDF, DOC, DOCX, JPG, PNG, XLSX, XLS (máx. 2MB por archivo)
    </p>

    <div class="file-input-container">
        <input type="file" id="files_SistCritUPS" name="files_SistCritUPS[]" multiple
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xlsx,.xls" class="file-input" style="display: none;">
        <!-- Step: id="files_[FILE_TYPE]" name="files_[FILE_TYPE][]" -->
        <button type="button" class="file-input-label" onclick="FormSistCritUPS.openFileSelector()">
            <!-- Step: onclick="[MODULE_NAME].openFileSelector()" -->
            <i class="fas fa-cloud-upload-alt"></i>
            <span>Seleccionar Archivos</span>
        </button>
    </div>

    <div id="preview_SistCritUPS" class="file-preview-container" style="display: none;">
        <!-- Step: id="preview_[FILE_TYPE]" -->
        <div class="preview-header">
            <h6 class="preview-title">Archivos Seleccionados:</h6>
            <div class="file-counter">
                <span id="file-count-SistCritUPS">0</span> archivo(s) | <!-- Step: id="file-count-[FILE_TYPE]" -->
                <span id="file-size-SistCritUPS">0</span> KB total <!-- Step: id="file-size-[FILE_TYPE]" -->
            </div>
        </div>
        <div class="file-preview-list"></div>
        <div class="preview-actions">
            <button type="button" class="btn-add-more" onclick="FormSistCritUPS.openFileSelector()">
                <!-- Step: onclick="[MODULE_NAME].openFileSelector()" -->
                <i class="fas fa-plus"></i> Agregar Más
            </button>
            <button type="button" class="btn-remove-all" onclick="FormSistCritUPS.clearAllFiles()">
                <!-- Step: onclick="[MODULE_NAME].clearAllFiles()" -->
                <i class="fas fa-trash"></i> Quitar Todos
            </button>
        </div>
    </div>
</div>

<!-- ============================================================================ -->
<!-- JAVASCRIPT - COPIADO DE PLANTILLA (Solo CONFIG modificado) -->
<!-- ============================================================================ -->

<script>
    window.FormSistCritUPS = (function () { // Step window.[MODULE_NAME]
        'use strict';

        // CONFIGURACIÓN - ÚNICA SECCIÓN MODIFICADA
        const CONFIG = { // Step
            MODULE_NAME: 'FormSistCritUPS',
            FILE_TYPE: 'SistCritUPS',
            DISPLAY_NAME: 'Sistemas Críticos (UPS)'
        };

        // Variables para gestión de archivos - NO MODIFICAR
        let selectedFiles = new Map();
        let fileCounter = 0;
        const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
        const ALLOWED_EXTENSIONS = ['.pdf', '.doc', '.docx', '.jpg', '.jpeg', '.png', '.xlsx', '.xls'];

        // Elementos DOM cacheados
        let elements = {};

        // Inicialización
        function init() {
            console.log(`${CONFIG.MODULE_NAME}: Módulo inicializado con gestión de archivos`);
            cacheElements();
            setupFileSystem();
            updateUI();
            // ✅ AÑADIR ESTA LÍNEA
            if (window.ConditionalFieldsManager) {
                ConditionalFieldsManager.autoInit('.section-FormSistCritUPS');
            }
        }

        function cacheElements() {
            elements = {
                fileInput: document.getElementById(`files_${CONFIG.FILE_TYPE}`),
                previewContainer: document.getElementById(`preview_${CONFIG.FILE_TYPE}`),
                previewList: document.querySelector(`#preview_${CONFIG.FILE_TYPE} .file-preview-list`),
                fileCounter: document.getElementById(`file-count-${CONFIG.FILE_TYPE}`),
                fileSizeCounter: document.getElementById(`file-size-${CONFIG.FILE_TYPE}`),
                btnSelectFiles: document.querySelector('.file-input-label'),
                btnAddMore: document.querySelector('.btn-add-more')
            };
        }

        // Configurar sistema de archivos
        function setupFileSystem() {
            if (!elements.fileInput) {
                console.warn(`${CONFIG.MODULE_NAME}: Input de archivos no encontrado`);
                return;
            }
            elements.fileInput.addEventListener('change', handleFileSelection);
        }

        // Abrir selector de archivos
        function openFileSelector() {
            if (elements.fileInput) {
                console.log(`${CONFIG.MODULE_NAME}: Abriendo selector de archivos de forma controlada`);
                elements.fileInput.click();
            }
        }

        // Manejar selección de archivos
        function handleFileSelection(event) {
            const files = Array.from(event.target.files);
            console.log(`${CONFIG.MODULE_NAME}: Procesando ${files.length} archivo(s) seleccionado(s)`);

            if (files.length === 0) {
                console.log(`${CONFIG.MODULE_NAME}: No se seleccionaron archivos - manteniendo archivos existentes`);
                return;
            }

            const validFiles = [];
            const errors = [];

            files.forEach(file => {
                const validation = validateFile(file);
                if (validation.valid) {
                    const isDuplicate = Array.from(selectedFiles.values()).some(existingFile =>
                        existingFile.file.name === file.name &&
                        existingFile.file.size === file.size
                    );

                    if (!isDuplicate) {
                        validFiles.push(file);
                    } else {
                        errors.push(`${file.name}: Archivo ya seleccionado`);
                    }
                } else {
                    errors.push(`${file.name}: ${validation.error}`);
                }
            });

            if (errors.length > 0) {
                showFileErrors(errors);
            }

            if (validFiles.length > 0) {
                validFiles.forEach(file => {
                    fileCounter++;
                    selectedFiles.set(fileCounter, {
                        id: fileCounter,
                        file: file,
                        addedAt: new Date().toISOString()
                    });
                });

                updateFilePreview();
                showSuccessMessage(`${validFiles.length} archivo(s) agregado(s)`);
                console.log(`${CONFIG.MODULE_NAME}: Total de archivos: ${selectedFiles.size}`);
            }

            event.target.value = '';
        }

        // Validar archivo individual
        function validateFile(file) {
            if (file.size > MAX_FILE_SIZE) {
                return {
                    valid: false,
                    error: `Archivo muy grande (${(file.size / 1024 / 1024).toFixed(1)}MB). Máximo 2MB.`
                };
            }

            const extension = '.' + file.name.split('.').pop().toLowerCase();
            if (!ALLOWED_EXTENSIONS.includes(extension)) {
                return {
                    valid: false,
                    error: `Tipo de archivo no permitido (${extension})`
                };
            }

            return { valid: true };
        }

        // Actualizar vista previa
        function updateFilePreview() {
            if (selectedFiles.size === 0) {
                elements.previewContainer.style.display = 'none';
                updateUI();
                return;
            }

            elements.previewContainer.style.display = 'block';
            elements.previewList.innerHTML = '';

            let totalSize = 0;
            Array.from(selectedFiles.values()).forEach(fileData => {
                totalSize += fileData.file.size;
                const fileItem = createFilePreviewItem(fileData.file, fileData.id);
                elements.previewList.appendChild(fileItem);
            });

            if (elements.fileCounter) elements.fileCounter.textContent = selectedFiles.size;
            if (elements.fileSizeCounter) elements.fileSizeCounter.textContent = (totalSize / 1024).toFixed(1);

            updateUI();
        }

        // Actualizar UI
        function updateUI() {
            const hasFiles = selectedFiles.size > 0;
            if (elements.btnSelectFiles) {
                elements.btnSelectFiles.style.display = hasFiles ? 'none' : 'inline-flex';
            }
        }

        // Crear elemento de vista previa
        function createFilePreviewItem(file, fileId) {
            const item = document.createElement('div');
            item.className = 'file-preview-item';
            item.setAttribute('data-file-id', fileId);

            const fileSize = (file.size / 1024).toFixed(1);
            const fileIcon = getFileIcon(file.name);

            item.innerHTML = `
            <div class="file-info">
                <i class="${fileIcon}"></i>
                <div class="file-details">
                    <span class="file-name" title="${file.name}">${file.name}</span>
                    <span class="file-size">${fileSize} KB</span>
                </div>
            </div>
            <button type="button" class="btn-remove-file" onclick="${CONFIG.MODULE_NAME}.removeFile(${fileId})" title="Quitar archivo">
                <i class="fas fa-times"></i>
            </button>
        `;

            return item;
        }

        // Obtener icono por tipo de archivo
        function getFileIcon(filename) {
            const extension = filename.split('.').pop().toLowerCase();

            const iconMap = {
                'pdf': 'fas fa-file-pdf text-danger',
                'doc': 'fas fa-file-word text-primary',
                'docx': 'fas fa-file-word text-primary',
                'xlsx': 'fas fa-file-excel text-success',
                'xls': 'fas fa-file-excel text-success',
                'jpg': 'fas fa-file-image text-warning',
                'jpeg': 'fas fa-file-image text-warning',
                'png': 'fas fa-file-image text-warning'
            };

            return iconMap[extension] || 'fas fa-file text-secondary';
        }

        // Remover archivo específico
        function removeFile(fileId) {
            if (selectedFiles.has(fileId)) {
                const fileData = selectedFiles.get(fileId);
                selectedFiles.delete(fileId);
                updateFilePreview();
                showSuccessMessage(`Archivo "${fileData.file.name}" removido`);
                console.log(`${CONFIG.MODULE_NAME}: Archivo removido. Total: ${selectedFiles.size}`);
            }
        }

        // Limpiar todos los archivos
        function clearAllFiles() {
            const fileCount = selectedFiles.size;
            selectedFiles.clear();
            fileCounter = 0;
            updateFilePreview();
            showSuccessMessage(`${fileCount} archivo(s) removido(s)`);
            console.log(`${CONFIG.MODULE_NAME}: Todos los archivos removidos`);
        }

        // Obtener archivos como array
        function getFiles() {
            const filesArray = Array.from(selectedFiles.values()).map(fileData => fileData.file);
            console.log(`${CONFIG.MODULE_NAME}: Retornando ${filesArray.length} archivo(s)`);
            return filesArray;
        }

        // Obtener estadísticas
        function getFileStats() {
            const files = Array.from(selectedFiles.values());
            const totalSize = files.reduce((sum, fileData) => sum + fileData.file.size, 0);

            return {
                count: selectedFiles.size,
                totalSize: totalSize,
                totalSizeMB: (totalSize / 1024 / 1024).toFixed(2),
                files: files.map(fileData => ({
                    name: fileData.file.name,
                    size: fileData.file.size,
                    type: fileData.file.type,
                    addedAt: fileData.addedAt
                }))
            };
        }

        // Mostrar mensajes
        function showSuccessMessage(message) {
            if (window.mostrarNotificacionToast) {
                window.mostrarNotificacionToast(message, 'success');
            } else {
                console.log(`${CONFIG.MODULE_NAME}:`, message);
            }
        }

        function showFileErrors(errors) {
            const errorMessage = `Algunos archivos no pudieron agregarse:\n${errors.join('\n')}`;

            if (window.mostrarAlerta) {
                window.mostrarAlerta(errorMessage, 'warning');
            } else {
                alert(errorMessage);
            }
        }

        // Callback cuando el formulario se vuelve visible (REQUERIDO POR EL PADRE)
        function onBecomeVisible() {
            console.log(`${CONFIG.MODULE_NAME}: Formulario visible, inicializando...`);
            init();
        }

        // API PÚBLICA - REQUERIDA POR EL SISTEMA PADRE
        return {
            init: init,
            openFileSelector: openFileSelector,
            removeFile: removeFile,
            clearAllFiles: clearAllFiles,
            getFiles: getFiles,
            getFileStats: getFileStats,
            onBecomeVisible: onBecomeVisible
        };

    })();

    // Auto-inicializar si el formulario ya está visible
    document.addEventListener('DOMContentLoaded', function () {
        const formSection = document.querySelector('.section-FormSistCritUPS'); // Step: clase .section-[MODULE_NAME]
        if (formSection && formSection.style.display !== 'none') {
            FormSistCritUPS.init(); // Step [MODULE_NAME].init()
        }
    }); 
</script>

<!-- ============================================================================ -->
<!-- CSS - COPIADO COMPLETO DE PLANTILLA -->
<!-- ============================================================================ -->

<style>
    .file-upload-section {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
    }

    .file-section-title {
        color: #495057;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .file-section-description {
        color: #6c757d;
        font-size: 0.9em;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .file-input-container {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .file-input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .file-input-label,
    .btn-add-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s;
        font-weight: 500;
        text-decoration: none;
    }

    .file-input-label:hover,
    .btn-add-more:hover {
        background: #0056b3;
    }

    .btn-add-more {
        background: #28a745;
    }

    .btn-add-more:hover {
        background: #218838;
    }

    .file-preview-container {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 15px;
        margin-top: 15px;
    }

    .preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e9ecef;
    }

    .preview-title {
        color: #495057;
        margin: 0;
        font-weight: 600;
    }

    .file-counter {
        color: #6c757d;
        font-size: 0.9em;
        font-weight: 500;
    }

    .file-preview-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        margin-bottom: 8px;
        background: #f8f9fa;
        transition: background-color 0.2s;
    }

    .file-preview-item:hover {
        background: #e9ecef;
    }

    .file-info {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    .file-details {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
    }

    .file-name {
        font-weight: 500;
        color: #495057;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .file-size {
        font-size: 0.85em;
        color: #6c757d;
    }

    .btn-remove-file {
        background: #dc3545;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 8px 10px;
        cursor: pointer;
        transition: background-color 0.2s;
        font-size: 0.9em;
        flex-shrink: 0;
    }

    .btn-remove-file:hover {
        background: #c82333;
    }

    .preview-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #e9ecef;
    }

    .btn-remove-all {
        background: #dc3545;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 8px 16px;
        cursor: pointer;
        transition: background-color 0.2s;
        font-size: 0.9em;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn-remove-all:hover {
        background: #c82333;
    }

    .file-info small {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .file-input-container {
            flex-direction: column;
        }

        .preview-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }

        .preview-actions {
            flex-direction: column;
        }

        .file-preview-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
    }
</style>