memoricese todos estos codigos que le voy a dar y me losrganiza por archivos


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trading Dashboard</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <nav class="navbar">
        <div class="nav-brand">
            <i class="fas fa-chart-line"></i>
            Trading Dashboard
        </div>
        <div class="nav-menu">
            <button id="addTradeBtn" class="nav-button primary">
                <i class="fas fa-plus"></i> Nuevo Trade
            </button>
            <button id="importBtn" class="nav-button">
                <i class="fas fa-file-import"></i> Importar
            </button>
            <button id="exportBtn" class="nav-button">
                <i class="fas fa-file-export"></i> Exportar
            </button>
            <button id="analysisBtn" class="nav-button">
                <i class="fas fa-chart-bar"></i> Análisis
            </button>
        </div>
    </nav>

    <div class="dashboard-container">
        <div class="summary-area">
            <div class="summary-card profit">
                <h3>Profit Total</h3>
                <p id="totalProfit">$0.00</p>
                <span class="trend" id="profitTrend">0%</span>
            </div>
            <div class="summary-card trades">
                <h3>Total Trades</h3>
                <p id="totalTrades">0</p>
                <span class="subtitle">Operaciones</span>
            </div>
            <div class="summary-card win-rate">
                <h3>Win Rate</h3>
                <p id="winRate">0%</p>
                <span class="subtitle">Tasa de éxito</span>
            </div>
        </div>

        <div class="chart-section">
            <canvas id="profitChart"></canvas>
        </div>

        <div class="table-section">
            <div class="table-header">
                <h2>Historial de Trades</h2>
                <div class="table-filters">
                    <input type="text" id="searchInput" placeholder="Buscar...">
                    <select id="currencyFilter">
                        <option value="">Todas las divisas</option>
                    </select>
                </div>
            </div>
            <div class="table-container">
                <table id="dataTable">
                    <thead>
                        <tr>
                            <th>Trader</th>
                            <th>Divisa</th>
                            <th>Profit</th>
                            <th>Porcentaje</th>
                            <th>Fecha</th>
                            <th>Hora</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="trader-management">
        <button type="button" id="newTradeBtn" class="action-btn">
            <i class="fas fa-plus-circle"></i> Nueva Operación
        </button>
        <button type="button" id="addTraderBtn" class="action-btn">
            <i class="fas fa-user-plus"></i> Agregar Trader
        </button>
        <button type="button" id="deleteTraderBtn" class="action-btn danger">
            <i class="fas fa-user-minus"></i> Eliminar Trader
        </button>
    </div>

    <!-- Modal para nueva operación -->
    <div id="tradeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Nueva Operación</h2>
                <button class="close-btn" id="closeTradeModal">&times;</button>
            </div>
            <form id="tradeForm">
                <div class="form-group">
                    <label for="trader">Trader:</label>
                    <select id="trader" required>
                        <option value="">Seleccionar Trader</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="currency">Divisa:</label>
                    <input type="text" id="currency" placeholder="Ej: EUR/USD" required>
                </div>
                <div class="form-group">
                    <label for="profit">Profit:</label>
                    <input type="number" id="profit" step="0.01" required>
                </div>
                <div class="form-group">
                    <label for="percentage">Porcentaje:</label>
                    <input type="number" id="percentage" step="0.01" required>
                </div>
                <button type="submit" class="submit-btn">
                    <i class="fas fa-save"></i> Guardar Operación
                </button>
            </form>
        </div>
    </div>

    <!-- Modal para agregar nuevo trader -->
    <div id="addTraderModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Agregar Nuevo Trader</h2>
                <button class="close-btn" id="closeAddTraderModal">&times;</button>
            </div>
            <form id="addTraderForm">
                <div class="form-group">
                    <label for="newTraderName">Nombre del Trader:</label>
                    <input type="text" id="newTraderName" required>
                </div>
                <button type="submit" class="submit-btn">
                    <i class="fas fa-plus"></i> Agregar Trader
                </button>
            </form>
        </div>
    </div>

    <!-- Modal para eliminar trader -->
    <div id="deleteTraderModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Eliminar Trader</h2>
                <button class="close-btn" id="closeDeleteTraderModal">&times;</button>
            </div>
            <div class="traders-list">
                <!-- Lista de traders generada dinámicamente -->
            </div>
        </div>
    </div>

    <!-- Modal de confirmación -->
    <div id="confirmationModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Confirmar Eliminación</h2>
                <button class="close-btn" id="closeConfirmationModal">&times;</button>
            </div>
            <div class="confirmation-content">
                <p id="confirmationMessage"></p>
                <div class="trader-stats">
                    <p id="traderProfit"></p>
                    <p id="traderWinRate"></p>
                </div>
                <div class="confirmation-buttons">
                    <button id="confirmDelete" class="danger-btn">
                        <i class="fas fa-trash"></i> Eliminar
                    </button>
                    <button id="cancelDelete" class="cancel-btn">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <input type="file" id="fileInput" style="display: none" accept=".xlsx, .xls">
    <script src="app.js"></script>
