/**
 * CORRECCIONES DE ALTO CONTRASTE
 * EntrenameAPP - Parche de emergencia para mejorar legibilidad
 * Elimina fondos oscuros y asegura contraste de texto
 */

/* ========================================
   FORZAR FONDOS CLAROS EN TODO
   ======================================== */
html, body {
    background-color: #f9fafb !important;
    color: #1f2937 !important;
}

/* Remover cualquier fondo negro o muy oscuro */
[style*="background: #1"], 
[style*="background:#1"],
[style*="background-color: #1"],
[style*="background-color:#1"],
[style*="background: black"],
[style*="background-color: black"],
[style*="background: rgb(0"],
[style*="background-color: rgb(0"],
[style*="background: rgb(17"],
[style*="background: rgb(31"] {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* ========================================
   NAVEGACIÓN - GRADIENTE VIBRANTE
   ======================================== */
.navigation,
.navbar,
header.navigation,
.top-bar {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    color: white !important;
}

/* Solo la barra superior con texto blanco */
.navigation > .nav-container,
.navigation > .nav-container *,
.navbar > *,
header.navigation > * {
    color: white !important;
}

/* Menú lateral con texto oscuro legible */
.nav-menu {
    background: #ffffff !important;
    color: #1f2937 !important;
}

.nav-menu .nav-links {
    background: #ffffff !important;
}

.nav-menu .nav-link-item {
    color: #374151 !important;
    background: transparent !important;
}

.nav-menu .nav-link-item:hover {
    background: #f3f4f6 !important;
    color: #2563eb !important;
}

.nav-menu .nav-link-item.active {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
}

.nav-menu .nav-link-item i {
    color: inherit !important;
}

/* Header del menú lateral (ese sí con texto blanco) */
.nav-menu .nav-header,
.nav-menu .nav-user-info {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    color: white !important;
}

.nav-menu .nav-header *,
.nav-menu .nav-user-info * {
    color: white !important;
}

/* Divisores del menú */
.nav-menu .nav-divider,
.nav-menu .nav-divider span {
    color: #6b7280 !important;
}

.nav-menu .nav-admin-divider,
.nav-menu .nav-admin-divider span {
    color: #dc2626 !important;
}

.nav-brand,
.navbar-brand {
    color: white !important;
}

/* ========================================
   TARJETAS Y CONTENEDORES
   ======================================== */
.card,
.panel,
.box,
.stat-card,
.info-card,
.feature-card,
.chart-container,
.content-box,
.section-box,
.payment-validation-form,
.transactions-section,
.user-plans-section,
.progress-summary,
.low-performance-container,
.enhanced-material-card {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
}

/* Títulos dentro de tarjetas */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6,
.stat-card h1, .stat-card h2, .stat-card h3, .stat-card h4,
.chart-container h3 {
    color: #1f2937 !important;
}

/* Texto dentro de tarjetas */
.card p, .card span, .card label,
.panel p, .panel span, .panel label,
.stat-card p, .stat-card span,
.stat-card .stat-label {
    color: #4b5563 !important;
}

/* Valores destacados */
.stat-card .stat-value,
.info-card .value,
.metric-value,
.big-number {
    color: #2563eb !important;
}

/* ========================================
   TEXTO - ALTO CONTRASTE
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    color: #1f2937 !important;
}

p, span, label, div {
    color: inherit;
}

/* Texto secundario legible */
.text-muted,
.text-secondary,
.help-text,
.small-text,
.description {
    color: #6b7280 !important;
}

/* ========================================
   BOTONES - COLORES VIBRANTES
   ======================================== */
.btn-primary,
.btn-main,
button.primary,
[class*="btn-study"],
[class*="btn-download"] {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    color: white !important;
    border: none !important;
}

.btn-secondary,
button.secondary {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 2px solid #d1d5db !important;
}

.btn-success,
button.success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    border: none !important;
}

.btn-warning,
button.warning {
    background-color: #fbbf24 !important;
    color: #1f2937 !important;
    border: none !important;
}

.btn-danger,
button.danger,
.btn-error {
    background-color: #ef4444 !important;
    color: white !important;
    border: none !important;
}

/* ========================================
   FORMULARIOS
   ======================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 2px solid #d1d5db !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af !important;
}

/* ========================================
   TABLAS
   ======================================== */
table {
    background-color: #ffffff !important;
}

thead,
thead tr,
th {
    background-color: #2563eb !important;
    color: white !important;
}

tbody tr {
    background-color: #ffffff !important;
}

tbody tr:nth-child(even) {
    background-color: #f9fafb !important;
}

tbody tr:hover {
    background-color: #eff6ff !important;
}

td {
    color: #1f2937 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* ========================================
   BADGES Y PILLS
   ======================================== */
.badge,
.pill,
.tag,
.option-tag,
.topic-pill {
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

.badge-success,
.pill-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
}

.badge-warning,
.pill-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}

.badge-danger,
.pill-danger,
.low-performance-pill {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}

