/* ==== UNIFIED CHART COLORS - TEMA CIAN→MORADO ==== */
/* Archivo: app/static/css/unified-chart-colors.css */

/* Variables de colores unificados para charts */
:root {
  /* Paleta principal cian→morado */
  --chart-color-1: #00bcd4; /* Cian principal */
  --chart-color-2: #26a69a; /* Teal */
  --chart-color-3: #3f51b5; /* Azul índigo */
  --chart-color-4: #7c4dff; /* Púrpura claro */
  --chart-color-5: #9c27b0; /* Morado principal */
  --chart-color-6: #e91e63; /* Rosa-morado */
  --chart-color-7: #ff5722; /* Naranja-rojo para contraste */
  --chart-color-8: #607d8b; /* Gris azulado */
  
  /* Colores para diferentes tipos de datos */
  --chart-positive: #00bcd4; /* Cian para valores positivos */
  --chart-negative: #9c27b0; /* Morado para valores negativos */
  --chart-neutral: #607d8b;  /* Gris para valores neutros */
  
  /* Fondos y textos */
  --chart-bg: rgba(42, 42, 42, 0.9);
  --chart-text: #e5e5e5;
  --chart-grid: rgba(255, 255, 255, 0.1);
}

/* ==== PLOTLY CHART COLOR OVERRIDES ==== */

/* Forzar colores personalizados en todas las trazas de Plotly */
.js-plotly-plot .legendtext,
.js-plotly-plot .legend text {
  fill: var(--chart-text) !important;
}

/* Sobrescribir colores de líneas y áreas */
.js-plotly-plot .trace:nth-child(1) path,
.js-plotly-plot .trace:nth-child(1) .point {
  stroke: var(--chart-color-1) !important;
  fill: var(--chart-color-1) !important;
}

.js-plotly-plot .trace:nth-child(2) path,
.js-plotly-plot .trace:nth-child(2) .point {
  stroke: var(--chart-color-2) !important;
  fill: var(--chart-color-2) !important;
}

.js-plotly-plot .trace:nth-child(3) path,
.js-plotly-plot .trace:nth-child(3) .point {
  stroke: var(--chart-color-3) !important;
  fill: var(--chart-color-3) !important;
}

.js-plotly-plot .trace:nth-child(4) path,
.js-plotly-plot .trace:nth-child(4) .point {
  stroke: var(--chart-color-4) !important;
  fill: var(--chart-color-4) !important;
}

.js-plotly-plot .trace:nth-child(5) path,
.js-plotly-plot .trace:nth-child(5) .point {
  stroke: var(--chart-color-5) !important;
  fill: var(--chart-color-5) !important;
}

.js-plotly-plot .trace:nth-child(6) path,
.js-plotly-plot .trace:nth-child(6) .point {
  stroke: var(--chart-color-6) !important;
  fill: var(--chart-color-6) !important;
}

.js-plotly-plot .trace:nth-child(7) path,
.js-plotly-plot .trace:nth-child(7) .point {
  stroke: var(--chart-color-7) !important;
  fill: var(--chart-color-7) !important;
}

.js-plotly-plot .trace:nth-child(8) path,
.js-plotly-plot .trace:nth-child(8) .point {
  stroke: var(--chart-color-8) !important;
  fill: var(--chart-color-8) !important;
}

/* Sobrescribir colores específicos de pie charts */
.js-plotly-plot g.slice:nth-child(1) path {
  fill: var(--chart-color-1) !important;
}

.js-plotly-plot g.slice:nth-child(2) path {
  fill: var(--chart-color-2) !important;
}

.js-plotly-plot g.slice:nth-child(3) path {
  fill: var(--chart-color-3) !important;
}

.js-plotly-plot g.slice:nth-child(4) path {
  fill: var(--chart-color-4) !important;
}

.js-plotly-plot g.slice:nth-child(5) path {
  fill: var(--chart-color-5) !important;
}