</body>
</html>



// Estado global de la aplicación
let trades = [];
let chart = null;

// Lista de traders
let traders = [
    "Alex Norway",
    "Black Trader 403",
    "MAD SCIENSTERZ",
    "SmartTradingBing",
    "Stanley H. Tweedle",
    "126621",
    "Dimdarkshark"
];

// Referencias a elementos del DOM
const tradeModal = document.getElementById('tradeModal');
const tradeForm = document.getElementById('tradeForm');
const dataTable = document.getElementById('dataTable');
const fileInput = document.getElementById('fileInput');
const addTradeBtn = document.getElementById('addTradeBtn');
const importBtn = document.getElementById('importBtn');
const exportBtn = document.getElementById('exportBtn');
const analysisBtn = document.getElementById('analysisBtn');
const searchInput = document.getElementById('searchInput');
const currencyFilter = document.getElementById('currencyFilter');
const closeBtn = document.querySelector('.close-btn');

// Referencias adicionales para el manejo de traders
const traderModal = document.getElementById('traderModal');
const traderForm = document.getElementById('traderForm');
const addTraderBtn = document.getElementById('addTraderBtn');
const closeTraderModal = document.getElementById('closeTraderModal');
const traderSelect = document.getElementById('trader');

// Inicialización
document.addEventListener('DOMContentLoaded', () => {
    // Cargar datos del localStorage si existen
    const savedTrades = localStorage.getItem('tradingData');
    if (savedTrades) {
        trades = JSON.parse(savedTrades);
    }
    
    // Cargar traders guardados si existen
    const savedTraders = localStorage.getItem('traders');
    if (savedTraders) {
        traders = JSON.parse(savedTraders);
    }
    updateTradersList();
    
    // Inicializar el gráfico
    initializeChart();
    
    updateUI();
});

// Funciones de UI
function updateUI() {
    updateTable();
    updateSummary();
    updateChart();
    updateCurrencyFilter();
}

function updateSummary() {
    const totalProfit = trades.reduce((sum, trade) => sum + trade.profit, 0);
    const winningTrades = trades.filter(trade => trade.profit > 0).length;
    const winRate = trades.length > 0 ? (winningTrades / trades.length) * 100 : 0;
    
    document.getElementById('totalProfit').textContent = formatCurrency(totalProfit);
    document.getElementById('totalTrades').textContent = trades.length;
    document.getElementById('winRate').textContent = `${winRate.toFixed(1)}%`;
    
    // Actualizar tendencia
    const profitTrend = document.getElementById('profitTrend');
    if (trades.length >= 2) {
        const lastTwoTrades = trades.slice(0, 2);
        const trend = ((lastTwoTrades[0].profit - lastTwoTrades[1].profit) / Math.abs(lastTwoTrades[1].profit)) * 100;
        profitTrend.textContent = `${trend > 0 ? '+' : ''}${trend.toFixed(1)}%`;
        profitTrend.className = `trend ${trend >= 0 ? 'positive' : 'negative'}`;
    }
}

