/* www/styles.css */

:root {
    --bg-color: #f4f6f9;
    --text-color: #333;
    --card-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    --border-color: #e0e0e0;
    --accent-color: #007bff;
}

[data-theme="dark"] {
    --bg-color: #131722;
    --text-color: #d1d4dc;
    --card-bg: #1e222d;
    --sidebar-bg: #1e222d;
    --header-bg: #1e222d;
    --border-color: #2a2e39;
    --accent-color: #2962ff;
}

html, body {
    height: 100%; width: 100%; margin: 0; padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color); color: var(--text-color);
    overflow: hidden;
}

/* HEADER & LOGIN */
#app-header {
    height: 60px; background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; flex-shrink: 0;
}
#app-header h1 { margin: 0; font-size: 1.2rem; font-weight: 700; }
#theme-toggle { background: none; border: none; cursor: pointer; color: var(--text-color); padding: 5px; }
[data-theme="light"] #theme-icon-sun { display: none; }
[data-theme="dark"] #theme-icon-moon { display: none; }
#login-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 9999; display: flex; justify-content: center; align-items: center; }

#app-content {
    height: calc(100vh - 60px);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto; /* Permite scroll vertical si la pantalla es pequeña */
}

/* =========================================
   GRID LAYOUT (3 COLUMNAS)
   ========================================= */
.grid-container {
    display: grid;
    /* Definición de Columnas: Sidebar | Medio | Derecha */
    grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr);
    
    /* Definición de Filas: 
       1. Ticker (50px)
       2. Gráfico Principal (45vh - Ajustable)
       3. Fila Media (TV Chart + Tabla) (40vh - Ajustable)
       4. Catálogo (400px o flexible)
    */
    grid-template-rows: 50px 45vh 40vh 400px;
    
    gap: 15px;
    width: 100%;
    /* Altura mínima para acomodar todo el contenido */
    min-height: 100%; 
    padding-bottom: 20px;
}

/* ASIGNACIÓN DE ÁREAS */

/* 1. Ticker (Ocupa las 3 columnas) */
#tradingview-ticker-container {
    grid-column: 1 / 4;
    grid-row: 1;
    border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color);
}

/* 2. Sidebar (Ocupa Columna 1, Filas 2 a 5) */
#sidebar-container {
    grid-column: 1;
    grid-row: 2 / 5; /* Se estira hasta el final */
    background-color: var(--sidebar-bg);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow-y: auto;
}

/* 3. Gráfico Principal (Ocupa Columnas 2 y 3, Fila 2) */
#plot-main-container {
    grid-column: 2 / 4;
    grid-row: 2;
    padding: 10px;
    min-height: 0;
}

/* 4. Gráfico TV (Ocupa Columna 2, Fila 3) */
#tradingview-chart-container {
    grid-column: 2;
    grid-row: 3;
    min-height: 0;
}

/* 5. Tabla de Datos (Ocupa Columna 3, Fila 3) - AQUÍ ESTÁ TU REQUISITO */
#table-container {
    grid-column: 3;
    grid-row: 3;
    padding: 10px;
    overflow: auto;
}

/* 6. Catálogo (Ocupa Columnas 2 y 3, Fila 4 - Al fondo) */
#catalog-container {
    /* Ocupa desde la columna 2 hasta el final (columna 4 en conteo de líneas de grid) */
    grid-column: 2 / 4; 
    grid-row: 4; /* Se ubica en la fila 4 */
    
    /* Estilos visuales */
    background-color: transparent;
    overflow: hidden; /* El scroll lo maneja la tabla interna */
    border-radius: 8px;
}

/* Estilo común para tarjetas */
.card-style, #plot-main-container, #tradingview-chart-container, #table-container, #catalog-container {
    background-color: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.tradingview-widget-container { width: 100%; height: 100%; }
.plotly { height: 100% !important; width: 100% !important; }