.js-plotly-plot g.slice:nth-child(6) path {
  fill: var(--chart-color-6) !important;
}

.js-plotly-plot g.slice:nth-child(7) path {
  fill: var(--chart-color-7) !important;
}

.js-plotly-plot g.slice:nth-child(8) path {
  fill: var(--chart-color-8) !important;
}

/* Colores para barras */
.js-plotly-plot .bars .bar:nth-child(1) {
  fill: var(--chart-color-1) !important;
}

.js-plotly-plot .bars .bar:nth-child(2) {
  fill: var(--chart-color-2) !important;
}

.js-plotly-plot .bars .bar:nth-child(3) {
  fill: var(--chart-color-3) !important;
}

.js-plotly-plot .bars .bar:nth-child(4) {
  fill: var(--chart-color-4) !important;
}

.js-plotly-plot .bars .bar:nth-child(5) {
  fill: var(--chart-color-5) !important;
}

.js-plotly-plot .bars .bar:nth-child(6) {
  fill: var(--chart-color-6) !important;
}

.js-plotly-plot .bars .bar:nth-child(7) {
  fill: var(--chart-color-7) !important;
}

.js-plotly-plot .bars .bar:nth-child(8) {
  fill: var(--chart-color-8) !important;
}

/* ==== CHART CONTAINERS CON THEME OSCURO ==== */

/* Contenedores de charts con fondo oscuro */
.chart-container, 
.plot-container,
[id$="Chart"],
[id*="chart"] {
  background: var(--chart-bg) !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
  border-radius: 12px;
  backdrop-filter: blur(15px);
  padding: 1rem;
  margin-bottom: 2rem;
}