function updateTable() {
    const tbody = dataTable.querySelector('tbody');
    tbody.innerHTML = '';
    
    const filteredTrades = filterTrades();
    
    filteredTrades.forEach((trade, index) => {
        const row = document.createElement('tr');
        row.className = 'fade-in';
        row.style.animationDelay = `${index * 0.05}s`;
        
        row.innerHTML = `
            <td>${trade.trader}</td>
            <td>${trade.currency}</td>
            <td class="${trade.profit >= 0 ? 'profit-positive' : 'profit-negative'}">
                ${formatCurrency(trade.profit)}
            </td>
            <td class="${trade.percentage >= 0 ? 'profit-positive' : 'profit-negative'}">
                ${trade.percentage}%
            </td>
            <td>${formatDate(trade.date)}</td>
            <td>${formatTime(trade.date)}</td>
            <td>
                <button class="action-btn" onclick="deleteTrade(${index})">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        tbody.appendChild(row);
    });
}

function filterTrades() {
    const searchTerm = searchInput.value.toLowerCase();
    const selectedCurrency = currencyFilter.value;
    
    return trades.filter(trade => {
        const matchesSearch = 
            trade.trader.toLowerCase().includes(searchTerm) ||
            trade.currency.toLowerCase().includes(searchTerm);
        const matchesCurrency = !selectedCurrency || trade.currency === selectedCurrency;
        
        return matchesSearch && matchesCurrency;
    });
}

function updateCurrencyFilter() {
    const currencies = [...new Set(trades.map(trade => trade.currency))];
    currencyFilter.innerHTML = '<option value="">Todas las divisas</option>';
    currencies.forEach(currency => {
        currencyFilter.innerHTML += `<option value="${currency}">${currency}</option>`;
    });
}

// Gráfico
function initializeChart() {
    const ctx = document.getElementById('profitChart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Profit',
                data: [],
                borderColor: '#00c853',
                backgroundColor: 'rgba(0, 200, 83, 0.1)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return formatCurrency(context.raw);
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return formatCurrency(value);
                        }
                    }
                }
            }
        }
    });
}

function updateChart() {
    const lastTrades = trades.slice(0, 10).reverse();
    chart.data.labels = lastTrades.map(trade => formatDate(trade.date));
    chart.data.datasets[0].data = lastTrades.map(trade => trade.profit);
    chart.update();
}

// Manejo de eventos
addTradeBtn.addEventListener('click', () => {
    tradeModal.classList.add('active');
});

closeBtn.addEventListener('click', () => {
    tradeModal.classList.remove('active');
});

tradeForm.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const newTrade = {
        trader: traderSelect.value,
        currency: document.getElementById('currency').value,
        profit: parseFloat(document.getElementById('profit').value),
        percentage: parseFloat(document.getElementById('percentage').value),
        date: new Date().toISOString()
    };
    
    trades.unshift(newTrade);
    saveData();
    updateUI();
    
    tradeForm.reset();
    tradeModal.classList.remove('active');
    showNotification('Trade registrado exitosamente');
});

searchInput.addEventListener('input', updateTable);
currencyFilter.addEventListener('change', updateTable);

// Excel Integration
importBtn.addEventListener('click', () => fileInput.click());

fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const workbook = XLSX.read(e.target.result, { type: 'binary' });
            const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
            const jsonData = XLSX.utils.sheet_to_json(firstSheet);
            
            trades = jsonData.map(row => ({
                trader: row.trader,
                currency: row.currency,
                profit: parseFloat(row.profit),
                percentage: parseFloat(row.percentage),
                date: new Date(row.date).toISOString()
            }));
            
            saveData();
            updateUI();
            showNotification('Datos importados exitosamente');
        };
        reader.readAsBinaryString(file);
    }
});

exportBtn.addEventListener('click', () => {
    const ws = XLSX.utils.json_to_sheet(trades);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Trades");
    XLSX.writeFile(wb, "trading_data.xlsx");
});

// Funciones para manejo de traders
function updateTradersList() {
    // Limpiar select
    traderSelect.innerHTML = '<option value="">Seleccionar Trader</option>';
    
    // Agregar traders ordenados alfabéticamente
    traders.sort().forEach(trader => {
        const option = document.createElement('option');
        option.value = trader;
        option.textContent = trader;
        traderSelect.appendChild(option);
    });
}

function saveTraders() {
    localStorage.setItem('traders', JSON.stringify(traders));
}

// Event Listeners para el manejo de traders
addTraderBtn.addEventListener('click', () => {
    traderModal.classList.add('active');
});

closeTraderModal.addEventListener('click', () => {
    traderModal.classList.remove('active');
});

traderForm.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const newTraderName = document.getElementById('newTraderName').value.trim();
    
    if (newTraderName && !traders.includes(newTraderName)) {
        traders.push(newTraderName);
        saveTraders();
        updateTradersList();
        
        // Seleccionar el nuevo trader
        traderSelect.value = newTraderName;
        
        // Cerrar modal y limpiar formulario
        traderModal.classList.remove('active');
        traderForm.reset();
        
        showNotification('Trader agregado exitosamente');
    } else {
        showNotification('El trader ya existe o el nombre no es válido', 'error');
    }
});

// Funciones de utilidad
function formatDate(dateString) {
    return new Date(dateString).toLocaleDateString();
}

function formatTime(dateString) {
    return new Date(dateString).toLocaleTimeString();
}

function formatCurrency(value) {
    return new Intl.NumberFormat('es-CO', {
        style: 'currency',
        currency: 'USD'
    }).format(value);
}

function showNotification(message, type = 'success') {
    const notification = document.createElement('div');
    notification.className = `notification slide-in ${type}`;
    notification.textContent = message;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.remove();
    }, 3000);
}

function deleteTrade(index) {
    if (confirm('¿Está seguro de eliminar este trade?')) {
        trades.splice(index, 1);
        saveData();
        updateUI();
        showNotification('Trade eliminado');
    }
}

function saveData() {
    localStorage.setItem('tradingData', JSON.stringify(trades));
}


:root {
    --primary-color: #1a237e;
    --secondary-color: #0d47a1;
    --profit-color: #00c853;
    --loss-color: #d50000;
    --background-color: #f5f6fa;
    --card-background: #ffffff;
    --text-color: #2c3e50;
    --border-radius: 12px;
    --button-radius: 8px;
    --transition-speed: 0.3s;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --container-width: 1400px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100%;
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Navbar Styles */
.navbar {
    background-color: var(--primary-color);
    height: 70px;
    padding: 0 var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.nav-brand {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.nav-brand i {
    font-size: 1.5rem;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.nav-button {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    height: 40px;
}

.nav-button i {
    font-size: 1rem;
}

.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-button.primary {
    background-color: var(--profit-color);
    border: none;
}

.nav-button.primary:hover {
    background-color: #00b34a;
}

/* Dashboard Container */
.dashboard-container {
    max-width: var(--container-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-lg);
    flex: 1;
}

/* Summary Cards */
.summary-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.summary-card {
    background-color: var(--card-background);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.summary-card h3 {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
}

.summary-card p {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.summary-card .subtitle {
    font-size: 0.875rem;
    color: #666;
}

.summary-card .trend {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Chart Section */
.chart-section {
    background-color: var(--card-background);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--spacing-xl);
    height: 400px;
}

/* Table Section */
.table-section {
    background-color: var(--card-background);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.table-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.table-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.table-filters input,
.table-filters select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid #ddd;
    border-radius: var(--button-radius);
    font-size: 0.875rem;
    min-width: 200px;
    transition: border-color var(--transition-speed);
}

.table-filters input:focus,
.table-filters select:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.table-container {
    overflow-x: auto;
    margin: calc(var(--spacing-md) * -1);
    padding: var(--spacing-md);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th, td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--text-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

th:first-child {
    border-top-left-radius: var(--button-radius);
}

th:last-child {
    border-top-right-radius: var(--button-radius);
}

tr:last-child td:first-child {
    border-bottom-left-radius: var(--button-radius);
}

tr:last-child td:last-child {
    border-bottom-right-radius: var(--button-radius);
}

tr:hover td {
    background-color: #f5f5f5;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    transition: opacity var(--transition-speed);
    padding: var(--spacing-md);
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding: var(--spacing-xl);
    position: relative;
    transform: translateY(-20px);
    transition: transform var(--transition-speed);
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--transition-speed);
}

.close-btn:hover {
    background-color: #f0f0f0;
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color);
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid #ddd;
    border-radius: var(--button-radius);
    font-size: 1rem;
    transition: all var(--transition-speed);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

.submit-btn {
    background-color: var(--profit-color);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: all var(--transition-speed);
    width: 100%;
    font-weight: 500;
    font-size: 1rem;
}

.submit-btn:hover {
    background-color: #00b34a;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Estilos para el formulario de traders */
.form-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form-group select,
.form-group input {
    flex: 1;
}

.icon-button {
    background: none;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
}

.icon-button:hover {
    background-color: rgba(13, 71, 161, 0.1);
    transform: translateY(-2px);
}

.icon-button i {
    font-size: 1.2rem;
}

.delete-trader {
    color: var(--loss-color);
}

.delete-trader:hover {
    background-color: rgba(213, 0, 0, 0.1);
}

/* Estilos para el modal de nuevo trader */
#traderModal .modal-content {
    max-width: 400px;
}

#traderModal .form-group {
    margin-bottom: var(--spacing-lg);
}

/* Notification */
.notification {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--button-radius);
    box-shadow: var(--shadow);
    z-index: 1002;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .dashboard-container {
        padding: var(--spacing-md);
    }
    
    .chart-section {
        height: 300px;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }

    .navbar {
        height: 60px;
        padding: 0 var(--spacing-md);
    }

    .nav-brand {
        font-size: 1.1rem;
    }

    .nav-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--card-background);
        padding: var(--spacing-sm);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        justify-content: space-around;
    }

    .nav-button {
        flex-direction: column;
        padding: var(--spacing-xs);
        font-size: 0.75rem;
        height: auto;
        background: none;
        border: none;
        color: var(--text-color);
    }

    .nav-button i {
        font-size: 1.25rem;
    }

    .nav-button.primary {
        background: none;
        color: var(--profit-color);
    }

    .summary-card p {
        font-size: 1.5rem;
    }

    .table-filters input,
    .table-filters select {
        min-width: 150px;
    }

    .notification {
        bottom: 80px;
        right: var(--spacing-md);
        left: var(--spacing-md);
        text-align: center;
    }
    
    .form-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .icon-button {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .form-group select,
    .form-group input {
        padding-right: 40px;
    }
}

@media (max-width: 480px) {
    .summary-area {
        grid-template-columns: 1fr;
    }

    .modal-content {
        padding: var(--spacing-lg);
    }
    
    .table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .table-filters {
        flex-direction: column;
    }

    .table-filters input,
    .table-filters select {
        width: 100%;
        min-width: 0;
    }
}

/* Utility Classes */
.profit-positive {
    color: var(--profit-color);
}

.profit-negative {
    color: var(--loss-color);
}

.trend.positive {
    background-color: rgba(0, 200, 83, 0.1);
    color: var(--profit-color);
}

.trend.negative {
    background-color: rgba(213, 0, 0, 0.1);
    color: var(--loss-color);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.fade-in {
    animation: fadeIn var(--transition-speed) ease-in;
}

.slide-in {
    animation: slideIn var(--transition-speed) ease-out;
}

/* Estilos para la gestión de traders */
.trader-management {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    transition: all var(--transition-speed);
    font-size: 0.9rem;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.action-btn.danger {
    background-color: var(--loss-color);
}

.action-btn i {
    font-size: 1.1rem;
}

.traders-list {
    padding: var(--spacing-md);
}

.trader-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-speed);
}

.trader-item:hover {
    background-color: var(--hover-color);
}

.trader-item .delete-icon {
    color: var(--loss-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: 50%;
    transition: all var(--transition-speed);
}

.trader-item .delete-icon:hover {
    background-color: rgba(213, 0, 0, 0.1);
    transform: scale(1.1);
}

.confirmation-content {
    padding: var(--spacing-md);
    text-align: center;
}

.trader-stats {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background-color: var(--background-secondary);
    border-radius: var(--border-radius);
}

.confirmation-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.danger-btn {
    background-color: var(--loss-color);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.cancel-btn {
    background-color: var(--border-color);
    color: var(--text-color);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.danger-btn:hover,
.cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .trader-management {
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
        justify-content: center;
    }
    
    .confirmation-buttons {
        flex-direction: column;
    }
    
    .danger-btn,
    .cancel-btn {
        width: 100%;
    }
}


se lo memoriza y me dice xcuales archivos estan creados