/* Variables de Color: Estética de Modo Oscuro Hi-Tech */
:root {
    --color-bg-dark: #0f172a;       /* Fondo Principal (Gris Azul Oscuro Profundo) */
    --color-bg-card: #1e293b;       /* Fondo de Tarjeta (Gris Oscuro Suave) */
    --color-text-light: #e2e8f0;    /* Texto Principal (Blanco Azulado) */
    --color-text-gray: #94a3b8;     /* Texto Secundario (Gris Claro) */
    --color-border: #334155;        /* Borde de Tarjeta (Gris de Contraste Oscuro) */
    --color-terminal-bg: #030712;   /* Fondo de Terminal (Casi Negro) */
    --color-terminal-text: #22c55e; /* Texto de Terminal (Verde Neón Brillante) */
    --color-accent-blue: #3b82f6;   /* Azul de Acerto (Para CTA) */
    --color-neon-blue-light: #60a5fa; /* Azul Neón Claro para efectos */
    --color-success-green: #22c55e; /* Verde para Ganancia (Neón) */
    --color-error-red: #ef4444;     /* Rojo para Pérdida (Vivo) */
}

/* BASE: Modo Oscuro de Ancho Completo */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: var(--color-bg-dark); 
    color: var(--color-text-light); 
    margin: 0;
    padding: 0;
    line-height: 1.6;
    
    /* USO DE ASSET: Fondo de textura oscura para ambiente tech */
    background-image: url('../img/bg_dark_texture.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: overlay;
}

/* ------------------------------------------------------------------ */
/* HEADER Y NAVEGACIÓN (V7.1) */
/* ------------------------------------------------------------------ */

.navbar {
    display: flex;
    /* Cambio clave: Distribuye el logo a la izq y el menú a la derecha */
    justify-content: space-between; 
    align-items: center;
    padding: 20px 50px; 
    background-color: rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(5px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); 
}
.logo img {
    height: 75px; 
    filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.5)); 
}

/* Estilos para el nuevo menú de navegación */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px; /* Espacio entre enlaces */
}
.main-nav a {
    text-decoration: none;
    color: var(--color-text-gray); /* Color inicial sutil */
    font-weight: 600;
    padding: 10px 0; /* Padding vertical para el borde inferior */
    transition: color 0.3s, border-bottom 0.3s;
    position: relative;
    /* Quita el color al enlace que ya está resaltado por la clase active */
    color: var(--color-text-light); 
}
.main-nav a:hover {
    color: var(--color-neon-blue-light); 
}
/* Estilo del enlace activo: Neón Azul Brillante */
.main-nav a.active {
    color: var(--color-neon-blue-light); 
    /* Línea inferior de neón */
    border-bottom: 3px solid var(--color-neon-blue-light); 
    box-shadow: 0 5px 10px rgba(96, 165, 250, 0.5); /* Sombra para el brillo */
}
.main-nav a.active:hover {
    color: var(--color-neon-blue-light);
}


/* ------------------------------------------------------------------ */
/* LAYOUT PRINCIPAL Y WIDGETS */
/* ------------------------------------------------------------------ */

.dashboard-container {
    width: 96%; 
    margin: 40px auto 50px auto; 
    padding: 0 20px; 
    display: grid;
    gap: 25px; 
    grid-template-columns: 1.25fr 3fr; 
    grid-template-areas: 
        "left monitor"
        "ledger ledger";
}
.column-left {
    grid-area: left;
    display: flex;
    flex-direction: column;
    gap: 25px; 
}

/* Tarjetas: Integración Suave y Profundidad */
.config-card, .commission-summary-card, .monitor-live-widget, .ledger-history {
    background-color: var(--color-bg-card); 
    border-radius: 8px; 
    padding: 30px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
    border: 1px solid var(--color-border); 
    transition: all 0.2s ease-out; 
}
.config-card:hover, .commission-summary-card:hover, .ledger-history:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); 
    border-color: var(--color-neon-blue-light); 
}
.description {
    color: var(--color-text-gray);
    font-size: 0.95em;
    margin-bottom: 20px;
}
h2 {
    font-size: 1.5em; 
    font-weight: 700;
    margin-bottom: 10px;
}

/* Terminal de Arbitraje */
.monitor-live-widget {
    grid-area: monitor;
    padding: 0; 
    border: none;
    background-color: transparent;
    box-shadow: none;
}
.terminal-display {
    background-color: var(--color-terminal-bg); 
    color: var(--color-terminal-text); 
    padding: 30px; 
    border-radius: 8px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.1em; 
    border: 2px solid var(--color-neon-blue-light);
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.6); 
    min-height: 450px;
    position: relative;
    overflow: hidden;

    /* USO DE ASSET: Gráfico de Alta Frecuencia como fondo visual */
    background-image: 
        url('../img/chart_high_frequency.jpg'), 
        url('../img/bg_circuit_pattern.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: soft-light, overlay; 
    opacity: 0.98; 
}

/* Terminal Lines and Colors */
.opportunity-line {
    padding: 8px 0;
    border-bottom: 1px dashed #2c3e50; 
}
.dir {
    font-weight: 500;
    width: 300px;
    display: inline-block;
}
.terminal-display p, .opportunity-line span {
    color: var(--color-text-light); 
    text-shadow: none; 
}

/* Estilos de Datos: Colores Vivos y Brillantes (Efecto LED/Neón) */
.net-green, .net-red {
    font-weight: 800; 
    font-size: 1.3em; 
}
.net-green { 
    color: var(--color-success-green) !important; 
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.8); 
}
.net-red { 
    color: var(--color-error-red) !important; 
    text-shadow: 0 0 5px rgba(239, 68, 68, 0.4); 
}
.viability.tag-si, .viability.tag-no {
    padding: 5px 10px;
    border-radius: 4px; 
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 15px;
}
.viability.tag-si {
    background-color: var(--color-success-green);
    color: var(--color-bg-dark); 
}
.viability.tag-no {
    background-color: var(--color-error-red);
    color: var(--color-bg-dark); 
}

/* Llamadas a la Acción (CTA) */
.cta-btn {
    background-color: var(--color-accent-blue);
    color: var(--color-text-light); 
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.05em;
    font-weight: 600;
    transition: background-color 0.2s, box-shadow 0.2s;
}
.cta-btn:hover {
    background-color: #2563eb;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.7); 
}

/* Tablas y Inputs */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.input-group label {
    font-weight: 600;
}
.input-group input {
    color: var(--color-text-light);
    background-color: #1f293b;
    border: 1px solid var(--color-border);
    padding: 12px;
    border-radius: 6px;
    font-size: 1.0em;
}

/* Ledger (Historial) */
.ledger-history {
    grid-area: ledger;
    margin-top: 15px;
}
#ledger-table-container {
    overflow-x: auto;
}
#ledger-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
#ledger-table th, #ledger-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
#ledger-table th {
    background-color: #1e293b; 
    color: var(--color-text-gray);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
}
#ledger-table td {
    color: var(--color-text-light);
}
#ledger-table tbody tr:last-child td {
    border-bottom: none;
}
#ledger-table tbody tr:hover {
    background-color: #2d384c;
}

/* FOOTER CORPORATIVO (Centrado y Limpio) */
.footer-corporativo {
    padding: 25px 0;
    margin-top: 30px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-gray);
    background-color: var(--color-bg-dark); 
    text-align: center; /* **CAMBIO CRÍTICO: Centrado** */
}