/* 
 * Corrección de Colores JavaScript - Sistema Marino
 * Este archivo corrige colores aplicados dinámicamente por JavaScript
 */

/* Corregir colores de gráficos y charts */
.chart-container canvas,
.chartjs-render-monitor {
    /* Los colores de Chart.js se corrigen en el JavaScript */
}

/* Corregir colores de elementos creados dinámicamente por JavaScript */
[style*="#ffd700"],
[style*="#27ae60"],
[style*="#3498db"],
[style*="#e74c3c"],
[style*="#9b59b6"],
[style*="#4caf50"],
[style*="#2196f3"],
[style*="#ff9800"],
[style*="#f44336"],
[style*="#ff6b6b"],
[style*="#c0c0c0"],
[style*="#FF6384"],
[style*="#36A2EB"],
[style*="#FFCE56"],
[style*="#4BC0C0"],
[style*="#9966FF"],
[style*="#FF9F40"],
[style*="#C9CBCF"] {
    /* Sobrescribir colores aplicados por JavaScript */
}

/* Corregir colores de notificaciones dinámicas */
.notification-success {
    border-left-color: #1976d2 !important;
}

.notification-success .notification-icon {
    color: #1976d2 !important;
}

.notification-warning {
    border-left-color: #42a5f5 !important;
}

.notification-warning .notification-icon {
    color: #42a5f5 !important;
}

.notification-error {
    border-left-color: #0d47a1 !important;
}

.notification-error .notification-icon {
    color: #0d47a1 !important;
}

.notification-info {
    border-left-color: #1976d2 !important;
}

.notification-info .notification-icon {
    color: #1976d2 !important;
}

.notification-achievement {
    border-left-color: #42a5f5 !important;
}

.notification-achievement .notification-icon {
    color: #42a5f5 !important;
}

.notification-level-up {
    border-left-color: #42a5f5 !important;
}

/* Corregir colores de elementos de gamificación */
.challenge-item.active {
    border-color: #42a5f5 !important;
    box-shadow: 0 0 20px rgba(66, 165, 245, 0.3) !important;
}

.user-rank.rank-1 {
    color: #42a5f5 !important;
    text-shadow: 0 0 10px rgba(66, 165, 245, 0.5) !important;
}

.user-rank.rank-2 {
    color: #bbdefb !important;
    text-shadow: 0 0 8px rgba(187, 222, 251, 0.5) !important;
}

.leaderboard-user.current-user {
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.1), rgba(66, 165, 245, 0.05)) !important;
    border-left-color: #42a5f5 !important;
}

/* Corregir colores de indicadores de posición */
.position-indicator.up {
    background: #1976d2 !important;
    color: white !important;
}

.position-indicator.down {
    background: #0d47a1 !important;
    color: white !important;
}

.position-indicator.new {
    background: #42a5f5 !important;
    color: white !important;
}

/* Corregir colores de métricas */
.metric-change.positive {
    background: rgba(25, 118, 210, 0.2) !important;
    color: #1976d2 !important;
}

.metric-change.negative {
    background: rgba(13, 71, 161, 0.2) !important;
    color: #0d47a1 !important;
}

/* Corregir colores de elementos de debug */
.debug-panel {
    border-color: #1976d2 !important;
}

.debug-button {
    background: #1976d2 !important;
    color: white !important;
}

.test-button {
    background: #1976d2 !important;
    color: white !important;
}

.fix-button {
    background: #42a5f5 !important;
    color: white !important;
}

/* Corregir colores de partículas y efectos */
.particle-effect {
    /* Los colores de partículas se corrigen en el JavaScript */
}

/* Corregir colores de elementos de hangman */
.hangman-particle {
    background: #42a5f5 !important;
}

.hangman-confetti {
    background: #1976d2 !important;
}

/* Corregir colores de elementos de dashboard */
.dashboard-chart {
    /* Los colores de gráficos se corrigen en el JavaScript */
}

