/**
 * Dashboard de Leads - Estilos Dark Theme
 * Compatible con Hello Elementor Child - Sin interferencias
 */

/* ========================================
   LOADER - VISIBLE POR DEFECTO
   ======================================== */
.dashboard-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 15, 20, 0.95) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
}

.dashboard-loader.fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.loader-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 4px solid rgba(59, 130, 246, 0.2) !important;
    border-top-color: #3b82f6 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin: 0 auto 1rem !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.dashboard-loader p {
    color: #92adc9 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ========================================
   WRAPPER - OCULTO POR DEFECTO HASTA QUE JS LO MUESTRE
   ======================================== */
.leads-dashboard-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: #0a0f14 !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    position: relative !important;
    min-height: 400px !important;
    /* Oculto por defecto - JS lo mostrará cuando esté listo */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
}

.leads-dashboard-container.dashboard-ready {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Reset de elementos dentro del wrapper */
.leads-dashboard-container * {
    box-sizing: border-box !important;
}

.leads-dashboard-container p {
    margin: 0 !important;
    padding: 0 !important;
}

.leads-dashboard-container br {
    display: none !important;
}

/* === FILTROS === */
.leads-dashboard-container .dashboard-filters {
    background: #111a22 !important;
    border: 1px solid #324d67 !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.leads-dashboard-container .filters-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: flex-end !important;
}

.leads-dashboard-container .filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    min-width: 200px !important;
}

