/**
 * Color Consistency Fix
 * Estandariza colores en toda la plataforma
 */

/* ============================================
   COLOR CLASSES CORRECTIONS
   ============================================ */

/* Fix para clases incorrectas como text-black-600 */
.text-black-600 {
    color: #4b5563 !important; /* Equivalente a text-gray-600 */
}

/* ============================================
   LIGHT MODE - TEXT COLORS STANDARD
   ============================================ */

/* Texto principal */
body:not(.dark-mode) .text-main {
    color: #111827; /* gray-900 */
}

/* Texto secundario */
body:not(.dark-mode) .text-secondary-text {
    color: #6b7280; /* gray-600 */
}

/* Texto en fondos de color */
body:not(.dark-mode) .text-on-primary {
    color: #ffffff;
}

/* ============================================
   DARK MODE - TEXT COLORS OVERRIDE
   ============================================ */

/* Asegurar que el texto principal sea legible en dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: #f9fafb !important;
}

/* Texto en cards */
.dark-mode .card h1,
.dark-mode .card h2,
.dark-mode .card h3,
.dark-mode .card h4,
.dark-mode .card p {
    color: #f9fafb !important;
}

/* Texto en listas */
.dark-mode ul li,
.dark-mode ol li {
    color: #d1d5db;
}

/* Labels de formularios */
.dark-mode label {
    color: #d1d5db !important;
}

/* Texto en estadísticas */
.dark-mode .stat-value,
.dark-mode .stat-label {
    color: #f9fafb !important;
}

/* ============================================
   NAVIGATION BAR - COLOR FIX
   ============================================ */

/* Asegurar que el nav sea visible */
body:not(.dark-mode) nav {
    background-color: #ffffff;
    color: #111827;
}

.dark-mode nav {
    background-color: #1a1a1a;
    color: #f9fafb;
}

.dark-mode nav span,
.dark-mode nav a:not(.bg-primary):not(.bg-accent) {
    color: #d1d5db !important;
}

/* ============================================
   CARDS - TEXT VISIBILITY
   ============================================ */

/* Light mode cards */
body:not(.dark-mode) .card .card-title {
    color: #111827;
}

body:not(.dark-mode) .card .card-description {
    color: #6b7280;
}

/* Dark mode cards */
.dark-mode .card .card-title {
    color: #f9fafb;
}

.dark-mode .card .card-description {
    color: #d1d5db;
}

/* ============================================
   BUTTONS - TEXT CONTRAST
   ============================================ */

/* Asegurar contraste en botones primarios */
.bg-primary,
.btn-primary {
    color: #ffffff !important;
}

.bg-accent,
.btn-accent {
    color: #ffffff !important;
}

.bg-secondary,
.btn-secondary {
    color: #ffffff !important;
}

/* Dark mode buttons */
.dark-mode .btn:not(.bg-primary):not(.bg-accent):not(.bg-secondary) {
    color: #f9fafb;
}

/* ============================================
   TABLES - TEXT VISIBILITY
   ============================================ */

body:not(.dark-mode) table th {
    color: #111827;
}

body:not(.dark-mode) table td {
    color: #374151;
}

.dark-mode table th {
    color: #f9fafb !important;
}

.dark-mode table td {
    color: #d1d5db !important;
}

/* ============================================
   FOOTER - TEXT FIX
   ============================================ */

body:not(.dark-mode) footer {
    color: #6b7280;
}

.dark-mode footer {
    color: #d1d5db;
}

.dark-mode footer a {
    color: #d1d5db !important;
}

.dark-mode footer a:hover {
    color: #f9fafb !important;
}

/* ============================================
   HERO SECTIONS - TEXT CONTRAST
   ============================================ */

.hero-section h1,
.hero-section h2,
.hero-section p {
    color: #ffffff !important;
}

.bg-gradient-to-r h1,
.bg-gradient-to-r h2,
.bg-gradient-to-r p,
.bg-gradient-to-r span {
    color: #ffffff !important;
}

/* ============================================
   DROPDOWN MENUS - VISIBILITY
   ============================================ */

body:not(.dark-mode) .dropdown-menu a {
    color: #374151;
}

.dark-mode .dropdown-menu a {
    color: #d1d5db !important;
}

/* ============================================
   STAT CARDS - COLOR CONSISTENCY
   ============================================ */

body:not(.dark-mode) .stat-card .stat-value {
    color: #111827;
}

body:not(.dark-mode) .stat-card .stat-label {
    color: #6b7280;
}

.dark-mode .stat-card .stat-value {
    color: #f9fafb !important;
}

.dark-mode .stat-card .stat-label {
    color: #d1d5db !important;
}

/* ============================================
   COURSE CARDS - SPECIAL TREATMENT
   ============================================ */

.course-card .course-title {
    color: #111827;
}

.dark-mode .course-card .course-title {
    color: #f9fafb !important;
}

.course-card .course-description,
.course-card .course-meta {
    color: #6b7280;
}

.dark-mode .course-card .course-description,
.dark-mode .course-card .course-meta {
    color: #d1d5db !important;
}

/* ============================================
   BREADCRUMBS - VISIBILITY
   ============================================ */

.breadcrumb {
    color: #6b7280;
}

.dark-mode .breadcrumb {
    color: #d1d5db;
}

.dark-mode .breadcrumb a {
    color: #3b82f6 !important;
}

/* ============================================
   BADGES - CONTRAST
   ============================================ */

.badge {
    color: #ffffff !important;
}

/* ============================================
   ALERTS - TEXT VISIBILITY
   ============================================ */

.alert {
    color: #111827;
}

.dark-mode .alert {
    color: #f9fafb;
}

/* ============================================
   PLACEHOLDERS - DARK MODE
   ============================================ */

.dark-mode ::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

/* ============================================
   SELECTION - BETTER VISIBILITY
   ============================================ */

::selection {
    background-color: #3b82f6;
    color: #ffffff;
}

.dark-mode ::selection {
    background-color: #60a5fa;
    color: #000000;
}

/* ============================================
   FOCUS STATES - VISIBILITY
   ============================================ */

*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.dark-mode *:focus-visible {
    outline-color: #60a5fa;
}

/* ============================================
   LINKS - CONSISTENT COLORS
   ============================================ */

a:not(.btn):not(.button) {
    color: #3b82f6;
}

a:not(.btn):not(.button):hover {
    color: #2563eb;
}

.dark-mode a:not(.btn):not(.button):not(.bg-primary):not(.bg-accent) {
    color: #60a5fa !important;
}

.dark-mode a:not(.btn):not(.button):not(.bg-primary):not(.bg-accent):hover {
    color: #93c5fd !important;
}

/* ============================================
   CODE BLOCKS - SYNTAX HIGHLIGHTING FIX
   ============================================ */

code {
    color: #e11d48;
    background-color: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.dark-mode code {
    color: #fca5a5;
    background-color: #374151;
}

pre {
    background-color: #1e293b;
    color: #e2e8f0;
}

.dark-mode pre {
    background-color: #0f172a;
    color: #f1f5f9;
}