/* 
 * Corrección de Colores - Sistema Marino
 * Este archivo sobrescribe todos los colores no marinos con tonos marinos
 * Se carga al final para garantizar máxima prioridad
 */

/* Variables CSS principales - Sobrescribir colores morados */
:root {
    --quiz-primary: #1976d2; /* Azul marino en lugar de morado */
    --quiz-secondary: #1565c0; /* Azul marino oscuro en lugar de morado */
    --primary-color: #1976d2; /* Azul marino */
    --secondary-color: #1565c0; /* Azul marino oscuro */
    --accent-primary: #1976d2; /* Azul marino */
    --accent-secondary: #1565c0; /* Azul marino oscuro */
    /* Sobrescribir variables de gradientes morados */
    --primary-gradient: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    --secondary-gradient: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
    --success-gradient: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    --warning-gradient: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

/* Sobrescribir gradientes morados con gradientes marinos */
.hero-section,
.admin-header,
.admin-nav .nav-link:hover,
.admin-nav .nav-link.active,
.btn-admin,
.stats-banner,
.quiz-header::before,
.question-content::before,
.indicator-icon.score,
#continueButton,
.page-link:hover,
.page-item.active .page-link,
.dropdown-item.active,
.user-stats-card,
.general-quiz-card,
.quiz-header,
.btn-quick-quiz,
.cta-section,
.category-header,
.book-icon,
.stat-icon,
.quiz-icon,
.ip-count,
.stats-icon.users,
.progress-fill.users {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

/* Corregir gradientes morados específicos que pueden estar en templates */
[style*="background: linear-gradient(135deg, #667eea"],
[style*="background: linear-gradient(135deg, #764ba2"],
[style*="background:linear-gradient(135deg, #667eea"],
[style*="background:linear-gradient(135deg, #764ba2"] {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

/* Corregir gradientes morados en clases específicas de templates */
.admin-nav .nav-link:hover,
.admin-nav .nav-link.active,
.stats-banner,
.correct-answer,
.question-actions .btn-primary,
.admin-nav .nav-link.active,
.quiz-header,
.btn-quick-quiz {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

/* Sobrescribir bordes morados */
.form-control:focus,
.form-select:focus,
.border-color {
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25) !important;
}

/* Sobrescribir colores de texto morados */
.text-primary,
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.quiz-info h3 {
    color: #1976d2 !important;
}

/* Excluir headers dentro de edit-question-container - Regla más específica después */
/* Esta regla tiene mayor especificidad porque incluye el contenedor padre */
.edit-question-container h1,
.edit-question-container h2,
.edit-question-container h3,
.edit-question-container h4,
.edit-question-container h5,
.edit-question-container h6,
.edit-question-container .leaderboard-title,
.edit-question-container .leaderboard-subtitle,
.edit-question-container .form-section-title {
    color: #ffffff !important;
}

/* Excluir navbar-brand en página de leaderboard para mantener identidad visual */
/* El navbar está en base.html, fuera del bloque content, así que usamos :has() para detectar leaderboard-scope */
body:has(.leaderboard-scope) .navbar.navbar-expand-lg.navbar-dark .navbar-brand {
    color: #ffffff !important;
}

/* Excluir encabezados en la pizarra IA y AI Teacher para mantener color blanco */
.blackboard-header h1,
.blackboard-header h2,
.blackboard-header h3,
.blackboard-header h4,
.blackboard-header h5,
.blackboard-header h6,
.ai-teacher-header h1,
.ai-teacher-header h2,
.ai-teacher-header h3,
.ai-teacher-header h4,
.ai-teacher-header h5,
.ai-teacher-header h6 {
    color: white !important;
}

/* Iconos dentro de estos encabezados también en blanco */
.blackboard-header h1 i,
.blackboard-header h2 i,
.ai-teacher-header h1 i,
.ai-teacher-header h2 i,
.ai-teacher-card h3 i,
.recent-explanations h3 i {
    color: white !important;
}

/* Encabezados h3 en AI Teacher */
.ai-teacher-card h3,
.recent-explanations h3 {
    color: white !important;
}

/* Botones en AI Teacher */
.btn-ai-teacher,
.ai-teacher-card .btn,
.ai-teacher-container .btn {
    color: white !important;
}

/* Botones en Reinforcement Summary */
.btn-start-quiz,
.btn-start-quiz:hover,
.btn-start-quiz:focus,
.btn-start-quiz:active,
.btn-cancel,
.btn-cancel:hover,
.btn-cancel:focus,
.btn-cancel:active,
.action-buttons a {
    color: white !important;
}

/* Encabezados y textos en página de Registro */
.register-card h1,
.register-card h2,
.register-card h3,
.register-card h4,
.register-card h5,
.register-card h6,
.register-title,
.register-subtitle,
.benefits-title,
.benefits-section h5,
.register-header h1,
.register-header p {
    color: white !important;
}

/* Iconos en encabezados de Registro */
.register-card h1 i,
.register-card h5 i,
.register-title i,
.benefits-title i,
.register-icon i {
    color: white !important;
}

/* Lista de beneficios */
.benefits-list,
.benefits-list li,
.benefits-list li i {
    color: white !important;
}

/* Labels de formularios en Registro */
.register-card .form-label,
.register-card label {
    color: white !important;
}

/* Enlace de "¿Olvidaste tu contraseña?" en login */
.forgot-password-link,
.forgot-password-link a,
.forgot-password-link a i {
    color: white !important;
}

/* Encabezados de la página principal */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p,
.section-title,
.feature-title,
.feature-card h3,
.feature-card p,
.player-name,
.faq-item h3,
.faq-item p,
.cta-section h2,
.cta-section p,
.how-it-works h3,
.how-it-works p,
.stats-section h2,
.stats-section h3,
.stats-section p,
.testimonials-section h2,
.testimonials-section h3,
.quiz-card h3,
.quiz-card p {
    color: white !important;
}

/* Iconos en la página principal */
.hero-section h1 i,
.hero-section h2 i,
.section-title i,
.feature-title i,
.feature-card i,
.faq-item i {
    color: white !important;
}

/* Encabezados en Reinforcement Summary */
.reinforcement-summary-container h1,
.reinforcement-summary-container h2,
.reinforcement-summary-container h3,
.reinforcement-summary-container h4,
.reinforcement-summary-container h5,
.reinforcement-summary-container h6,
.summary-header h1,
.summary-header .leaderboard-title,
.category-breakdown h4,
.questions-section h3 {
    color: white !important;
}

/* Iconos en encabezados de Reinforcement Summary */
.reinforcement-summary-container h1 i,
.reinforcement-summary-container h2 i,
.reinforcement-summary-container h3 i,
.reinforcement-summary-container h4 i,
.summary-header h1 i,
.category-breakdown h4 i,
.questions-section h3 i {
    color: white !important;
}

/* Todos los textos dentro de questions-list */
.questions-list,
.questions-list .question-item,
.questions-list .question-text,
.questions-list .question-text i,
.questions-list .question-meta,
.questions-list .question-meta span,
.questions-list .question-meta span i,
.questions-list .error-count-badge,
.questions-list .error-count-badge i {
    color: white !important;
}

/* Corregir colores de éxito (verde) a azul marino */
.score-excellent,
.option-card.correct {
    background: linear-gradient(135deg, #1976d2, #1565c0) !important;
    border-color: #1976d2 !important;
}

/* Corregir colores de advertencia (amarillo) a azul marino claro */
.score-good,
.option-card.warning {
    background: linear-gradient(135deg, #42a5f5, #1976d2) !important;
    border-color: #42a5f5 !important;
}

/* Corregir colores de error (rojo) a azul marino oscuro */
.score-poor,
.option-card.incorrect {
    background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
    border-color: #0d47a1 !important;
}

/* Corregir colores de información (cian) a azul marino */
.alert-info,
.bg-info {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: white !important;
}

.alert-info * {
    color: white !important;
}
    border-color: #1976d2 !important;
    color: white !important;
}

/* Corregir colores de advertencia (rosa) a azul marino */
.stats-icon.quizzes,
.progress-fill.quizzes {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%) !important;
}

/* Corregir colores de progreso (amarillo) a azul marino */
.indicator-icon.timer {
    background: linear-gradient(135deg, #42a5f5, #1976d2) !important;
}

/* Corregir colores de progreso (verde) a azul marino */
.indicator-icon.progress {
    background: linear-gradient(135deg, #1976d2, #1565c0) !important;
}

/* Corregir colores de navbar de advertencia (amarillo) a azul marino */
.navbar-dark.bg-warning {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

/* Corregir colores de botones de advertencia */
.btn-warning {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    border-color: #1976d2 !important;
    color: white !important;
}

/* Corregir colores de botones de éxito */
.btn-success {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    border-color: #1976d2 !important;
    color: white !important;
}

/* Corregir colores de botones de peligro */
.btn-danger {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%) !important;
    border-color: #0d47a1 !important;
    color: white !important;
}

/* Corregir colores de badges */
.badge-primary {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: white !important;
}

.badge-success {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: white !important;
}

.badge-warning {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%) !important;
    color: white !important;
}

.badge-danger {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%) !important;
    color: white !important;
}

/* Corregir colores de alertas */
.alert-success {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(21, 101, 192, 0.1) 100%) !important;
    border-color: #1976d2 !important;
    color: white !important;
}

.alert-success * {
    color: white !important;
}
    color: #1976d2 !important;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.1) 0%, rgba(25, 118, 210, 0.1) 100%) !important;
    border-color: #42a5f5 !important;
    color: white !important;
}

.alert-warning * {
    color: white !important;
}
    color: #1976d2 !important;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(13, 71, 161, 0.1) 0%, rgba(21, 101, 192, 0.1) 100%) !important;
    border-color: #0d47a1 !important;
    color: white !important;
}