/* Corregir colores de elementos de analytics */
.analytics-metric {
    color: #1976d2 !important;
}

.analytics-chart {
    /* Los colores de gráficos se corrigen en el JavaScript */
}

/* Corregir colores de elementos de leaderboard */
.leaderboard-position {
    color: #1976d2 !important;
}

.leaderboard-score {
    color: #42a5f5 !important;
}

/* Corregir colores de elementos de challenge */
.challenge-reward {
    color: #42a5f5 !important;
}

.challenge-icon {
    color: #42a5f5 !important;
}

/* Corregir colores de elementos de notification */
.notification-badge {
    background: #1976d2 !important;
    color: white !important;
}

.notification-count {
    background: #0d47a1 !important;
    color: white !important;
}

/* Corregir colores de elementos de particle effects */
.particle-gold {
    background: radial-gradient(circle, #42a5f5, #1976d2, #1565c0) !important;
    box-shadow: 0 0 20px #42a5f5, 0 0 40px #1976d2, inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.particle-silver {
    background: radial-gradient(circle, #bbdefb, #e3f2fd, #ffffff) !important;
    box-shadow: 0 0 15px #bbdefb, 0 0 30px #ffffff, inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

.particle-bronze {
    background: radial-gradient(circle, #1565c0, #1976d2, #42a5f5) !important;
    box-shadow: 0 0 18px #1565c0, 0 0 35px #1976d2, inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.particle-blue {
    background: radial-gradient(circle, #64b5f6, #42a5f5, #1976d2) !important;
    box-shadow: 0 0 18px #64b5f6, 0 0 35px #1976d2, inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.particle-red {
    background: radial-gradient(circle, #0d47a1, #1565c0, #1976d2) !important;
    box-shadow: 0 0 18px #0d47a1, 0 0 35px #1976d2, inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.particle-green {
    background: radial-gradient(circle, #1976d2, #1565c0, #42a5f5) !important;
    box-shadow: 0 0 18px #1976d2, 0 0 35px #42a5f5, inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.particle-diamond {
    background: radial-gradient(circle, #e3f2fd, #bbdefb, #90caf9) !important;
    box-shadow: 0 0 25px #e3f2fd, 0 0 50px #bbdefb, inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
}

.particle-fire {
    background: radial-gradient(circle, #42a5f5, #1976d2, #42a5f5) !important;
    box-shadow: 0 0 20px #42a5f5, 0 0 40px #1976d2, inset 0 0 12px rgba(255, 255, 255, 0.4) !important;
}

/* Corregir colores de elementos de firework */
.firework-particle {
    background: radial-gradient(circle, #42a5f5, transparent) !important;
}

/* Corregir colores de elementos de reward */
.reward-icon {
    color: #42a5f5 !important;
}

.reward-text {
    color: #1976d2 !important;
}

/* Corregir colores de elementos de achievement */
.achievement-icon {
    color: #42a5f5 !important;
}

.achievement-text {
    color: #1976d2 !important;
}

/* Corregir colores de elementos de level */
.level-icon {
    color: #42a5f5 !important;
}

.level-text {
    color: #1976d2 !important;
}

/* Corregir colores de elementos de progress */
.progress-indicator {
    background: #1976d2 !important;
}

.progress-text {
    color: #1976d2 !important;
}

/* Corregir colores de elementos de score */
.score-indicator {
    background: #1976d2 !important;
}

.score-text {
    color: #1976d2 !important;
}

/* Corregir colores de elementos de timer */
.timer-indicator {
    background: #42a5f5 !important;
}

.timer-text {
    color: #42a5f5 !important;
}

/* Corregir colores de elementos de status */
.status-success {
    color: #1976d2 !important;
}

.status-warning {
    color: #42a5f5 !important;
}

.status-error {
    color: #0d47a1 !important;
}

.status-info {
    color: #1976d2 !important;
}

/* Corregir colores de elementos HTML con estilos inline */
[style*="color: #888"] {
    color: #bbdefb !important;
}

[style*="color: #ff6b6b"] {
    color: #0d47a1 !important;
}

[style*="color: #4caf50"] {
    color: #1976d2 !important;
}

[style*="color: #ff9800"] {
    color: #42a5f5 !important;
}

[style*="color: #f44336"] {
    color: #0d47a1 !important;
}

[style*="color: #ffd700"] {
    color: #42a5f5 !important;
}

[style*="color: #c0c0c0"] {
    color: #bbdefb !important;
}

[style*="color: #cd7f32"] {
    color: #1565c0 !important;
}

[style*="color: #000"] {
    color: #1976d2 !important;
}

/* Corregir colores de elementos con estilos inline de fondo */
[style*="background: #007bff"] {
    background: #1976d2 !important;
}

[style*="background: #28a745"] {
    background: #1976d2 !important;
}

[style*="background: #ffc107"] {
    background: #42a5f5 !important;
}

[style*="background: #dc3545"] {
    background: #0d47a1 !important;
}

[style*="background: #17a2b8"] {
    background: #1976d2 !important;
}

[style*="background: #6c757d"] {
    background: #1565c0 !important;
}

[style*="background: #343a40"] {
    background: #0d2033 !important;
}

[style*="background: #f8f9fa"] {
    background: #e3f2fd !important;
}

/* Corregir colores de elementos con estilos inline de borde */
[style*="border-color: #007bff"] {
    border-color: #1976d2 !important;
}

[style*="border-color: #28a745"] {
    border-color: #1976d2 !important;
}

[style*="border-color: #ffc107"] {
    border-color: #42a5f5 !important;
}

[style*="border-color: #dc3545"] {
    border-color: #0d47a1 !important;
}

[style*="border-color: #17a2b8"] {
    border-color: #1976d2 !important;
}

[style*="border-color: #6c757d"] {
    border-color: #1565c0 !important;
}

[style*="border-color: #343a40"] {
    border-color: #0d2033 !important;
}

[style*="border-color: #f8f9fa"] {
    border-color: #e3f2fd !important;
}

/* Corregir colores de elementos con estilos inline de gradiente */
[style*="background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%)"] {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%) !important;
}

[style*="background: linear-gradient(135deg, #f8f9fa, #e9ecef)"] {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb) !important;
}

/* Corregir colores de elementos con estilos inline de borde izquierdo */
[style*="border-left: 4px solid #d32f2f"] {
    border-left: 4px solid #0d47a1 !important;
}

/* Corregir colores de elementos con estilos inline de borde izquierdo de color */
[style*="border-left-color: #007bff"] {
    border-left-color: #1976d2 !important;
}

[style*="border-left-color: #28a745"] {
    border-left-color: #1976d2 !important;
}

[style*="border-left-color: #ffc107"] {
    border-left-color: #42a5f5 !important;
}

[style*="border-left-color: #dc3545"] {
    border-left-color: #0d47a1 !important;
}

/* Corregir colores de elementos con estilos inline de fondo de gradiente */
[style*="background: var(--gold-gradient)"] {
    background: linear-gradient(135deg, #42a5f5, #1976d2) !important;
}

[style*="background: var(--silver-gradient)"] {
    background: linear-gradient(135deg, #bbdefb, #e3f2fd) !important;
}

[style*="background: var(--bronze-gradient)"] {
    background: linear-gradient(135deg, #1565c0, #1976d2) !important;
}

/* Corregir colores de elementos con estilos inline de fondo de gradiente específico */
[style*="background: {% if loop.index == 1 %}var(--gold-gradient)"] {
    background: linear-gradient(135deg, #42a5f5, #1976d2) !important;
}

[style*="background: {% if loop.index == 2 %}var(--silver-gradient)"] {
    background: linear-gradient(135deg, #bbdefb, #e3f2fd) !important;
}

[style*="background: {% else %}var(--bronze-gradient)"] {
    background: linear-gradient(135deg, #1565c0, #1976d2) !important;
}