/* ===== ESTILOS PARA GRÁFICOS - GOLD INFINITI ===== */

/* Contenedor de gráficos */
.chart-wrapper {
    position: relative;
    height: 250px;
    width: 100%;
}

/* Gráfico de ventas */
#salesChart {
    width: 100% !important;
    height: 100% !important;
}

/* Gráfico de métodos de pago */
#paymentMethodsChart {
    width: 100% !important;
    height: 100% !important;
}

/* Gráfico de uptime */
#uptimeChart {
    width: 100% !important;
    height: 80px !important;
}

/* Personalización de Chart.js */
.chartjs-tooltip {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

.chartjs-tooltip-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 8px;
}

/* Leyenda personalizada */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.primary { background-color: #3b82f6; }
.legend-color.success { background-color: #10b981; }
.legend-color.warning { background-color: #f59e0b; }
.legend-color.danger { background-color: #ef4444; }
.legend-color.info { background-color: #8b5cf6; }

/* Animaciones para gráficos */
@keyframes chartFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chart-container {
    animation: chartFadeIn 0.8s ease;
}

/* Responsive para gráficos */
@media (max-width: 768px) {
    .chart-wrapper {
        height: 200px;
    }
    
    .chart-legend {
        justify-content: flex-start;
        margin-top: 10px;
    }
}