/* ========================================
   ALERTAS Y NOTIFICACIONES
   ======================================== */
.alert,
.notification {
    border-width: 1px !important;
    border-style: solid !important;
}

.alert-success,
.notification-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
}

.alert-warning,
.notification-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}

.alert-danger,
.alert-error,
.notification-error {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}

.alert-info,
.notification-info {
    background-color: #e0f2fe !important;
    color: #075985 !important;
    border-color: #7dd3fc !important;
}

/* ========================================
   MODALES
   ======================================== */
.modal-content,
.modal-body,
.modal-header,
.modal-footer {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

.modal-header {
    border-bottom: 1px solid #e5e7eb !important;
}

.modal-footer {
    border-top: 1px solid #e5e7eb !important;
}

/* ========================================
   TABS Y PESTAÑAS
   ======================================== */
.tab,
.time-tab,
.nav-tab {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
}

.tab.active,
.time-tab.active,
.nav-tab.active {
    background-color: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}

/* ========================================
   LINKS
   ======================================== */
a {
    color: #2563eb !important;
}

a:hover {
    color: #1d4ed8 !important;
}

/* Links en navegación mantienen blanco */
.navigation a,
.navbar a,
nav a {
    color: white !important;
}

/* ========================================
   SECCIONES ESPECÍFICAS
   ======================================== */
/* Barra de navegación superior inline */
[style*="max-width: 1200px"][style*="background-color: white"] {
    background-color: #ffffff !important;
}

[style*="max-width: 1200px"][style*="background-color: white"] a {
    color: #374151 !important;
}

/* Indicador de plan */
.plan-indicator {
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

/* Contenedor de carga */
.loading-indicator,
.spinner-container {
    background-color: transparent !important;
}

/* ========================================
   GRÁFICOS (Chart.js)
   ======================================== */
.chart-container,
.chart-wrapper {
    background-color: #ffffff !important;
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    border-top: 1px solid #e5e7eb !important;
}

footer a {
    color: #2563eb !important;
}

/* ========================================
   VERIFICACIÓN DE PAGOS (autogestion.html)
   ======================================== */
.verification-instructions {
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%) !important;
    border-left: 4px solid #2563eb !important;
    color: #1f2937 !important;
}

.verification-instructions h4 {
    color: #1e40af !important;
}

.verification-instructions ol,
.verification-instructions li {
    color: #374151 !important;
}

#payment-verification-banner {
    background-color: #e0f2fe !important;
    color: #075985 !important;
    border: 1px solid #7dd3fc !important;
}

#payment-verification-banner.alert-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
}

#payment-verification-banner.alert-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}

#payment-verification-banner.alert-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}

/* ========================================
   CORRECIONES ESPECIFICAS DE GRADIENTES
   ======================================== */
/* Gradientes de botones con texto blanco */
[style*="background: linear-gradient"] {
    color: white !important;
}

/* Excepción para gradientes claros */
[style*="background: linear-gradient(135deg, #ffd700"],
[style*="background: linear-gradient(135deg, #fef"] {
    color: #1f2937 !important;
}

/* ========================================
   CORRECCIONES ESPECÍFICAS PARA MÓVILES
   ======================================== */
@media (max-width: 768px) {
    /* Overlays más transparentes en móviles */
    .modal-overlay,
    .tutorial-overlay,
    .nav-overlay,
    #nav-overlay {
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
    
    /* Forzar fondos blancos en contenedores principales */
    .dashboard-container,
    .modal-container,
    .tutorial-container,
    .content-section,
    .main-content {
        background-color: white !important;
        color: #1f2937 !important;
    }
    
    /* Cards con contraste mejorado */
    .stat-card,
    .feature-card,
    .activity-item,
    .card,
    .panel {
        background-color: white !important;
        color: #333 !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* Textos oscuros sobre fondos claros */
    .stat-card *,
    .feature-card *,
    .activity-item *,
    .card *,
    .panel * {
        color: #1f2937 !important;
    }
    
    /* Títulos con mejor contraste */
    h1, h2, h3, h4, h5, h6 {
        color: #111827 !important;
    }
    
    /* Asegurar que los mensajes sean legibles */
    .message,
    .notification,
    .alert {
        background-color: white !important;
        border: 1px solid #e5e7eb !important;
        color: #1f2937 !important;
    }
    
    /* Botones con mejor contraste */
    .btn,
    button {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Prevenir fondos negros en elementos inline */
    [style*="background: rgba(0,0,0"],
    [style*="background: rgb(0,0,0"],
    [style*="background-color: rgba(0,0,0"],
    [style*="background-color: rgb(0,0,0"] {
        background-color: rgba(0, 0, 0, 0.3) !important;
    }
}

@media (max-width: 480px) {
    /* Aumentar contraste en pantallas muy pequeñas */
    body {
        font-size: 16px !important;
    }
    
    .stat-card,
    .feature-card,
    .card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
}