.leads-dashboard-container .filter-label {
    color: #92adc9 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.leads-dashboard-container .filter-input,
.leads-dashboard-container .filter-select {
    background: #192633 !important;
    border: 2px solid #324d67 !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    width: 100% !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.leads-dashboard-container .filter-input::placeholder {
    color: #92adc9 !important;
}

.leads-dashboard-container .filter-input:focus,
.leads-dashboard-container .filter-select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.leads-dashboard-container .filter-select option {
    background: #111a22 !important;
    color: #ffffff !important;
}

.leads-dashboard-container .filter-actions {
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

/* Botones */
.leads-dashboard-container .btn {
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    text-decoration: none !important;
}

.leads-dashboard-container .btn-primary {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.leads-dashboard-container .btn-primary:hover {
    background: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.leads-dashboard-container .btn-secondary {
    background: transparent !important;
    color: #92adc9 !important;
    border: 1px solid #324d67 !important;
}

.leads-dashboard-container .btn-secondary:hover {
    background: #192633 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

.leads-dashboard-container .btn-icon {
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

/* === KPI CARDS === */
.leads-dashboard-container .dashboard-kpis {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.leads-dashboard-container .kpi-card {
    background: #111a22 !important;
    border: 1px solid #324d67 !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.leads-dashboard-container .kpi-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: #3b82f6 !important;
    transition: width 0.3s ease !important;
}

.leads-dashboard-container .kpi-card:hover {
    background: #192633 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.leads-dashboard-container .kpi-card:hover::before {
    width: 100% !important;
    opacity: 0.1 !important;
}

/* Variantes de cards */
.leads-dashboard-container .kpi-card-highlight::before {
    background: #10b981 !important;
}

.leads-dashboard-container .kpi-card-warning::before {
    background: #f59e0b !important;
}

.leads-dashboard-container .kpi-icon {
    font-size: 3rem !important;
    line-height: 1 !important;
    opacity: 0.9 !important;
}

.leads-dashboard-container .kpi-content {
    flex: 1 !important;
}

.leads-dashboard-container .kpi-title {
    color: #92adc9 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
}

.leads-dashboard-container .kpi-value {
    color: #ffffff !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
}

.leads-dashboard-container .kpi-subtitle {
    color: #92adc9 !important;
    font-size: 0.813rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === DISTRIBUCIÓN POR ESTADOS === */
.leads-dashboard-container .dashboard-estados {
    background: #111a22 !important;
    border: 1px solid #324d67 !important;
    border-radius: 0.75rem !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
}

.leads-dashboard-container .estados-title {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 0 1rem 0 !important;
    border-bottom: 2px solid #324d67 !important;
}

.leads-dashboard-container .estados-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.leads-dashboard-container .estado-item {
    background: #192633 !important;
    border: 1px solid #324d67 !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

.leads-dashboard-container .estado-item:hover {
    border-color: #3b82f6 !important;
    transform: translateY(-2px) !important;
    background: #1e3a52 !important;
}

.leads-dashboard-container .estado-name {
    color: #92adc9 !important;
    font-size: 0.875rem !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    display: block !important;
}

.leads-dashboard-container .estado-count {
    color: #ffffff !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Estados específicos con colores */
.leads-dashboard-container .estado-item[data-estado="Inscrito(a)"] {
    border-left: 4px solid #10b981 !important;
}

.leads-dashboard-container .estado-item[data-estado="Interesado(a)"] {
    border-left: 4px solid #3b82f6 !important;
}

.leads-dashboard-container .estado-item[data-estado*="No"],
.leads-dashboard-container .estado-item[data-estado="Duplicado"],
.leads-dashboard-container .estado-item[data-estado="Devolución"],
.leads-dashboard-container .estado-item[data-estado="Errado"] {
    border-left: 4px solid #ef4444 !important;
}

/* === ERROR === */
.leads-dashboard-container .dashboard-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid #ef4444 !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem !important;
    text-align: center !important;
    margin: 1rem 0 !important;
    display: none !important;
}

.leads-dashboard-container .error-message {
    color: #ef4444 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .leads-dashboard-container {
        padding: 1rem !important;
    }

    .leads-dashboard-container .filters-wrapper {
        flex-direction: column !important;
    }

    .leads-dashboard-container .filter-group {
        min-width: 100% !important;
    }

    .leads-dashboard-container .filter-actions {
        width: 100% !important;
    }

    .leads-dashboard-container .btn {
        flex: 1 !important;
        justify-content: center !important;
    }

    .leads-dashboard-container .dashboard-kpis {
        grid-template-columns: 1fr !important;
    }

    .leads-dashboard-container .kpi-value {
        font-size: 2rem !important;
    }

    .leads-dashboard-container .estados-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }

    .leads-dashboard-container .chart-wrapper {
        overflow-x: auto !important;
    }

    .leads-dashboard-container .chart-container {
        min-width: 600px !important;
    }
}

@media (max-width: 480px) {
    .leads-dashboard-container .kpi-card {
        flex-direction: column !important;
        text-align: center !important;
    }

    .leads-dashboard-container .kpi-icon {
        font-size: 2.5rem !important;
    }

    .leads-dashboard-container .estados-grid {
        grid-template-columns: 1fr !important;
    }

    .leads-dashboard-container .chart-container {
        min-width: 500px !important;
    }
}

/* === GRÁFICO DE LEADS POR DÍA === */
.leads-dashboard-container .dashboard-chart-section {
    background: #111a22 !important;
    border: 1px solid #324d67 !important;
    border-radius: 0.75rem !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
}

.leads-dashboard-container .chart-title {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 0 1rem 0 !important;
    border-bottom: 2px solid #324d67 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.leads-dashboard-container .chart-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Scroll personalizado */
    scrollbar-width: thin !important;
    scrollbar-color: #3b82f6 #192633 !important;
}

.leads-dashboard-container .chart-wrapper::-webkit-scrollbar {
    height: 8px !important;
}

.leads-dashboard-container .chart-wrapper::-webkit-scrollbar-track {
    background: #192633 !important;
    border-radius: 4px !important;
}

.leads-dashboard-container .chart-wrapper::-webkit-scrollbar-thumb {
    background: #3b82f6 !important;
    border-radius: 4px !important;
}

.leads-dashboard-container .chart-wrapper::-webkit-scrollbar-thumb:hover {
    background: #2563eb !important;
}

.leads-dashboard-container .chart-container {
    position: relative !important;
    width: 100% !important;
    min-width: 800px !important; /* Ancho mínimo para scroll horizontal */
    height: 400px !important;
    margin: 0 !important;
    padding: 1rem !important;
    background: #192633 !important;
    border-radius: 0.5rem !important;
}

.leads-dashboard-container .chart-container canvas {
    max-width: 100% !important;
    height: 100% !important;
}

/* ========================================
   GRÁFICOS DE PASTEL (FUENTE Y UBICACIÓN)
   ======================================== */
.leads-dashboard-container .dashboard-pie-charts-section {
    margin-top: 2rem !important;
    padding: 0 !important;
}

.leads-dashboard-container .pie-charts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.leads-dashboard-container .pie-chart-card {
    background: #111a22 !important;
    border: 1px solid #324d67 !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.leads-dashboard-container .pie-chart-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 12px rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

.leads-dashboard-container .pie-chart-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.leads-dashboard-container .pie-chart-container {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.leads-dashboard-container .pie-chart-container canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Responsive para gráficos de pastel */
@media (max-width: 768px) {
    .leads-dashboard-container .pie-charts-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .leads-dashboard-container .pie-chart-container {
        height: 250px !important;
    }
}

/* ========================================
   TABLA DE METAS POR CARRERA
   ======================================== */
.leads-dashboard-container .dashboard-career-goals-section {
    background: #111a22 !important;
    border: 1px solid #324d67 !important;
    border-radius: 0.75rem !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
}

.leads-dashboard-container .career-goals-title {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 0 1rem 0 !important;
    border-bottom: 2px solid #324d67 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.leads-dashboard-container .career-goals-table-wrapper {
    overflow-x: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Scroll personalizado */
    scrollbar-width: thin !important;
    scrollbar-color: #3b82f6 #192633 !important;
}

.leads-dashboard-container .career-goals-table-wrapper::-webkit-scrollbar {
    height: 8px !important;
}

.leads-dashboard-container .career-goals-table-wrapper::-webkit-scrollbar-track {
    background: #192633 !important;
    border-radius: 4px !important;
}

.leads-dashboard-container .career-goals-table-wrapper::-webkit-scrollbar-thumb {
    background: #3b82f6 !important;
    border-radius: 4px !important;
}

.leads-dashboard-container .career-goals-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #2563eb !important;
}

.leads-dashboard-container .career-goals-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #192633 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.leads-dashboard-container .career-goals-table thead {
    background: #0a0f14 !important;
}

.leads-dashboard-container .career-goals-table thead tr {
    border-bottom: 2px solid #324d67 !important;
}

.leads-dashboard-container .career-goals-table th {
    color: #92adc9 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 1rem 1.5rem !important;
    text-align: left !important;
    border: none !important;
}

.leads-dashboard-container .career-goals-table th:nth-child(2),
.leads-dashboard-container .career-goals-table th:nth-child(3),
.leads-dashboard-container .career-goals-table th:nth-child(4) {
    text-align: center !important;
}

.leads-dashboard-container .career-goals-table tbody tr {
    border-bottom: 1px solid #324d67 !important;
    transition: all 0.2s ease !important;
}

.leads-dashboard-container .career-goals-table tbody tr:last-child {
    border-bottom: none !important;
}

.leads-dashboard-container .career-goals-table tbody tr:hover {
    background: #1e3a52 !important;
}

.leads-dashboard-container .career-goals-table td {
    color: #ffffff !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
    border: none !important;
}

.leads-dashboard-container .career-goals-table td:nth-child(2),
.leads-dashboard-container .career-goals-table td:nth-child(3),
.leads-dashboard-container .career-goals-table td:nth-child(4) {
    text-align: center !important;
    font-weight: 600 !important;
}

.leads-dashboard-container .career-name {
    font-weight: 600 !important;
    color: #ffffff !important;
}

.leads-dashboard-container .career-meta {
    color: #92adc9 !important;
}

.leads-dashboard-container .career-inscritos {
    color: #10b981 !important;
}

.leads-dashboard-container .career-success-rate {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 700 !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.375rem !important;
}

.leads-dashboard-container .career-success-rate.rate-high {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

.leads-dashboard-container .career-success-rate.rate-medium {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.leads-dashboard-container .career-success-rate.rate-low {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

.leads-dashboard-container .career-progress-bar {
    width: 100% !important;
    height: 6px !important;
    background: #0a0f14 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin-top: 0.5rem !important;
}

.leads-dashboard-container .career-progress-fill {
    height: 100% !important;
    border-radius: 3px !important;
    transition: width 0.5s ease !important;
}

.leads-dashboard-container .career-progress-fill.rate-high {
    background: #10b981 !important;
}

.leads-dashboard-container .career-progress-fill.rate-medium {
    background: #f59e0b !important;
}

.leads-dashboard-container .career-progress-fill.rate-low {
    background: #ef4444 !important;
}

/* Responsive para tabla */
@media (max-width: 768px) {
    .leads-dashboard-container .career-goals-table {
        font-size: 0.875rem !important;
    }
    
    .leads-dashboard-container .career-goals-table th,
    .leads-dashboard-container .career-goals-table td {
        padding: 0.75rem 1rem !important;
    }
}

/* Animaciones de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leads-dashboard-container .kpi-card,
.leads-dashboard-container .estado-item {
    animation: fadeInUp 0.5s ease backwards !important;
}

.leads-dashboard-container .kpi-card:nth-child(1) { animation-delay: 0.1s !important; }
.leads-dashboard-container .kpi-card:nth-child(2) { animation-delay: 0.2s !important; }
.leads-dashboard-container .kpi-card:nth-child(3) { animation-delay: 0.3s !important; }
.leads-dashboard-container .kpi-card:nth-child(4) { animation-delay: 0.4s !important; }