/* ============================================
   CORRECCIONES DE CONTRASTE PARA MODO OSCURO
   Mejora la visibilidad para personas con poca visión
   ============================================ */

/* ============================================
   TARJETAS DEL DASHBOARD (stat-card)
   ============================================ */
body.dark-theme .stat-card,
[data-theme="dark"] .stat-card {
  background: var(--color-surface, #1b1b1b) !important;
  border: 1px solid rgba(201, 162, 39, 0.3) !important;
}

/* Números principales en las tarjetas - ALTA VISIBILIDAD */
body.dark-theme .stat-value,
[data-theme="dark"] .stat-value {
  color: #FFD700 !important; /* Dorado brillante */
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
}

/* Títulos de las tarjetas - MEJOR CONTRASTE */
body.dark-theme .stat-label,
[data-theme="dark"] .stat-label,
body.dark-theme .stat-title,
[data-theme="dark"] .stat-title {
  color: #E8E8E8 !important; /* Casi blanco */
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* Texto secundario en tarjetas */
body.dark-theme .stat-meta,
[data-theme="dark"] .stat-meta,
body.dark-theme .stat-description,
[data-theme="dark"] .stat-description {
  color: #D0D0D0 !important; /* Gris claro */
  opacity: 0.9 !important;
}

/* ============================================
   GRÁFICOS Y CHART
   ============================================ */

/* Contenedor del gráfico */
body.dark-theme .chart-container,
[data-theme="dark"] .chart-container,
body.dark-theme .chart-container-premium,
[data-theme="dark"] .chart-container-premium,
body.dark-theme .trend-chart-wrapper,
[data-theme="dark"] .trend-chart-wrapper {
  background: var(--color-surface, #1b1b1b) !important;
  border: 1px solid rgba(201, 162, 39, 0.3) !important;
}

/* Títulos de gráficos */
body.dark-theme .chart-title,
[data-theme="dark"] .chart-title,
body.dark-theme .chart-header h3,
[data-theme="dark"] .chart-header h3 {
  color: #FFD700 !important; /* Dorado brillante */
  font-weight: 700 !important;
}

/* Subtítulos de gráficos */
body.dark-theme .chart-subtitle,
[data-theme="dark"] .chart-subtitle {
  color: #E8E8E8 !important;
  opacity: 0.9 !important;
}

/* Líneas del gráfico - COLORES BRILLANTES */
body.dark-theme .chart-line,
[data-theme="dark"] .chart-line {
  stroke: #00D4FF !important; /* Cyan brillante */
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6)) !important;
}

/* Puntos/marcadores del gráfico */
body.dark-theme .chart-point,
[data-theme="dark"] .chart-point,
body.dark-theme circle[class*="point"],
[data-theme="dark"] circle[class*="point"] {
  fill: #00D4FF !important; /* Cyan brillante */
  stroke: #FFFFFF !important; /* Borde blanco */
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.8)) !important;
}

/* Ejes del gráfico - VISIBLES */
body.dark-theme .chart-axis,
[data-theme="dark"] .chart-axis,
body.dark-theme .axis line,
[data-theme="dark"] .axis line {
  stroke: #B0B0B0 !important; /* Gris claro */
  stroke-width: 1.5px !important;
  opacity: 0.8 !important;
}

/* Etiquetas de los ejes - ALTA VISIBILIDAD */
body.dark-theme .axis text,
[data-theme="dark"] .axis text,
body.dark-theme .chart-axis-label,
[data-theme="dark"] .chart-axis-label {
  fill: #E8E8E8 !important; /* Casi blanco */
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Números en los ejes */
body.dark-theme .axis .tick text,
[data-theme="dark"] .axis .tick text {
  fill: #D0D0D0 !important; /* Gris claro */
  font-weight: 500 !important;
}

/* Grid del gráfico */
body.dark-theme .chart-grid,
[data-theme="dark"] .chart-grid,
body.dark-theme .axis .grid-line,
[data-theme="dark"] .axis .grid-line {
  stroke: rgba(255, 255, 255, 0.15) !important;
  stroke-width: 1px !important;
}

/* ============================================
   TEXTO EN GRÁFICOS (Tooltips, Labels, etc.)
   ============================================ */
body.dark-theme .chart-tooltip,
[data-theme="dark"] .chart-tooltip {
  background: rgba(0, 0, 0, 0.95) !important;
  border: 2px solid #FFD700 !important;
  color: #FFD700 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

body.dark-theme .chart-label,
[data-theme="dark"] .chart-label {
  fill: #FFD700 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
}

/* ============================================
   BARRAS DEL GRÁFICO (si hay gráficos de barras)
   ============================================ */
body.dark-theme .chart-bar,
[data-theme="dark"] .chart-bar,
body.dark-theme rect[class*="bar"],
[data-theme="dark"] rect[class*="bar"] {
  fill: #00D4FF !important; /* Cyan brillante */
  stroke: #FFFFFF !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6)) !important;
}

/* ============================================
   ÁREAS DEL GRÁFICO (si hay áreas sombreadas)
   ============================================ */
body.dark-theme .chart-area,
[data-theme="dark"] .chart-area,
body.dark-theme path[class*="area"],
[data-theme="dark"] path[class*="area"] {
  fill: rgba(0, 212, 255, 0.2) !important;
  stroke: #00D4FF !important;
  stroke-width: 2px !important;
}

/* ============================================
   OTROS ELEMENTOS DEL DASHBOARD
   ============================================ */

/* Balance disponible - NÚMERO PRINCIPAL */
body.dark-theme #availableBalance,
[data-theme="dark"] #availableBalance,
body.dark-theme .balance-amount,
[data-theme="dark"] .balance-amount {
  color: #FFD700 !important;
  font-weight: 800 !important;
  font-size: 2.5rem !important;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
}

/* Gastos totales */
body.dark-theme #totalExpenses,
[data-theme="dark"] #totalExpenses {
  color: #FF6B6B !important; /* Rojo claro */
  font-weight: 700 !important;
}

/* Ahorros */
body.dark-theme #totalSavings,
[data-theme="dark"] #totalSavings {
  color: #4ECDC4 !important; /* Verde azulado */
  font-weight: 700 !important;
}

/* Progreso mensual */
body.dark-theme .progress-percentage,
[data-theme="dark"] .progress-percentage {
  color: #FFD700 !important;
  font-weight: 700 !important;
}

/* ============================================
   MEJORAS ADICIONALES DE ACCESIBILIDAD
   ============================================ */

/* Aumentar tamaño de fuente en modo oscuro para mejor legibilidad */
body.dark-theme .stat-value {
  font-size: 2rem !important;
}

body.dark-theme .chart-title {
  font-size: 1.25rem !important;
}

/* Asegurar que los bordes sean visibles */
body.dark-theme .stat-card {
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15) !important;
}

body.dark-theme .chart-container {
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15) !important;
}