.alert-danger * {
    color: white !important;
}
    color: #0d47a1 !important;
}

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

/* Corregir colores de enlaces */
a {
    color: #1976d2 !important;
}

a:hover {
    color: #1565c0 !important;
}

/* Corregir colores de texto de error */
.invalid-feedback,
.text-danger {
    color: #0d47a1 !important;
}

/* Corregir colores de texto de éxito */
.text-success {
    color: #1976d2 !important;
}

/* Corregir colores de texto de advertencia */
.text-warning {
    color: #42a5f5 !important;
}

/* Corregir colores de texto de información */
.text-info {
    color: #1976d2 !important;
}

/* Corregir colores específicos de notificaciones */
.notification-badge,
.badge-notification {
    background: #1976d2 !important;
    color: white !important;
}

/* Corregir colores específicos de elementos flotantes */
.floating-badge,
.position-absolute {
    background: #1976d2 !important;
    color: white !important;
}

/* Corregir colores de variables CSS principales */
:root {
    --quiz-success: #1976d2; /* Azul marino en lugar de cian */
    --quiz-warning: #42a5f5; /* Azul marino claro en lugar de rosa */
    --quiz-danger: #0d47a1; /* Azul marino oscuro en lugar de rojo */
    --quiz-info: #1976d2; /* Azul marino en lugar de cian */
    --quiz-dark: #0a0e1a; /* Azul marino muy oscuro */
    --quiz-light: #e3f2fd; /* Azul marino muy claro */
}