/* Texto y títulos de charts */
.js-plotly-plot .gtitle,
.js-plotly-plot .xtitle,
.js-plotly-plot .ytitle {
  fill: var(--chart-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Ejes y grid */
.js-plotly-plot .xtick text,
.js-plotly-plot .ytick text {
  fill: var(--chart-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.js-plotly-plot .xgrid,
.js-plotly-plot .ygrid {
  stroke: var(--chart-grid) !important;
  stroke-width: 0.5 !important;
}

/* Fondo de plots */
.js-plotly-plot .plotly .bg {
  fill: transparent !important;
}

.js-plotly-plot .main-svg {
  background-color: transparent !important;
}

/* Leyenda */
.js-plotly-plot .legend {
  background-color: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

.js-plotly-plot .legendtext {
  fill: var(--chart-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ==== ELEMENTOS ESPECÍFICOS DE PORTFOLIO ANALYZER ==== */

/* Metric cards con gradiente cian→morado */
.metric-card {
  background: linear-gradient(135deg, var(--chart-color-1) 0%, var(--chart-color-5) 100%) !important;
  color: white !important;
  border: 1px solid rgba(0, 188, 212, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(156, 39, 176, 0.4);
}

/* Portfolio sections */
.portfolio-section {
  background: rgba(42, 42, 42, 0.8) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--chart-text) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Risk alerts con colores del theme */
.risk-alert {
  border-left: 4px solid var(--chart-color-5) !important;
  background-color: rgba(156, 39, 176, 0.1) !important;
  color: var(--chart-text) !important;
}

.scenario-positive { 
  background-color: rgba(0, 188, 212, 0.2) !important;
  color: var(--chart-color-1) !important;
}

.scenario-negative { 
  background-color: rgba(156, 39, 176, 0.2) !important;
  color: var(--chart-color-5) !important;
}

/* ==== TOOLTIPS Y HOVER EFFECTS ==== */

/* Plotly hover info */
.js-plotly-plot .hovertext {
  background-color: rgba(42, 42, 42, 0.95) !important;
  border: 1px solid var(--chart-color-1) !important;
  color: var(--chart-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Modebar oscuro */
.js-plotly-plot .modebar {
  background: rgba(42, 42, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
}

.js-plotly-plot .modebar-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--chart-text) !important;
}

.js-plotly-plot .modebar-btn:hover {
  background: rgba(0, 188, 212, 0.2) !important;
  border-color: var(--chart-color-1) !important;
}

.js-plotly-plot .modebar-btn.active {
  background: var(--chart-color-1) !important;
  color: white !important;
}

/* ==== TABLAS Y DATOS ==== */

/* Tablas con theme oscuro */
.data-table, table {
  background: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--chart-text) !important;
}

.data-table th, table th {
  background: rgba(26, 26, 26, 0.9) !important;
  color: var(--chart-text) !important;
  border-bottom: 2px solid var(--chart-color-1) !important;
}

.data-table td, table td {
  color: var(--chart-text) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.data-table tr:hover, table tr:hover {
  background: rgba(0, 188, 212, 0.1) !important;
}

/* Celdas con valores positivos/negativos */
.positive-value {
  color: var(--chart-positive) !important;
  font-weight: 600;
}

.negative-value {
  color: var(--chart-negative) !important;
  font-weight: 600;
}

.neutral-value {
  color: var(--chart-neutral) !important;
}

/* ==== RESPONSIVE DESIGN ==== */

@media (max-width: 768px) {
  .chart-container, 
  .plot-container,
  [id$="Chart"],
  [id*="chart"] {
    padding: 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .js-plotly-plot .modebar {
    transform: scale(1.1);
    transform-origin: top right;
  }
  
  .metric-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }
}

/* ==== ANIMACIONES SUAVES ==== */

.chart-container,
.metric-card,
.portfolio-section {
  transition: all 0.3s ease;
}

.chart-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 188, 212, 0.2);
}

/* ==== LOADING STATES ==== */

.chart-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: var(--chart-bg);
  border-radius: 12px;
  color: var(--chart-text);
  font-family: 'Inter', system-ui, sans-serif;
}

.chart-loading::after {
  content: "Loading chart...";
  opacity: 0.7;
}

/* ==== ERROR STATES ==== */

.chart-error {
  background: rgba(220, 38, 38, 0.1) !important;
  border: 1px solid #dc2626 !important;
  color: #dc2626 !important;
  text-align: center;
  padding: 2rem;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ==== FIX ESPECÍFICO: ELIMINAR RELLENO DEL GRÁFICO DE PERFORMANCE ==== */

/* Eliminar relleno solo en el gráfico de performance */
#performance-chart .js-plotly-plot .trace path,
#performance-chart .js-plotly-plot .scatterlayer path,
#performance-chart .js-plotly-plot g.scatter path {
  fill: none !important;
  fill-opacity: 0 !important;
}

/* Asegurar que solo sea línea en scatter plots del performance chart */
#performance-chart .js-plotly-plot .scatterlayer .trace .lines path {
  fill: none !important;
  stroke-width: 2.5px !important;
  stroke: #00bcd4 !important;
}

/* Eliminar cualquier área/relleno bajo la línea */
#performance-chart .js-plotly-plot .trace .fill,
#performance-chart .js-plotly-plot .trace polygon,
#performance-chart .js-plotly-plot .scatterlayer polygon {
  display: none !important;
  fill: none !important;
  fill-opacity: 0 !important;
}

/* Forzar modo línea solo en el gráfico de performance */
#performance-chart .js-plotly-plot .trace[class*="scatter"] {
  fill: none !important;
}

/* Sobreescribir las reglas generales solo para este gráfico */
#performance-chart .js-plotly-plot .trace:nth-child(1) path,
#performance-chart .js-plotly-plot .trace:nth-child(2) path {
  fill: none !important;
  fill-opacity: 0 !important;
}

/* Específico para eliminar áreas generadas automáticamente */
#performance-chart .js-plotly-plot .scatterlayer .trace[fill] {
  fill: none !important;
}

#performance-chart .js-plotly-plot .scatterlayer .trace[fill="tozeroy"] {
  fill: none !important;
}

#performance-chart .js-plotly-plot .scatterlayer .trace[fill="tonexty"] {
  fill: none !important;
}