/* Corregir colores de gradientes secundarios */
.secondary-gradient {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

.success-gradient {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

.warning-gradient {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%) !important;
}

.dark-gradient {
    background: linear-gradient(135deg, #0a0e1a 0%, #1e3c72 100%) !important;
}

/* Corregir colores de opciones de quiz */
.option-card {
    border-color: #1976d2 !important;
}

.option-card.selected {
    border-color: #1976d2 !important;
    background-color: #e3f2fd !important;
}

.option-card.correct {
    border-color: #1976d2 !important;
    background-color: #e3f2fd !important;
}

.option-card.incorrect {
    border-color: #0d47a1 !important;
    background-color: #e8f5e8 !important;
}

/* Corregir colores de indicadores */
.indicator-icon.timer {
    background: linear-gradient(135deg, #42a5f5, #1976d2) !important;
}

.indicator-icon.progress {
    background: linear-gradient(135deg, #1976d2, #1565c0) !important;
}

.indicator-icon.score {
    background: linear-gradient(135deg, #1976d2, #1565c0) !important;
}

/* Corregir colores de formularios */
.form-control,
.form-select {
    border-color: #1976d2 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25) !important;
}

/* Aplicar fondo azul claro solo a .form-section que NO tengan el atributo data-no-marine-bg */
/* Esto permite que los formularios de edición de preguntas rechazadas tengan estilos personalizados */
.form-section:not([data-no-marine-bg]) {
    background: #e3f2fd !important;
}

.form-label {
    color: #1976d2 !important;
}

/* Labels dentro de edit-question-container deben ser blancos - Regla más específica después */
.edit-question-container .form-label,
.edit-question-container .edit-form-container .form-label {
    color: #ffffff !important;
}

.form-text {
    color: #1565c0 !important;
}

/* Corregir colores de texto */
.text-muted {
    color: #1565c0 !important;
}

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

/* Corregir colores de fondo */
.bg-light {
    background-color: #e3f2fd !important;
}

/* Variantes específicas de bg-light para mayor especificidad */
.card-header.bg-light,
.card.bg-light,
.bg-light.card-header,
.bg-light.card {
    background-color: #e3f2fd !important;
}

.bg-dark {
    background-color: #0a0e1a !important;
}

/* Corregir bg-secondary (Bootstrap usa gris #6c757d) */
.bg-secondary {
    background-color: #1565c0 !important;
}

/* Variantes específicas de bg-secondary */
.card-header.bg-secondary,
.card.bg-secondary,
.badge.bg-secondary,
.bg-secondary.card-header,
.bg-secondary.card,
.bg-secondary.badge {
    background-color: #1565c0 !important;
}

/* Corregir colores de bordes */
.border-light {
    border-color: #bbdefb !important;
}

.border-dark {
    border-color: #1976d2 !important;
}

/* Corregir colores de navbar */
.navbar-dark.bg-warning {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

.navbar-dark.bg-warning .navbar-brand,
.navbar-dark.bg-warning .navbar-text,
.navbar-dark.bg-warning .nav-link {
    color: white !important;
}

/* Corregir colores de cards */
.card {
    border-color: #bbdefb !important;
}

.card-header {
    background-color: #e3f2fd !important;
    border-color: #bbdefb !important;
}

/* Asegurar que card-header.bg-light tenga fondo azul marítimo (mayor especificidad) */
.card-header.bg-light {
    background-color: #e3f2fd !important;
    border-color: #bbdefb !important;
}

/* Corregir colores de preview */
.preview-section {
    background: #e3f2fd !important;
}

.preview-question {
    color: #1976d2 !important;
}

.preview-correct {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: white !important;
}

/* Corregir colores de estadísticas */
.stats-icon.questions {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

.stats-icon.results {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%) !important;
    color: #1976d2 !important;
}

.stats-title {
    color: #1976d2 !important;
}

.stats-subtitle {
    color: #1565c0 !important;
}

.stats-description {
    color: #1565c0 !important;
}

/* Corregir colores de progreso */
.progress-bar {
    background: #e3f2fd !important;
}

.progress-fill.results {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%) !important;
}

/* Corregir colores de elementos específicos */
.question-text {
    color: #1976d2 !important;
}

/* Question-text dentro de rejected-questions-container debe ser blanco - Regla más específica después */
.rejected-questions-container .question-card .question-content .question-text {
    color: #ffffff !important;
    background: transparent !important;
}

.question-options {
    background: #e3f2fd !important;
}

/* Excluir question-options dentro de rejected-questions-container */
.rejected-questions-container .question-options {
    background: transparent !important;
}

.option-item {
    border-bottom-color: #bbdefb !important;
}

.correct-answer {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: white !important;
}

/* Corregir colores de elementos de navegación */
.tab-item:focus,
.tab-item:hover {
    color: white !important;
}

/* Corregir colores de elementos de fondo */
/* NOTA: No aplicar estilos de fondo al body globalmente.
   Cada página (leaderboard, reinforcement_summary, etc.) define su propio fondo.
   Esto evita conflictos y la necesidad de parches con !important.
*/

/* Corregir colores de elementos de texto específicos */
.quiz-question-text {
    color: white !important;
}

.form-check-label {
    color: white !important;
}

.card-title {
    color: white !important;
}

/* Corregir colores de elementos de texto en diferentes tamaños */
@media (max-width: 768px) {
    .quiz-question-text {
        color: #1976d2 !important;
    }
    
    .form-check-label {
        color: #1976d2 !important;
    }
    
    .card-title {
        color: #1976d2 !important;
    }
}

@media (max-width: 576px) {
    .quiz-question-text {
        color: #1976d2 !important;
    }
    
    .form-check-label {
        color: #1976d2 !important;
    }
    
    .card-title {
        color: #1976d2 !important;
    }
}

/* Corregir colores de elementos de texto en modo oscuro */
@media (prefers-color-scheme: dark) {
    :root {
        --quiz-light: #0a0e1a;
        --quiz-dark: #e3f2fd;
    }
    
    body {
        background-color: #0a0e1a !important;
        color: white !important;
    }
    
    .card {
        background-color: #1e3c72 !important;
        color: white !important;
    }
}

/* Corregir colores de elementos específicos del quiz */
.quiz-header {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: white !important;
}

/* Corregir colores de elementos de texto específicos */
/* Nota: .blackboard-header h2/h3 se excluyen con una regla de mayor especificidad arriba */
h2, h3 {
    color: #1976d2;
}

/* Asegurar que h2 y h3 dentro de edit-question-container sean blancos - Regla más específica después */
.edit-question-container h2,
.edit-question-container h3 {
    color: #ffffff;
}

/* Corregir colores de elementos de navegación específicos */
.nav-link:focus,
.navbar-brand:focus {
    outline: 2px solid #1976d2 !important;
    outline-offset: 2px;
}

/* Corregir colores específicos de templates */
.text-muted {
    color: #bbdefb !important;
}

#adsense-status {
    color: #bbdefb !important;
}

/* Corregir colores de alertas de error en templates */
.alert-danger {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%) !important;
    border-left: 4px solid #0d47a1 !important;
}

/* Corregir colores específicos de quiz */
:root {
    --color-bg: #0a0e1a;
    --color-card: #1e3c72;
    --color-accent: #1976d2;
    --color-text: #fff;
}

/* Corregir colores de elementos específicos de quiz */
.quiz-container {
    background: #0a0e1a !important;
}

.quiz-card {
    background: #1e3c72 !important;
}

.quiz-accent {
    color: #1976d2 !important;
}

.quiz-text {
    color: white !important;
}

/* Corregir colores de elementos específicos */
.quiz-header {
    background: #0a0e1a !important;
}

.quiz-content {
    color: #bbdefb !important;
}

.quiz-button {
    background: #1976d2 !important;
}

.quiz-button-secondary {
    background: var(--ocean-light, #2a5298) !important;
}

/* Corregir colores de elementos de estado */
.quiz-success {
    background: #1976d2 !important;
}

.quiz-error {
    background: #0d47a1 !important;
}

.quiz-warning {
    background: #42a5f5 !important;
}

/* Corregir colores de elementos específicos */
.quiz-footer {
    background: #0a0e1a !important;
}

.quiz-footer-text {
    color: #bbdefb !important;
}

/* Corregir colores de elementos de formulario */
.quiz-form-border-success {
    border-color: #1976d2 !important;
}

.quiz-form-border-error {
    border-color: #0d47a1 !important;
}

/* Corregir colores de elementos de botón */
.btn-success {
    background: linear-gradient(135deg, #1976d2, #1565c0) !important;
}

.btn-error {
    background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
}

/* Corregir colores de elementos de texto específicos */
.quiz-error-text {
    color: #0d47a1 !important;
}

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

/* Corregir colores de elementos de información */
.quiz-info {
    background: #e3f2fd !important;
    border-left: 4px solid #1976d2 !important;
}

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

/* Corregir colores de elementos de advertencia */
.quiz-warning-box {
    background: linear-gradient(135deg, #42a5f5, #1976d2) !important;
}

.quiz-warning-box-text {
    color: #1976d2 !important;
}

/* Corregir colores de elementos de fondo específicos */
.quiz-background {
    background: #0a0e1a !important;
}

.quiz-card-background {
    background: #e3f2fd !important;
    border-left: 4px solid #1976d2 !important;
}

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

/* Corregir colores de elementos de borde específicos */
.quiz-border-info {
    border-left: 3px solid #1976d2 !important;
}

.quiz-border-muted {
    border-left: 3px solid #1565c0 !important;
}

/* Corregir colores de elementos de fondo específicos */
.quiz-bg-light {
    background: #e3f2fd !important;
}

.quiz-bg-muted {
    background: #bbdefb !important;
}